/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Gabarito&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Yeseva+One&display=swap");

:root {
    --primary-clr: #100821;
    --secondary-clr: #B3A3FC;
    --font-montserrat: "Montserrat", sans-serif;
}


html,
body {
    background: var(--primary-clr);
    color: white;
    font-family: var(--font-montserrat);
}

@font-face {
    font-family: 'roca-400';
    src: url("../font/roca-two-regular.ttf");
}


ul {
    margin-bottom: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--black-clr);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}

button,
textarea,
input {
    border: 0;
    outline: none;
}

.flex {
    display: flex;
}

.item-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cmn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 20px;
    min-height: 52px;
    font-family: 'roca-400';
}

.purple-btn {
    background: var(--secondary-clr);
    color: var(--primary-clr);
    border: 2px solid var(--secondary-clr);
    min-height: 50px;
    transition: all .3s;
}

.purple-btn:hover {
    background: var(--primary-clr);
    color: var(--secondary-clr);
}

.gradient-btn {
    color: white;
    min-width: 380px;
    margin: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.gradient-btn::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #9C3C96 0%, #100821 100%);
    transition: all .3s;
    z-index: 0;
    transform-origin: left;
    z-index: -1;
}

.gradient-btn:hover::before {
    transform: scaleX(2);
}

.sec-para {
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-weight: 200;
    line-height: 26px;
    text-align: left;
}

.sec-title {
    font-family: 'roca-400';
    font-size: 35px;
    line-height: 40px;
    position: relative;
}

.sec-title::before {
    content: ' ';
    position: absolute;
    top: -50px;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("../images/spark-icon.svg") no-repeat;
}

/* ----Hero---- */
#hero .inner-sec {
    padding: 176px 0 81px;
    background: url("../images/hero-bg.svg") no-repeat;
    position: relative;
    z-index: 1;
    background-position: bottom;
    background-size: cover;
}

#hero .inner-sec::after {
    content: ' ';
    position: absolute;
    background: url("../images/hero-solar-img.svg") no-repeat;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 594px;
    width: var(--sz);
    pointer-events: none;
    height: var(--sz);
    z-index: -1;
}

.hero-wrapper .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hero-wrapper .head .arrow-icon {
    position: absolute;
    top: 75%;
    left: 360px;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    rotate: 3deg;
    background-size: 90%;
}

.hero-wrapper h1 {
    font-family: 'roca-400';
    font-size: 35px;
    line-height: 50px;
    text-align: center;
}

.hero-wrapper .sub-hero-head {
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-top: 38px;
    max-width: 1017px;
}

.hero-wrapper .hero-btn {
    margin-top: 52px;
    padding: 0 20px;
    padding-top: 2.5px;
}

.hero-wrapper .bottom {
    justify-content: space-between;
    text-align: center;
    gap: 50px;
    margin-top: 90px;
}

.hero-wrapper .bottom p {
    max-width: 455px;
    font-size: 20px;
    line-height: 24px;
    position: relative;
}

.hero-wrapper .bottom p::before {
    content: ' ';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: url("../images/spark-icon.svg") no-repeat;
}

.hero-wrapper .bottom p:nth-of-type(1) {
    font-weight: 600;
}

.hero-price-info {
    text-align: center;
    margin-top: 21px;
    font-size: 15px;
}

.hero-price-info p:nth-of-type(1) {
    line-height: 18px;
}

.hero-price-info p:nth-of-type(2) {
    line-height: 14px;
    margin: 12px 0 14px;
}

.hero-price-info p:nth-of-type(3) {
    font-size: 10px;
    line-height: 7px;
}






/* ---About section--- */
.abt-box {
    border: 0.3px solid #F5F5F5;
    border-left: 0;
    border-right: 0;
}

.about-inner-sec {
    overflow: hidden;
}

.about-inner-sec .content-wrapper {
    padding: 108px 0 213px;
    max-width: 485px;
    position: relative;
    z-index: 1;
    height: 100%;
}

.abt-box .cus-col:nth-of-type(even) .content-wrapper {
    margin-left: auto;
}

.about-inner-sec .content-wrapper .title {
    margin-bottom: 38px;
    max-width: 391px;
    position: relative;
}

.abt-box.box-2 {
    border-top: 0;
}

.abt-box .row {
    position: relative;
}

.abt-box .row::after {
    content: ' ';
    position: absolute;
    width: .3px;
    height: 100%;
    background: #F5F5F5;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.astral-img-box {
    position: absolute;
    right: -30px;
    bottom: 30px;
    pointer-events: none;
    z-index: -1;
}

.abt-box .astral-img-box img {
    mix-blend-mode: color;
}

.abt-box .astral-img-box.astral-img-right {
    right: -78px;
    bottom: 37px;
}


/* ----pricing section---- */

.pricing-inner-sec {
    color: var(--primary-clr);
    background: var(--secondary-clr);
    padding: 130px 0;

}

.pricing-inner-sec .left-listing h3 {
    font-family: 'roca-400';
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 28px;
}

.pricing-inner-sec .left-listing ul {
    padding-left: 27px;
}

.pricing-inner-sec .left-listing ul li {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 40px;
}

.pricing-inner-sec .left-listing ul li::after {
    content: ' ';
    position: absolute;
    left: -27px;
    top: 13px;
    background: url("../images/spark-icon2.png") no-repeat;
    --sz: 14px;
    height: var(--sz);
    width: var(--sz);
}

.pricing-inner-sec .right-pricing {
    max-width: 393px;
    text-align: center;
    margin: auto;
    width: 100%;
}

.pricing-inner-sec .right-pricing .activation-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
}

.pricing-inner-sec .right-pricing .plan-text {
    font-family: 'roca-400';
    font-size: 31px;
    line-height: 40px;
}

.pricing-inner-sec .right-pricing .price-text {
    font-family: 'roca-400';
    font-size: 60px;
    line-height: 40px;
    margin: 35px 0;
}

.pricing-inner-sec .right-pricing .support-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 51px;
}

.pricing-inner-sec .right-pricing .pricing-btn {
    max-width: 380px;
}

.pricing-inner-sec .right-pricing .note-text {
    font-size: 10px;
    font-weight: 400;
    margin-top: 10px;
    display: block;
    line-height: 12px;
    padding: 0 40px;
}

.determination-inner-sec {
    padding: 137px 0;
    overflow: hidden;
}

.determination-inner-sec .content-wrapper {
    position: relative;
    z-index: 1;
}

.determination-inner-sec .sec-title {
    margin-bottom: 20px;
}

.determination-inner-sec .astral-img-box {
    bottom: unset;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

/* ---Faq section--- */

.faq-inner-sec {
    border-top: 0.3px solid #F5F5F5;
    padding: 147px 0 119px;
}

.faq-inner-sec .sec-title {
    margin-bottom: 84px;
    position: relative;
}

.accordion-outer {
    max-width: 1017px;
    margin: auto;
}

.accordion-item {
    color: white;
    background-color: transparent;
    border: 0;
    margin-bottom: 52px;
    position: relative;
}

.accordion-item:last-of-type {
    margin-bottom: 0;
}

.accordion-item::after {
    content: ' ';
    position: absolute;
    background-color: #F5F5F5;
    height: .3px;
    width: 100%;
    bottom: -27px;
}

.accordion-button {
    border-radius: 0 !important;
    padding: 0;
    background: transparent;
}

.accordion-button span {
    font-family: 'roca-400';
    font-size: 23px;
    line-height: 30px;
    color: white;
}

.accordion-button:not(.collapsed) {
    background: transparent;
    color: white;
    box-shadow: none;
}

.accordion-body {
    padding: 0;
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-weight: 200;
    line-height: 26px;
    padding-top: 10px;
    max-width: 953px;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    transform: none;
    background: url("../images/faq-tab-icon-sub.png") no-repeat;

}

.accordion-button::after {
    background: url("../images/faq-tab-icon.png") no-repeat;
    width: 38px;
    height: 38px;
}

.accordion .accordion-item:nth-of-type(1)::before {
    content: ' ';
    position: absolute;
    background-color: #F5F5F5;
    height: .3px;
    width: 100%;
    top: -25px;
}

/* ------ PRICING PAGE ------- */
.other-pg-hero .sub-hero-head {
    font-size: 30px;
    line-height: 36px;
    margin-top: 19px;
}

.card-main {
    padding: 38px 25px 25px;
    box-shadow: 0px 0px 19px 0px #00000040;
    border-radius: 25px;
}

.pricing-card-wrapper .card-box:nth-of-type(1) .card-main {
    background: #B3A3FC;
}

.pricing-card-wrapper {
    margin-top: 80px;
    justify-content: space-between;
}

.pricing-card-wrapper .card-box {
    max-width: calc(50% - 72px);
    flex-basis: calc(50% - 72px);
}

.pricing-card-wrapper .card-main .header {
    display: flex;
    justify-content: space-between;
}

.pricing-card-wrapper .card-main .plan-badge {
    height: max-content;
    min-height: 33px;
    background: white;
    border-radius: 20px;
    min-width: 166px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9C3C96;
    font-size: 17px;
    font-weight: 400;
    font-family: "PT Sans", sans-serif;
}

.pricing-card-wrapper .card-main .pricing-info h3 {
    font-size: 45px;
    font-weight: 700;
    line-height: 54px;
    margin-bottom: 3px;
}

.pricing-card-wrapper .card-box:nth-of-type(1) .card-main .pricing-info h3 {
    color: #9C3C96;
}

.pricing-card-wrapper .card-main .pricing-info span {
    display: block;
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
}

.pricing-card-wrapper .card-box:nth-of-type(1) .card-main .pricing-info span {
    color: var(--primary-clr);
}

.pricing-card-wrapper .card-box:nth-of-type(1) .info p {
    color: var(--primary-clr);
}

.pricing-card-wrapper .card-box:nth-of-type(2) .card-main {
    background: #4C417F;
}

.pricing-card-wrapper .card-box:nth-of-type(2) .card-main .plan-badge {
    color: #4C417F;
}

.pricing-card-wrapper .card-main .info p {
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* ----FORM PAGE----- */
#navbar {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}

.navbar-scrolled {
    background: var(--primary-clr);

}

.navbar {
    justify-content: space-between;
    padding: 28px 0;
}

.nav-links ul {
    gap: 86px;
}


.navbar .navlink {
    font-size: 17px;
    line-height: 20px;
    text-align: center;
    transition: color .2s ease-in-out;
}


.navbar .navlink:hover {
    color: var(--secondary-clr);
}

.navbar .navlink.active {
    font-weight: 600;
}


.form-tab-wrapper {
    background: var(--secondary-clr);
    border-radius: 20px;
    color: var(--primary-clr);
}

.form-tab-wrapper .heading {
    font-family: 'roca-400';
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 15px;
}

.form-tab-wrapper .sub-heading {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 48px;
}

.form-tab-wrapper .content-wrapper {
    max-width: 423px;
}

.dark-btn {
    width: 100%;
    background: var(--primary-clr);
    color: white;
    position: relative;
    border: 1px solid var(--primary-clr);
}

.trigger-next {
    max-width: 355px;
    justify-content: flex-start;
    padding-left: 26px;
}

.trigger-next::after {
    content: "";
    border-style: solid;
    border-width: 1.7px 1.7px 0 0;
    display: inline-block;
    width: 12px;
    height: 12px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    transition: right .2s ease;
}

.trigger-next:hover::after {
    right: 24px;
}

p.note {
    font-size: 10px;
    line-height: 13px;
    text-align: left;
    color: white;
    margin-top: 10px;
    max-width: 355px;
}

.tab-content-box {
    padding: 0 51px;
    display: flex;
    align-items: center;
}

.tab-pane-home .tab-content-box {
    padding-block: 152px;
}

.get-started {
    margin-top: 124px;
}

.tab-pane-questions .tab-content-box {
    padding-block: 86px;
}

.progress-head .action-box {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
}

.trigger-prev {
    background: transparent;
    color: white;
    padding: 0 0 0 17px;
    position: relative;
    transition: .3s ease;
}

.trigger-prev:hover {
    color: var(--primary-clr);
}

.trigger-prev::before {
    content: "";
    border-style: solid;
    border-width: 1.7px 1.7px 0 0;
    display: inline-block;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 3px;
    transform: translateY(-50%) rotate(-135deg);
    position: absolute;
}

.form-progress-bar {
    height: 11px;
    background: transparent;
    border: 1px solid var(--primary-clr);
    border-radius: 10px;
}

.form-progress-bar .progress-bar {
    border-radius: 10px;
    background: var(--primary-clr);
}

.question-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-1-pane .question-block {
    margin-top: 80px;
}

.step-2-pane .question-block {
    margin-top: 40px;
}

.question-block span.title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 16px;
    display: block;
}

.question-block .question {
    font-family: 'roca-400';
    font-size: 30px;
    line-height: 34px;
    text-align: center;
}

.gender-radios {
    margin-top: 52px;
}

.radios-grp ul {
    display: flex;
    gap: 26px;
}

.radio-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 25px;
    color: white;
    border: 1px solid var(--primary-clr);
    border-radius: 5px;
    cursor: pointer;
}

.gender-block {
    max-width: calc(25% - 13px);
    flex-basis: calc(25% - 13px);
    height: 156px;
    width: 143px;
}

.radio-block.active,
.radio-block:hover {
    background: #1008211A;
}


.radio-block .name {
    font-size: 15px;
    line-height: 18px;
}

.astral-offers {
    background: #E3DDFF;
    border-radius: 5px;
    padding: 18px 35px;
}

.astral-offers h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 8px;
}

.astral-offers ul {
    padding-left: 17px;
}

.astral-offers ul li {
    font-size: 13px;
    line-height: 19px;
}

.astral-offers ul li {
    font-size: 13px;
    line-height: 19px;
    position: relative;
    margin-bottom: 1px;
}

.astral-offers ul li::before {
    content: ' ';
    position: absolute;
    background: url("../images/spark-icon2.png") no-repeat;
    left: -17px;
    top: 4px;
    --sz: 11px;
    height: var(--sz);
    width: var(--sz);
    background-size: contain;
}

.astral-offers+.question {
    margin-block: 30px;
}

.date-fields {
    display: flex;
    gap: 25px;
}

label {
    font-size: 15px;
    line-height: 18px;
    color: white;
    margin-bottom: 5px;
}

.date-fields .input-block {
    max-width: 144px;
}

.form-control:focus {
    box-shadow: none;
}

.date-fields .input-block input {
    border-color: var(--primary-clr);
    color: white;
    background: transparent;
}

.date-picker .icon {
    top: 30px;
    position: absolute;
    right: 15px;
}

.date-picker .icon::before {
    content: "";
    border-style: solid;
    border-width: 1px 1px 0 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    left: 9px;
    top: 4px;
    transform: rotate(135deg);
    border-color: white;
}

.datepicker td,
.datepicker th {
    font-size: 10px;
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background-image: none !important;
    background-color: var(--primary-clr) !important;
    color: white;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background-image: none !important;
    background-color: var(--primary-clr) !important;
    color: white;
}

.datepicker table tr td span {
    height: 29px;
    line-height: 29px;

}

.question-block .trigger-next {
    margin-top: 50px;
}

.day-block .table-condensed,
.month-block .table-condensed {
    width: 100%;
}

.day-block .table-condensed thead tr:nth-of-type(2),
.month-block .table-condensed thead tr:nth-of-type(2) {
    display: none;
}

#cancel_sub_form {
    display: flex;
    flex-direction: column;
    max-width: 380px;
    margin: auto;
    gap: 41px;
    margin-top: 67px;
}

#cancel_sub_form .email-block {
    display: flex;
    flex-direction: column;
}

#cancel_sub_form .email-block input {
    height: 38px;
    border: 1px solid var(--secondary-clr);
    border-radius: 7px;
    background: var(--secondary-clr);
    padding: 0 10px;
    font-size: 15px;
}

.cancel-sub-btn {
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
}

.cancel-sub-btn::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #9C3C96 0%, #100821 100%);
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .2s ease;
    width: 100%;
}

.cancel-sub-btn:hover::after {
    width: 200%;
}

.form-greet-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 47px 0 85px;
}

.form-greet-box .img-box {
    margin-bottom: 31px;
}

.form-greet-box .info {
    font-size: 15px;
    line-height: 22px;
    max-width: 520px;
    margin-top: 15px;
    text-align: center;
}

.question-block .form-greet-box .trigger-next {
    margin-top: 31px;
}

.step-4-pane .question-block {
    margin-top: 67px;
}

.text-block {
    margin-top: 31px;
    min-width: 379px;
    display: flex;
    flex-direction: column;
}

.text-block input {
    border: 1px solid var(--primary-clr);
    height: 38px;
    background: #1008211A;
    border-radius: 5px;
    color: white;
    padding-inline: 12px;
}

.cmn-select+.select2-container--default .select2-selection--single {
    border-color: var(--primary-clr);
    background: #1008211A;
    height: 38px;
}

.cmn-select+.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white;
    line-height: 38px;
}

.cmn-select+.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.cmn-select+.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0;
    margin-left: -9px;
    top: calc(50% - 3px);
    transform: translateY(-50%) rotate(135deg);
    background: transparent;
    border-color: white;
    border-width: 1px 1px 0 0;
    width: 10px;
    height: 10px;
    border-style: solid;
}

.input-block .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #87B0DC;
    color: var(--primary-clr);
}

.input-block .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--primary-clr);
    color: white;
}

.input-block .select2-results__option[aria-selected] {
    color: var(--primary-clr);
}

.form-radio {
    display: none;
}

.step-3-pane .question-block {
    margin-top: 87px;
}

.hrs-fields {
    display: flex;
    gap: 26px;
    margin-top: 31px;

}

.hrs-fields .date-picker {
    max-width: 143px;
}

.hrs-fields input {
    background: #1008211A;
    border-color: var(--primary-clr);
    color: white;
}

.skip-btn {
    margin-bottom: calc(-50px + 15px);
}

.skip-btn .trigger-next {
    margin-top: 50px;
    background: transparent;
    color: white;
    position: relative;
    padding: 0;
    padding-right: 26px;
    transition: .3s ease;
}

.skip-btn .trigger-next::after {
    right: 07px;
}

.skip-btn .trigger-next:hover {
    color: var(--primary-clr);
}

.step-5-pane .question-block {
    margin-top: 67px;
}

.date-picker .form-control:focus {
    box-shadow: none;
    background: #1008211A;
    border-color: var(--primary-clr);
    color: white;
}

.ui-timepicker-standard a {
    border: 0;
    color: var(--primary-clr);
    cursor: pointer;
}

.ui-timepicker-standard .ui-state-hover {
    background-color: var(--primary-clr);
    color: white;
    border: 0;

}

.senti-radio-block.radio-block {
    padding: 34px 0 22px;
    height: 130px;
    min-width: 143px;
}

.senti-radio-grp.radios-grp ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 31px;
}

li[data-value="in a relationship"] .icon {
    position: relative;
}

li[data-value="in a relationship"] .big-hrt-icon {
    max-width: 35px;
    margin-right: 10px;
    z-index: 3;
    position: relative;

}

li[data-value="in a relationship"] .icon .small-hrt-icon {
    max-width: 27px;
    position: absolute;
    right: -8px;
    z-index: 1;
    top: 0;
}

li[data-value="divorced"] .icon {
    position: relative;
}

li[data-value="divorced"] .icon::after {
    content: '';
    position: absolute;
    background: #fff;
    height: 140%;
    width: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

li[data-value="divorced"] .icon img {
    max-width: 36px;
    margin: 0 7px;
}

.chart-radio-block {
    max-width: 143px;
    height: 130px;
    padding: 23px 13px 13px;
}

.chart-radio-block[data-value="yes"] .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 7px;
}

.chart-radio-block[data-value="yes"] .icon::after {
    content: '';
    position: absolute;
    background: #FFF;
    height: 54px;
    width: 5px;
    top: 25px;
    left: 10px;
    transform: translate(-50%, -50%) rotate(35deg);
    border-radius: 20px;
    border-left: 1px solid;
}

.chart-radio-block[data-value="yes"] .icon::before {
    content: '';
    position: absolute;
    background: #FFF;
    height: 18px;
    width: 5px;
    top: 41px;
    left: -10px;
    transform: translate(-50%, -50%) rotate(311deg);
    border-radius: 20px;
    border-left: 1px solid;
}

.step-6-pane .question,
.step-7-pane .question,
.step-8-pane .question {
    margin: 67px 0 31px;
}

.radio-grid-6 {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(6, 1fr);
}

.radio-grid-4 {
    display: grid !important;
    gap: 26px;
    grid-template-columns: repeat(4, 1fr);
}

.step-7-pane .thought-radio-block {
    min-height: 130px;
    min-width: 143px;
    padding-top: 33px;
}

.personality-radio-grp .personality-radio-block {
    min-height: 130px;
    min-width: 143px;
}

.step-8-pane .question {
    max-width: 700px;
    text-align: center;
}

.step-9-pane .question {
    margin: 67px 0 15px;
}

.step-9-pane p.info {
    max-width: 700px;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
}

.checkbox-group ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px 25px;
    margin-block: 31px -19px;
}

.checkbox-group .check-block input {
    opacity: 0;
    position: absolute;
    appearance: none;
    pointer-events: none;
}

.checkbox-group .check-block {
    max-height: 34px;
    max-width: 144px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 1px solid var(--primary-clr);
    border-radius: 5px;
    padding: 10px 4px;
    cursor: pointer;
}

.checkbox-group .check-block .name {
    font-size: 15px;
    line-height: 18px;
}

.checkbox-group .check-block.active,
.checkbox-group .check-block:hover {
    background: #1008211A;
}

.zodiac-check-grp ul {
    display: grid;
    gap: 15px 25px;
    grid-template-columns: repeat(6, 1fr);
}

.zodiac-check-grp ul .check-block {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 110px;
    min-width: 144px;
}

.progress-head {
    max-width: 700px;
    margin: auto;
}

.step-10-pane .question {
    margin-top: 67px;
}

.step-11-pane .question {
    margin-top: 67px;
    text-align: center;
    padding-inline: 8%;
}

.misunderstood-radio-grp {
    margin-top: 31px;
}

.misunderstood-radio-block {
    min-height: 34px;
    min-width: 144px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gestures-radio-grp ul {
    max-width: 891px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 26px;
    margin-top: 31px;
}

.gestures-radio-grp ul .gestures-radio-block {
    min-width: 235px;
    padding: 0;
    min-height: 34px;
    align-items: center;
    justify-content: center;
}

.step-12-pane .question-block {
    margin-top: 67px;
}

.achieve-check-grp ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
    margin-top: 31px;
}

.step-13-pane .question-block {
    margin-top: 67px;
}

.step-13-pane .question {
    text-align: center;
    padding-inline: 6%;
}

.achieve-check-block {
    min-width: 235px;
}

.activity-radio-grp,
.life-radio-grp {
    max-width: 650px;
}

.activity-radio-block,
.life-radio-block {
    padding: 35px 10px 20px;
    min-height: 147px;
}

.step-14-pane .question,
.step-16-pane .question {
    margin: 67px 0 31px;
}

.step-15-pane .question {
    margin: 67px 0 47px;
}

.processing-pane .question-block {
    padding: 111px 0 170px;
}

.processing-pane .process-block .loader {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(180deg, #983D95 0%, #4E4180 100%);
    color: white;
    position: relative;
}

.processing-pane .process-block .loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--secondary-clr);
    inset: 0;
    scale: .92;
}

.processing-pane .process-block .loaded {
    z-index: 1;
    font-size: 26px;
    font-weight: 500;
    line-height: 36px;
}

.processing-pane .process-block {
    max-width: 654px;
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.loading-bar {
    width: 100%;
    margin-top: 14px;
}

.processing-pane .progress {
    background: transparent;
    border: 1px solid #100821;
    height: 11px;
    max-width: 542px;
    margin: auto;
}

.processing-pane .progress .progress-bar {
    background: linear-gradient(90deg, #4C417F 0%, #9C3C96 100%);
    border-radius: 10px;
}

.processing-pane .question {
    margin: 33px 0 57px;
}

.process-listing li {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 24px;
    padding-left: 34px;
    position: relative;
    opacity: 0;
    transition: .3s ease;
}

.process-listing li::before,
.process-listing li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #9C3C96;
    width: 3px;

}

.process-listing li::before {
    height: 12px;
    transform: rotate(-43deg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    top: 10px;
    left: 2px;
}

.process-listing li::after {
    height: 24px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: rotate(44deg);
    left: 13px;
}

.step-17-pane .question {
    margin-top: 67px;
    margin-bottom: 15px;
}

.step-17-pane p.info {
    font-size: 20px;
    line-height: 24px;
    max-width: 510px;
    text-align: center;
}

.step-17-pane .input-block {
    margin-bottom: 50px;
}

#form_submit_btn {
    max-width: 293px;
    text-align: left;
    justify-content: flex-start;
    padding-left: 29px;
}

#form_submit_btn::after {
    content: "";
    border-style: solid;
    border-width: 1.7px 1.7px 0 0;
    display: inline-block;
    width: 12px;
    height: 12px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    transition: right .2s ease;
}

#form_submit_btn:hover:after {
    right: 24px;
}

.tab-pane-payment .main-step-box {
    padding: 73px 0;
    display: flex;
    justify-content: space-between;
    z-index: 2;
    position: relative;
}

.tab-pane-payment .left-col,
.tab-pane-payment .right-col {
    max-width: 452px;
    width: 100%;
}

.tab-pane-payment .form-badge-header {
    background: #E3DDFF;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 17px 23px;
}

.tab-pane-payment .form-badge-header .icon {
    --sz: 48px;
    height: var(--sz);
    width: var(--sz);
    min-width: var(--sz);
    border-radius: 50%;
    background: var(--primary-clr);
}

.tab-pane-payment .form-badge-header .icon {
    --sz: 48px;
    height: var(--sz);
    width: var(--sz);
    min-width: var(--sz);
    border-radius: 50%;
    background: var(--primary-clr);
    position: relative;
    rotate: 8deg;
}

.tab-pane-payment .form-badge-header .icon::after,
.tab-pane-payment .form-badge-header .icon::before {
    content: '';
    position: absolute;
    background: #FFF;
    border-radius: 20px;
    width: 3px;

}

.tab-pane-payment .form-badge-header .icon::before {
    height: 10px;
    top: 32.2px;
    left: 16px;
    transform: translate(-50%, -50%) rotate(311deg);
}

.tab-pane-payment .form-badge-header .icon::after {
    height: 30px;
    top: 24px;
    left: 27px;
    transform: translate(-50%, -50%) rotate(35deg);
}

.tab-pane-payment .form-badge-header .content p {
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
}

.tab-pane-payment .form-badge-header .content p:nth-of-type(2) {
    font-size: 13px;
    line-height: 15px;

}

.tab-pane-payment .chart-box {
    padding: 20px 55px;
    background: #E3DDFF;
    border-radius: 10px;
    margin-top: 18px;
}

.tab-pane-payment .chart-box .heading {
    font-size: 17px;
    font-weight: 400;
    line-height: 12px;
    text-align: center;
    position: relative;
    padding-top: 24px;
    margin-bottom: 24px;
}

.tab-pane-payment .chart-box .heading::before {
    content: '';
    position: absolute;
    background: url("../images/spark-icon-dark.svg") no-repeat;
    width: 24px;
    height: 24px;
    top: 0;
}

.tab-pane-payment .chart-box .chart-listing li {
    padding: 25px;
    background: linear-gradient(180deg, #993B94 0%, #140A25 100%);
    border-radius: 7px;
    position: relative;
    z-index: 1;
}

.tab-pane-payment .chart-box .chart-listing li:not(:last-of-type) {
    margin-bottom: 14px;

}

.tab-pane-payment .chart-box .chart-listing li::after {
    content: '';
    position: absolute;
    background: #E3DDFF;
    width: 98%;
    border-radius: 5px;
    height: 95%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: -1;
}


.tab-pane-payment .chart-box .chart-listing .title {
    font-family: 'roca-400';
    font-size: 15px;
    margin-bottom: 8px;
    line-height: 14px;
}

.tab-pane-payment .chart-box .chart-listing .content {
    font-size: 13px;
    line-height: 12px;
}

.tab-pane-payment .extra-info {
    margin-top: 14px;
    font-size: 15px;
    line-height: 18px;
}

.tab-pane-payment .chart-box .chart-listing {
    position: relative;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    z-index: 2;
    border-radius: 8px;
    background: linear-gradient(180deg, rgb(152 59 147 / 50%) 0%, rgb(22 11 38 / 50%) 100%);
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 21px 50px;
    max-width: 245px;
    width: 100%;
    text-align: center;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay::before {
    content: '';
    position: absolute;
    background: #E3DDFF;
    width: 98%;
    border-radius: 5px;
    height: 95%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: -1;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay p {
    font-family: 'roca-400';
    font-size: 15px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay a {
    font-size: 14px;
    font-weight: 500;
    line-height: 12px;
    color: white;
    border-radius: 7px;
    width: 100%;
    display: inline-block;
    min-height: 32px;
    margin-top: 10px;
    z-index: 1;
    line-height: 31px;
    position: relative;
    overflow: hidden;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay a::before {
    content: '';
    background: linear-gradient(90deg, #9C3C96 0%, #100821 100%);
    position: absolute;
    z-index: -1;
    height: 100%;
    left: 0;
    width: 100%;
    transition: .3s ease;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay a:hover:before {
    width: 190%;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .blur-overlay {
    position: absolute;
    z-index: 2;
    border-radius: 8px;
    background: #FFFFFF1A;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    text-align: center;
    bottom: 0;
    backdrop-filter: blur(5px);
    height: 69%;
}

.tab-pane-payment .right-col {
    background: #E3DDFF;
    border-radius: 10px;
    padding: 43px 41px 20px;
}

.tab-pane-payment .right-col .header {
    justify-content: space-between;
}

.tab-pane-payment .right-col .header .heading {
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    max-width: 251px;
}

.tab-pane-payment .right-col .timer {
    font-size: 30px;
    font-weight: 400;
    line-height: 43px;
    text-align: right;
    font-family: 'roca-400';
    display: flex;
    background: -webkit-linear-gradient(180deg, #31153D 0%, #8338A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.payment-tab-wrapper {
    background: var(--secondary-clr);
    color: var(--primary-clr);
    border-radius: 20px;
    position: relative;
}

.payment-tab-wrapper::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 80%;
    background: url("../images/pay-bg-img.svg") no-repeat;
    background-size: cover;
    top: 0;
    left: -410px;
    z-index: 1;
}

.pay-form-box h3 {
    margin: 37px 0 21px;
    font-family: 'roca-400';
}

.pay-form-box .field-box {
    padding: 22px;
    border: 1px solid #100821;
    background: #9C3C960D;
    border-radius: 10px;
    color: var(--primary-clr);
}

.field-box label {
    color: var(--primary-clr);
    margin-bottom: 9px;
}

.cc-rdaio .form-check-input:checked {
    background-color: #9C3C96;
    border-color: #9C3C96;
}

.cc-rdaio .form-check-input:focus {
    box-shadow: none;
}

.cc-rdaio {
    margin-bottom: 18px;
}

.cc-rdaio .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-rdaio .form-check-input {
    --sz: 21px;
    height: var(--sz);
    width: var(--sz);
    margin-top: 0;
}

.cc-rdaio label {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}


.pay-form-box .input-block {
    margin-bottom: 14px;
}

.pay-form-box .input-block input {
    color: var(--primary-clr);
    border-radius: 5px;
    background: #F5F5F5;
    min-height: 35px;
    width: 100%;
    padding: 0 10px;
}

.pay-form-box .fields-group {
    display: flex;
    gap: 42px;
    justify-content: space-between;
}

.pay-form-box .fields-group .cvv-block {
    max-width: 93px;
}

.total-payout-box {
    margin-top: 18px;
    font-family: 'roca-400';
    font-size: 25px;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
}

.total-payout-box .amount {
    display: flex;
    gap: 18px;
}

.total-payout-box .new-price {
    color: #FF002A;
    font-size: 12px;
    line-height: 34px;
    text-decoration: line-through;
}

.download_btn {
    width: 100%;
    border-radius: 7px;
    padding: 11px 50px;
    margin-top: 14px;
}

.pay-form-box .pay-note {
    margin-top: 20px;
    font-size: 10px;
    line-height: 13px;
}

.pay-grad-btn {
    position: relative;
    overflow: hidden;
    font-family: 'roca-400';
    font-size: 20px;
    z-index: 1;
    color: white;
}

.pay-grad-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #9C3C96 0%, #100821 100%);
    top: 0;
    left: 0;
    z-index: -1;
    transition: .2s ease;
}

.pay-grad-btn:hover:after {
    width: 190%;
}

.birth-chart-info-box {
    padding-top: 150px;
}

.chart-info-listing {
    margin-top: 67px;
    display: grid;
    gap: 70px;
}

.chart-info-listing .icon-box {
    min-width: 235px;
    text-align: center;
}

.chart-content-box h3.heading {
    font-family: 'roca-400';
    font-size: 35px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
}

.chart-content-box {
    max-width: 1098px;
    margin: auto;
}

.chart-info-listing li {
    display: flex;
    gap: 77px;
    align-items: center;
}

.chart-info-listing li .content .title {
    font-family: 'roca-400';
    font-size: 35px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
}

.chart-info-listing li .content .info {
    font-size: 35px;
    margin-top: 27px;
    font-weight: 275;
    line-height: 37px;
}

.misc-content-wrapper {
    background: var(--secondary-clr);
    border-radius: 20px;
    padding: 122px 82px 65px;
    color: var(--primary-clr);
    margin-top: 95px;
}

.misc-content-wrapper .sec-title::before {
    background: url("../images/spark-icon-dark.svg") no-repeat;
    background-size: contain;
}

.faq-content-box .faq-listing {
    margin-top: 85px;
    display: grid;
    gap: 40px;
}

.faq-content-box .faq-listing li {
    padding-left: 71px;
    position: relative;
}

.faq-content-box .faq-listing li::before {
    content: '';
    position: absolute;
    width: 54px;
    height: 54px;
    background: url("../images/faq-question-icon.svg") no-repeat;
    left: 0;
    background-size: contain;
}

.faq-content-box .faq-listing .content .title {
    font-family: 'roca-400';
    font-size: 35px;
    font-weight: 400;
    line-height: 35px;
    margin-bottom: 27px;
    display: block;
}

.faq-content-box .faq-listing .content .title+p {
    font-size: 27px;
    font-weight: 400;
    line-height: 37px;
}

.user-comment-box .sec-title {
    margin-top: 115px;
}

.user-comment-box .faq-listing {
    max-width: 872px;
    width: 100%;
    margin: 0 auto;
    margin-top: 67px;
}

.user-comment-box .faq-listing .content {
    background: #E3DDFF;
    border-radius: 20px;
    padding: 45px 42px;
}

.user-comment-box .faq-listing .content p.info {
    font-size: 20px;
    line-height: 22px;
}

.user-comment-box .faq-listing .header {
    display: flex;
    justify-content: space-between;
}

.user-comment-box .faq-listing .header .right-info {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-comment-box .faq-listing .header .title {
    font-family: 'roca-400';
    font-size: 35px;
    font-weight: 400;
    line-height: 12px;
}

.rating-wrapper {
    margin-top: 12px;
    margin-bottom: 24px;
}

.user-comment-box .faq-listing li:not(:last-of-type) {
    margin-bottom: 43px;
}

.pay-grad-btn.btn-last {
    margin-top: 67px;
    border-radius: 10px;
    max-width: 573px;
    min-height: 77px;
    width: 100%;
    font-size: 35px;
    line-height: 1;
}

.payment-status-page .form-greet-box {
    margin: 20px 0 0;
    color: var(--primary-clr);
}

.payment-status-page .form-greet-box .info {
    font-size: 20px;
    line-height: 25px;
    max-width: 649px;
}

.payment-status-page .form-greet-box .greet {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    max-width: 649px;
    text-align: center;
    margin-top: 20px;
}

.other-pg-hero#hero .inner-sec::after {
    top: 50%;
}

/* ---FOOTER--- */
.ft-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9586D3;
    max-width: 893px;
    margin: auto;
    flex-wrap: wrap;
}

.ft-links li a {
    transition: .3s ease;
}

.ft-links li a:hover {
    color: #9C3C96;
}

.footer {
    border-top: 1.3px solid #B3A3FC;
    padding: 41px 0;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: white;
}

::-webkit-scrollbar-thumb {
    background: #9586D3;
}

.minute-separator {
    color: white;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
}

.nav-list {
    position: fixed;
    display: none;
}

.ham-btn {
    display: block;
}

.ham-btn {
    display: block;
    width: 32px;
    cursor: pointer;
}

.ham-btn span {
    display: block;
    height: 4px;
    background: white;
    border-radius: 50px;
    transition: .2s ease;
}

.ham-btn span:nth-of-type(2) {
    margin: 5px 0;
}

.ham-btn.open span:nth-of-type(1) {
    transform: translate(0px, 9px) rotate(45deg);
}

.ham-btn.open span:nth-of-type(2) {
    opacity: 0;
}

.ham-btn.open span:nth-of-type(3) {
    transform: translate(0px, -9px) rotate(-45deg);
}

.sidebar-active #navbar {
    background: var(--primary-clr);
}

.right-actions {
    position: fixed;
    right: -300px;
    max-width: 300px;
    width: 100%;
    height: calc(100% - 100px);
    top: 100px;
    background: var(--primary-clr);
    transition: .3s ease;
    overflow: hidden auto;
}

.overlay {
    position: fixed;
    top: 100px;
    left: 0;
    background: #000000;
    opacity: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: .2s ease;
    pointer-events: none;
    z-index: 4;
}

.overlay.active {
    opacity: .7;
    pointer-events: auto;
}


.body-overflow {
    overflow: hidden;
}

.navbar.active .right-actions {
    right: 0;
}

.nav-links ul {
    gap: 20px;
    flex-direction: column;
    width: 100%;
    padding: 15px 0;
}

.other-pg-hero#hero .inner-sec {
    padding-bottom: 25px;
}

.logo {
    position: relative;
}

.logo {
    position: relative;
}

.dark-logo {
    position: absolute;
    left: 0;
    display: none;
}

.header-new,
.pay-trust {
    display: none;
}

/* ----Media Queries ---- */

@media only screen and (min-width:1400px) {
    .hero-wrapper .head .arrow-icon {
        left: 450px;
    }

    .tab-pane-payment .main-step-box {
        padding: 73px 47px;
    }

    .payment-tab-wrapper::after {
        width: 120%;
        height: 120%;
        left: -415px;
        background-size: contain;
    }

    .tab-pane-payment .left-col,
    .tab-pane-payment .right-col {
        max-width: 502px;
    }
}

@media only screen and (max-width: 1199px) {
    .astral-img-box {
        right: 0px;
        text-align: end;
    }

    .abt-box .astral-img-box img {
        mix-blend-mode: color;
        width: 90%;
    }

    .abt-box .cus-col:nth-of-type(even) .content-wrapper {
        margin-left: auto;
        padding-left: 7%;
    }

    .accordion-body {
        max-width: calc(100% - 38px);
    }

    .hero-wrapper .head .arrow-icon {
        left: 270px;
    }

    .senti-radio-grp.radios-grp ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .radio-grid-6 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }

    .zodiac-check-grp ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .tab-pane-payment .main-step-box {
        flex-direction: column-reverse;
    }

    .tab-pane-payment .left-col,
    .tab-pane-payment .right-col {
        max-width: 80%;
        margin: auto;
    }

    .desk-extra-info,
    .form-badge-header.dsktp-bdg-header {
        display: none;
    }

    .header-new {
        display: flex;
        flex-direction: column;
        max-width: 80%;
        margin: auto;
        margin-bottom: 30px;
    }

    .tab-pane-payment .chart-box {
        margin-top: 30px;
    }

    .tab-pane-payment .right-col {
        background: transparent;
        padding: 0;
    }

    .pay-form-box {
        padding: 40px;
        background: #E3DDFF;
        border-radius: 12px;
    }

    .pay-trust {
        flex-direction: column;
        display: flex;
        margin: auto;
        max-width: 100%;
        background: #E3DDFF;
        border-radius: 7px;
        padding: 8px 20px;
        text-align: center;
        font-family: 'roca-400';
        gap: 5px;
        margin-top: 25px;
    }

    .pay-trust img {
        max-width: 50%;
        margin: auto;
    }
}

@media only screen and (max-width: 991px) {
    .abt-box .cus-col:nth-of-type(even) .content-wrapper {
        padding-left: 0;
    }

    .about-inner-sec .content-wrapper {
        max-width: unset;
    }

    .about-inner-sec .content-wrapper {
        padding: 100px 0;
    }

    .abt-box .row::after {
        display: none;
    }

    .abt-box {
        position: relative;
    }

    .abt-box::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 0.3px;
        background: #F5F5F5;
        top: 50%;
        transform: translateY(-50%);
    }

    .astral-img-box {
        right: -72px;
        bottom: 57px;
    }

    .pricing-inner-sec .right-pricing .pricing-btn {
        min-width: 350px;
    }

    .accordion-button span {
        max-width: calc(100% - 58px);
    }

    .pricing-card-wrapper {
        flex-direction: column;
        gap: 50px;
        margin-top: 87px;
    }

    .pricing-card-wrapper .card-box {
        max-width: 80%;
        flex-basis: 100%;
    }

    #hero .inner-sec::after {
        top: 50%;
    }

    .hero-wrapper .head .arrow-icon {
        left: 161px;
        top: 80%;
    }

    .hero-wrapper .head .arrow-icon img {
        width: 76%;
    }

    .navbar .inner-sec {
        position: relative;
        min-height: 70px;
    }

    .other-pg-hero#hero .inner-sec {
        padding: 116px 0 81px;
    }

    .form-tab-wrapper .heading {
        font-size: 22px;
        line-height: 28px;
    }

    .form-tab-wrapper .sub-heading {
        font-size: 16px;
        line-height: 19px;
        margin-bottom: 30px;
    }

    .tab-content-box {
        min-height: 550px;
        position: relative;
        /* overflow-x: hidden; */
    }

    .trigger-next {
        max-width: 322px;
    }

    .get-started {
        margin-top: 100px;
    }

    .tab-pane-home .tab-content-box {
        padding-block: 82px;
    }

    .tab-pane-home .img-wrapper {
        margin-top: 50px;
        text-align: center;
    }

    .tab-pane-home .content-wrapper {
        max-width: unset;
    }

    .form-tab-wrapper .heading,
    .form-tab-wrapper .sub-heading {
        text-align: center;
    }

    .get-start-btn {
        margin: auto;
    }

    p.note {
        max-width: 85%;
        margin: 10px auto 0;
        text-align: center;
    }

    .radios-grp ul {
        gap: 20px;
    }

    .gender-block {
        height: 146px;
        width: 133px;
    }

    .personality-radio-grp .personality-radio-block {
        min-height: 120px;
        min-width: 120px;
    }

    .step-9-pane p.info {
        font-size: 17px;
    }

    .traits-check-grp {
        width: 80%;
    }

    .checkbox-group ul {
        margin-block: 31px 0;
        grid-template-columns: repeat(3, 1fr);
    }

    .misunderstood-radio-grp {
        width: 100%;
    }

    .misunderstood-radio-block {
        min-width: auto;
        max-width: calc(25% - 10px);
        flex-basis: calc(25% - 10px);
    }

    .achieve-check-grp ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tab-pane-payment .left-col,
    .tab-pane-payment .right-col {
        max-width: 100%;
    }

    .header-new {
        max-width: 100%;
    }

    .chart-info-listing .icon-box img {
        width: 100%;
    }

    .chart-info-listing .icon-box {
        min-width: 175px;
    }

    .chart-info-listing li {
        gap: 67px;
    }

    .chart-content-box h3.heading {
        font-size: 32px;
    }

    .chart-info-listing li .content .title {
        font-size: 30px;
    }

    .chart-info-listing li .content .info {
        font-size: 30px;
        margin-top: 18px;
        font-weight: 400;
        line-height: 34px;
    }

    .misc-content-wrapper {
        padding: 122px 62px 65px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 30px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 25px;
        line-height: 36px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-wrapper .bottom {
        flex-direction: column;
        gap: 80px;
        margin-top: 110px;
    }

    .hero-wrapper .bottom p::before {
        top: -30px;
    }

    .pricing-inner-sec .right-pricing {
        margin-top: 50px;
        max-width: 100%;
    }

    .pricing-inner-sec {
        padding: 90px 0;
    }

    .accordion-button span {
        font-size: 21px;
        line-height: 28px;
    }

    .accordion-body {
        max-width: calc(100% - 58px);
        font-size: 18px;
    }

    .hero-wrapper .head .arrow-icon {
        left: 70px;
        top: 82%;
    }

    .ft-links {
        gap: 21px;
        text-align: center;
    }

    .ft-links li {
        max-width: calc(50% - 20px);
        flex-basis: calc(50% - 20px);
    }

    .other-pg-hero .sub-hero-head {
        font-size: 22px;
        line-height: 28px;
        margin-top: 10px;
    }

    .pricing-card-wrapper {
        margin-top: 67px;
    }

    .gender-radios ul {
        flex-wrap: wrap;
    }

    .gender-block {
        max-width: calc(50% - 10px);
        flex-basis: calc(50% - 10px);
    }

    .senti-radio-grp {
        width: 85%;
    }

    .senti-radio-grp.radios-grp ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .radio-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .personality-radio-grp ul {
        flex-wrap: wrap;
        width: 80%;
        margin: auto;
    }

    .personality-radio-grp .personality-radio-block {
        max-width: calc(50% - 13px);
        flex-basis: calc(50% - 13px);
        padding-block: 10px;
        justify-content: space-around;
    }

    .traits-check-grp {
        width: 90%;
    }

    .checkbox-group .check-block {
        max-width: 100%;
    }

    .checkbox-group ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .misunderstood-radio-grp ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .misunderstood-radio-block {
        max-width: calc(50% - 10px);
        flex-basis: calc(50% - 10px);
    }

    .radio-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .personality-radio-grp ul {
        width: auto;
    }

    .personality-radio-grp .personality-radio-block {
        min-width: 144px;
        min-height: 110px;
    }

    .activity-radio-block,
    .life-radio-block {
        min-height: 110px;
        max-width: 144px;
        padding: 20px 10px;
    }

    .payment-tab-wrapper {
        padding: 0 30px;
    }

    .tab-pane-payment .chart-box {
        padding: 50px 30px 30px;
    }

    .tab-pane-payment .right-col {
        padding: 0;
    }

    .chart-info-listing .icon-box {
        min-width: 105px;
    }

    .chart-info-listing li {
        gap: 42px;
    }

    .chart-info-listing li .content .title {
        font-size: 28px;
    }

    .chart-info-listing li .content .info {
        font-size: 25px;
        margin-top: 16px;
        line-height: 34px;
    }

    .faq-content-box .faq-listing li::before {
        width: 44px;
        height: 44px;
    }
}

@media only screen and (max-width: 575px) {
    #hero .inner-sec::after {
        --sz: 85%;
        background-size: contain;
        background-position: center 40px;
    }

    .hero-wrapper h1 {
        font-size: 28px;
        line-height: 35px;
    }

    .hero-wrapper .sub-hero-head {
        font-size: 15px;
        line-height: 19px;
        margin-top: 28px;
    }

    .sec-title {
        font-size: 24px;
        line-height: 27px;
    }

    .about-inner-sec .content-wrapper .title {
        margin-bottom: 18px;
    }

    .abt-box::after {
        display: none;
    }

    .abt-box .cus-col {
        border: 0.3px solid #F5F5F5;
        border-left: 0;
        border-right: 0;
    }

    .abt-box.box-1 .cus-col:nth-of-type(1) {
        border-bottom: 0;
    }

    .abt-box.box-2 .cus-col:nth-of-type(1) {
        border: 0;
    }

    .abt-box .astral-img-box img {
        width: 75%;
    }

    .about-inner-sec .content-wrapper {
        padding: 100px 0 80px 0;
    }

    .sec-para {
        font-size: 16px;
        line-height: 21px;
    }

    .cmn-btn {
        font-size: 16px;
        min-height: 46px;
    }

    .hero-wrapper .hero-btn {
        margin-top: 40px;
    }

    .hero-wrapper .bottom p {
        font-size: 16px;
        line-height: 21px;
    }

    .hero-wrapper .bottom {
        gap: 60px;
        margin-top: 70px;
    }

    .hero-wrapper .bottom p::before {
        width: 20px;
        height: 20px;
        background-size: contain;
    }

    .pricing-inner-sec .left-listing h3 {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 8px;
    }

    .pricing-inner-sec .left-listing ul li {
        font-size: 16px;
        line-height: 35px;
    }

    .pricing-inner-sec .left-listing ul li::after {
        left: -20px;
        top: 10px;
        --sz: 12px;
        background-size: contain;
    }

    .pricing-inner-sec .right-pricing {
        margin-top: 30px;
    }

    .pricing-inner-sec .right-pricing .activation-text {
        font-size: 17px;
        line-height: 22px;
    }

    .pricing-inner-sec .right-pricing .plan-text {
        font-size: 24px;
    }

    .pricing-inner-sec .right-pricing .price-text {
        font-size: 45px;
        margin: 22px 0;
    }

    .pricing-inner-sec .right-pricing .support-text {
        font-size: 13px;
        line-height: 19px;
        margin-bottom: 31px;
        padding: 0 50px;
    }

    .pricing-inner-sec .right-pricing .pricing-btn {
        min-width: 1px;
        max-width: 70%;
        width: 100%;
    }

    .pricing-inner-sec {
        padding: 70px 0;
    }

    .determination-inner-sec {
        padding: 90px 0 70px 0;
    }

    .determination-inner-sec .astral-img-box img {
        width: 80%;
    }

    .accordion-button::after,
    .accordion-button:not(.collapsed)::after {
        width: 28px;
        height: 28px;
        background-size: contain;
    }

    .accordion-button span {
        font-size: 16px;
        line-height: 22px;
    }

    .accordion-body {
        font-size: 13px;
        line-height: 21px;
        max-width: calc(100% - 45px);
    }

    .faq-inner-sec .sec-title {
        margin-bottom: 74px;
    }

    .faq-inner-sec {
        padding: 110px 0;
    }

    .other-pg-hero .hero-wrapper h1 {
        font-size: 31px;
        line-height: 40px;
    }

    .other-pg-hero .hero-wrapper .sub-hero-head {
        margin-top: 17px;
    }

    .pricing-card-wrapper .card-main .info p {
        font-size: 15px;
        margin-top: 13px;
        margin-bottom: 20px;
    }

    .pricing-card-wrapper .card-main .pricing-info h3 {
        font-size: 35px;
        line-height: 40px;
    }

    .pricing-card-wrapper .card-main .pricing-info span {
        font-size: 13px;
        line-height: 16px;
    }

    #hero .inner-sec {
        padding: 110px 0 35px;
    }

    .hero-wrapper .head .arrow-icon {
        left: 20%;
    }

    .tab-content-box {
        padding: 0px 25px;
    }

    .abt-box {
        border: 0;
    }

    .tab-pane-home .img-wrapper img {
        max-width: 80%;
    }

    .get-started {
        margin-top: 0;
        min-height: 100vh;
        background: var(--secondary-clr);
        padding-top: 23px;
    }

    .tab-pane-home .tab-content-box {
        padding: 90px 10px;
    }
    .dark-logo {
        display: unset;
    }

    .tab-pane-questions .tab-content-box {
        align-items: flex-start;
    }

    .form-greet-box {
        padding: 0;
    }

    .form-greet-box {
        padding: 90px 0px;
    }

    .step-7-pane .thought-radio-block {
        min-height: 110px;
        padding: 20px;
    }

    .processing-pane .process-block .loader {
        width: 110px;
        height: 110px;
    }

    .processing-pane .process-block .loaded {
        font-size: 34px;
    }

    .processing-pane .progress {
        height: 8px;
    }

    .processing-pane .question-block {
        padding: 100px 0;
    }

    .process-listing li::before,
    .process-listing li::after {
        scale: 0.8;
    }

    .process-listing li::before {
        top: 8.9px;
        left: 4.2px;
    }

    .process-listing li {
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 14px;
        padding-left: 29px;
    }

    .pay-form-box {
        padding: 0;
        background: transparent;
    }

    .form-inner-wrapper {
        border-radius: 12px;
        border: 1px solid #100821;
        background: #E3DDFF;
        padding: 24px 12px 18px;
    }

    .form-inner-wrapper .header {
        padding: 0 11px;
    }

    .pay-form-box h3 {
        margin: 22px 11px 15px;
    }

    .tab-pane-payment .chart-box {
        /* background: transparent; */
        margin-top: 20px;
        /* padding: 0; */
    }

    .tab-pane-payment .chart-box .chart-listing li::after {
        background: var(--secondary-clr);
    }

    .pay-form-box .field-box {
        padding: 12px;
    }

    .tab-pane-payment .chart-box .chart-listing.not-paid .blur-overlay {
        background: transparent;
        width: 103%;
        backdrop-filter: blur(4px);
    }

    .tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay::before {
        opacity: 80%;
    }

    .birth-chart-info-box {
        padding-top: 100px;
        background: var(--primary-clr);
        margin-inline: -12px;
        border-top: 2px solid white;
    }

    .chart-content-box {
        padding-inline: 24px;

    }

    .chart-info-listing .icon-box {
        min-width: 60px;
        max-width: 60px;
    }

    .chart-info-listing li .content .title {
        font-size: 20px;
    }

    .chart-content-box h3.heading {
        font-size: 24px;
    }

    .chart-info-listing li .content .info {
        font-size: 20px;
        line-height: 25px;
    }

    .chart-info-listing li {
        gap: 15px;
    }

    .chart-info-listing {
        gap: 50px;
        margin-top: 37px;
    }

    .misc-content-wrapper {
        padding: 65px 24px;
        border-radius: 0;
        margin-top: 50px;
        border-top: 2px solid white;
    }

    .faq-content-box .faq-listing {
        margin-top: 30px;
        gap: 26px;
    }

    .user-comment-box .faq-listing {
        margin-top: 37px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 24px;
    }

    .user-comment-box .faq-listing .content {
        padding: 30px;
    }

    .user-comment-box .faq-listing .header .right-info {
        font-size: 15px;
    }

    .rating-wrapper img {
        max-width: 18px;
    }

    .rating-wrapper {
        margin-top: 0;
        margin-bottom: 14px;
    }

    .user-comment-box .faq-listing .content p.info {
        font-size: 16px;
        line-height: 21px;
    }
}

@media only screen and (max-width: 480px) {
    .tab-pane-questions .tab-content-box {
        padding-block: 0;
        padding-top: 40px;
    }

    .form-greet-box {
        padding: 0px 0px;
    }

    #hero .inner-sec::after {
        --sz: 100%;
        background-size: 70%;
        background-position: center 70px;
    }

    .hero-wrapper .head .arrow-icon {
        left: 18%;
        top: 84%;
    }

    .hero-wrapper .head .arrow-icon img {
        width: 64%;
    }

    .hero-wrapper .bottom p {
        font-size: 13px;
        line-height: 17px;
    }

    .sec-title {
        font-size: 20px;
        line-height: 24px;
    }

    .pricing-card-wrapper .card-box {
        max-width: 97%;
    }

    .sec-para {
        font-size: 14px;
    }

    .pricing-inner-sec .right-pricing .support-text {
        padding: 0;
    }

    .pricing-inner-sec .right-pricing .pricing-btn {
        max-width: 80%;
    }

    .accordion-button span {
        font-size: 14px;
        line-height: 21px;
    }

    .accordion-body {
        font-size: 12px;
        line-height: 19px;
    }

    .accordion-button::after,
    .accordion-button:not(.collapsed)::after {
        width: 24px;
        height: 24px;
    }

    .pricing-inner-sec .left-listing h3 {
        font-size: 27px;
        line-height: 32px;
    }

    .pricing-inner-sec .left-listing ul li::after {
        top: 11px;
    }

    .pricing-inner-sec .left-listing ul li {
        font-size: 14px;
        line-height: 35px;
    }

    .pricing-inner-sec .right-pricing .activation-text {
        font-size: 15px;
        line-height: 21px;
    }

    .pricing-inner-sec .right-pricing .support-text {
        font-size: 12px;
        line-height: 17px;
        margin-bottom: 24px;
    }

    .pricing-card-wrapper .card-main .plan-badge {
        min-width: 136px;
        font-size: 14px;
    }

    .determination-inner-sec {
        padding: 90px 0 50px 0;
    }

    .pricing-card-wrapper .card-main .info p {
        font-size: 14px;
        margin-top: 20px;
    }

    .pricing-card-wrapper .card-main .pricing-info span {
        text-align: center;
    }

    .pricing-card-wrapper .card-main .pricing-info span {
        font-size: 11px;
        line-height: 12px;
    }

    .hero-wrapper .hero-btn {
        margin-top: 45px;
        min-height: 36px;
        font-size: 15px;
    }

    .abt-box .astral-img-box.astral-img-right {
        bottom: 117px;
    }

    .astral-img-box {
        bottom: 144px;
    }

    .abt-box .astral-img-box img {
        width: 66%;
    }

    .form-tab-wrapper .heading {
        font-size: 20px;
        line-height: 24px;
    }

    .ft-links li a {
        font-size: 14px;
        line-height: 21px;
    }

    .ft-links {
        gap: 10px;
    }


    .trigger-next::after {
        width: 10px;
        height: 10px;
    }

    .other-pg-hero .hero-wrapper h1 {
        font-size: 25px;
        line-height: 35px;
    }

    #cancel_sub_form {
        max-width: 90%;
    }

    .logo img {
        width: 110px;
    }

    .ham-btn span {
        height: 2px;
    }

    .ham-btn {
        width: 25px;
    }

    .ham-btn.open span:nth-of-type(3) {
        transform: translate(0px, -5px) rotate(-45deg);
    }

    .navbar {
        padding: 16px 0;
        max-height: 66px;
    }

    .overlay {
        top: 66px;
    }

    .right-actions {
        height: calc(100% - 66px);
        top: 66px;
    }

    .hero-wrapper .sub-hero-head {
        margin-top: 8px;
    }

    .hero-price-info {
        margin-top: 15px;
        font-size: 11px;
    }

    .hero-price-info p:nth-of-type(3) {
        font-size: 6px;
        line-height: 10px;
    }

    .pricing-inner-sec {
        position: relative;
    }

    .pricing-inner-sec::after {
        content: ' ';
        position: absolute;
        inset: 0;
        background: url("../images/price-astral-img.svg") no-repeat;
        background-position: top right -30px;
        background-size: 218px;
        pointer-events: none;
    }

    .trigger-next.cmn-btn {
        max-width: 222px;
        min-height: 40px;
        font-size: 13px;
    }

    .trigger-next.cmn-btn span {
        margin-top: 1px;
    }

    .form-tab-wrapper .sub-heading {
        font-size: 12px;
        line-height: 15px;
        margin-bottom: 24px;
    }

    .get-started {
        padding-top: 66px;
    }

    p.note {
        text-align: left;
    }

    .progress-head .action-box {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .trigger-prev {
        padding: 0 0 0 15px;
    }

    .form-progress-bar {
        height: 6px;
    }

    .trigger-prev::before {
        width: 9px;
        height: 9px;
    }

    .question-block span.title {
        font-size: 14px;
        line-height: 17px;
        margin-bottom: 9px;
    }

    .step-1-pane .question-block {
        margin-top: 31px;
    }

    .step-1-pane .question-block .question,
    .hrs-fields,
    .step-4-pane .question-block,
    .step-3-pane .question-block {
        margin: 0;
    }

    .question-block .question {
        font-size: 23px;
        line-height: 27px;
    }

    .tab-pane-home .tab-content-box {
        padding: 20px 0;
    }

    .tab-content-box {
        padding: 0px;
    }

    .gender-radios {
        margin-top: 31px;
    }

    .astral-offers h3 {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .step-2-pane .question-block {
        margin-top: 31px;
    }

    .form-greet-box .info {
        font-size: 14px;
        line-height: 21px;
    }

    .form-greet-box .img-box {
        text-align: center;
    }

    .form-greet-box .img-box img {
        max-width: 95%;
    }

    .personality-radio-grp ul {
        width: auto;
    }

    .personality-radio-grp .personality-radio-block {
        min-width: 143px;
    }

    .senti-radio-grp {
        width: auto;
    }

    .radio-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .senti-radio-block.radio-block {
        height: auto;
    }

    .senti-radio-block .icon img {
        max-width: 90%;
    }

    .chart-radio-block .icon {
        scale: .8;
    }

    .main-step-box {
        padding-bottom: 20px;
    }

    .step-10-pane .question {
        margin-top: 31px;
    }

    .radio-block {
        max-width: 143px;
        min-height: 110px;
        max-height: 110px;
    }

    .gender-radios ul {
        justify-content: center;
    }

    .misunderstood-radio-block.radio-block {
        min-height: 34px;
        padding: 0;
    }

    .question-block .question {
        margin: 31px 15px;
    }

    .step-9-pane p.info {
        margin-bottom: 31px;
    }

    .step-17-pane .input-block {
        margin-top: 31px;
    }

    .text-block,
    .senti-radio-grp.radios-grp ul,
    .step-5-pane .question-block,
    .misunderstood-radio-grp,
    .step-13-pane .question-block,
    .gestures-radio-grp ul,
    .step-12-pane .question-block,
    .form-greet-box .info,
    .checkbox-group ul {
        margin-top: 0;
    }

    .form-greet-box .img-box {
        margin-bottom: 15px;
    }

    .question-block .form-greet-box .question {
        margin: 15px;
    }

    .step-17-pane p.info {
        font-size: 14px;
        line-height: 20px;
        margin: -10px 0;
    }
}

@media only screen and (max-width: 420px) {
    .pricing-card-wrapper .card-main .plan-badge {
        min-width: 123px;
        font-size: 13px;
        min-height: 27px;
    }

    .senti-radio-block.radio-block {
        padding: 26px 0 22px;
    }

    .pricing-card-wrapper .card-main .pricing-info h3 {
        margin-bottom: 0;
    }

    .pricing-card-wrapper .card-main .pricing-info span {
        text-align: end;
    }

    .pricing-card-wrapper .card-main .info p {
        font-size: 13px;
    }

    .card-main {
        padding: 16px;
        border-radius: 12px;
    }

    .hero-wrapper .head .arrow-icon {
        left: 15%;
        top: 89%;
    }

    .hero-wrapper .head .arrow-icon img {
        width: 50%;
    }

    .ft-links li {
        max-width: unset;
        flex-basis: unset;
    }

    .ft-links {
        gap: 10px;
        justify-content: center;
        gap: 3px 13px;
    }

    .abt-box .cus-col {
        border: 0;
        padding-inline: 0;
    }

    .about-inner-sec .content-wrapper .title {
        margin-bottom: 15px;
    }

    .right-actions {
        right: -100%;
        max-width: 100%;
    }

    .about-inner-sec .content-wrapper {
        padding: 60px 12px 40px 12px !important;
        position: relative;
    }

    .abt-box .astral-img-box.astral-img-right {
        bottom: 127px;
    }

    .abt-box .cus-col:nth-of-type(1) .content-wrapper .astral-img-left {
        bottom: 94px;
        right: 17px;
    }

    .abt-box .cus-col:nth-of-type(2) .content-wrapper .astral-img-right {
        bottom: 64px;
        right: 17px;
    }

    .pricing-inner-sec {
        padding: 37px 0;
        position: relative;
    }

    .pricing-inner-sec .right-pricing .activation-text {
        font-size: 13px;
        line-height: 20px;
    }

    .pricing-inner-sec .right-pricing .plan-text {
        font-size: 19px;
        line-height: 20px;
    }

    .pricing-inner-sec .left-listing h3 {
        font-size: 23px;
        line-height: 30px;
    }

    .pricing-inner-sec .right-pricing .price-text {
        font-size: 33px;
        margin: 15px 0;
    }

    .pricing-inner-sec .left-listing ul li::after {
        top: 9px;
    }

    .sec-title::before {
        width: 15px;
        height: 15px;
        background-size: contain;
    }

    .pricing-inner-sec .right-pricing .support-text {
        font-size: 10px;
        line-height: 11px;
        margin-bottom: 17px;
        max-width: 270px;
        margin-inline: auto;
    }

    .pricing-inner-sec .right-pricing {
        margin-top: 15px;
    }

    .pricing-inner-sec .left-listing ul li {
        font-size: 12px;
        line-height: 28px;
    }

    .pricing-inner-sec .right-pricing .pricing-btn {
        max-width: 60%;
        font-size: 14px;
        min-height: 35px;
    }

    .pricing-inner-sec .right-pricing .note-text {
        font-size: 6px;
        margin-top: 6px;
    }

    .about-inner-sec .content-wrapper::after {
        content: "";
        position: absolute;
        width: 100%;
        height: .2px;
        background-color: rgba(255, 255, 255, 0.8);
        top: 0;
        left: 0;
        z-index: -1;
    }

    .abt-box .astral-img-box img {
        width: 88%;
        max-width: 203px;
    }

    .sec-title {
        font-size: 17px;
    }

    .info.sec-para {
        text-align: justify;
    }

    .abt-box .sec-title::before {
        top: -30px;
    }

    .hero-wrapper .bottom {
        margin-top: 55px;
    }

    .determination-inner-sec .sec-title {
        margin-bottom: 15px;
    }

    .determination-inner-sec {
        padding: 53px 0 37px;
    }

    .determination-inner-sec .astral-img-box img {
        width: 65%;
    }

    .faq-inner-sec {
        padding: 70px 0 80px;
    }

    .faq-inner-sec .sec-title::before {
        top: -30px;
    }

    .determination-inner-sec .astral-img-box {
        bottom: unset;
        right: 0;
        top: 40%;
        transform: translateY(-50%);
        z-index: -1;
        width: 100%;
    }

    .determination-inner-sec .sec-title::before {
        top: -30px;
    }

    .faq-inner-sec .sec-title {
        margin-bottom: 50px;
    }

    .accordion-body {
        text-align: justify;
        max-width: 100%;
    }

    .accordion-item {
        margin-bottom: 40px;
    }

    .accordion-item::after {
        bottom: -20px;
    }

    .accordion-button::after,
    .accordion-button:not(.collapsed)::after {
        width: 20px;
        height: 20px;
    }

    .other-pg-hero .hero-wrapper .sub-hero-head {
        margin-top: 10px;
    }

    .other-pg-hero .hero-wrapper h1 {
        font-size: 20px;
        line-height: 25px;
    }

    .footer {
        padding: 20px 0;
    }

    .ft-links li a {
        font-size: 8px;
        line-height: 15px;
    }

    .pricing-pg-hero .sub-hero-head {
        max-width: 70%;
        margin-inline: auto;
    }

    .pricing-card-wrapper {
        margin-top: 37px;
    }

    .subs-pg-hero .hero-wrapper .sub-hero-head {
        font-size: 14px;
        width: 255px;
    }

    #cancel_sub_form {
        max-width: 260px;
        gap: 18px;
        margin-top: 15px;
    }

    #cancel_sub_form label {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 8px;
    }

    #cancel_sub_form .email-block input {
        height: 33px;
        font-size: 12px;
    }

    #cancel_sub_form .cmn-btn {
        letter-spacing: .5px;
        min-height: 36px;
        font-size: 12px;
    }

    p.note {
        max-width: 220px;
        font-size: 8px;
        line-height: 11px;
    }

    .astral-offers {
        border-radius: 10px;
        width: 97%;
        padding: 24px 28px;
    }

    .question-block .question {
        font-size: 20px;
    }

    .date-fields {
        gap: 16px;
    }

    .date-fields .input-block input {
        font-size: 12px;
        line-height: 1;
        padding-block: 8px;
    }

    .date-picker .icon {
        top: 27px;
    }

    .date-picker .icon::before {
        width: 7px;
        height: 7px;
    }

    .skip-btn .trigger-next {
        font-size: 14px;
        padding-right: 20px;
    }

    .skip-btn .trigger-next::after {
        height: 8px;
        width: 8px;
    }

    .text-block {
        min-width: auto;
        width: 97%;
    }

    label {
        font-size: 14px;
    }

    .radio-block {
        padding-block: 19px;
    }

    .radio-block .name {
        font-size: 12px;
        line-height: 16px;
    }

    .checkbox-group .check-block .name {
        font-size: 12px;
        line-height: 14px;
    }

    .personality-radio-grp .personality-radio-block {
        min-height: 110px;
    }

    .radio-block .icon,
    .check-block .icon {
        text-align: center;
    }

    .gender-block .icon img,
    .thought-radio-block .icon img,
    .personality-radio-block .icon img {
        max-width: 70%;
    }

    .step-7-pane .thought-radio-block {
        padding: 26px 30px;
    }

    li[data-value="divorced"] .icon::after {
        height: 110%;
    }

    .chart-radio-block .icon {
        scale: 0.6;
    }

    .senti-radio-block .icon img {
        max-width: 70%;
    }

    li[data-value="divorced"] .icon img {
        max-width: 30px;
        margin: 0 7px;
    }

    .zodiac-check-grp ul .check-block {
        padding-block: 11%;
    }

    .zodiac-check-block .icon img {
        width: 90%;
    }

    .misunderstood-radio-block.radio-block {
        max-width: 50%;
        flex-basis: 100%;
    }

    .question-block .question {
        font-size: 18px;
        line-height: 1.3;
        padding: 0;
    }
}

@media only screen and (max-width: 375px) {
    .hero-wrapper .head .arrow-icon {
        left: 12%;
    }
}

/* ============20 Jun 11: 33 AM===== */
body {
    overflow-x: hidden;
}

.form-py-ft {
    border: 0;
    margin-top: 67px;
    position: relative;
}

.form-py-ft::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1;
    transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
    .faq-content-box .faq-listing .content .title {
        font-size: 25px;
        margin-bottom: 14px;
    }

    .misc-content-wrapper {
        padding: 122px 30px 65px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 30px;
    }

    .rating-wrapper img {
        max-width: 28px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 21px;
        line-height: 32px;
    }

    .faq-content-box .faq-listing {
        margin-top: 60px;
        gap: 26px;
    }

    .pay-grad-btn.btn-last {
        margin-top: 050px;
        min-height: 77px;
        font-size: 21px;
    }
}

@media only screen and (max-width: 575px) {

    .birth-chart-info-box {
        padding-top: 100px;
        background: var(--primary-clr);
        margin-inline: -12px;
        border-top: 2px solid white;
    }

    .chart-content-box {
        padding-inline: 24px;

    }

    .chart-info-listing .icon-box {
        min-width: 60px;
        max-width: 60px;
    }

    .chart-info-listing li .content .title {
        font-size: 20px;
    }

    .chart-content-box h3.heading {
        font-size: 24px;
    }

    .chart-info-listing li .content .info {
        font-size: 20px;
        line-height: 25px;
    }

    .chart-info-listing li {
        gap: 15px;
    }

    .chart-info-listing {
        gap: 50px;
        margin-top: 37px;
    }

    .misc-content-wrapper {
        padding: 65px 24px;
        border-radius: 0;
        margin-top: 50px;
        border-top: 2px solid white;
    }

    .faq-content-box .faq-listing {
        margin-top: 30px;
        gap: 26px;
    }

    .user-comment-box .faq-listing {
        margin-top: 37px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 24px;
    }

    .user-comment-box .faq-listing .content {
        padding: 30px;
    }

    .user-comment-box .faq-listing .header .right-info {
        font-size: 15px;
    }

    .rating-wrapper img {
        max-width: 18px;
    }

    .rating-wrapper {
        margin-top: 0;
        margin-bottom: 14px;
    }

    .user-comment-box .faq-listing .content p.info {
        font-size: 16px;
        line-height: 21px;
    }

    .form-py-ft {
        margin-top: -10px;
    }

    .form-py-ft a {
        color: var(--primary-clr);
    }

    .form-py-ft::before {
        background: var(--primary-clr);
    }

    .payment-status-page .form-greet-box .greet {
        font-size: 15px;
        line-height: 19px;
        max-width: 95%;
        margin-top: 10px;
    }

    .payment-status-page .form-greet-box .info {
        font-size: 14px;
        line-height: 19px;
    }

    .payment-status-page {
        padding-top: 30px;
    }

    .text-block input {
        font-size: 14px;
    }
}

@media only screen and (max-width: 480px) {
    .form-py-ft {
        margin-top: -30px;
    }

    .chart-info-listing li .content .title {
        font-size: 16px;
    }

    .chart-info-listing li .content .info {
        font-size: 17px;
        line-height: 24px;
    }

    .chart-info-listing {
        gap: 34px;
        margin-top: 30px;
    }

    .chart-content-box h3.heading {
        font-size: 20px;
    }

    .misc-content-wrapper .sec-title::before,
    .chart-content-box .sec-title::before {
        top: -30px;
    }

    .birth-chart-info-box {
        padding-top: 70px;
    }

    .faq-content-box .faq-listing li::before {
        width: 30px;
        height: 30px;
    }

    .faq-content-box .faq-listing li {
        padding-left: 47px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 18px;
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 16px;
        line-height: 21px;
    }

    .user-comment-box .sec-title {
        margin-top: 70px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 16px;
        max-width: 65%;
        line-height: 1.1;
    }

    .user-comment-box .faq-listing .header .right-info {
        font-size: 11px;
        line-height: 14px;
    }

    .rating-wrapper img {
        max-width: 12px;
    }

    .user-comment-box .faq-listing .content p.info {
        font-size: 14px;
        line-height: 18px;
    }

    .user-comment-box .faq-listing {
        margin-top: 25px;
    }

    .user-comment-box .faq-listing li:not(:last-of-type) {
        margin-bottom: 15px;
    }

    .user-comment-box .faq-listing .content {
        border-radius: 10px;
        padding: 20px;
    }

    .pay-grad-btn.btn-last {
        margin-top: 30px;
        min-height: 40px;
        font-size: 14px;
    }

    .tab-pane-payment .main-step-box {
        padding-top: 39px;
    }

    .tab-pane-payment .form-badge-header .content p {
        font-size: 14px;
    }

    .tab-pane-payment .form-badge-header .content p:nth-of-type(2) {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
    }

    .tab-pane-payment .form-badge-header .icon {
        --sz: 33px;
    }

    .tab-pane-payment .form-badge-header {
        gap: 8px;
        padding: 10px 16px;
    }

    .tab-pane-payment .form-badge-header .icon::after,
    .tab-pane-payment .form-badge-header .icon::before {
        scale: 0.7;
    }

    .tab-pane-payment .form-badge-header .icon::after {
        top: 12px;
        left: 18px;
    }

    .tab-pane-payment .form-badge-header .icon::before {
        top: 21.2px;
        left: 10.2px;
    }

    .tab-pane-payment .right-col .header .heading {
        font-size: 14px;
        line-height: 16px;
        max-width: 191px;
    }

    .tab-pane-payment .right-col .timer {
        font-size: 26px;
        line-height: 37px;

    }

    .pay-form-box .input-block input {
        min-height: 28px;
    }

    .field-box label {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .field-box label.form-check-label {
        margin-bottom: 0;
    }

    .cc-rdaio .form-check {
        gap: 5px;
    }

    .pay-form-box .input-block {
        margin-bottom: 8px;
    }

    .cc-rdaio {
        margin-bottom: 13px;
    }

    .cc-rdaio .form-check-input {
        --sz: 14px;
    }

    .pay-form-box h3 {
        font-size: 20px;
    }

    .tab-pane-payment .main-step-box {
        padding-bottom: 35px;
    }

    .pay-form-box .input-block input {
        font-size: 12px;
    }
}

@media only screen and (max-width: 420px) {
    .pay-form-box .fields-group {
        gap: 32px;
    }

    .pay-form-box .fields-group .cvv-block {
        max-width: 75px;
    }

    .tab-pane-payment .extra-info {
        font-size: 13px;
        line-height: 17px;
    }

    .tab-pane-payment .right-col .header .heading {
        font-size: 12px;
        line-height: 15px;
        max-width: 150px;
    }

    .total-payout-box {
        margin-top: 18px;
        font-size: 20px;
        line-height: 30px;
    }

    .total-payout-box .new-price {
        font-size: 10px;
        line-height: 32px;
    }

    .download_btn {
        font-size: 17px;
        padding: 8px 30px;
    }

    .pay-trust {
        margin-top: 16px;
        font-size: 14px;
    }

    .pay-trust img {
        max-width: unset;
    }

    .tab-pane-payment .chart-box .chart-listing .title {
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }

    .tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay a {
        font-size: 12px;
    }

    .tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay {
        max-width: 222px;
    }

    .tab-pane-payment .chart-box .chart-listing.not-paid .listing-overlay p {
        font-size: 14px;
    }

    .payment-status-page {
        padding-top: 0px;
    }
}


/* =====payment pages=== */

/* success page=== */

.payment-status-page .status-wrapper {
    border-radius: 20px;
    background-color: var(--secondary-clr);
    margin-top: 100px;
}

.payment-status-page .form-greet-box {
    padding-inline: 30px;
}

.payment-status-page .form-greet-box .title {
    font-family: 'roca-400';
    font-size: 30px;
    line-height: 34px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .status-wrapper .img-box {
        text-align: center;
    }

    .status-wrapper .img-box img {
        max-width: 80%;
    }
}

@media only screen and (max-width:575px) {
    .payment-status-page .status-wrapper {
        margin-top: 0;
        margin-inline: -12px;
        border-radius: 0;
        padding-top: 100px;
    }

    .payment-status-page {
        background: var(--secondary-clr);
        min-height: 100vh;
    }

    .status-wrapper .img-box img {
        max-width: 85%;
    }

    .payment-status-page .form-greet-box .greet {
        font-size: 13px;
        line-height: 15px;
        margin-top: 20px;
    }
}

@media only screen and (max-width:480px) {
    .payment-status-page .form-greet-box .title {
        font-size: 23px;
        margin-bottom: 15px;
    }
}

/****** Payyment Loader ******/
.waiting-loader {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    background: #1008218c;
    backdrop-filter: blur(4px);
    gap: 15px;
    flex-direction: column;
    left: 0;
    top: 0;
}

.waiting-loader span {
    display: block;
    color: white;
    font-size: 25px;
    font-family: 'roca-400';
    letter-spacing: 1px;
}

.loading {
    --as: 1.1;
    width: 65px;
    aspect-ratio: var(--as);
    --_g: no-repeat radial-gradient(farthest-side, #D73CCD 90%, #0000);
    --_g2: no-repeat radial-gradient(farthest-side, #87B0DC 90%, #0000);
    --_g3: no-repeat radial-gradient(farthest-side, #C076B1 90%, #0000);
    background: var(--_g) 50% 0,
        var(--_g2) 0 100%,
        var(--_g3) 100% 100%;
    background-size: 44% calc(44%*(var(--as)));
    animation: l16 1s infinite;
}

@keyframes l16 {

    50%,
    100% {
        background-position: 100% 100%, 50% 0, 0 100%
    }
}

/****** Button Loader ******/
.form-btn-loader {
    content: ' ';
    position: absolute;
    height: 50%;
    width: 50%;
    right: 0;
    background: #100821;
    top: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
    transform: translateY(-50%);
    z-index: 2;
}

.form-btn-loader .loader,
.form-btn-loader .loader:before,
.form-btn-loader .loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}

.form-btn-loader .loader {
    color: #fff;
    font-size: 3px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
    top: -7.5px;
}

.form-btn-loader .loader:before,
.form-btn-loader .loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.form-btn-loader .loader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}

.form-btn-loader .loader:after {
    left: 3.5em;
}

@keyframes bblFadInOut {

    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em
    }

    40% {
        box-shadow: 0 2.5em 0 0
    }
}

/* Custom Error Help Block */
.help-block {
    color: #cf1b18;
    display: block;
    margin: 5px 0 0 4px;
    font-size: 14px;
    line-height: 17px;
}
.email-block .help-block{
    max-width: 400px;
}

/* ===21 jun payment=== */
.birth-chart-info-box {
    padding-top: 130px;
}

.chart-info-listing .icon-box {
    --sz: 155px;
    min-width: var(--sz);
    max-width: var(--sz);
}

.chart-info-listing .icon-box img {
    width: 100%;
}

.chart-info-listing li .content .title {
    font-size: 30px;
    line-height: 14px;
}

.chart-info-listing {
    gap: 60px;
    margin-top: 50px;
}

.chart-info-listing li .content .info {
    font-size: 30px;
    margin-top: 13px;
    line-height: 32px;
}

.faq-content-box .faq-listing .content .title {
    font-size: 30px;
    margin-bottom: 16px;
}

.faq-content-box .faq-listing {
    margin-top: 50px;
}

.faq-content-box .faq-listing li::before {
    width: 44px;
    height: 44px;
}

.faq-content-box .faq-listing .content .title+p {
    font-size: 21px;
    line-height: 27px;
}

.user-comment-box .sec-title {
    margin-top: 95px;
}

.user-comment-box .faq-listing {
    margin-top: 40px;
}

.rating-wrapper {
    margin-top: 8px;
    margin-bottom: 20px;
}

.user-comment-box .faq-listing .header .title {
    font-size: 30px;
}

.user-comment-box .faq-listing .content {
    padding: 35px;
}

.rating-wrapper img {
    max-width: 28px;
}

button#pay_btn_2 {
    margin-top: 50px;
    min-height: 60px;
    min-width: 550px;
    font-size: 26px;
}

.date-fields {
    position: relative;
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover,
.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
    background: var(--primary-clr);
    color: white;
}

.help-block.other-error {
    margin: 45px 0 -25px;
}

#question_16 .text-block {
    margin-top: 0;
}

@media only screen and (max-width: 991px) {
    .chart-info-listing .icon-box {
        --sz: 135px;
    }

    .chart-info-listing li .content .title {
        font-size: 25px;
    }

    .chart-info-listing li .content .info {
        font-size: 22px;
        line-height: 29px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 28px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 19px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .chart-info-listing .icon-box {
        --sz: 105px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 25px;
        margin-bottom: 8px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 18px;
        line-height: 25px;
    }
}

@media only screen and (max-width: 575px) {
    .chart-info-listing .icon-box {
        --sz: 85px;
    }

    .chart-info-listing li .content .title {
        font-size: 20px;
    }

    .chart-info-listing li .content .info {
        font-size: 19px;
        line-height: 27px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 19px;
        line-height: 23px;
    }

    .chart-info-listing li {
        gap: 25px;
    }

    button#pay_btn_2 {
        min-height: 54px;
        font-size: 23px;
        min-width: auto;
        max-width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .chart-info-listing .icon-box {
        --sz: 60px;
    }

    .chart-info-listing li .content .title {
        font-size: 18px;
    }

    .chart-info-listing li .content .info {
        font-size: 16px;
        line-height: 23px;
        margin-top: 9px;
    }

    .faq-content-box .faq-listing li::before {
        width: 30px;
        height: 30px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 16px;
        line-height: 23px;
    }

    button#pay_btn_2 {
        min-height: 45px;
        font-size: 18px;
    }

    .user-comment-box .faq-listing .header .title {
        font-size: 15px;
        line-height: 18px;
    }

    .rating-wrapper img {
        max-width: 13px;
    }

    .rating-wrapper {
        margin-top: 5px;
        margin-bottom: 14px;
    }

    .chart-info-listing {
        gap: 34px;
        margin-top: 30px;
    }

    .birth-chart-info-box {
        padding-top: 70px;
    }

    .user-comment-box .sec-title {
        margin-top: 70px;
    }

    .help-block {
        font-size: 10px;
        line-height: 14px;
    }

    .help-block.other-error {
        margin: 16px 0 -30px;
    }
}

@media only screen and (max-width: 420px) {
    .chart-info-listing li .content .title {
        font-size: 16px;
    }

    .chart-info-listing li .content .info {
        font-size: 13px;
        line-height: 19px;
        margin-top: 9px;
    }

    button#pay_btn_2 {
        font-size: 14px;
    }

    .faq-content-box .faq-listing .content .title {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .faq-content-box .faq-listing .content .title+p {
        font-size: 13px;
        line-height: 21px;
    }

    .user-comment-box .faq-listing .content {
        border-radius: 10px;
        padding: 20px;
    }

}

/* =====21 payment - end=== */


/**** cometics ****/
.get-started {
    padding-bottom: 25px;
    margin-top: 25px;
}

.frm-pg-nav#navbar {
    position: relative;
}

.pricing-card-wrapper {
    align-items: flex-start;
    display: grid;
    gap: 120px;
    grid-template-columns: repeat(2, 1fr);
}

.pricing-card-wrapper .card-box {
    max-width: 100%;
    height: 100%;

}

.pricing-card-wrapper .card-main {
    height: 100%;
}

.hero-wrapper .hero-btn {
    padding-top: 1.5px;
}



@media screen and (max-width: 1199px) {
    .pricing-card-wrapper {
        gap: 45px;
    }
}

@media screen and (max-width: 991px) {
    .pricing-card-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 575px) {
    .frm-pg-nav .logo img:nth-of-type(1) {
        opacity: 0;
    }

    .frm-pg-nav#navbar {
        background: var(--secondary-clr);
    }

    .get-started {
        margin-top: 0;
        padding-top: 0;
    }
}

@media screen and (max-width: 420px) {
    .pricing-card-wrapper {
        gap: 25px;

    }
}



/* ===navbar24 june === */
.hero-wrapper {
    pointer-events: auto;
}

.hero-wrapper .hero-btn {
    padding-top: 0;
}

#navbar {
    position: relative;
    z-index: auto;
    width: 100%;
}

.nav-links {
    position: relative;
    height: 100%;
    overflow: hidden auto;

}

.right-actions {
    top: 0;
    z-index: 11;
    height: 100%;
    overflow: hidden;
}

.nav-links ul {
    height: 100%;
    padding-top: 90px;
}

.nav-links #close-btn {
    position: absolute;
    width: 32px;
    height: 32px;
    background: transparent;
    top: 40px;
    left: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links #close-btn::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 4px;
    background: white;
    border-radius: 20px;
    transform: rotate(-45deg);
}

.nav-links #close-btn::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 4px;
    background: white;
    border-radius: 20px;
    transform: rotate(45deg);
}

.overlay {
    display: none;
}

body {
    position: relative;
}

body.active::after {
    content: "";
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    z-index: 1;
}

#hero {
    margin-top: -100px;
    pointer-events: none;
}

.payment-tab-wrapper {
    z-index: 1;
}

.abt-box {
    border: 1px solid #F5F5F5;
    border-right: 0;
    border-left: 0;
}

.abt-box .row::after {
    width: 1px;
}

.faq-inner-sec {
    border-top: 1px solid #F5F5F5;

}

.accordion-item::after,
.accordion .accordion-item:nth-of-type(1)::before {
    height: 1px;
}

@media only screen and (max-width: 991px) {

    .abt-box::after {
        height: 1px;
    }
}

@media only screen and (max-width: 575px) {

    .get-started,
    .payment-status-page {
        margin-top: -100px;
        padding-top: 50px;
    }

    .frm-pg-nav#navbar {
        background: transparent;
    }

    #hero .inner-sec {
        padding: 140px 0 35px;
    }

    .payment-status-page .status-wrapper {
        padding-top: 50px;
    }

    .abt-box .cus-col {
        border: 1px solid #F5F5F5;
        border-right: 0;
        border-left: 0;
    }

    .abt-box.box-1 .cus-col:nth-of-type(1) {
        border-bottom: 0;
        border-top: 0;
    }

    .abt-box.box-1 .cus-col:nth-of-type(2) {
        border: 0;
    }

    .abt-box.box-2 .cus-col:nth-of-type(2) {
        border-bottom: 0;
        border: 0;
    }

    .abt-box {
        border-top: 00;
    }
}

@media only screen and (max-width: 480px) {

    .get-started,
    .payment-status-page {
        margin-top: -66px;
        padding-top: 66px;
    }

    .right-actions {
        max-width: 250px;
    }

    .nav-links #close-btn::after,
    .nav-links #close-btn::before {
        height: 3px;
    }

    .navbar .navlink {
        font-size: 16px;
    }
}

@media only screen and (max-width: 420px) {
    .about-inner-sec .content-wrapper::after {
        height: 1px;
    }

    .abt-box.box-2 .cus-col:nth-of-type(1) .content-wrapper::after {
        height: 0;
    }
}


.payment-status-page .status-wrapper {
    margin-top: 25px;
}

@media only screen and (max-width: 575px) {
    .payment-status-page .status-wrapper {
        margin-top: 0;
        padding-top: 30px;
    }
}


/****** question loading effect ****/
#astro_qa_form .tab-pane.tab-pane-questions {
    position: relative;
    overflow: hidden;
}

#astro_qa_form .tab-pane.tab-pane-questions::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1008213a;
    bottom: 0;
    left: 0;
    opacity: 0;
    backdrop-filter: blur(6px);
    pointer-events: none;
    border-radius: 20px;

}

#astro_qa_form .tab-pane.tab-pane-questions.active::after {
    animation: quest-loader 1s forwards;
}

#astro_qa_form .tab-pane.tab-pane-questions.active::before {
    animation: quest-loader2 .85s forwards; 
    z-index: 6;
}

.form-get-started .inner-sec>.container {
    padding-inline: 0;
}


@keyframes quest-loader {

    0%,
    50% {
        opacity: 1;
        backdrop-filter: blur(6px);
        pointer-events: auto;

    }

    80% {
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(0px);

    }
}

@keyframes quest-loader2 {

    0%,
    50% {
        opacity: 1;

    }

    100% {
        opacity: 0;

    }
}


@media only screen and (max-width: 575px) {
    #astro_qa_form .tab-pane.tab-pane-questions::after {
        height: calc(100% - 35px);
        top: 35px;
        background: #6f648821;
    }

    .form-get-started .inner-sec>.container {
        padding-inline: 0;
    }

    #astro_qa_form .tab-content-box {
        padding-inline: 12px;
    } 
}



/* ====helper page=== */
.cmn-header {
    background-color: var(--secondary-clr);
    position: relative;
}

.cmn-header::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/pay-bg-img.svg') no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.cmn-header h1 {
    padding: 70px 0;
    color: var(--primary-clr);
    font-family: 'roca-400';
    font-size: 45px;
    text-transform: uppercase;
}

.helper-pg-sec .content-box {
    padding: 40px 0 20px;
}

.helper-pg-sec .content-box p {
    font-size: 18px;
    margin-bottom: 20px;
}

.helper-pg-sec .content-box ul {
    padding-left: 30px;
    margin-bottom: 15px;
}

.helper-pg-sec .content-box ul li {
    list-style: disc;
    margin-bottom: 5px;
}

.helper-pg-sec .content-box h2 {
    padding-top: 20px;
    font-family: 'roca-400';
    font-size: 30px;
    margin-bottom: 20px;
}

.helper-pg-sec .content-box h3 {
    padding-top: 20px;
    font-family: 'roca-400';
    font-size: 24px;
    margin-bottom: 20px;
}

.helper-pg-sec .content-box a {
    transition: .2s ease;
}

.helper-pg-sec .content-box a:hover {
    color: #9C3C96;
}

@media only screen and (max-width:991px) {

    .helper-pg-sec .content-box p,
    .helper-pg-sec .content-box ul li {
        font-size: 16px;
    }

    .helper-pg-sec .content-box h2 {
        font-size: 24px;
        padding-top: 15px;
        margin-bottom: 15px;
    }

    .helper-pg-sec .content-box h3 {
        font-size: 20px;
    }

    .cmn-header h1 {
        padding: 60px 0;
        font-size: 40px;
    }

    .helper-pg-sec .content-box p {
        margin-bottom: 15px;
    }

    .helper-pg-sec .content-box ul {
        margin-bottom: 10px;
    }

    .helper-pg-sec .content-box {
        padding: 40px 0 25px;
    }
}

@media only screen and (max-width:767px) {
    .cmn-header h1 {
        padding: 50px 0;
        font-size: 28px;
    }

}

@media only screen and (max-width:575px) {

    .helper-pg-sec .content-box p,
    .helper-pg-sec .content-box ul li {
        font-size: 15px;
    }

    .helper-pg-sec .content-box h2 {
        font-size: 20px;
    }

    .helper-pg-sec .content-box h3 {
        font-size: 18px;
    }
}

@media only screen and (max-width:480px) {
    .cmn-header h1 {
        padding: 40px 0;
        font-size: 24px;
    }

    .helper-pg-sec .content-box p,
    .helper-pg-sec .content-box ul li {
        font-size: 13px;
    }

    .helper-pg-sec .content-box h3 {
        font-size: 16px;
    }
}

@media only screen and (max-width:420px) {
    .cmn-header h1 {
        font-size: 20px;
    }

    .helper-pg-sec .content-box h2 {
        font-size: 18px;
    }
}


.download_btn {
    background: #79E40E;
    transition: .2s ease;
}

.download_btn:hover {
    background: #72c026db;
}

.download_btn::after {
    display: none;
}

.pay-form-box .input-block {
    position: relative;
}

.pay-form-box .pay-trst-small {
    position: absolute;
    right: 0;
    max-width: 156px;
}

.pay-form-box .pay-trst-small img {
    width: 100%;
}

.pay-trust {
    flex-direction: column;
    display: flex;
    margin: auto;
    max-width: 100%;
    background: #E3DDFF;
    border-radius: 7px;
    padding: 8px 20px;
    text-align: center;
    font-family: 'roca-400';
    gap: 5px;
    margin-bottom: -20px;
    font-size: 13px;
}

.pay-trust img {
    max-width: 70%;
    margin: auto;
}

.pay-form-box h3 {
    margin: 17px 0 11px;
}

.tab-pane-payment .chart-box .chart-listing .title {
    display: block;
}

.pay-form-box .field-box {
    padding-bottom: 6px;
}

.tab-pane-payment .left-col {
    margin-top: 15px;
}

#astro_qa_form .tab-pane.tab-pane-questions::after {
    z-index: 3;
}

/* #astro_qa_form .tab-pane.tab-pane-questions::before {
    display: none;
} */

@media only screen and (max-width:575px) {
    .pay-form-box {
        display: flex;
        flex-direction: column;
    }

    .pay-trust {
        order: 6;
        margin: 16px 0 0;
    }

    .pay-form-box .pay-note {
        margin-top: 15px;
    }


    .pay-form-box .pay-trst-small {
        top: -91px;
    }

    .pay-form-box h3 {
        padding-left: 10px;
    }

    #astro_qa_form .tab-pane.tab-pane-questions::after {
        background: #ffffff21;
    }
}

@media only screen and (max-width:480px) {
    .pay-form-box h3 {
        font-size: 14px;
        padding-left: 10px;
    }

    .pay-form-box .pay-trst-small {
        top: -81px;
        max-width: 133px;
    }
}

@media only screen and (max-width:420px) {
    .pay-form-box .pay-trst-small {
        position: absolute;
        right: 0;
        max-width: 133px;
    }
}

.lang-dd .dropdown-toggle {
    background: transparent;
    border: 0;
}

.lang-dd .dropdown-toggle:active,
.lang-dd .dropdown-toggle:focus {
    background: transparent;
    border: 0;
    box-shadow: none !important;
}

.lang-dd .dropdown-toggle.show {
    color: var(--secondary-clr);
}

.lang-dd .dropdown-toggle::after {
    display: none;
}

.lang-dd .dropdown-menu {
    position: relative;
    border-radius: 5px;
    padding: 0;
    max-height: 220px;
    overflow: hidden auto;
    cursor: pointer;
}

.lang-dd .dropdown-item {
    text-align: center;
    padding-block: 7px;
}

.lang-dd .dropdown-item:focus,
.lang-dd .dropdown-item.active,
.lang-dd .dropdown-item:hover {
    color: white;
    background-color: var(--secondary-clr);
}

@media only screen and (max-width: 575px) {
    .payment-tab-wrapper {
        border-radius: 0;
        margin-top: 50px;
    }

    .tab-pane-payment .main-step-box {
        padding-top: 35px;
    }
}

@media only screen and (max-width: 480px) {
    .payment-tab-wrapper {
        margin-top: 0;
    }
    .tab-pane-payment .main-step-box {
        padding-top: 39px;
    }
}


.lang-dd .dropdown-toggle {
    width: 100%;
    position: relative;
    min-width: 10rem;
}

.lang-dd .dropdown-item {
    color: white;
    position: relative;
}

.lang-dd .dropdown-toggle::after {
    content: " ";
    background: var(--secondary-clr);
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70%;
    height: 1px;
    margin: 0;
    border-radius: 0;
    border: 0;
    transition: .3s ease;
    transform: translateX(-50%) scale(0);
}

.lang-dd .dropdown-toggle:hover:after {
    transform: translateX(-50%) scale(1);

}

.lang-dd .dropdown-item::after {
    content: " ";
    background: var(--secondary-clr);
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 1px;
    margin: 0;
    border-radius: 0;
    border: 0;
    transition: .3s ease;
    transform: translateX(-50%) scale(0);
}

.lang-dd .dropdown-menu {
    min-width: 10rem;
    background: transparent;
}

.lang-dd .dropdown-item {
    color: white;
}

.lang-dd .dropdown-item:focus,
.lang-dd .dropdown-item.active,
.lang-dd .dropdown-item:hover {
    background-color: transparent;
}

.lang-dd .dropdown-item:hover::after,
.lang-dd .dropdown-item.active::after,
.lang-dd .dropdown-item:focus::after {
    transform: translateX(-50%) scale(1);
}

.lang-dd .dropdown-item.active {
    color: var(--secondary-clr);
    font-weight: 600;
}


/***** 27 Jun ****/
.date-fields .input-block {
    min-width: 144px;
    max-width: 144px;
}

.cmn-select+.select2-container--default .select2-selection--single {
    border-radius: 5px;
}

#question_2 .select2-results__options li {
    text-align: center;
}

#question_2 .select2-container--default .select2-results__option[aria-selected=true] {
    background: white;
    color: var(--primary-clr);
}

#question_2 .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-clr);
    color: white;
}

@media only screen and (max-width:767px) {
    .date-fields {
        width: 98%;
    }

    .date-fields .input-block {
        min-width: 1px;
        width: 100%;
    }

}

#question_2 .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 0;
}

#question_2 .select2-container--default .select2-results>.select2-results__options {
    padding: 2px;
}

#question_2 .select2-search--dropdown {
    padding: 2px 2px 0 2px;
}

/**** Payment faild popup *****/

#py_failed_mdl .modal-content {
    background: linear-gradient(180deg, rgb(152 59 147 / 50%) 0%, rgb(22 11 38 / 50%) 100%);
    border-radius: 8px;
    z-index: 1;
    max-width: 75%;
    margin: auto;
}

#py_failed_mdl .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 97%;
    background: #fff;
    z-index: -1;
    opacity: 90%;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#py_failed_mdl .modal-body {
    padding-block: 28px;
    text-align: center;
    color: var(--primary-clr);
    padding-bottom: 0;
}

#py_failed_mdl .modal-body svg {
    width: 50px;
    margin-bottom: 10px;
}

#py_failed_mdl .modal-body h3 {
    font-family: 'Roca-400';
    font-size: 35px;
    line-height: 1;
    margin-bottom: 10px;
}

#py_failed_mdl .modal-body span {
    font-size: 15px;
    line-height: 1;
    display: block;
}

#py_failed_mdl .modal-footer {
    border: 0;
    justify-content: center;
}

#py_failed_mdl .modal-footer .btn {
    border-radius: 8px;
    min-height: 36px;
}

#py_failed_mdl .modal-footer .btn.btn-secondary {
    background: #000;
}

#py_failed_mdl .modal-footer .btn.btn-secondary:hover {
    background: var(--primary-clr);
}

@media only screen and (max-width:480px) {
    #py_failed_mdl .modal-body svg {
        width: 34px;
    }

    #py_failed_mdl .modal-body span {
        font-size: 10px;
    }

    #py_failed_mdl .modal-body h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    #py_failed_mdl .modal-body {
        padding-block: 15px 0;
        padding-bottom: 0;
    }
}

@media only screen and (max-width:420px) {
    #py_failed_mdl .modal-footer .btn {
        font-size: 13px;
    }
}


#error-message{
    color: #FF002A;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}
#error-message1{
    color: #FF002A;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}


/* ====contact us page=== */

.contact-us-frm {
    max-width: 650px;
    margin: auto;
}

#contact_pg {
    margin-top: -100px;
    pointer-events: none;
}

#contact_pg .inner-sec {
    padding: 150px 0 85px;
    background: url("../images/hero-bg.svg") no-repeat;
    position: relative;
    z-index: 1;
    background-position: bottom;
    background-size: cover;
}

#contact_pg .inner-sec::after {
    content: ' ';
    position: absolute;
    background: url("../images/hero-solar-img.svg") no-repeat;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 594px;
    width: var(--sz);
    pointer-events: none;
    height: var(--sz);
    z-index: -1;
}

.contact-us-wrapper h1 {
    text-transform: uppercase;
    font-size: 45px;
    line-height: 1;
    margin-bottom: 40px;
}

.contact-us-form-box .fields-group {
    display: flex;
    gap: 30px;
}

.contact-us-form-box .fields-group .input-block {
    max-width: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
}

.contact-us-form-box .input-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.contact-us-form-box .input-block input,
.contact-us-form-box .input-block textarea {
    border: 1px solid var(--secondary-clr);
    border-radius: 7px;
    background: var(--secondary-clr);
    padding: 0 10px;
    font-size: 15px;
}

.contact-us-form-box .input-block input {
    height: 38px;
}

.contact-us-form-box .input-block textarea {
    min-height: 100px;
    resize: none;
    padding: 10px;
}

.contact-us-frm .gradient-btn {
    background: transparent;
    min-width: 50%;
}

@media only screen and (max-width: 575px) {
    #contact_pg .inner-sec::after {
        --sz: 85%;
        background-size: contain;
        background-position: center 40px;
    }

    #contact_pg .inner-sec {
        padding: 140px 0 40px;
    }
}

@media only screen and (max-width: 480px) {
    .contact-us-form-box .fields-group {
        flex-direction: column;
        gap: 0;
    }

    .contact-us-form-box label {
        font-size: 12px;
        line-height: 1;
        margin-bottom: 4px;
    }

    .contact-us-form-box .fields-group .input-block {
        max-width: 100%;
        flex-basis: 100%;
    }

    .contact-us-form-box .input-block {
        margin-bottom: 13px;
    }

    .contact-us-form-box .input-block input {
        height: 33px;
        font-size: 12px;
    }


    .contact-us-form-box .input-block textarea {
        font-size: 12px;
        min-height: 80px;
    }

    .contact-us-frm .gradient-btn {
        min-height: 40px;
    }

    .contact-us-wrapper h1 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    #contact_pg .inner-sec::after {
        --sz: 100%;
        background-size: 70%;
        background-position: center 70px;
        top: 50%;
    }

}

@media only screen and (max-width: 480px) {
    .contact-us-frm .gradient-btn {
        min-width: 70%;
    }
}

/*** corrections 2 Jul ***/
.hero-wrapper .hero-btn {
    padding-top: 1.5px;
}

.tab-pane-payment .chart-box .chart-listing.not-paid .blur-overlay {
    background: #FFFFFF1A;
    backdrop-filter: unset;
    width: 105%;
}

.chart-listing.not-paid li:not(:first-of-type) {
    filter: blur(3px);
}

#astro_qa_form .tab-pane.tab-pane-questions::after {
    backdrop-filter: unset;
    filter: blur(3px);
}

@media only screen and (max-width: 575px) {
    .tab-pane-payment .chart-box .chart-listing.not-paid .blur-overlay {
        width: 103%;
        background: #FFFFFF1A;
        filter: blur(4px);
    }
}

@media only screen and (max-width: 480px) {
    #astro_qa_form .tab-pane.tab-pane-questions::before {
        font-size: 22px;
    }
}

#astro_qa_form .tab-pane.tab-pane-questions::after {
    backdrop-filter: unset;
    filter: unset;
    background: transparent;
}

.tab-pane-questions.active .tab-content-box {
    animation: blur_loader 1s forwards;
}

@keyframes blur_loader {

    0% {
        filter: blur(3px);
    }

    85% {
        filter: blur(0);

    }
}

.main-logo {
    max-width: 142px;
}
.dark-logo{
    max-width: 144px;
}

/***** sucess / failed message modal *****/
.small-cmn-mdl .modal-content {
    background: linear-gradient(180deg, rgb(152 59 147 / 50%) 0%, rgb(22 11 38 / 50%) 100%);
    border-radius: 8px;
    z-index: 1;
    max-width: 75%;
    margin: auto;
}

.small-cmn-mdl .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 99%;
    height: 97%;
    background: #fff;
    z-index: -1;
    opacity: 90%;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.small-cmn-mdl .modal-body {
    padding-block: 28px;
    text-align: center;
    color: var(--primary-clr);
    padding-bottom: 0;
}

.small-cmn-mdl .modal-body svg {
    width: 50px;
    margin-bottom: 10px;
}

.small-cmn-mdl .modal-body h3 {
    font-family: 'Roca-400';
    font-size: 35px;
    line-height: 1;
    margin-bottom: 10px;
}

.small-cmn-mdl .modal-body span {
    font-size: 15px;
    line-height: 1;
    display: block;
}

.small-cmn-mdl .modal-footer {
    border: 0;
    justify-content: center;
}

.small-cmn-mdl .modal-footer .btn {
    border-radius: 8px;
    min-height: 36px;
}

.small-cmn-mdl .modal-footer .btn.btn-secondary {
    background: #000;
}

.small-cmn-mdl .modal-footer .btn.btn-secondary:hover {
    background: var(--primary-clr);
}

@media only screen and (max-width:480px) {
    .small-cmn-mdl .modal-body svg {
        width: 34px;
    }

    .small-cmn-mdl .modal-body span {
        font-size: 10px;
    }

    .small-cmn-mdl .modal-body h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .small-cmn-mdl .modal-body {
        padding-block: 15px 0;
        padding-bottom: 0;
    }
}

@media only screen and (max-width:420px) {
    .small-cmn-mdl .modal-footer .btn {
        font-size: 13px;
    }
}

#astro_qa_form #js_step_17_wrapper.active::before,
#astro_qa_form #js_step_17_wrapper.active::after {
    display: none;
}

#astro_qa_form #js_step_17_wrapper.active .tab-content-box {
    animation: none;
}
.auth-frm-container {
    min-height: calc(100vh - 235px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-pages {
    margin-top: -100px;
    pointer-events: none;
}

.auth-pages .inner-sec {
    padding: 150px 0 85px;
    background: url("../images/hero-bg.svg") no-repeat;
    position: relative;
    z-index: 1;
    background-position: bottom;
    background-size: cover;
}

.auth-pages .inner-sec::after {
    content: ' ';
    position: absolute;
    background: url("../images/hero-solar-img.svg") no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 594px;
    width: var(--sz);
    pointer-events: none;
    height: var(--sz);
    z-index: -1;
    background-size: 90%;
    background-position: center;
}

.auth-frm-inner {
    max-width: 540px;
    margin: 0 auto;
    background: var(--secondary-clr);
    border-radius: 20px;
    padding: 30px;
    pointer-events: auto;
    width: 100%;
}

.auth-frm label {
    display: block;
    color: var(--primary-clr);
}

.auth-frm input {
    border: 1px solid var(--primary-clr);
    border-radius: 7px;
    background: #1008211A;
    min-height: 43px;
    width: 100%;
    padding: 0 10px;
    transition: border-color .2s ease;

}

.auth-frm input:focus,
.auth-frm input:hover {
    border-color: #8338A3;
}

.auth-frm .input-block {
    margin-bottom: 16px;
}

.auth-frm .gradient-btn {
    min-width: 190px;
    font-size: 15px;
    min-height: 40px;
    line-height: 1;
}

.auth-pg-wrapper h1 {
    font-family: 'roca-400';
    text-transform: uppercase;
    font-size: 31px;
    line-height: 1;
    margin-bottom: 22px;
}

.forgot-password {
    text-align: center;
    font-size: 13px;
    margin-top: 15px;
    color: var(--primary-clr);
}

.forgot-password a {
    transition: .2s ease;
}

.forgot-password a:hover {
    color: #9C3C96;
}

.nav-logn-btn {
    width: 100%;
    text-align: center;
}

.nav-logn-btn .navlink {
    width: 50%;
    border-radius: 5px;
    background-color: var(--secondary-clr);
    display: inline-block;
    padding: 8px 0;
    border: 1px solid var(--secondary-clr);
    transition: .2s ease;
    color: var(--primary-clr);
}

.nav-logn-btn .navlink:hover {
    background: transparent;
}

@media screen and (max-width:767px) {
    .auth-pages .inner-sec::after {
        background-size: 70%;
    }
}

@media screen and (max-width:480px) {
    .auth-pg-wrapper h1 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .auth-frm-inner {
        border-radius: 12px;
        padding: 30px 22px;
    }

    .auth-frm input {
        min-height: 40px;
    }

    .auth-frm .gradient-btn {
        min-width: 100%;
        font-size: 13px;
    }

    .auth-frm label {
        font-size: 12px;
        line-height: 1;
        margin-bottom: 4px;
    }

    .forgot-password {
        font-size: 12px;
        margin-top: 12px;
    }

    .auth-pages .inner-sec::after {
        top: 50%;
        --sz: 100%;
        background-size: 100%;
        background-position: center;
    }
}
.reset-psw-title {
    color: #100821;
    text-align: center;
    padding-bottom: 15px;
}

.user-serve-notify{
    position: relative;
}
.user-serve-notify  button{
    position: absolute;
    right: 16px;
    top: 16px;

}
.user-serve-notify.alert-danger {
    background: transparent;
    border-color: #ff3333;
    color: #ff3333;
}
.user-serve-notify.alert-success {
    background-color: transparent;
    border-color: #94ed94;
    color: #94ed94;
}
.b-wait{
    font-size: 12px;
    color: #fff;
    background: #100821;
    padding: 2px 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

 /* Sucessful page */
 .success-greet-box .title{
    font-weight:400;
    text-align:center;
    font-size:65px;
    line-height:129px;
    font-family: 'roca-400';
    position:absolute;
    text-wrap:nowrap;
}
.success-greet-box #title_break{
    font-size:65px;
}

.success-info .info{
    font-weight:400;
    font-size:30px;
    line-height:37px;
    text-align:center;
    max-width: 915px;
    margin-left: auto;
    margin-right: auto;
}

.success-info .greet{
    font-weight:600;
    font-size:30px;
    line-height:37px;
    text-align:center;
    margin-top: 40px;
    max-width: 915px;
    margin-left: auto;
    margin-right: auto;
}

.success-img{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
}

.success-info{
    margin-top:52px;
}

.success-wrapper{
    margin-top:35px;
}

.meet-astrologer{
    margin-top:90px;
    background-image:url("../images/meet-astrologer-bg.png");    
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    padding-top: 77px;
    padding-bottom: 152px;
}

.meet-wrapper .title{
font-weight:400;
font-size:35px;
line-height:40px;
text-align:center;
font-family:'roca-400';
color:#100821;
margin-bottom: 59px;
}

.m-info h5{
    font-size:15px;
    line-height:20px;
    font-weight:500;
}

.m-info span{
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
}

.m-bottom p{
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.m-bottom  p:not(:last-of-type) {
    margin-bottom: 7px;
  }

.m-bottom span{
    font-weight: 500;
}

.meet-col{
    background-color: #2A2144;
    border-radius: 5px;
    padding: 22px 24px 42px 25px;
    width: 357px;
    min-height: 368px;
    border: 1px solid #B3A3FC;
}

.meet-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.meet-content{
  
  display: flex;
  justify-content: center;
  gap: 30px;
  
}

.users-comment {
 background-image:url("../images/user-comment-bg.png");
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;
 padding-top: 130px;
 padding-bottom: 131px;
}

.users-comment .title{
    font-weight:400;
    font-size:35px;
    line-height:40px;
    text-align:center;
    font-family:'roca-400';
    color:#ffffff;

    }


    /* .users-comment .sec-title {
        margin-top: 115px;
    } */
    
    .users-comment .faq-listing {
        max-width: 872px;
        width: 100%;
        margin: 0 auto;
        margin-top: 67px;
    }
    
    .users-comment .faq-listing .content {
        background-color: rgba(227, 221, 255, 0.82);
        border-radius: 20px;
        padding: 45px 44px 73px 44px;
        height: 263px;
        
    }
    
    .users-comment .faq-listing .content p.info {
        font-size: 20px;
        line-height: 22px;
        color: #100821;
    }
    
    .users-comment .faq-listing .header {
        display: flex;
        justify-content: space-between;
    }
    
    .users-comment .faq-listing .header .right-info {
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .users-comment .faq-listing .header .title {
        font-family: 'roca-400';
        font-size: 35px;
        font-weight: 400;
        line-height: 12px;
        color: #100821;
        text-align:left;
    }
    
    .users-comment  .rating-wrapper {
        margin-top: 0;
        margin-bottom: 24px;
    }
    
    .users-comment  .faq-listing li:not(:last-of-type) {
        margin-bottom: 48px;
    }
    

@media only screen and (max-width:1199px){
    .meet-content {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
        gap: 20px;
      }
      
      .meet-col {
        width: 100%;
      }
}
@media only screen and (max-width:991px){
    .success-greet-box .title {
        font-size: 47px;
        line-height: 80px;
      }
    .success-greet-box #title_break {
        font-size: 47px;
        line-height: 80px;
    }
    .success-img img{ 
        width: 100%;
        height: auto;
    }
.meet-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.success-info .info {
    font-size: 20px;
    line-height: 33px;
  }
  .success-info .greet {
    font-size: 20px;
    line-height: 33px;
  }
  .meet-astrologer {
    margin-top: 40px;
  }

  .users-comment .faq-listing .header .title {
    font-size: 25px;
  }

  .meet-astrologer {
    margin-top: 60px;
  }

  .meet-astrologer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .users-comment {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
    .meet-content {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap:30px;
    }

    .meet-col {
          min-height: 314px;
      }

      .success-info .info {
        font-size: 17px;
        line-height: 30px;
      }

      .success-info .greet {
        font-size: 17px;
        line-height: 30px;
      }

      .success-greet-box .title {
        font-size: 45px;
        line-height: 75px;
      }
      .success-greet-box #title_break {
        font-size: 45px;
        line-height: 75px;
      }

      .users-comment .faq-listing .header .title {
        font-size: 22px;
        line-height: 22px;
      }
      .users-comment .faq-listing .content p.info {
        font-size: 18px;
        line-height: 20px;
      
      }
      .users-comment .faq-listing .content {
        padding: 45px 20px 73px 20px;
     }

     .users-comment .faq-listing .header .right-info {
        font-size: 18px;
        line-height: 20px;
      }

      .meet-wrapper .title {
        margin-bottom: 35px;
      }

      .users-comment .faq-listing {
        margin-top: 35px;
      }
  }

  @media only screen and (max-width: 575px) {

    .success-greet-box .title {
        font-size: 35px;
        line-height: 63px;
      }
      .success-greet-box #title_break {
        font-size: 35px;
        line-height: 63px;
      }

      .success-info .info {
        font-size: 15px;
        line-height: 28px;
        max-width: 100%;
      }
      
      .success-info .greet {
        font-size: 15px;
        line-height: 28px;
        max-width: 100%;
      }

      .users-comment .faq-listing .header .title {
        font-size: 19px;
      }

      .users-comment .faq-listing .header .right-info {
        font-size: 15px;
        line-height: 18px;
      }

      .users-comment .faq-listing .content p.info {
        font-size: 16px;
      }

      .users-comment .faq-listing .content {
        height: 240px;
      }

      .users-comment .title {
        font-size: 25px;
        line-height: 35px;
      }

      .meet-wrapper .title {
        font-size: 25px;
        line-height: 35px;
      }
  }

  @media only screen and (max-width: 480px) {


  .users-comment .faq-listing .content p.info {
    font-size: 14px;
  }
  .users-comment .faq-listing .header .right-info {
    font-size: 11px;
    line-height: 14px;
  }
  .users-comment .faq-listing .header .title {
    font-size: 15px;
    line-height: 18px;
  }
}

  @media only screen and (max-width: 420px) {
  .success-greet-box .title {
    font-size: 30px;
    line-height: 50px;
  }
  .success-greet-box #title_break {
    font-size: 30px;
    line-height: 50px;
  }

  .success-info .info {
    font-size: 14px;
    line-height: 28px;
  }

  .success-info .greet {
    font-size: 14px;
    line-height: 28px;
  }

  .meet-wrapper .title {
    font-size: 23px;
    line-height: 33px;
  }

  .users-comment .title {
    font-size: 23px;
    line-height: 33px;
  }

}

@media only screen and (max-width: 375px) {

.success-greet-box .title {
    font-size: 25px;
    line-height: 38px;
  }
.success-greet-box #title_break {
    font-size: 25px;
    line-height: 38px;
}
}

#date_error_message{
    color: #cf1b18;
    display: block;
    margin: 5px 0 0 4px;
    font-size: 14px;
    line-height: 17px;
    margin-top: 15px;
}
.plan-expired{
    color: #B3A3FC;
}

.step-7-pane .thought-radio-block{
    width: 100%;
    justify-content:center;
}

.step-7-pane .icon{
    margin-bottom:20px;
}
@media only screen and (min-width: 1400px) {
    .hero-wrapper .head .arrow-icon {
        left: 445px;
    }
}

/* home form button */
.hero-wrapper .hero-btn{
    text-align: center;
    max-width: 550px;
}
/* new CSS */
/* chat flow css 29 Apr 2025*/
.cht-filter::-webkit-scrollbar{
    height:5px;
    width:5px;
  }
  .chatform-hero {
    padding-bottom: 66px;
  }
  
  .cht-frm-top {
    margin-bottom: 50px;
  }
  
  .cht-frm .cht-online {
    font-family: "roca-400";
    font-size: 24px;
    line-height: 35px;
    text-align: right;
    color: #79e40e;
  }
  
  .cht-ttl {
    font-family: "roca-400";
    font-size: 40px;
    line-height: 35px;
    color: #ffffff;
  }
  
  .cht-filter {
    margin-top: 63px;
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content:center;
  }
  
  .cht-filter .cht-flt-ttl {
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
  }
  
  .cht-filter .cht-flt-val {
    font-size: 11px;
    line-height: 35px;
    color: #100821;
    background-color: #B3A3FC;
    padding: 5px 15px;
    max-width: 132px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 29px;
    border-radius: 5px;
    width: 100%;
  }
  
  .cht-grp {
    margin-top: 63px;
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
  }
  
  .cht-grp .cht-ppl {
    width: calc(100% / 4 - (3 * 38px) / 4);
    background-color: #B3A3FC;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .cht-ppl .ppl-img img {
    width: 100%;
    height: auto;
  }
  
  .ppl-info {
    padding: 10px 15px 26px 15px;
  }
  
  .ppl-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .ppl-info .ppl-ttl h3 {
    font-family: "roca-400";
    font-size: 24px;
    line-height: 35px;
  }
  
  .ppl-sts p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 11px;
    line-height: 35px;
    color: #100821;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .ppl-sts p::before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background-color: red;
    border-radius: 50px;
  }
  
  .ppl-sts .online-txt::before {
    background-color: #79e40e;
  }
  
  .ppl-sts .busy-txt::before {
    background-color: #e4cb0e;
  }
  
  .ppl-sts .disconnect-txt::before {
    background-color: #e40e0e;
  }
  
  .ppl-card {
    font-size: 13px;
    line-height: 35px;
    color: #100821;
    margin-top: -10px;
  }
  
  .cht-btn {
    font-family: "roca-400";
    font-size: 15px;
    line-height: 35px;
    color: #fff;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 30px;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-online {
    background-color: #79e40e;
    border: 1px solid #79e40e;
  }
  .btn-busy {
    background-color: #e4cb0e;
    border: 1px solid #e4cb0e;
  }
  .btn-discont {
    background-color: #e40e0e;
    border: 1px solid #e40e0e;
  }
  
  .btn-online:hover,
  .btn-online:active,
  .btn-online:focus {
    background-color: #62b80b !important;
    border: 1px solid #62b80b !important;
  }
  
  .btn-busy:hover,
  .btn-busy:active,
  .btn-busy:focus {
    background-color: #bfa40b !important;
    border: 1px solid #bfa40b !important;
  }
  
  .btn-discont:hover,
  .btn-discont:active,
  .btn-discont:focus {
    background-color: #b30b0b !important;
    border: 1px solid #b30b0b !important;
  }
  
  .faq-chat-bg {
    background-image: url("../assets/images/chatform/faq-chat-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  
  .faq-cht {
    background-color: #E3DDFF;
    overflow: hidden;
  }
  
  .faq-chat-wrapper {
    padding-top: 68px;
    padding-bottom: 103px;
  }
  
  .faq-cht .faq-item .faq-title {
    font-family: "roca-400";
    font-size: 23px;
    line-height: 130%;
    color: #100821;
    background-color: #E3DDFF;
    padding: 12px 10px;
    margin-bottom: 13px;
  }
  
  .faq-cht .faq-item .faq-content {
    font-family: 'roca-400';
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: justify;
    color: #100821;
    max-width: 1012px;
  }
  
  .faq-cht-data {
    display: flex;
    flex-direction: column;
    gap: 39px;
  }
  
  .faq-dsg {
    mix-blend-mode: overlay;
    opacity: 30%;
  }
  
  .faq-dsg img {
    position: absolute;
  }
  
  .faq-dsg .design-1 {
    transform: scaleX(-1);
    width: 340px;
    height: 368px;
    position: absolute;
    top: 46px;
    left: -101px;
  }
  
  .faq-dsg .design-2 {
    transform: scaleX(-1);
    top: -28px;
    right: -22px;
  }
  
  .faq-dsg .design-3 {
    bottom: -90px;
    right: -35px;
  }
  
  .faq-dsg .design-4 {
    bottom: -2px;
    left: -149px;
    transform: scaleX(-1);
  }
  
  .chat-modal .modal-content {
    background-color: #E3DDFF;
  }
  
  .chat-modal .modal-title {
    font-family: "roca-400";
    font-size: 30px;
    line-height: 34px;
    color: var(--primary-clr);
  }
  
  .chat-form-main .birth {
    display: flex;
    gap: 30px;
  }
  
  .chat-frm-ttl {
    font-family: "roca-400";
    font-size: 14px;
    line-height: 34px;
    color: var(--primary-clr);
  }
  
  .chat-modal .modal-header {
    border: 0;
  }
  
  .chat-form .select2-results__options li {
    text-align: center;
    color: var(--primary-clr);
  }
  
  .chat-form
    .select2-container--default
    .select2-results__option[aria-selected="true"] {
    background: white;
    color: var(--primary-clr);
  }
  
  .chat-form
    .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-clr);
    color: white;
  }
  
  .chat-form .date-fields .input-block {
    min-width: 138px;
    max-width: 138px;
    width: 100%;
  }
  
  .chat-form .date-fields, .chat-block .hrs-fields{
      margin-top:-5px;
  }
  
  .ui-timepicker-container {
    z-index: 10000 !important;
  }
  
  .chat-block .minute-separator {
    left: 33%;
    top: 50%;
  }
  
  
  
  .chat-form input {
    background: #1008211a;
    border-color: var(--primary-clr);
    color: black;
  }
  
  .chat-form .text-block {
    margin-top: 0;
  }
  
  .chat-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .chat-form input::placeholder {
    color: #ffffff;
  }
  
  .chat-form .gender-radios {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .chat-form .gender-radios label {
  margin-bottom:0 !important;
    font-size: 14px;
    color: var(--primary-clr); /* default color */
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 4px;
    align-items: center;
  }
  
  .chat-form .gender-radios input[type="radio"] {
    display: none; /* hide default radio */
  }
  
  .chat-form .radio-btn {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
  }
  
  .chat-form .radio-btn::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #100821;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
  }
  
  .chat-form .gender-radios input[type="radio"]:checked + .radio-btn::after {
    transform: translate(-50%, -50%) scale(1);
  }
  .chat-form .gender-radios input[type="radio"]:checked + .radio-btn + span,
  .gender-radios input[type="radio"]:checked + .radio-btn + br + span {
    color: #100821;
  }
  
  .chat-form .time-blk {
    margin-top: -5px;
  }
  
  .chat-form-btn {
    margin-top: 30px;
    background-color: var(--secondary-clr);
    width:100%;
    transition: all 0.3s ease-in-out;
  }
  
  .frm-blk:not(:last-child){
    margin-bottom:10px;
  }
  
  .chat-form-btn:hover {
    color: #000000;
    background-color: #B3A3FC;
  }
  /* media-queries */
  @media only screen and (min-width: 1400px) {
    .faq-dsg .design-1 {
      height: 407px;
      position: absolute;
      top: 5px;
      left: -101px;
    }
  
    .faq-dsg .design-2 {
      top: -28px;
      right: -22px;
    }
  
    .faq-dsg .design-3 {
      bottom: -90px;
      right: -35px;
    }
  
    .faq-dsg .design-4 {
      bottom: -2px;
      left: -149px;
    }
  }
  
  @media only screen and (max-width: 1199px) {
    .ppl-info .ppl-ttl h3 {
      font-size: 20px;
      line-height: 30px;
    }
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 4 - (3 * 30px) / 4);
    }
  }
  
  @media only screen and (max-width: 991px) {
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 3 - (2 * 30px) / 3);
    }
  
    .cht-ttl {
      font-size: 34px;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 2 - (1 * 30px) / 2);
    }
  
    .cht-ttl {
      font-size: 28px;
    }
  
    .cht-frm .cht-online {
      font-size: 20px;
      line-height: 30px;
    }
  
    .cht-frm-top {
      margin-bottom: 40px;
    }
  
    .cht-filter {
      margin-top: 40px;
      overflow: auto;
      justify-content:start;
    }
  
    .cht-grp {
      margin-top: 50px;
    }
  
    .faq-cht .faq-item .faq-title {
      font-size: 18px;
    }
  
    .faq-cht .faq-item .faq-content {
      font-size: 16px;
      line-height: 140%;
    }
  
    .faq-dsg .design-1 {
      width: auto;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 575px) {
    .cht-frm .cht-online {
      font-size: 18px;
      line-height: 26px;
    }
  
    .cht-ttl {
      font-size: 24px;
    }
  
    .cht-filter .cht-flt-ttl {
      font-size: 15px;
    }
  
    .ppl-info .ppl-ttl h3 {
      font-size: 18px;
      line-height: 28px;
    }
  
    .faq-cht .faq-item .faq-title {
      font-size: 16px;
    }
  
    .faq-cht .faq-item .faq-content {
      font-size: 15px;
      line-height: 140%;
    }
  
    .faq-cht-data {
      gap: 30px;
    }
  
    .chat-block .date-fields {
      flex-direction: column;
      width: 100%;
      gap: 10px;
    }
  
    .chat-form .date-fields .input-block {
      min-width: 100%;
      max-width: 100%;
      width: 100%;
    }
  
    .chat-form .hrs-fields .date-picker {
      max-width: 100%;
      width: 100%;
    }
  
    .chat-block .minute-separator {
      left: 50%;
      top: 50%;
    }
  
    .chat-form .gender-radios {
      gap: 10px;
    }
  
    .cmn-btn {
      font-size: 16px;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .cht-grp {
      gap: 15px;
    }
  
    .cht-grp .cht-ppl {
      width: calc(100% / 2 - (1 * 15px) / 2);
    }
  
    .ppl-info .ppl-ttl h3 {
      font-size: 16px;
      line-height: 28px;
    }
  
    .ppl-card {
      font-size: 12px;
      line-height: 35px;
    }
  
    .cht-btn {
      margin-top: 20px;
      font-size: 14px;
    }
  
    .cht-frm-top {
      margin-bottom: 30px;
      margin-top: 20px;
    }
  
    .cht-filter {
      margin-top: 30px;
    }
  
    .cht-grp {
      margin-top: 40px;
    }
  
    .faq-dsg img {
      width: 200px;
      height: 200px;
    }
  
    .faq-dsg .design-1 {
      width: 200px;
      height: 200px;
      top: 4px;
      left: -56px;
    }
  
    .faq-dsg .design-2 {
      transform: scaleX(-1);
      top: -12px;
      right: -5px;
    }
  
    .faq-dsg .design-3 {
      bottom: -43px;
      right: -7px;
    }
    .faq-dsg .design-4 {
      bottom: 48px;
      left: -7px;
    }
  
    .chat-form .gender-radios label {
  
      font-size: 12px;
  
    }
    .chat-form .gender-radios {
      gap:7px;
    }
  
    .chat-form .radio-btn {
      width: 16px;
      height: 16px;
    }
  
    .chat-form .radio-btn::after {
   
      width: 8px;
      height: 8px;
    }
  
    .chat-form .gender-radios{
      flex-wrap: wrap;
    }
  
  }
  
  @media only screen and (max-width: 420px) {
    .cht-grp {
      gap: 30px;
      padding-inline: 30px;
    }
  
    .cht-grp .cht-ppl {
      width: 100%;
    }
  }
   /* 29/04/2024 start  */
  /*chartform checkout css */
  
  .cht-chkout-pg::after{
    background:none;
  }
  
  .cht-chkout-pg .pt-hrBg{
    background:none;
  }
  
  .cht-chkout-pg::before{
    background:none;
  }
  
  .cht-chkout-pg .main-step-box{
    display: block;
    padding-top:2px;
  }
  
  .cht-chkout-pg .wlc-blk{
    background-color: #B3A3FC;
    border-radius:20px;
    padding: 16px 36px 10px 44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  .cht-chkout-pg .wlm-off h2{
    font-family: "roca-400";
    font-size: 30px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
  }
  
  .cht-chkout-pg .wlm-off .text{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 18px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
  
  }
  .cht-chkout-pg .timer{
    font-family: "roca-400";
    font-size: 30px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
    width: 206px;
    text-align: end;
  }
  
  
  .wlc-off-inner{
    display:flex;
    align-items:center;
  }
  
  .pay-tl{
  font-family:'roca-400';
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 0%;
  color: #100821;
  text-align:center;
  }
  
  .cht-chkout-pg .cht-pay-blk{
    background-color: #B3A3FC;
    border-radius:20px;
    margin-top: 20px;
    padding:31px 22px 37px 22px;
  }
  
  .cht-pay-blk .pay-row{
    display: flex;
    gap:13px;
    margin-top: 42px;
  }
  
  .cht-pay-blk .pay-left-col{
    display: flex;
    flex-direction: column;
    gap:18px;
    /* flex: 1; */
  }
  
  .cht-pay-blk .pay-right-col{
    max-width: 452px;
    width: 100%;
  }
  
  .cht-pay-blk .right-col{
    max-width: 100%;
    width: 100%;
  }
  
  
  .pay-left-top .chk-pay-cont{
    background-color: var(--primary-clr);
    padding-top: 17px;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-right: 2px;
  }
  
  
  .chk-pay-cont .title{
  font-family:'roca-400';
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 0%;
  color:#B3A3FC;
  display: flex;
  align-items: center;
  gap:20px;
  }
  
  .chk-pay-cont .title::after{
    content:" ";
    width:14px;
    height:14px;
    /* background-color:#79E40E; */
    border-radius:50px;
    display:inline-block;
    margin-top: -4px;
  
  }
  
  .chk-pay-cont .service-card{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 0%;
    color: #B3A3FC;
  }
  
  .chk-pay-cont .desc{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #ffffff;
    margin-top:4px;
    margin-bottom:15px;
  }
  
  
  
  
  
  
  .cht-pay-blk .pay-left-top{
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--primary-clr);
  }
  
  .cht-pay-blk .chk-pay-img{
    height: 100%;
    width: 100%;
  }
  
  .cht-pay-blk .chk-pay-img img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  .pay-left-mid{
    display:flex;
    gap:3px;
  }
  
  
  .pay-left-mid .chk-pay-info{
    background-color: #100821;
    padding:25px 19px;
    border-radius:20px;
  }
  
  
  
  .pay-left-mid .chk-pay-info .chk-mid-title{
    font-family:'roca-400';
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: center;
    color:#B3A3FC;
    margin-bottom:22px;
    
  }
  .pay-left-mid .chk-pay-info .chk-mid-descp{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    color:#ffffff;
    max-width: 261px;
    margin:auto;
  }
  
  .pay-left-bot .agenda-top  h3{
    font-family:'roca-400';
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: center;
    color:#B3A3FC;
  
  }
  
  .pay-left-bot .agenda-top p{
  font-family: 'roca-400';
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
  color:#ffffff;
  }
  
  .pay-left-bot{
    background:#100821;
    border-radius:20px;
    padding:25px 39px 30px 39px;
    flex-grow: 1;
  }
  
  .chat-table table {
    color:#ffffff;
    margin-top:30px;
    width: 100%;
  }
  
  
  
  .chat-table td {
  font-family: 'roca-400';
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  position:relative;
  }
  
  .chat-table .cht-table-ttl {
    font-family:'roca-400';
    font-size: 13px;
    letter-spacing: 0%;
    text-align: left;
    color:#B3A3FC;
    
    }
  
    .chat-table{
      position:relative;
      overflow: hidden;
    }
  
    .chat-table .border-ln:not(:first-child)::before{
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #ffffff;
      left:0;
      top:0;
    }
  
    /* .empty-cell {
      background: transparent;
      color: transparent;
      pointer-events: none;
    
    } */
  
  
    .calc-count{
      margin-top: 25px;
      border-bottom:1px solid #000;
      padding-bottom: 11px;
    }
  
    .calc-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
  
    .cal-txt{
      font-family:'roca-400';
      font-size: 15px;
      line-height: 34px;
      letter-spacing: 0%;
    }
  
    .cal-txt-red{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 34px;
      letter-spacing: 0%;
    
      color:#FF002A;
    }
  
    .cal-amt{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 34px;
      letter-spacing: 0%;
      text-align: right;
      color: #100821;
  
    }
  
    .pay-right-col .download_btn{
      background:#79E40E;
       border:2px solid #79E40E;
       transition: 0.2s ease;
  
    }
  
    .pay-right-col .download_btn:hover{
      background:transparent;
      color:#79E40E;
    }
  
    .pay-right-col .pay-trust{
      font-family: 'roca-400';
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      letter-spacing: 0%;
      text-align: center;
      color:#100821;
  
    }
  
    .pay-right-col .right-col{
      padding: 1px 41px 46px;
    }
  
    .right-col-btm{
      border-radius:10px;
      background-color: #fff;
      margin-top: 8px;
      padding-inline:41px;
      padding-top: 9px;
      padding-bottom: 17px;
      flex:1;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }
  
    .right-col-btm .pedir-btn{
    background:#79E40E;
    border:2px solid #79E40E;
    transition:0.2s ease;
    color: #fff;
    font-family: PP Acma;
    font-weight: 900;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    width: 100%;
    padding-top: 11px;
    padding-bottom: 10px;
    border-radius:7px;
    height: 50px;
    }
  
    .right-col-btm .pedir-btn:hover{
      background:transparent;
      color:#79E40E;
    }
  
    .right-col-btm p{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 35px;
      letter-spacing: 0%;
      text-align: center;
      padding-bottom:9px;
    }
  
  
  
  /* 
  Birth Block */
  .checkout-birth-info .inner-row::after{
    background: none;  
  }
  
  .checkout-birth-info .tab-content-box{
    padding:0;
  }
  
  
  
  .checkout-birth-info .inner-row {
    background:var(--primary-clr);
    padding-top:95px;
    padding-bottom:77px;
    position: relative;
  }
  
  .checkout-birth-info .chart-info-listing li .content .title{
  text-align:center;
  }
  
  
  .checkout-birth-info .chart-info-listing li .content .title,
  .checkout-birth-info .chart-info-listing li .content .info,
  .checkout-birth-info .sec-title
  {
    color:#B3A3FC;
  }
  
  .checkout-form-faq{
    background-color:var(--secondary-clr);
  }
  
  .checkout-form-faq .sec-title{
    color:var(--primary-clr);
  }
  
  .checkout-form-faq .faq-content-box::before{
    content: '';
    position: absolute;
    inset:0;
    background-image: url(../assets/images/chatform/chat-checkout-faq-bg.svg);
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-position: center;
  }
  
  .chat-chkout-comment .user-comment-box{
    background: var(--primary-clr);
  }
  
  .checkout-form-faq  .faq-item .faq-title{
    margin-bottom:26px;
  }
  
  .checkout-form-faq .faq-cht-data {
    gap:52px;
  }
  
  .checkout-form-faq .faq-cht-data {
    gap:30px;
  }
  
  .chat-chkout-comment .user-comment-box::before{
    background:none;
  }
  
  .chat-chkout-comment  .user-comment-box{
    padding-top:72px;
    padding-bottom:89px;
  }
  
  .chat-chkout-comment .sec-title{
    color:var(--secondary-clr);
    margin-bottom:67px;
  }
  
  
  .chat-chkout-comment .rating-wrapper {
    margin-top: -18px;
    margin-bottom: 24px;
  }
  
  .chat-chkout-comment button#pay_btn_2{
    margin-top:67px;
  }
  
  
  
  .pay-left-top .subs{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 10px;
    line-height: 35px;
    letter-spacing: 0%;
    color: #fff;
    display: flex;
    align-items: center;
    gap:8px;
  }
    
  .right-cht{
    display:flex;
    flex-direction:column;
    height: 100%;
  }
  .pay-right-col form{
    height: 100%;
  }
  
  @media only screen and (min-width: 1400px) {
  .chat-chkout-comment button#pay_btn_2 {
    min-height: 77px;
    font-size: 35px;
  }
  
  
  .chat-table  td:not(:first-child):not(:last-child)::after {
    margin-left: 20px;
  }
  
  .chat-chkout-comment .faq-listing .header .title {
    font-size: 35px;
  }
  
  .chk-pay-info1{
    min-width: 301px;
  }
  
  .chk-pay-info2{
    width: 100%;
  }
  
  .chat-table td {
    font-size: 13px;
    }
    
  .cht-chkout-pg .wlm-off h2{
    font-size: 36px;
    line-height: 37px;
  
  }
  
  .cht-chkout-pg .wlm-off .text{
    font-size: 18px;
    line-height: 35px;
  }
  
  .cht-chkout-pg .timer{
    font-size: 36px;
    line-height: 37px;
    width: 226px;
  }
  
  .pay-tl{
    font-size: 36px;
    line-height: 37px;
    }
  
    
  
  .pay-left-top .chk-pay-cont{
    padding-top: 17px;
    padding-left: 45px;
    padding-bottom: 5px;
  }
  
  }
  
  @media only screen and (max-width: 1199px) {
    .cht-chkout-pg .wlc-blk {
       padding:16px 20px 10px 20px;
    }
  
    .cht-chkout-pg .wlm-off h2 {
      font-size: 24px;
      line-height: 37px;
    }
  
  
    .cht-chkout-pg .wlm-off .text {
      font-size: 16px;
      line-height: 27.8px;
    }
  
    .cht-chkout-pg .timer {
      font-size: 24px;
      line-height: 37px;
      width: 140px;
    }
    .pay-tl {
      font-size: 26px;
      line-height: 30px;
    }
  
    .cht-pay-blk .pay-row{
      flex-direction: column;
    }
  
    .pay-left-mid .chk-pay-info {
      width: calc(100% / 2 - (1 * 3px) / 2);
    }
  
  
    .chat-table td {
      font-size: 13px;
      line-height: 15px;
    }
  
   
  
    .cht-pay-blk .pay-right-col {
      max-width: 100%;
      width: 100%;
    }
  
    .cht-pay-blk .pay-row {
      gap:18px;
    }
  
    .cht-chkout-pg .tab-content-box{
      padding: 0px; 
    }
  
    .checkout-birth-info .chart-content-box h3.heading{
      font-size: 30px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .title{
      font-size: 30px;
      line-height: 35px;
    }
  
    .pay-left-mid .chk-pay-info,
    .pay-left-bot{
      border-radius: 12px
    }
  }
  
  
  @media only screen and (max-width: 991px) {
    .chat-chkout-comment .faq-listing .header .title {
    font-size: 30px;
  }
  .cht-chkout-pg .wlc-blk{
    flex-wrap: wrap;
  }
  
  .cht-chkout-pg .wlc-blk .wlm-off{
  width:100%;
  }
  
  .cht-chkout-pg .timer {
    margin-left: auto;
  }
  
  .pay-left-top .chk-pay-cont{
    padding-right: 5px;
  }
  
  .cht-pay-blk .chk-pay-img {
    height: auto;
    width: 100%;
  }
  
  }
  @media only screen and (max-width: 767px) {
    .checkout-form-faq .faq-content-box{
        padding:70px 24px;
    
    }
    .chat-chkout-comment .faq-listing .header .title {
      font-size: 25px;
      line-height:26px;
    }
  
    .chat-chkout-comment .faq-listing .header .right-info {
      font-size: 16px;
    }
  
    .chat-chkout-comment .rating-wrapper {
      margin-top: 0;
    }
  
    .chat-chkout-comment .faq-listing .content p.info {
      font-size: 16px;
      line-height: 22px;
    }
  
    .chat-chkout-comment  .user-comment-box{
      padding-block:70px;
    }
  
    .faq-content-box .sec-title {
      margin-bottom: 40px;
    }
  
    .chat-chkout-comment .sec-title{
      margin-bottom:40px;
    }
  
    .checkout-form-faq .faq-item .faq-title {
      margin-bottom: 15px;
    }
  
    .chat-chkout-comment button#pay_btn_2 {
      margin-top: 50px;
      min-height: 50px;
      min-width: 520px;
      font-size: 20px;
    }
  
    .pay-tl {
      font-size: 24px;
      line-height: 30px;
    }
  
    .chk-pay-cont .title {
      font-size:20px
    }
  
    .pay-left-mid .chk-pay-info .chk-mid-title{
      font-size: 20px;
      margin-bottom: 15px;
    }
  
    .pay-left-bot .agenda-top h3 {
      font-size: 20px;
      line-height: 35px;
    }
    
    .pay-left-mid {
      gap: 18px;
      flex-direction: column;
    }
    .pay-left-mid .chk-pay-info {
      width: 100%;
    }
  
    .cht-pay-blk .pay-row {
      margin-top: 30px;
    }
  
    .pay-left-mid .chk-pay-info .chk-mid-descp{
      max-width:100%;
    }
  
    .chat-table .cht-table-ttl {
      font-size: 13px;
    }
  
    .chat-table td {
      font-size: 10px;
      line-height: 15px;
    }
  
  
    .chat-table table {
      margin-top: 15px;
    }
  
    .pay-left-bot {
      padding:25px 20px 30px 20px;
    }
  
    .cht-pay-blk .right-col {
      padding: 1px 0 20px;
    }
  
    .cht-pay-blk .pay-form-box {
      padding:20px;
    }
  
    .right-col-btm p {
      font-size: 18px;
      line-height: 32px;
    }
  
    .checkout-birth-info .chart-content-box h3.heading{
      
      font-size: 26px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .title {
      font-size: 26px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .info {
      font-size: 16px;
      line-height: 24px;
    }
  
    .chart-info-listing .content {
      gap: 12px;
    }
  
     .checkout-birth-info .inner-row{
      padding-top: 70px;
      padding-bottom: 70px;
    }
  }
  
  @media only screen and (max-width: 575px) {
  .chat-chkout-comment .faq-listing .header .title {
    font-size: 19px;
    line-height: 26px;
  }
  
  .chat-chkout-comment .rating-wrapper img {
    max-width: 22px;
  }
  .chat-chkout-comment .rating-wrapper {
    margin-bottom: 14px;;
  }
  
  .chat-chkout-comment .faq-listing .content p.info {
    font-size: 15px;
    line-height: 22px;
  }
  
  .chat-chkout-comment .faq-listing .header .right-info {
    font-size: 15px;
    line-height: 19px;
  }
  
  .chat-chkout-comment button#pay_btn_2 {
    margin-top: 45px;
    min-height: 48px;
    min-width: 100%;
    font-size: 18px;
  }
  
  .chat-chkout-comment .faq-listing li:not(:last-of-type) {
    margin-bottom: 30px;
  }
  
  .cht-chkout-pg .wlm-off h2 {
    font-size: 20px;
    line-height: 32px;
  }
  
  .cht-chkout-pg .wlm-off .text {
    font-size: 13px;
    line-height: 20px;
  }
  
  .cht-chkout-pg .timer {
    font-size: 18px;
    line-height: 37px;
  }
  
  .pay-tl {
    font-size: 20px;
    line-height: 26px;
  }
  
  .cht-pay-blk .pay-row {
    margin-top: 20px;
  }
  
  .chk-pay-cont .title {
    font-size: 18px;
    gap: 12px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .pay-left-bot .agenda-top h3 {
    font-size: 18px;
    line-height: 35px;
  }
  
  .chk-pay-cont .title::after {
    width: 10px;
    height: 10px;
  }
  
  .chk-pay-cont .desc {
    font-size: 11px;
    margin-bottom: 5px;
  }
  .chk-pay-cont .service-card {
    font-size: 11px;
    line-height: 15px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-descp {
    font-size: 11px;
    line-height: 15px;
  }
  
  .pay-left-bot .agenda-top p {
    font-size: 11px;
    line-height: 18px;
  }
  
  .chat-table .cht-table-ttl {
    font-size: 11px;
  }
  
  .chat-table td {
    font-size: 10px;
    line-height: 15px;
    padding:10px 4px;
  }
  
  
  .cht-chkout-pg .total-payout-box {
    font-size: 22px;
    line-height: 34px;
  }
  
  .cal-amt {
    font-size: 18px;
    line-height: 28px;
  }
  
  .cal-txt-red {
    font-size: 18px;
    line-height: 28px;
  }
  
  .cal-amt {
    font-size: 18px;
    line-height: 28px;
  }
  
  .right-col-btm p {
    font-size: 16px;
    line-height: 32px;
  }
  
  .faq-content-box .sec-title {
    margin-bottom: 30px;
  }
  
  .chat-chkout-comment .sec-title{
    margin-bottom:30px;
  }
  }
  
  @media only screen and (max-width: 480px) {
  .checkout-form-faq .faq-content-box {
    padding:50px 24px;
  }
  
  .chat-chkout-comment  .user-comment-box{
    padding-block:50px;
  }
  
  .cht-chkout-pg .tab-content-box .container{
    padding:0;
  
  }
  
  .cht-chkout-pg .wlc-blk {
    padding:10px 10px 10px 10px;
    border-radius:12px;
  }
  
  .cht-chkout-pg .cht-pay-blk {
    padding: 15px 10px 15px 10px;
    border-radius:12px;
  }
  
  .right-col-btm {
    padding-inline:10px;
    padding-top: 9px;
    padding-bottom: 15px;
  }
  
  .cht-pay-blk .pay-form-box {
    padding:10px;
  }
  
  .pay-form-box .form-inner-wrapper{
    padding-block:0;
  }
  
  .cht-pay-blk .right-col {
    padding:0;
  }
  
  .cht-chkout-pg .wlm-off h2 {
    font-size: 16px;
    line-height: 26px;
  }
  
  .cht-chkout-pg .timer {
    font-size: 16px;
    line-height: 30px;
    width: 95px;
  }
  .cht-chkout-pg .wlm-off .text {
    font-size: 12px;
    line-height: 18px;
  }
  
  .pay-tl {
    font-size: 16px;
    line-height: 24px;
  }
  .chk-pay-cont .title {
    font-size: 15px;
    gap:10px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .pay-left-bot .agenda-top h3 {
    font-size: 15px;
    line-height: 30px;
  }
  
  
  
  .cal-txt {
    font-size: 13px;
    line-height: 34px;
  }
  
  .cal-amt {
    font-size: 15px;
    line-height: 28px;
  }
  
  .cal-txt-red {
    font-size: 16px;
    line-height: 28px;
  }
  .cht-chkout-pg .total-payout-box {
    font-size: 20px;
    line-height: 34px;
  }
  
  .pay-right-col .download_btn{
    font-size:16px;
  }
  
  .pay-left-top .chk-pay-cont {
    padding-left: 10px;
  }
  
  .right-col-btm .pedir-btn {
    font-size: 16px;
    height: auto;
    padding:11px 50px;
  }
  
   .checkout-birth-info .inner-row{
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .checkout-birth-info .chart-content-box h3.heading {
    font-size: 25px;
    line-height: 34px;
  }
  
  .checkout-birth-info .chart-info-listing li .content .title {
    font-size: 25px;
    line-height: 34px;
  }
  
  .checkout-birth-info .chart-info-listing li .content .info {
    font-size: 15px;
    line-height: 22px;
  }
  }
  
  
  @media only screen and (max-width: 480px) {
  .checkout-birth-info .chart-info-listing li .content .title br{
    display:none;
  }
  
  .chat-table{
    overflow: auto;
  }
  .chat-table table{
    text-wrap: nowrap;
  }
  } 
  @media only screen and (max-width:375px){
    .cht-pay-blk .pay-left-top{
      flex-direction: column;
    }
  }
  
  
    /* 29/04/2024 end */
  
  
  
  
   .chck-stories-content-box {
    padding: 32px 38px;
    position: relative;
  }
  
  .check-stories {
    background-color: var(--secondary-clr);
  }
  
  .chck-stories-content-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/chatform/chat-checkout-faq-bg.svg);
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-position: center;
  }
  
  .head-col {
    max-width: 621px;
    margin-inline: auto;
    color: var(--primary-clr);
  }
  
  .check-stories .rt-text {
    font-size: 13px;
    font-family: Montserrat;
  }
  
  .rating-headline {
    display: flex;
    align-items: center;
    gap: 21px;
    line-height: 39px;
    justify-content: center;
    margin-bottom: 19px;
  
  }
  
  .star-box {
    width: fit-content;
    display: flex;
    gap: 10px;
  }
  
  .star-box img {
    max-width: 30px;
  }
  
  .vdoCol {
    max-width: 1070px;
    margin-inline: auto;
    margin-top: 40px;
  }
  
  .vdoCol .vcard-col {
    display: flex;
    gap: 16px;
  
  }
  
  .vdoCol .vcard-col .vcard-item {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-bottom: calc(43% - 6px);
    /* cursor: pointer; */
  }
  
  .vdoCol .vcard-col .vcard-item::before {
    content: '';
    inset: 0;
    position: absolute;
    background: #000;
    z-index: 1;
    opacity: 0;
    transition: .2s linear;
  }
  
  .vdoCol .vcard-col .vcard-item:hover::before {
    /* opacity: 20%; */
  }
  
  /* .vcard-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 54px;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: url(../images/vplay-icon.svg) no-repeat;
    background-size: contain;
    z-index: 1;
  } */
  .videplay-icon {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 54px;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: url(../images/vplay-icon.svg) no-repeat;
    background-size: contain;
    z-index: 1;
  }
  /* video-new */
  .thumbart {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  
  .thumbart img {
    object-fit: cover;
    height: 101%;
    position: absolute;
    width: 100%;
  }
  
  @media screen and (max-width:767px) {
    .vdoCol .vcard-col {
      flex-wrap: wrap;
    }
  
    .rating-headline {
      flex-wrap: wrap;
      gap: 15px;
    }
  
    .vdoCol .vcard-col .vcard-item {
      padding-bottom: calc(87% - 6px);
      max-width: calc(50% - 8px);
      flex-basis: calc(50% - 8px);
    }
  
    .vdoCol {
      max-width: 1070px;
      margin-inline: auto;
      margin-top: 25px;
    }
  
    .check-stories .rt-text {
      line-height: normal;
    }
  }
  
  @media screen and (max-width:575px) {
    /* .vcard-item::after {
      --sz: 8vw;
    } */
    .videplay-icon {
      --sz: 50px;
    }
  
    .chck-stories-content-box::before {
      display: none;
    }
  
    .videoModal .modal-body {
      position: relative;
      padding-bottom: 100%;
    }
  
    .videoModal .modal-body .video-content {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
    }
  }
  
  .cht-filter::-webkit-scrollbar{
    height:5px;
    width:5px;
  }
  
  .vcard-col ::-webkit-scrollbar{
    height:5px;
    width:5px;
  }
  
  .chatform-hero {
    padding-bottom: 66px;
  }
  
  .cht-frm-top {
    margin-bottom: 50px;
  }
  
  .cht-frm .cht-online {
    font-family: "roca-400";
    font-size: 24px;
    line-height: 35px;
    text-align: right;
    color: #79e40e;
  }
  
  .cht-ttl {
    font-family: "roca-400";
    font-size: 40px;
    line-height: 35px;
    color: #ffffff;
  }
  
  .cht-filter {
    margin-top: 63px;
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content:center;
  }
  
  .cht-filter .cht-flt-ttl {
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
  }
  
  .cht-filter .cht-flt-val {
    font-size: 11px;
    line-height: 35px;
    color: #100821;
    background-color: #B3A3FC;
    padding: 5px 15px;
    max-width: 132px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 29px;
    border-radius: 5px;
    width: 100%;
  }
  
  .cht-grp {
    margin-top: 63px;
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
  }
  
  .cht-grp .cht-ppl {
    width: calc(100% / 4 - (3 * 38px) / 4);
    background-color: #B3A3FC;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .cht-ppl .ppl-img img {
    width: 100%;
    height: auto;
  }
  
  .ppl-info {
    padding: 10px 15px 26px 15px;
  }
  
  .ppl-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .ppl-info .ppl-ttl h3 {
    font-family: "roca-400";
    font-size: 24px;
    line-height: 35px;
  }
  
  .ppl-sts p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 11px;
    line-height: 35px;
    color: #100821;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .ppl-sts p::before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background-color: red;
    border-radius: 50px;
  }
  
  .ppl-sts .online-txt::before {
    background-color: #79e40e;
  }
  
  .ppl-sts .busy-txt::before {
    background-color: #e4cb0e;
  }
  
  .ppl-sts .disconnect-txt::before {
    background-color: #e40e0e;
  }
  
  .ppl-card {
    font-size: 13px;
    line-height: 35px;
    color: #100821;
    margin-top: -10px;
  }
  
  .cht-btn {
    font-family: "roca-400";
    font-size: 15px;
    line-height: 35px;
    color: #fff;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 30px;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-online {
    background-color: #79e40e;
    border: 1px solid #79e40e;
  }
  .btn-busy {
    background-color: #e4cb0e;
    border: 1px solid #e4cb0e;
  }
  .btn-discont {
    background-color: #e40e0e;
    border: 1px solid #e40e0e;
  }
  
  .btn-online:hover,
  .btn-online:active,
  .btn-online:focus {
    background-color: #62b80b !important;
    border: 1px solid #62b80b !important;
  }
  
  .btn-busy:hover,
  .btn-busy:active,
  .btn-busy:focus {
    background-color: #bfa40b !important;
    border: 1px solid #bfa40b !important;
  }
  
  .btn-discont:hover,
  .btn-discont:active,
  .btn-discont:focus {
    background-color: #b30b0b !important;
    border: 1px solid #b30b0b !important;
  }
  
  .faq-chat-bg {
    background-image: url("../images/chatform/faq-chat-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  
  .faq-cht {
    background-color: #E3DDFF;
    overflow: hidden;
  }
  
  .faq-chat-wrapper {
    padding-top: 68px;
    padding-bottom: 103px;
  }
  
  .faq-cht .faq-item .faq-title {
    font-family: "roca-400";
    font-size: 23px;
    line-height: 130%;
    color: #100821;
    background-color: #E3DDFF;
    padding: 12px 10px;
    margin-bottom: 13px;
  }
  
  .faq-cht .faq-item .faq-content {
    font-family: 'roca-400';
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: justify;
    color: #100821;
    max-width: 1012px;
  }
  
  .faq-cht-data {
    display: flex;
    flex-direction: column;
    gap: 39px;
  }
  
  .faq-dsg {
    mix-blend-mode: overlay;
    opacity: 30%;
  }
  
  .faq-dsg img {
    position: absolute;
  }
  
  .faq-dsg .design-1 {
    transform: scaleX(-1);
    width: 340px;
    height: 368px;
    position: absolute;
    top: 46px;
    left: -101px;
  }
  
  .faq-dsg .design-2 {
    transform: scaleX(-1);
    top: -28px;
    right: -22px;
  }
  
  .faq-dsg .design-3 {
    bottom: -90px;
    right: -35px;
  }
  
  .faq-dsg .design-4 {
    bottom: -2px;
    left: -149px;
    transform: scaleX(-1);
  }
  
  .chat-modal .modal-content {
    background-color: #E3DDFF;
  }
  
  .chat-modal .modal-title {
    font-family: "roca-400";
    font-size: 30px;
    line-height: 34px;
    color: var(--primary-clr);
  }
  
  .chat-form-main .birth {
    display: flex;
    gap: 30px;
  }
  
  .chat-frm-ttl {
    font-family: "roca-400";
    font-size: 14px;
    line-height: 34px;
    color: var(--primary-clr);
  }
  
  .chat-modal .modal-header {
    border: 0;
  }
  
  .chat-form .select2-results__options li {
    text-align: center;
    color: var(--primary-clr);
  }
  
  .chat-form
    .select2-container--default
    .select2-results__option[aria-selected="true"] {
    background: white;
    color: var(--primary-clr);
  }
  
  .chat-form
    .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-clr);
    color: white;
  }
  
  .chat-form .date-fields .input-block {
    min-width: 138px;
    max-width: 138px;
    width: 100%;
  }
  
  .chat-form .date-fields, .chat-block .hrs-fields{
      margin-top:-5px;
  }
  
  .ui-timepicker-container {
    z-index: 10000 !important;
  }
  
  .chat-block .minute-separator {
    left: 33%;
    top: 50%;
  }
  
  
  .chat-form input {
    background: #1008211a;
    border-color: var(--primary-clr);
    color: black;
  }
  
  .chat-form .text-block {
    margin-top: 0;
  }
  
  .chat-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .chat-form input::placeholder {
    color: #ffffff;
  }
  
  .chat-form .gender-radios {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .chat-form .gender-radios label {
  margin-bottom:0 !important;
    font-size: 14px;
    color: var(--primary-clr); /* default color */
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 4px;
    align-items: center;
  }
  
  .chat-form .gender-radios input[type="radio"] {
    display: none; /* hide default radio */
  }
  
  .chat-form .radio-btn {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
  }
  
  .chat-form .radio-btn::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #100821;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
  }
  
  .chat-form .gender-radios input[type="radio"]:checked + .radio-btn::after {
    transform: translate(-50%, -50%) scale(1);
  }
  .chat-form .gender-radios input[type="radio"]:checked + .radio-btn + span,
  .gender-radios input[type="radio"]:checked + .radio-btn + br + span {
    color: #100821;
  }
  
  .chat-form .time-blk {
    margin-top: -5px;
  }
  
  .chat-form-btn {
    margin-top: 30px;
    background-color: var(--secondary-clr);
    width:100%;
    transition: all 0.3s ease-in-out;
    color: black;
  }
  
  .frm-blk:not(:last-child){
    margin-bottom:10px;
  }
  
  .chat-form-btn:hover {
    color: black;
    background-color: var(--secondary-clr);
  }
  
  .timeup-modal .time-title{
  text-align:center;
  margin-bottom:5px;
  }
  
  .timeup-modal button{
   font-family: 'roca-400';
  font-weight: 500;
  font-size: 14px;
  line-height: 12px;
  letter-spacing: 0%;
  text-align: center;
  width: calc(50% - 30px);
  height: 40px;
  transition: all 0.2s ease;
  
  }
  
  .timeup-modal .retry-btn{
    /* color:#100821; */
    border:1px solid #B3A3FC;
    background-color: #B3A3FC;
  }
  
  .timeup-modal .retry-btn:hover{
    background-color: transparent;
    color: #B3A3FC;
    border:1px solid  #B3A3FC;
  }
  
  
  .timeup-modal .cancel-btn{
    background-color: transparent;
    /* color: #B3A3FC; */
    border:1px solid  #B3A3FC;
  }
  
  .timeup-modal .cancel-btn:hover{
    /* color:#100821; */
    border:1px solid #B3A3FC;
    background-color: #B3A3FC;
  }
  
  .timeup-modal .modal-footer{
    display:flex;
    gap:30px;
    margin-top:30px;
  }
  /* media-queries */
  @media only screen and (min-width: 1400px) {
  
  
  
    .faq-dsg .design-1 {
      height: 407px;
      position: absolute;
      top: 5px;
      left: -101px;
    }
  
    .faq-dsg .design-2 {
      top: -28px;
      right: -22px;
    }
  
    .faq-dsg .design-3 {
      bottom: -90px;
      right: -35px;
    }
  
    .faq-dsg .design-4 {
      bottom: -2px;
      left: -149px;
    }
  }
  
  @media only screen and (max-width: 1199px) {
    .ppl-info .ppl-ttl h3 {
      font-size: 20px;
      line-height: 30px;
    }
  
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 4 - (3 * 30px) / 4);
    }
  
  
  }
  
  @media only screen and (max-width: 991px) {
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 3 - (2 * 30px) / 3);
    }
  
    .cht-ttl {
      font-size: 34px;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .cht-grp {
      gap: 30px;
    }
    .cht-grp .cht-ppl {
      width: calc(100% / 2 - (1 * 30px) / 2);
    }
  
    .cht-ttl {
      font-size: 28px;
    }
  
    .cht-frm .cht-online {
      font-size: 20px;
      line-height: 30px;
    }
  
    .cht-frm-top {
      margin-bottom: 40px;
    }
  
    .cht-filter {
      margin-top: 40px;
      overflow: auto;
      justify-content:start;
    }
  
    .cht-grp {
      margin-top: 50px;
    }
  
    .faq-cht .faq-item .faq-title {
      font-size: 18px;
    }
  
    .faq-cht .faq-item .faq-content {
      font-size: 16px;
      line-height: 140%;
    }
  
    .faq-dsg .design-1 {
      width: auto;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 575px) {
    .cht-frm .cht-online {
      font-size: 18px;
      line-height: 26px;
    }
  
    .cht-ttl {
      font-size: 24px;
    }
  
    .cht-filter .cht-flt-ttl {
      font-size: 15px;
    }
  
    .ppl-info .ppl-ttl h3 {
      font-size: 18px;
      line-height: 28px;
    }
  
    .faq-cht .faq-item .faq-title {
      font-size: 16px;
    }
  
    .faq-cht .faq-item .faq-content {
      font-size: 15px;
      line-height: 140%;
    }
  
    .faq-cht-data {
      gap: 30px;
    }
  
    .chat-block .date-fields {
      flex-direction: column;
      width: 100%;
      gap: 10px;
    }
  
    .chat-form .date-fields .input-block {
      min-width: 100%;
      max-width: 100%;
      width: 100%;
    }
  
    .chat-form .hrs-fields .date-picker {
      max-width: 100%;
      width: 100%;
    }
  
    .chat-block .minute-separator {
      left: 50%;
      top: 50%;
    }
  
    .chat-form .gender-radios {
      gap: 10px;
    }
  
    .cmn-btn {
      font-size: 16px;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .cht-grp {
      gap: 15px;
    }
  
    .cht-grp .cht-ppl {
      width: calc(100% / 2 - (1 * 15px) / 2);
    }
  
    .ppl-info .ppl-ttl h3 {
      font-size: 16px;
      line-height: 28px;
    }
  
    .ppl-card {
      font-size: 12px;
      line-height: 35px;
    }
  
    .cht-btn {
      margin-top: 20px;
      font-size: 14px;
    }
  
    .cht-frm-top {
      margin-bottom: 30px;
      margin-top: 20px;
    }
  
    .cht-filter {
      margin-top: 30px;
    }
  
    .cht-grp {
      margin-top: 40px;
    }
  
    .faq-dsg img {
      width: 200px;
      height: 200px;
    }
  
    .faq-dsg .design-1 {
      width: 200px;
      height: 200px;
      top: 4px;
      left: -56px;
    }
  
    .faq-dsg .design-2 {
      transform: scaleX(-1);
      top: -12px;
      right: -5px;
    }
  
    .faq-dsg .design-3 {
      bottom: -43px;
      right: -7px;
    }
    .faq-dsg .design-4 {
      bottom: 48px;
      left: -7px;
    }
  
    .chat-form .gender-radios label {
  
      font-size: 12px;
  
    }
    .chat-form .gender-radios {
      gap:7px;
    }
  
    .chat-form .radio-btn {
      width: 16px;
      height: 16px;
    }
  
    .chat-form .radio-btn::after {
   
      width: 8px;
      height: 8px;
    }
  
    .chat-form .gender-radios{
      flex-wrap: wrap;
    }
  
  }
  
  @media only screen and (max-width: 480px) {
    .cht-grp {
      gap: 30px;
      padding-inline: 30px;
    }
  
    .cht-grp .cht-ppl {
      width: 100%;
    }
  }
  
  
   /* 29/04/2024 start  */
  /*chartform checkout css */
  
  .cht-chkout-pg::after{
    background:none;
  }
  
  .cht-chkout-pg .pt-hrBg{
    background:none;
  }
  
  .cht-chkout-pg::before{
    background:none;
  }
  
  .cht-chkout-pg .main-step-box{
    display: block;
    padding-top:2px;
  }
  
  .cht-chkout-pg .wlc-blk{
    background-color: #B3A3FC;
    border-radius:20px;
    padding: 16px 36px 10px 44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  .cht-chkout-pg .wlm-off h2{
    font-family: "roca-400";
    font-size: 30px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
  }
  
  .cht-chkout-pg .wlm-off .text{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 18px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
  
  }
  .cht-chkout-pg .timer{
    font-family: "roca-400";
    font-size: 30px;
    line-height: 37px;
    letter-spacing: 0%;
    color:var(--primary-clr);
    width: 206px;
    text-align: end;
  }
  
  
  .wlc-off-inner{
    display:flex;
    align-items:center;
  }
  
  .pay-tl{
  font-family:'roca-400';
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 0%;
  color: #100821;
  text-align:center;
  }
  
  .cht-chkout-pg .cht-pay-blk{
    background-color: #B3A3FC;
    border-radius:20px;
    margin-top: 20px;
    padding:31px 22px 37px 22px;
  }
  
  .cht-pay-blk .pay-row{
    display: flex;
    gap:13px;
    margin-top: 42px;
  }
  
  .cht-pay-blk .pay-left-col{
    display: flex;
    flex-direction: column;
    gap:18px;
    /* flex: 1; */
  }
  
  .cht-pay-blk .pay-right-col{
    max-width: 452px;
    width: 100%;
  }
  
  .cht-pay-blk .right-col{
    max-width: 100%;
    width: 100%;
  }
  
  
  .pay-left-top .chk-pay-cont{
    background-color: var(--primary-clr);
    padding-top: 17px;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-right: 2px;
  }
  
  
  .chk-pay-cont .title{
  font-family:'roca-400';
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 0%;
  color:#B3A3FC;
  display: flex;
  align-items: center;
  gap:20px;
  }
  
  .chk-pay-cont .title::after{
    content:" ";
    width:14px;
    height:14px;
    background-color:#79E40E;
    border-radius:50px;
    display:inline-block;
    margin-top: -4px;
  
  }
  
  .chk-pay-cont .service-card{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 0%;
    color: #B3A3FC;
  }
  
  .chk-pay-cont .desc{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #ffffff;
    margin-top:4px;
    margin-bottom:15px;
  }
  
  
  
  
  
  
  .cht-pay-blk .pay-left-top{
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--primary-clr);
  }
  
  .cht-pay-blk .chk-pay-img{
    height: 100%;
    width: 100%;
  }
  
  .cht-pay-blk .chk-pay-img img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  .pay-left-mid{
    display:flex;
    gap:3px;
  }
  
  
  .pay-left-mid .chk-pay-info{
    background-color: #100821;
    padding:25px 19px;
    border-radius:20px;
    width: calc(50% - 3px); 
  }
  
  
  
  .pay-left-mid .chk-pay-info .chk-mid-title{
    font-family:'roca-400';
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: center;
    color:#B3A3FC;
    margin-bottom:22px;
    
  }
  .pay-left-mid .chk-pay-info .chk-mid-descp{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    color:#ffffff;
    max-width: 261px;
    margin:auto;
  }
  
  .pay-left-bot .agenda-top  h3{
    font-family:'roca-400';
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: center;
    color:#B3A3FC;
  
  }
  
  .pay-left-bot .agenda-top p{
  font-family: 'roca-400';
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
  color:#ffffff;
  }
  
  .pay-left-bot{
    background:#100821;
    border-radius:20px;
    padding:25px 39px 30px 39px;
    flex-grow: 1;
  }
  
  .chat-table table {
    color:#ffffff;
    margin-top:30px;
    width: 100%;
  }
  
  
  
  .chat-table td {
  font-family: 'roca-400';
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  }
  
  .chat-table .cht-table-ttl {
    font-family:'roca-400';
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    color:#B3A3FC;
    
    }
  
    .chat-table{
      position:relative;
      overflow: hidden;
    }
  
    /* .chat-table  td:not(:first-child):not(:last-child)::after {
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #ffffff;
      margin-left: 10px;
    } */
  
  
    .calc-count{
      margin-top: 25px;
      border-bottom:1px solid #000;
      padding-bottom: 11px;
    }
  
    .calc-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
  
    .cal-txt{
      font-family:'roca-400';
      font-size: 15px;
      line-height: 34px;
      letter-spacing: 0%;
    }
  
    .cal-txt-red{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 34px;
      letter-spacing: 0%;
    
      color:#FF002A;
    }
  
    .cal-amt{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 34px;
      letter-spacing: 0%;
      text-align: right;
      color: #100821;
  
    }
  
    .pay-right-col .download_btn{
      background:#79E40E;
       border:2px solid #79E40E;
       transition: 0.2s ease;
  
    }
  
    .pay-right-col .download_btn:hover{
      background:transparent;
      color:#79E40E;
    }
  
    .pay-right-col .pay-trust{
      font-family: 'roca-400';
      font-weight: 500;
      font-size: 12px;
      line-height: 14px;
      letter-spacing: 0%;
      text-align: center;
      color:#100821;
  
    }
  
    .pay-right-col .right-col{
      padding: 1px 41px 46px;
    }
  
    .right-col-btm{
      border-radius:10px;
      background-color: #fff;
      margin-top: 8px;
      padding-inline:41px;
      padding-top: 9px;
      padding-bottom: 17px;
      flex:1;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }
  
    .right-col-btm .pedir-btn{
    background:#79E40E;
    border:2px solid #79E40E;
    transition:0.2s ease;
    color: #fff;
    font-family: PP Acma;
    font-weight: 900;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    width: 100%;
    padding-top: 11px;
    padding-bottom: 10px;
    border-radius:7px;
    height: 50px;
    }
  
    .right-col-btm .pedir-btn:hover{
      background:transparent;
      color:#79E40E;
    }
  
    .right-col-btm p{
      font-family:'roca-400';
      font-size: 20px;
      line-height: 35px;
      letter-spacing: 0%;
      text-align: center;
      padding-bottom:9px;
    }
  
  
  
  /* 
  Birth Block */
  .checkout-birth-info .inner-row::after{
    background: none;  
  }
  
  .checkout-birth-info .tab-content-box{
    padding:0;
  }
  
  
  
  .checkout-birth-info .inner-row {
    background:var(--primary-clr);
    padding-top:95px;
    padding-bottom:77px;
    position: relative;
  }
  
  .checkout-birth-info .chart-info-listing li .content .title{
  text-align:center;
  }
  
  
  .checkout-birth-info .chart-info-listing li .content .title,
  .checkout-birth-info .chart-info-listing li .content .info,
  .checkout-birth-info .sec-title
  {
    color:#B3A3FC;
  }
  
  .checkout-form-faq{
    background-color:var(--secondary-clr);
  }
  
  .checkout-form-faq .sec-title{
    color:var(--primary-clr);
  }
  
  .checkout-form-faq .faq-content-box::before{
    content: '';
    position: absolute;
    inset:0;
    background-image: url(../images/chatform/chat-checkout-faq-bg.svg);
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-position: center;
  }
  
  .chat-chkout-comment .user-comment-box{
    background: var(--primary-clr);
  }
  
  .checkout-form-faq  .faq-item .faq-title{
    margin-bottom:26px;
  }
  
  .checkout-form-faq .faq-cht-data {
    gap:52px;
  }
  
  .checkout-form-faq .faq-cht-data {
    gap:30px;
  }
  
  .chat-chkout-comment .user-comment-box::before{
    background:none;
  }
  
  .chat-chkout-comment  .user-comment-box{
    padding-top:72px;
    padding-bottom:89px;
  }
  
  .chat-chkout-comment .sec-title{
    color:var(--secondary-clr);
    margin-bottom:67px;
  }
  
  
  .chat-chkout-comment .rating-wrapper {
    margin-top: -18px;
    margin-bottom: 24px;
  }
  
  .chat-chkout-comment button#pay_btn_2{
    margin-top:67px;
  }
  
  
  
  .pay-left-top .subs{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 10px;
    line-height: 35px;
    letter-spacing: 0%;
    color: #fff;
    display: flex;
    align-items: center;
    gap:8px;
  }
    
  .right-cht{
    display:flex;
    flex-direction:column;
    height: 100%;
  }
  .pay-right-col form{
    height: 100%;
  }
  
  .active-modal .modal-content{
    background-color:#100821 !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    border:1px solid #B3A3FC !important;
    padding-top: 45px;
    padding-bottom: 39px;
    padding-inline:20px;
  
  }
  .active-modal .modal-footer{
    border:0;
  }
  
  /* .timeup-modal .modal-content{
    background-color:#100821 !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    border:1px solid #B3A3FC !important;
    padding-top: 45px;
    padding-bottom: 39px;
    padding-inline:20px;
  
  }
  .timeup-modal .modal-footer{
    border:0;
  }
  
  .timeup-modal .modal-body{
    padding:0;
  } */
  
  
  
  
  .cht-activity{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  
  .act-timer{
    font-family:'roca-400';
    font-size: 36px;
    line-height: 37px;
    letter-spacing: 0%;
    margin-bottom:30px;
  }
  
  .act-info{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
  }
  
  .act-info h5{
    font-family:'roca-400';
    font-size: 36px;
    line-height: 37px;
    letter-spacing: 0%;
    color:#B3A3FC;
    text-align:center
  
  }
  
  .act-info p{
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 20px;
    line-height: 37px;
    letter-spacing: 0%;
    text-align: center;
  }
  
  .active-modal .act-btn{
    font-family: 'roca-400';
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
    text-align: center;
    width: 100%;
    color: #100821;
    background-color: #B3A3FC;
    border:1px solid #B3A3FC;
    padding-top: 9px;
    padding-bottom: 8px;
    padding-inline:15px;
    border-radius:7px;
    max-width: 216px;
    margin-inline:auto;
    margin-top: 13px;
    transition:all 0.2s ease;
  }
  
  .active-modal .act-btn:hover{
    color: #B3A3FC;
    background-color: transparent;
    border:1px solid #B3A3FC;
  }
  
  .active-modal .modal-body{
    padding:0;
  }
  
  .active-modal .modal-dialog{
    max-width: 535px;
  }
  
  .active-modal .modal-footer{
    padding:0;
  }
  @media only screen and (min-width: 1400px) {
  .chat-chkout-comment button#pay_btn_2 {
    min-height: 77px;
    font-size: 35px;
  }
  
  .chat-table .cht-table-ttl {
    font-size: 15px;
    line-height:35px;
  }
  
  
  .chat-chkout-comment .faq-listing .header .title {
    font-size: 35px;
  }
  
  .chk-pay-info1{
    min-width: 301px;
  }
  
  .chk-pay-info2{
    width: 100%;
  }
  
  .chat-table td {
    font-size: 13px;
    }
    
  .cht-chkout-pg .wlm-off h2{
    font-size: 36px;
    line-height: 37px;
  
  }
  
  .cht-chkout-pg .wlm-off .text{
    font-size: 18px;
    line-height: 35px;
  }
  
  .cht-chkout-pg .timer{
    font-size: 36px;
    line-height: 37px;
    width: 226px;
  }
  
  .pay-tl{
    font-size: 36px;
    line-height: 37px;
    }
  
    
  
  .pay-left-top .chk-pay-cont{
    padding-top: 17px;
    padding-left: 45px;
    padding-bottom: 5px;
  }
  
  }
  
  @media only screen and (max-width: 1199px) {
    .cht-chkout-pg .wlc-blk {
       padding:16px 20px 10px 20px;
    }
  
    .cht-chkout-pg .wlm-off h2 {
      font-size: 24px;
      line-height: 37px;
    }
  
  
    .cht-chkout-pg .wlm-off .text {
      font-size: 16px;
      line-height: 27.8px;
    }
  
    .cht-chkout-pg .timer {
      font-size: 24px;
      line-height: 37px;
      width: 140px;
    }
    .pay-tl {
      font-size: 26px;
      line-height: 30px;
    }
  
    .cht-pay-blk .pay-row{
      flex-direction: column;
    }
  
    .pay-left-mid .chk-pay-info {
      width: calc(100% / 2 - (1 * 3px) / 2);
    }
  
  
    .chat-table td {
      font-size: 13px;
      line-height: 15px;
    }
  
    .chat-table .cht-table-ttl {
      font-size: 15px;
      line-height:30px;
    }
  
    .cht-pay-blk .pay-right-col {
      max-width: 100%;
      width: 100%;
    }
  
    .cht-pay-blk .pay-row {
      gap:18px;
    }
  
    .cht-chkout-pg .tab-content-box{
      padding: 0px; 
    }
  
    .checkout-birth-info .chart-content-box h3.heading{
      font-size: 30px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .title{
      font-size: 30px;
      line-height: 35px;
    }
    .act-timer{
      font-size: 30px;
      line-height: 32px;
      margin-bottom: 20px;
    }
  
    .act-info h5 {
      font-size: 30px;
      line-height: 32px;
    }
  }
  
  
  @media only screen and (max-width: 991px) {
    .chat-chkout-comment .faq-listing .header .title {
    font-size: 30px;
  }
  .cht-chkout-pg .wlc-blk{
    flex-wrap: wrap;
  }
  
  .cht-chkout-pg .wlc-blk .wlm-off{
  width:100%;
  }
  
  .cht-chkout-pg .timer {
    margin-left: auto;
  }
  
  .pay-left-top .chk-pay-cont{
    padding-right: 5px;
  }
  
  .cht-pay-blk .chk-pay-img {
    height: auto;
    width: 100%;
  }
  
  }
  @media only screen and (max-width: 767px) {
    .tab-pane-payment .chart-box {
        padding: 26px 30px 30px;
    }
    .checkout-form-faq .faq-content-box{
        padding:70px 24px;
    
    }
    .chat-chkout-comment .faq-listing .header .title {
      font-size: 25px;
      line-height:26px;
    }
  
    .chat-chkout-comment .faq-listing .header .right-info {
      font-size: 16px;
    }
  
    .chat-chkout-comment .rating-wrapper {
      margin-top: 0;
    }
  
    .chat-chkout-comment .faq-listing .content p.info {
      font-size: 16px;
      line-height: 22px;
    }
  
    .chat-chkout-comment  .user-comment-box{
      padding-block:70px;
    }
  
    .faq-content-box .sec-title {
      margin-bottom: 40px;
    }
  
    .chat-chkout-comment .sec-title{
      margin-bottom:40px;
    }
  
    .checkout-form-faq .faq-item .faq-title {
      margin-bottom: 15px;
    }
  
    .chat-chkout-comment button#pay_btn_2 {
      margin-top: 50px;
      min-height: 50px;
      min-width: 520px;
      font-size: 20px;
    }
  
    .pay-tl {
      font-size: 24px;
      line-height: 30px;
    }
  
    .chk-pay-cont .title {
      font-size:20px
    }
  
    .pay-left-mid .chk-pay-info .chk-mid-title{
      font-size: 20px;
      margin-bottom: 15px;
    }
  
    .pay-left-bot .agenda-top h3 {
      font-size: 20px;
      line-height: 35px;
    }
    
    .pay-left-mid {
      gap: 18px;
      flex-direction: column;
    }
    .pay-left-mid .chk-pay-info {
      width: 100%;
    }
  
    .cht-pay-blk .pay-row {
      margin-top: 30px;
    }
  
    .pay-left-mid .chk-pay-info .chk-mid-descp{
      max-width:100%;
    }
  
    .chat-table .cht-table-ttl {
      font-size: 13px;
      line-height:23px;
    }
  
    .chat-table td {
      font-size: 10px;
      line-height: 15px;
    }
  
    .chat-table table {
      margin-top: 15px;
    }
  
    .pay-left-bot {
      padding:25px 20px 30px 20px;
    }
  
    .cht-pay-blk .right-col {
      padding: 1px 0 20px;
    }
  
    .cht-pay-blk .pay-form-box {
      padding:20px;
    }
  
    .right-col-btm p {
      font-size: 18px;
      line-height: 32px;
    }
  
    .checkout-birth-info .chart-content-box h3.heading{
      
      font-size: 26px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .title {
      font-size: 26px;
      line-height: 35px;
    }
  
    .checkout-birth-info .chart-info-listing li .content .info {
      font-size: 16px;
      line-height: 24px;
    }
  
    .chart-info-listing .content {
      gap: 12px;
    }
  
     .checkout-birth-info .inner-row{
      padding-top: 70px;
      padding-bottom: 70px;
    }
  
    .active-modal .modal-dialog {
      max-width: 465px;
    }
  
    .act-timer {
      font-size: 26px;
      margin-bottom: 10px;
    }
      .act-info h5 {
        font-size: 26px;
        line-height: 32px;
      }
  
      .act-info p {
        font-size: 16px;
        line-height: 30px;
      }
  }
  
  @media only screen and (max-width: 575px) {
  .chat-chkout-comment .faq-listing .header .title {
    font-size: 19px;
    line-height: 26px;
  }
  
  .chat-chkout-comment .rating-wrapper img {
    max-width: 22px;
  }
  .chat-chkout-comment .rating-wrapper {
    margin-bottom: 14px;;
  }
  
  .chat-chkout-comment .faq-listing .content p.info {
    font-size: 15px;
    line-height: 22px;
  }
  
  .chat-chkout-comment .faq-listing .header .right-info {
    font-size: 15px;
    line-height: 19px;
  }
  
  .chat-chkout-comment button#pay_btn_2 {
    margin-top: 45px;
    min-height: 48px;
    min-width: 100%;
    font-size: 18px;
  }
  
  .chat-chkout-comment .faq-listing li:not(:last-of-type) {
    margin-bottom: 30px;
  }
  
  .cht-chkout-pg .wlm-off h2 {
    font-size: 20px;
    line-height: 32px;
  }
  
  .cht-chkout-pg .wlm-off .text {
    font-size: 13px;
    line-height: 20px;
  }
  
  .cht-chkout-pg .timer {
    font-size: 18px;
    line-height: 37px;
  }
  
  .pay-tl {
    font-size: 20px;
    line-height: 26px;
  }
  
  .cht-pay-blk .pay-row {
    margin-top: 20px;
  }
  
  .chk-pay-cont .title {
    font-size: 18px;
    gap: 12px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .pay-left-bot .agenda-top h3 {
    font-size: 18px;
    line-height: 35px;
  }
  
  .chk-pay-cont .title::after {
    width: 10px;
    height: 10px;
  }
  
  .chk-pay-cont .desc {
    font-size: 11px;
    margin-bottom: 5px;
  }
  .chk-pay-cont .service-card {
    font-size: 11px;
    line-height: 15px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-descp {
    font-size: 11px;
    line-height: 15px;
  }
  
  .pay-left-bot .agenda-top p {
    font-size: 11px;
    line-height: 18px;
  }
  
  .chat-table .cht-table-ttl {
    font-size: 11px;
    line-height: 14px;
  }
  
  .chat-table td {
    font-size: 10px;
    line-height: 15px;
    padding:10px 4px;
  }
  
  
  .cht-chkout-pg .total-payout-box {
    font-size: 22px;
    line-height: 34px;
  }
  
  .cal-amt {
    font-size: 18px;
    line-height: 28px;
  }
  
  .cal-txt-red {
    font-size: 18px;
    line-height: 28px;
  }
  
  .cal-amt {
    font-size: 18px;
    line-height: 28px;
  }
  
  .right-col-btm p {
    font-size: 16px;
    line-height: 32px;
  }
  
  .faq-content-box .sec-title {
    margin-bottom: 30px;
  }
  
  .chat-chkout-comment .sec-title{
    margin-bottom:30px;
  }
  
  .active-modal .modal-dialog{
    max-width: 100%;
    padding:20px;
  }
  
  }
  
  @media only screen and (max-width: 480px) {
  .checkout-form-faq .faq-content-box {
    padding:50px 24px;
  }
  
  .chat-chkout-comment  .user-comment-box{
    padding-block:50px;
  }
  
  .cht-chkout-pg .tab-content-box .container{
    padding:0;
  
  }
  
  .cht-chkout-pg .wlc-blk {
    padding:10px 10px 10px 10px;
    border-radius:12px;
  }
  
  .cht-chkout-pg .cht-pay-blk {
    padding: 15px 10px 15px 10px;
    border-radius:12px;
  }
  
  .right-col-btm {
    padding-inline:10px;
    padding-top: 9px;
    padding-bottom: 15px;
  }
  
  .cht-pay-blk .pay-form-box {
    padding:10px;
  }
  
  .pay-form-box .form-inner-wrapper{
    padding-block:0;
  }
  
  .cht-pay-blk .right-col {
    padding:0;
  }
  
  .cht-chkout-pg .wlm-off h2 {
    font-size: 16px;
    line-height: 26px;
  }
  
  .cht-chkout-pg .timer {
    font-size: 16px;
    line-height: 30px;
    width: 95px;
  }
  .cht-chkout-pg .wlm-off .text {
    font-size: 12px;
    line-height: 18px;
  }
  
  .pay-tl {
    font-size: 16px;
    line-height: 24px;
  }
  .chk-pay-cont .title {
    font-size: 15px;
    gap:10px;
  }
  
  .pay-left-mid .chk-pay-info .chk-mid-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .pay-left-bot .agenda-top h3 {
    font-size: 15px;
    line-height: 30px;
  }
  
  
  .cal-txt {
    font-size: 13px;
    line-height: 34px;
  }
  
  .cal-amt {
    font-size: 15px;
    line-height: 28px;
  }
  
  .cal-txt-red {
    font-size: 16px;
    line-height: 28px;
  }
  .cht-chkout-pg .total-payout-box {
    font-size: 20px;
    line-height: 34px;
  }
  
  .pay-right-col .download_btn{
    font-size:16px;
  }
  
  .pay-left-top .chk-pay-cont {
    padding-left: 10px;
  }
  
  .right-col-btm .pedir-btn {
    font-size: 16px;
    height: auto;
    padding:11px 50px;
  }
  
   .checkout-birth-info .inner-row{
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .checkout-birth-info .chart-content-box h3.heading {
    font-size: 25px;
    line-height: 34px;
  }
  
  .checkout-birth-info .chart-info-listing li .content .title {
    font-size: 25px;
    line-height: 34px;
  }
  
  .checkout-birth-info .chart-info-listing li .content .info {
    font-size: 15px;
    line-height: 22px;
  }
  
  .active-modal .modal-dialog{
    padding: 10px;
  }
  
  .active-modal .modal-content {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-inline:10px;
  }
  
  .act-timer {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .act-info h5 {
    font-size: 20px;
    line-height: 27px;
  }
  
  .act-info p {
    font-size: 13px;
    line-height: 26px;
  }
  
  .active-modal .act-btn {
    font-size: 13px;
  }
  }
  
  
  @media only screen and (max-width: 480px) {
  .checkout-birth-info .chart-info-listing li .content .title br{
    display:none;
  }
  
  .chat-table{
    overflow: auto;
  }
  .chat-table table{
    text-wrap: nowrap;
  }
  } 
  @media only screen and (max-width:375px){
    .cht-pay-blk .pay-left-top{
      flex-direction: column;
    }
  }
  
  
    /* 29/04/2024 end */
  
  
  
  
   .chck-stories-content-box {
    padding: 32px 38px;
    position: relative;
  }
  
  .check-stories {
    background-color: var(--secondary-clr);
  }
  
  .chck-stories-content-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/chatform/chat-checkout-faq-bg.svg);
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-position: center;
  }
  
  .head-col {
    max-width: 621px;
    margin-inline: auto;
    color: var(--primary-clr);
  }
  
  .check-stories .rt-text {
    font-size: 13px;
    font-family: Montserrat;
  }
  
  .rating-headline {
    display: flex;
    align-items: center;
    gap: 21px;
    line-height: 39px;
    justify-content: center;
    margin-bottom: 19px;
  
  }
  
  .star-box {
    width: fit-content;
    display: flex;
    gap: 10px;
  }
  
  .star-box img {
    max-width: 30px;
  }
  
  .vdoCol {
    max-width: 1070px;
    margin-inline: auto;
    margin-top: 40px;
  }
  
  .vdoCol .vcard-col {
    display: flex;
    gap: 16px;
  
  }
  
  .vdoCol .vcard-col .vcard-item {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-bottom: calc(43% - 6px);
    /* cursor: pointer; */
  }
  
  .vdoCol .vcard-col .vcard-item::before {
    content: '';
    inset: 0;
    position: absolute;
    background: #000;
    z-index: 1;
    opacity: 0;
    transition: .2s linear;
  }
  
  .vdoCol .vcard-col .vcard-item:hover::before {
    /* opacity: 20%; */
  }
  
  /* .vcard-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --sz: 54px;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: url(../images/vplay-icon.svg) no-repeat;
    background-size: contain;
    z-index: 1;
  } */
  
  .thumbart {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  
  .thumbart img {
    object-fit: cover;
    height: 101%;
    position: absolute;
    width: 100%;
  }
  
  @media screen and (max-width:767px) {
    .vdoCol .vcard-col {
      flex-wrap: wrap;
    }
  
    .rating-headline {
      flex-wrap: wrap;
      gap: 15px;
    }
  
    .vdoCol .vcard-col .vcard-item {
      padding-bottom: calc(87% - 6px);
      max-width: calc(50% - 8px);
      flex-basis: calc(50% - 8px);
    }
  
    .vdoCol {
      max-width: 1070px;
      margin-inline: auto;
      margin-top: 25px;
    }
  
    .check-stories .rt-text {
      line-height: normal;
    }
  }
  
  @media screen and (max-width:575px) {
    /* .vcard-item::after {
      --sz: 8vw;
    } */
    .videplay-icon {
      --sz: 50px;
    }
  
    .chck-stories-content-box::before {
      display: none;
    }
  
    .videoModal .modal-body {
      position: relative;
      padding-bottom: 100% !important;
    }
  
    .videoModal .modal-body .video-content {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
    }
  }
  @media screen and (max-width:480px) {
  
  .vdoCol .vcard-col {
    gap: 10px;
  }
  
  .vdoCol .vcard-col .vcard-item {
    max-width: calc(50% - 5px);
    flex-basis: calc(50% - 5px);
    border-radius: 10px;
  }
  }
  
  
  /* new */
  .ppl-ttl {
    flex-wrap: wrap;
  }
  
  .mob-cht-online {
    display: none;
  }
  
  
  .chkout-gen .cal-list{
    display:block;
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 15px;
    line-height: 34px;
    letter-spacing: 0%;
    color:#100821;
  }
  
  .chkout-gen .pay-at {
    display: flex;
    justify-content: right;
  }
  
  .chkout-gen .calc-lists{
    border-bottom:1px solid #000;
    padding-bottom: 5px;
  }
  
  .chkout-gen .calc-inner{
    padding-top: 17px;
    padding-bottom: 2px;
  }
  
  .chkout-gen .download_btn{
  margin-top:19px;
  }
  
  .chkout-gen .calc-count{
    margin-top:5px;
  }
  .chkout-gen .pay-left-top{
    padding-top: 22px;
    padding-bottom: 13px;
    border-radius:20px;
  }
  
  .chkout-gen  .welcome-ttl {
    font-family:'roca-400';
    letter-spacing: 0%;
    text-align: center;
    color: #B3A3FC;
    width: 100%;
  }
  
  .chkout-gen  .cmn-lg-ttl{
    font-size: 36px;
    line-height: 35px;
  }
  
  .chkout-gen  .cht-pay-blk .pay-row{
  gap:16px;
  }
  
  @media screen and (max-width: 480px) {
    .ppl-ttl {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
  
    }
  
    .cht-ppl .ppl-img img {
      height: 100%;
      object-fit: cover;
    }
  
    .ppl-card {
      line-height: normal;
      order: 2;
      margin-top: 0;
    }
  
    .ppl-info .ppl-ttl h3 {
      font-size: 24px;
      line-height: normal;
      order: 1;
    }
  
    .ppl-sts p {
      line-height: normal;
    }
  
    .cht-grp .ppl-img {
      max-width: 136px;
    }
  
    .ppl-info .ppl-ttl .ppl-sts {
      order: 3;
    }
  
    .cht-btn {
      font-size: 12px;
      line-height: 1;
      margin-top: auto;
    }
  
    .ppl-info {
      display: flex;
      flex-direction: column;
      padding-block: 13px;
    }
  
    .cht-grp .cht-ppl {
      display: flex;
      min-height: 183px;
    }
  
    .vdoCol .vcard-col .vcard-item {
      max-width: 100%;
      flex-basis: 100%;
      border-radius:10px;
      min-width:100%;
    }
  
   
  
    .vdoCol .vcard-col {
      flex-wrap: nowrap;
      overflow:auto hidden;
      padding-bottom:7px;
    }
  
    .vdoCol .vcard-col .vcard-item {
      padding-bottom: calc(155% - 6px);
    }
  
    .cht-online {
      display: none;
    }
  
    .mob-cht-online {
      display: block;
      text-align: center !important;
    }
  
    .cht-ttl {
      text-align: center;
      max-width: 50%;
      margin-inline: auto;
      font-size: 30px;
     color: #B3A3FC;
    }
  
    .faq-cht .faq-inner-sec .sec-title{
      color: #B3A3FC;
    }
  
    .faq-cht .faq-item .faq-content {
      color: #fff;
    }
  
    .cht-frm .cht-online {
      font-size: 16px;
    }
  
    .cht-filter {
      margin-top: 13px;
    }
  
    .cht-chkout-pg .wlm-off .text {
      font-size: 11px;
      line-height: 18px;
    }
  
    .cht-chkout-pg .wlm-off h2 {
      text-align: center;
    }
    .faq-content-box .sec-title{
      color:#B3A3FC;
    }
    .chat-chkout-comment .user-comment-box .faq-listing .content{
      border-radius:12px;
    }
  
    .faq-cht .faq-dsg img{
      display:none;
    }
  
    .faq-cht .faq-chat-bg{
      background:none;
    }
  
    .faq-cht .faq-chat-wrapper {
      padding-top: 33px;
      padding-bottom: 50px;
    }
    .chatform-hero {
      padding-bottom: 26px;
    }
  
    .chck-stories-content-box {
      padding-top: 10px;
      padding-bottom: 30px;
    }
  
    .checkout-birth-info .inner-row {
      padding-top: 30px;
      padding-bottom: 30px;
    }
  
    .misc-content-wrapper  .checkout-form-faq .faq-content-box{
      padding-top: 33px;
    padding-bottom: 39px;
    }
  }
  @media screen and (max-width: 375px) {
    .cht-btn {
      font-size: 9px;
    }
  
    .cht-chkout-pg .wlm-off .text {
      font-size: 10px;
  
    }
  }
  .ppl-card {
    font-size: 13px;
    line-height: 35px;
    color: #100821;
    margin-top: -10px;
    width: 100%;
  }
  /* new */
  .cht-flt-val.active {
    background-color: #9C3C96;
    color: white;
    border-color: #B3A3FC;
  }
  .cht-flt-val:disabled {
    background-color: #e0e0e0;
    color: #888;
    cursor: not-allowed;
    border-color: #ccc;
  }
  .chk-pay-cont  .disconnect-txt::after{
    background-color: #e40e0e;
  }
  .chk-pay-cont  .online-txt::after{
    background-color: #79e40e;
  }
  .chk-pay-cont  .busy-txt::after{
    background-color: #e4cb0e;
  }
  .cht-pay-blk .chk-pay-img {
    max-height: 200px;
    width: 100%;
    height: 100%;
    max-width: 200px;
  }
  
  
  .chat-table::-webkit-scrollbar{
    height:5px;
    width:5px;
  }
  .vcard-col::-webkit-scrollbar{
    height:5px;
    width:5px;
  }
  
  .videoModal .modal-body{
  padding:0;
  }
  
  /* .videoModal .modal-header {
    display:none;
  } */
  /* video new 7/05 */
  .videoModal .modal-header {
    display:block;
    display: flex;
  }
  
  .cht-chkout-pg .right-col{
  flex:1;
  }
  
  @media only screen and (max-width: 575px) {
    .cht-pay-blk .chk-pay-img {
      width: 100%;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 575px) {
  .cht-pay-blk .chk-pay-img {
    max-height: 100%;
    max-width: 100%;
  }
  }
  
  
  .cht-filter .cht-flt-ttl{
    text-wrap:nowrap;
  }
  .cht-filter .cht-flt-val{
    text-wrap:nowrap;
  }
  @media only screen and (max-width: 767px) {
  .cht-filter{
    overflow:auto hidden;
  }
  }
  /* Checkout General Page Date 01/04/2024 Work Start */
  .chkout-gen .cal-list{
    display:block;
    font-family: 'roca-400';
    font-weight: 400;
    font-size: 15px;
    line-height: 34px;
    letter-spacing: 0%;
    color:#100821;
  }
  
  .chkout-gen .pay-at {
    display: flex;
    justify-content: right;
  }
  
  .chkout-gen .calc-lists{
    border-bottom:1px solid #000;
    padding-bottom: 5px;
  }
  
  .chkout-gen .calc-inner{
    padding-top: 17px;
    padding-bottom: 2px;
  }
  
  .chkout-gen .download_btn{
  margin-top:19px;
  }
  
  .chkout-gen .calc-count{
    margin-top:5px;
  }
  .chkout-gen .pay-left-top{
    padding-top: 22px;
    padding-bottom: 13px;
    border-radius:20px;
  }
  
  .chkout-gen  .welcome-ttl {
    font-family:'roca-400';
    letter-spacing: 0%;
    text-align: center;
    color: #B3A3FC;
    width: 100%;
  }
  
  .chkout-gen  .cmn-cht-ttl{
    font-size: 30px;
    line-height: 35px;
  }
  
  .chkout-gen  .cht-pay-blk .pay-row{
    gap:16px;
  }
  
  .chkout-gen .pay-left-mid{
    background-color: #100821;
    color: #fff;
    padding:19px;
    border-radius:20px;
  }
  
  .chkout-gen  .pay-lef-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .chkout-gen  .price-pack-ttl{
    font-family:'roca-400';
    letter-spacing: 0%;
    text-align: center;
  }
  
  .chkout-gen  .price-pack-ttl span{
    color:#79E40E;
  }
  
  .chkout-gen .cmn-cht-txt{
    font-size: 20px;
    line-height: 27px;
  }
  
  .chkout-gen .price-pack-txt {
    font-family: 'roca-400';
    font-weight: 400;
    letter-spacing: 0%;
    text-align: center;
    color:#B3A3FC;
  }
  
  .chkout-gen .price-pack-txt2{
    margin-top:10px;
  }
  
  .chkout-gen .price-timer{
    font-family:'roca-400';
    letter-spacing: 0%;
    margin-top:10px;
  }
  
  .chkout-gen .cht-pay-blk .pay-left-col {
    gap:5px;
  }
  
  .chkout-gen .pay-left-bot{
    background-color: #100821;
    color: #B3A3FC;
    padding: 48px 25px 43px 25px;
    border-radius:20px;
  }
  
  .chkout-gen .content-ttl{
    font-family:'roca-400';
    letter-spacing: 0%;
    text-align: center;
    margin-bottom:54px;
  }
  
  .chkout-gen .content-list .item-content{
    display:flex;
    justify-content:space-between;
  }
  
  .chkout-gen .content-list .item-content h4{
    font-family:'roca-400';
    text-align: center;
    position:relative;
  }
  
  .chkout-gen .content-list .item-content p{
    font-family: 'roca-400';
    font-weight: 700;
    letter-spacing: 0%;
  }
  
  .chkout-gen .content-list .item-content .dashed-ln{
   min-width:120px;
   width:100%;
   height:1px;
   background-color:transparent;
   border:1px dashed #B3A3FC;
   display:block;
   
  }
  .chkout-gen .content-list .item-content .amt{
    display:flex;
    align-items:center;
    gap:22px;
  }
  
  .chkout-gen .content-list .cont-ul{
    display: flex;
    flex-direction: column;
    gap:50px;
  }
  
  .chkout-gen .border-btm{
    display:block;
    width:100%;
    background-color:#B3A3FC !important;
    height:1px;
    margin-top:33px;
    margin-bottom:28px;
  }
  
  .line-through{
    text-decoration: line-through;
    text-decoration-color: red;
  }
  
  .chkout-gen .content-list .tamt-ul{
    display: flex;
    flex-direction: column;
    gap:19px;
  }
  
  .chkout-gen .content-list .item-content .discount-txt{
    font-weight:400;
  }
  
  .chkout-gen .content-list  .cont-desc {
    font-family: 'roca-400';
    font-weight: 400;
    letter-spacing: 0%;
    text-align: center;
    margin-top:50px;
  }
  
   .cht-chkout-pg  .wlm-off{
    display:flex;
    align-items:center;
    gap:3px;
    white-space: nowrap;
  }
  
   .cht-chkout-pg .wlm-off h2:first-child{
    transform: translateY(2px);
  }
  
  
  .chkout-gen .cht-chkout-pg .cht-pay-blk {
    padding:37px 25px 37px 25px;
  }
  
  .wlc-off-inner{
    width:100%;
  }
  
  @media only screen and (min-width: 1400px) {
    .cht-chkout-pg .wlm-off .text{
      font-size: 20px;
      line-height: 37px;
      display: flex;
      white-space: nowrap;
    }
  
    .chkout-gen  .cmn-cht-ttl{
      font-size: 36px;
    }
  
    .chkout-gen .content-list .item-content .dashed-ln{
      min-width:231px; 
     }
  
     .chkout-gen .cmn-cht-txt{
      font-size: 24px;
    }
  
    .chkout-gen .pay-left-bot{
      padding: 48px 25px 43px 59px;
    }
  
  }
  
  @media only screen and (max-width: 1199px) {
    .chkout-gen .content-list .cont-ul{
      gap: 40px;
    }
  }
  
  @media only screen and (max-width: 991px) {
    .chkout-gen .cmn-cht-ttl {
      font-size: 26px;
      line-height: 30px;
    }
    .chkout-gen .cmn-cht-txt {
      font-size: 18px;
      line-height: 27px;
    }
  
  }
  
  @media only screen and (max-width: 767px) {
    .chkout-gen .cmn-cht-ttl {
      font-size: 24px;
      line-height: 30px;
    }
    .chkout-gen .content-ttl {
      margin-bottom: 38px;
    }
  }
  
  @media only screen and (max-width: 575px) {
    .chkout-gen .cmn-cht-ttl {
      font-size: 20px;
      line-height: 30px;
    }
  
    .chkout-gen .cmn-cht-txt {
      font-size: 16px;
      line-height: 24px;
    }
  
    .chkout-gen .content-list .cont-ul {
      gap:20px;
    }
    .chkout-gen .content-list .tamt-ul {
      gap:15px;
    }
  
    .chkout-gen .content-list .cont-desc {
      margin-top: 40px;
    }
    .chkout-gen .content-list .item-content .dashed-ln {
      min-width: 70px;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .chkout-gen .cmn-cht-ttl {
      font-size: 18px;
      line-height: 30px;
    }
  
    .chkout-gen .cmn-cht-txt {
      font-size: 14px;
      line-height: 24px;
    }
  
    .chkout-gen .cal-list {
      font-size: 13px;
      line-height: 30px;
    }
    .chkout-gen .content-ttl {
      margin-bottom: 25px;
    }
    .chkout-gen .content-list .cont-desc {
      margin-top: 30px;
    }
  }
  
  @media only screen and (max-width:480px) {
    .cht-chkout-pg .wlc-blk .wlm-off{
      justify-content:center;
    }
  
    .chkout-gen .cht-chkout-pg .wlc-blk{
    border-radius:20px;
    }
  
    .cht-chkout-pg .wlm-off .text {
      font-size: 10px;
      line-height: 10px;
    }
  
    .chkout-gen .cht-chkout-pg .timer {
      font-size: 20px;
      line-height: 37px;
      width: 112px;
    }
  
    .chkout-gen .cht-pay-blk .pay-left-top{
      background-color: #B3A3FC;
    }
  
    .chkout-gen .welcome-ttl {
      color: var(--primary-clr);
    }
  
    .chkout-gen .cht-chkout-pg .cht-pay-blk{
      background-color:#ffffff
    }
  
    .chkout-gen .pay-left-mid{
      background-color: var(--primary-clr);
      color: #B3A3FC;
    }
  
    .chkout-gen .cmn-cht-txt{
      color: var(--primary-clr);
    }
  
    .chkout-gen .content-list .item-content .dashed-ln{
      border: 1px dashed var(--primary-clr);
    }
  
    .chkout-gen .border-btm{
      background-color: var(--primary-clr) !important;
    }
  
    .chkout-gen .pay-left-bot{
      background-color: #B3A3FC;
      color: var(--primary-clr);
    }
  
    .chkout-gen .cht-chkout-pg .cht-pay-blk {
      padding:2px 0 37px 0;
      background-color:transparent;
    }
  
    .chkout-gen  .pay-tl{
      color: #B3A3FC;
      font-size: 32px;
      line-height: 32px;
    }
  
    .chkout-gen .main-step-box{
      padding-inline:10px;
    }
  
    .chkout-gen .cht-chkout-pg .wlm-off h2 {
      font-size: 15px;
    }
  
    .chkout-gen .welcome-ttl{
      font-size:24px;
      line-height:35px;
    }
    .chkout-gen .price-pack-ttl{
      font-size: 20px;
      line-height: 35px;
    }
  
    .chkout-gen .cmn-cht-txt {
      font-size: 15px;
      line-height: 26px;
    }
  
    .chkout-gen .price-timer{
      font-size: 24px;
      line-height: 27px;
    }
  
    .chkout-gen .price-pack-txt2 {
      margin-top: 5px;
    }
    .chkout-gen .price-timer{
      margin-top: 5px;
    }
  
    .chkout-gen .content-ttl{
      font-size: 20px;
      line-height: 35px;
      margin-bottom: 20px;
    }
  
    .chkout-gen .content-list .item-content h4{
      font-size:16px;
    }
  
    .chkout-gen .content-list .cont-ul {
      gap:18px;
    }
    .chkout-gen .pay-left-bot{
      padding: 13px 20px 20px 20px;
    }
    .chkout-gen .pay-left-top {
      padding-top: 8px;
      padding-bottom: 9px;
    }
    .chkout-gen .cht-pay-blk .pay-left-col {
      gap:10px;
    }
  
    .chkout-gen .content-list .cont-desc {
      margin-top: 20px;
    }
  
    .chkout-gen .cht-pay-blk .pay-form-box {
      padding:0;
    }
  
    .chkout-gen  .pay-form-box .form-inner-wrapper{
      /* background-color: #fff; */
      padding:18px 12px;
    }
  
    .chkout-gen .tab-pane-payment .right-col {
      background:transparent;
    }
  
    .chkout-gen  .pay-form-box{
      background:transparent !important;
    }
  
    .chkout-gen .cal-list {
      font-size: 15px;
      line-height: 34px;
      color: #B3A3FC;
    }
  
    .chkout-gen .cal-amt {
      font-size: 20px;
      line-height: 34px;
      color: #B3A3FC;
    }
  
    .chkout-gen .calc-lists {
      border-bottom:1px solid #B3A3FC;
    }
    .chkout-gen  .calc-count {
      border-bottom:1px solid #B3A3FC;
    }
    .chkout-gen .download_btn {
      margin-top: 19px;
      font-size: 17px;
    }
    .chkout-gen .total-payout-box,
    .chkout-gen .pay-form-box .pay-note{
      color: var(--primary-clr);
    }
    
    .chkout-gen  .pay-right-col .pay-trust {
      background-color: #B3A3FC;
      border-radius:7px;
    }
  
    .chkout-gen  .tab-pane-payment .main-step-box {
      padding-bottom: 0;
    }
  
  }
  @media only screen and (max-width:480px) {
    .chkout-gen .cmn-cht-txt {
      font-size: 13px;
      line-height: 26px;
    }
    .chkout-gen .cal-list {
      font-size: 13px;
      line-height: 30px;
    }
    .price-timer span{
      color:#100821 !important;
    }
    .price-timer .hours{
      color:#100821 !important;
    }
    .price-timer .minutes{
      color:#100821 ;
    }
    .price-timer .seconds{
      color:#100821;
    }
  }
  .price-timer span{
    color:#B3A3FC;
  }
  .price-timer .hours{
    color:#B3A3FC;
  }
  .price-timer .minutes{
    color:#B3A3FC;
  }
  .price-timer .seconds{
    color:#B3A3FC;
  }
  /* Checkout General Page Date 01/04/2024 Work End */
  /*  01-05-25 end */ 
  .welcome-ttl-pr{
    display:none;
  }
  
  .mob-download-btn{
    display:none;
  }
  
  .pay-left-mid-mob{
    display:none;
  }
  @media only screen and (max-width: 480px) {
    .welcome-ttl-pr{
      display:block;
      font-size: 20px;
      line-height: 32px;
      color: #79E40E;
      margin-top: 3px;
      font-weight: 700;
    }
  
    .hide-mob{
      display:none;
    }
  
    .mob-download-btn{
      display:block;
    }
    .chkout-gen .welcome-ttl{
      line-height: 32px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
    }
  
    .chkout-gen .pay-tl {
      display:none;
    }
  
    .chkout-gen .cht-chkout-pg .cht-pay-blk{
      padding:0;
    }
  
    .pay-left-mid-mob{
      border-radius:10px;
      display:block;
      margin-top:10px;
    }
  
    .chkout-gen .tab-pane-payment .main-step-box {
      padding-bottom: 30px;
    }
  }
  .faq-cht .sec-title{
    color: var(--primary-clr) !important;
  }
 .faq-cht .accordion-item{
    color:var(--primary-clr);
    background-color: transparent;
    border: 0;
    margin-bottom: 52px;
    position: relative;
 }
 .faq-cht .faq-title{
    font-family: 'roca-400';
    font-size: 23px;
    line-height: 30px;
    color: var(--primary-clr);
    margin-bottom: 15px;
 }
 .faq-cht .accordion-item::after {
    content: ' ';
    position: absolute;
    background-color: var(--primary-clr);
    height: .3px;
    width: 100%;
    bottom: -27px;
}

.faq-cht .accordion-item::after, .accordion .accordion-item:nth-of-type(1)::before {
    height: 1px;
}
.faq-cht .accordion .accordion-item:nth-of-type(1)::before {
    content: ' ';
    position: absolute;
    background-color: var(--primary-clr);
    height: .3px;
    width: 100%;
    top: -25px;
}
.check-stories{
    border-radius: 20px;
    margin-top: 20px;
}
/* New */
.fr-payment-tab-wrapper{
    background-color:transparent;
    padding:0;
}

.fr-payment-tab-wrapper::after{
    display:none;
}

.pad-zero{padding:0;}


@media only screen and (min-width: 1400px) {
    /* .fr-payment-tab-wrapper .main-step-box {
        padding: 73px 0 !important;
    } */
     .fr-payment-tab-wrapper{
        padding:0;
     }

     .tab-pane-payment .main-step-box {
        padding: 0;
     }
}

@media only screen and (max-width: 1199px) {
    .astral-fr-pg .pay-left-col{
        /* padding-inline:41px; */
    }
}

@media only screen and (max-width:991px) {
    .astral-fr-pg .pay-left-col {
        padding-inline: 10px;
    }
    .astral-fr-pg .pay-right-col .right-col{
        padding-inline:10px;
    }
}

@media only screen and (max-width:767px) {
.dark-logo {
    max-width: 230px;
}
}
@media only screen and (max-width:575px) {
    .astral-fr-pg .form-inner-wrapper{
        border:0;
    }
    .astral-fr-pg.get-started{
        background-color:transparent;
        padding-top:0;
        margin-top:-30px;
    }

    .astral-fr-pg .check-stories{
        margin-bottom:40px;
    }

    .astral-fr-pg  .main-step-box{
        padding-bottom: 30px;
    }

    .astral-fr-pg  .cht-pay-blk .pay-form-box {
        padding: 0px;
    }

    .astral-fr-pg .form-py-ft a{
        color:var(--secondary-clr);
    }

    .astral-fr-pg  .form-py-ft {
        margin-top: 0;
    }

    .astral-fr-pg .chck-stories-content-box {
        padding-inline:20px;
     
    }
    .astral-fr-pg .cht-chkout-pg .cht-pay-blk{
        padding-inline:0;
    }
    
}
@media only screen and (max-width:480px) {
    .astral-fr-pg .pay-form-box .form-inner-wrapper {
    padding-block: 10px;
}

.astral-fr-pg .chck-stories-content-box {
    padding-inline:10px;
 
}

.astral-fr-pg.get-started {
    margin-top: 15px;
}

.astral-fr-pg .main-step-box{}


}

@media only screen and (max-width:480px) {
    .astral-fr-pg .main-step-box{
        width:100%;
    }
    .pay-fr .pay-left-col{
        padding-inline:0;
    }

    .pay-fr .pay-right-col .right-col{
        padding-inline:0;
    }
    .pay-fr .price-pack-txt,
    .pay-fr .price-pack-txt2
     {
     color:var(--secondary-clr);
    }

    .pay-fr .price-timer .hours,
    .pay-fr .price-timer .minutes,
    .pay-fr .price-timer .seconds,
    .pay-fr .price-timer span{
        color:var(--secondary-clr) !important;
    }
}
.chat-form label{
    color:var(--primary-clr) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444 !important;
    line-height: 28px;
}

/* 12/05/2025  */
.time-blk .skip-btn  {
    margin-top: -40px !important;
    margin-bottom: 15px;
  }
  
  .blk-sure.chat-block{
    display: flex;
  }
  
  .blk-sure .minute-separator{
    left: 49%;
  }
  
  .blk-sure .test-checkbox-field{
    display: flex;
    align-items: center;
    padding-left: 28px
  }
  .blk-sure .cc-ckBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .blk-sure .cc-ckBox{
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    align-items: center;
  }
  .blk-sure .cc-ckBox .checkmark {
    position: relative;
    box-shadow: #100821 0px 0px 0px 1px;
    background-color: #1008211a;
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    transform-origin: 0px 10px;
    border-radius: 4px;
    padding: 0px;
    box-sizing: border-box;
    margin-top: 15px;
  }
  .blk-sure .ckBox-label {
    margin-top: 15px;
  }
  .blk-sure .cc-ckBox input:checked~.checkmark {
    box-shadow: #100821 0px 0px 0px 1px;
    background-color: #100821;
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    transform-origin: 0px 10px;
    border-radius: 4px;
    padding: 0px;
    box-sizing: border-box;
  }
  .blk-sure .not-sure:checked {
    background-color: var(--primary-clr);
    color: #ffffff;
  }
  .cc-ckBox input:checked~.checkmark:after {
    display: block;
  }
  .cc-ckBox .checkmark:after {
    left: 6px;
    top: 42%;
    width: 5px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: all 500ms ease-in-out;
  }
  .cc-ckBox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  .blk-sure input:disabled{
    background-color: gray;
  
  }
  @media screen and (max-width: 575px) {
    .ckBox-label {
      white-space: nowrap;
  }
  }
/* ------20 May 2025-------- */
.cht-change .right-col{
      flex: none;
}

.cht-change .pay-tt{
  margin-top: 12px;
   /* background-color: #ffffff; */
   padding:10px;
   border-radius:10px;
}

.cht-change .right-cht{
    height: auto;
}
.cht-change .pay-note{
    margin-top: 5px;
    font-size: 10px;
    line-height: 13px;
    text-align:center;
}

@media screen and (max-width: 1199px) {
/* .cht-change .right-col{
  padding:0;
} */
 .bl-pay-tt{
    margin-inline: 41px;
 }
 /* .pay-right-col .right-col{
      padding: 1px 41px 15px;
    } */
      .pay-right-col .right-col{
      padding: 1px 0px 15px;
    }
}
 .pb-tc{
    margin-top: 50px;
}
@media screen and (max-width: 991px) {
   .bl-pay-tt {
        margin-inline: 10px;
    }
     .pay-right-col .right-col{
      padding: 1px 41px 15px;
    }
}

@media screen and (max-width: 575px) {
  .cht-change .pay-trust {
        padding-bottom: 0;
    }
    .pb-tc{
    margin-top: 0px;
}
}
@media screen and (max-width: 480px) {
  .cht-change .pay-tt{
    background-color: var(--primary-clr);
    border-radius: 10px;
  }
  .cht-change .pay-trust {
    margin-top:0;
    padding: 5px;
  }
  .cht-change .pay-tt .chat-pay-change .pay-note{
    margin-top: 5px;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    padding: 15px;
  }
 .cht-change-gen .pay-tt {
    background-color: #eedb99;
    color: #100821;
  }

}
.chkout-gen .calc-lists {
    border-bottom: 0;
}
.chkout-gen .calc-inner {
    padding-top: 0px;
}
.def-cur{
  pointer-events: none; cursor: default;
}
/* change 21/06/2025 start */
.tab-pane-payment .left-col {
    margin-top: 0px;
}

.genpay-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:-30px;
}
.nw-chg .genpay-top{
     margin-top:15px;
}
.genpay-top p{
  font-family: "roca-400";
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #100821;
  max-width: 225px;
}

.genpg-timer span{
  color:#100821;
}

.genpg-timer .hours,
.genpg-timer .minutes,
.genpg-timer .seconds{
  color:#100821;
}

.genpg-txt p{
  font-family: "roca-400";
  font-weight: 400;
  font-size: 12px;
  line-height: 23px;
  letter-spacing: 0%;
  color:#100821;

}

.chkout-gen .genpg-at{
  padding-top:11px;
  justify-content: space-between;
}

.gen-pay-pg .cal-amt{
  font-size:15px;
}

.gen-pay-pg .cht-chkout-pg .cht-pay-blk{
  background-color:transparent;
}

.gen-pay-pg .pay-left-top{
  padding-top:0;
  border-radius:0;
}

.gen-pay-pg .tab-pane-payment .form-badge-header{
  width:100%;
  border-radius:10px;
  max-width: 560px;
}

/* SLIDER */
.slider-wrapper-outer {
  display: flex;
  gap: 20px;
  flex-direction: row-reverse;
  max-width: 560px;
}

.slider-wrapper-outer .gallery-container {
	width: 100%;
	height: 608px;
	position: relative;
	padding: 0;
	margin: 0;
}

.slider-wrapper-outer .thumb-container {
  width: 100px;
  height: 550px;
  padding-inline: 0;
  margin: 0;
}

.slider-wrapper-outer .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 10px;
}

.slider-wrapper-outer .thumb-container .swiper-slide {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.slider-wrapper-outer .thumb-container .swiper-slide-thumb-active {
  opacity: 1;
}

.slider-wrapper-outer .swiper-pagination {
  display: none;
}

.slider-wrapper-outer .thumb-container .swiper-slide {
  opacity: 1;
}

.swiper-gen-content{
  position: absolute;
  /* z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  padding-inline: 48px;
  position: absolute; */
  z-index: 1;
  top: auto;
  transform: translateY(0);
  padding-inline: 20px;
  bottom: 70px;
}

.swiper-gen-content h2{
  font-family: 'ppacma-900';
  font-weight: 900;
  font-size: 22px;
  line-height: 35px;
  letter-spacing: 0%;
  text-align: center;
  color: #100821;

  
}

.swiper-gen-content p{
  font-family: "roca-400";
  font-weight: 400;
  font-size: 16px;
  line-height: 35px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
  overflow:auto;

}

.slider-wrapper-outer .gallery-container .swiper-slide::after{
  content:'';
  position:absolute;
  width:100%;
  /* height:100%;
  background-color: rgba(238, 219, 153, 0.9); */
  height: 50%;
  border-radius: 10px;
  bottom: 0;
  left:0;
  background: #EEDB995C;
  backdrop-filter: blur(8px);


}

.gen-pay-pg .cht-chkout-pg .cht-pay-blk {
  padding-top:0;
  padding-inline: 0;
}

.gen-pay-pg .pay-left-bot{
  padding:0;
}

.gen-para {
  display:none;
}

.carta-ttl{
  font-family: 'ppacma-900';
  font-weight: 900;
  font-size: 22px;
  line-height: 35px;
  letter-spacing: 0%;
  text-align: center;
  color: #100821;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 14px;
  width: 100%;
  
}

.gen-pay-pg  .cht-change-gen{ 
  position:relative;
}

.gen-pay-pg .pyheroTab::before{
  background:url(../images/pt-bg.png);
  background-size: contain;
  mix-blend-mode: overlay;
  opacity: 50%;

}

.graphic-design img{
  position:absolute;
 
}

.graphic-d1{
  mix-blend-mode: color-dodge;
  right: 402px;
  top: -70px;
}
.graphic-d2{
  mix-blend-mode: plus-lighter;
  bottom: 0;
  right: -351px;
  transform: rotate(20deg);
  width: 600px;
  height: auto;
}
.graphic-d3{
  width: 338px;
  left: -47px;
  mix-blend-mode: overlay;
}
.graphic-d4{
  bottom: 231px;
  width: 520px;
  left: 118px;
  mix-blend-mode: overlay;
}

.gen-pay-pg .pay-left-bot{
  background-color: transparent;
  flex-grow: 0;
}

.gen-pay-pg .cht-pay-blk .pay-row{
  margin-top: 0;
}

.gen-pay-pg .cht-change .pay-tt{
  margin-top: 0;
  padding: 0;
}

.gen-pay-pg  .cht-change .pay-note{
  margin-top: 5px;
  font-family: Montserrat;
  font-weight: 400;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0%;
  text-align: center;
}

.gen-pay-pg{
  overflow:hidden;
  padding-top: 60px;
  margin-top: 0;
}

.bot-des{
  margin-left: 104px;
  margin-top: 20px;
  max-width: 477px;
  width: 100%;
  font-family: "roca-400";
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #FFFFFF;
    max-width: 420px;
}

.clr-yellow{
 color:#eedb99;
}
 /* 23/04/2025  start*/
.chkout-gen .main-step-box{
    display: flex;
}
/* .gen-pay-pg {
    padding-top: 0px;

} */
.gen-pay-pg .cht-change .pay-note {
    margin-top: 20px;
}
.chkout-gen .extra-info{
    color:#DDEEFF !important;
}
.hide-mobile{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pay-left-mid-mobile{
    display: none;
}
/* 23/04/2025  end*/
/* 30 may start */
.tab-pane-payment .extra-info {
    font-size: 13px;
}
.tab-pane-payment .chart-box .heading {
    line-height: 20px;
}
@media only screen and (min-width: 1400px) {
    .check-stories {
        margin-top: 40px;
    }
  .bot-des{
  max-width: 477px;
  }
  .gen-pay-pg .cmn-cht-ttl{
    font-size:25px;
  }

  .gen-pay-pg .pay-left-bot {
    padding: 0;
  }

  .graphic-d1{
    right: 402px;
    top: -70px;
  }
  .graphic-d2{
    bottom: 0;
    right: -351px;
  }
  .graphic-d3{
    width: 338px;
    left: -47px;
  }
  .graphic-d4{
    bottom: 231px;
    width: 520px;
    left: 314px;
  }
      .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1250px !important;
    }
}



@media only screen and (max-width: 1199px) {
    .pay-form-box {
        margin-top: 25px;
    }
    .desk-extra-info, .form-badge-header.dsktp-bdg-header{
        margin-top: 40px;
    }
    .tab-pane-payment .chart-box {
        margin-top: 15px;
    }
  .slider-wrapper-outer .thumb-container{
    width: 120px;
    height: 590px;
  }
  .slider-wrapper-outer{
   margin-inline:auto;
  }

  .gen-pay-pg .cht-chkout-pg .cht-pay-blk {
    padding-inline: 0;
  }

  .gen-pay-pg .form-badge-header.dsktp-bdg-header {
    display: flex;
  }
  .gen-pay-pg .tab-pane-payment .form-badge-header {
    width: 100%;
    border-radius: 10px;
    max-width: 100%;
  }
  .graphic-d4 {
    bottom: 0;
    left: 28px;
  }
  .genpay-top{
    margin-top:-25px;
  }

  .bot-des {
    max-width: 560px;
    margin-inline: auto;
}
.nw-chg .genpay-top{
    margin-top:-15px;
}
 /* 23/05/2025 start */
 .tab-pane-payment .left-col, .tab-pane-payment .right-col {
        max-width: 100%;
    }
    .header-new {
        max-width: 100%;
        margin-bottom: 10px;
    }
    .desk-extra-info{
        display: block;
    }
/* 23/05/2025 end */
}
@media (max-width: 991px) {

.graphic-d1{
  right: 192px;
}
.pay-form-box{
    margin-top: 30px;
}
}
@media (max-width: 767px) {
.slider-wrapper-outer{
  max-width: 100%;
}

.swiper-gen-content{
  bottom: 42px;
}
.gen-pay-pg .pyheroTab::before{
  background:none;
}

.graphic-design{
  display:none;
}
.genpay-top {
        margin-top: -20px;
    }
}

@media (max-width: 575px) {
  .swiper-gen-content {
    bottom: 70px;
  }
  .swiper-gen-content h2 {
    font-size: 18px;
    line-height: 30px;
  }

.swiper-gen-content p{
  font-size: 14px;
  line-height: 30px;
}

.gen-pay-pg{
  padding-top:0;
}
.swiper-gen-content{
  padding-inline:10px;
}
.bot-des {
    max-width: 100%;
}
}


@media (max-width: 480px) {
  .slider-wrapper-outer {
      flex-direction: column;
      align-items: center;
      gap: 15px;
  }

  .slider-wrapper-outer .gallery-container {
      width: 100%;
      height: auto;
  }

  .slider-wrapper-outer .gallery-container .swiper-wrapper {
      height: 420px;
  }

  .slider-wrapper-outer .thumb-container {
      width: 100%;
      height: auto;
  }

  .slider-wrapper-outer .thumb-container .swiper-slide {
      width: 80px;
      height: 129px;
  }

  .slider-wrapper-outer .swiper-pagination {
      display: block;
      text-align: center;
      position: static;
      margin-top: 12px;
  }

  .slider-wrapper-outer .swiper-pagination-bullet {
    background: #D9D9D9;
    opacity: 0.5;
    width: 9px;
    height: 9px;
  }

  .slider-wrapper-outer .swiper-pagination-bullet-active {
      background: #EEDB99;
      opacity: 1;
      width: 9px;
      height: 9px;
  }

  .slider-wrapper-outer .gallery-container .swiper-slide::after{
    height: 50%;
    border-radius: 10px;
    bottom: 0;
    top:auto;
    background: #EEDB995C;
    backdrop-filter: blur(8px);
  }

  .swiper-gen-content {
    position: absolute;
    z-index: 1;
    top: auto;
    transform: translateY(0);
    padding-inline: 30px;
    bottom: 22px;
  }

  .swiper-gen-content h2 {
    font-size: 15px;
    line-height: 20px;
    margin-bottom:12px;
  }

  .swiper-gen-content p {
    font-size: 13px;
    line-height: 20px;
  }
  

  .gen-pay-pg .cht-chkout-pg .wlc-blk {
    padding: 10px 10px 10px 10px;
    border-radius: 20px;
  }


  .gen-pay-pg .pay-left-bot {
    background-color: transparent;
  }

  .gen-para{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  .gen-para p{
    font-family:'ppacma-900';
  font-weight: 900;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0%;
  text-align: center;
  color:#100821;
  margin-top:12px;
  margin-bottom:8px;
  }

  .gen-para a{
  font-family: "roca-400";
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0%;
  text-align: center;
  background: #100821;
  color: #fff;
  border-radius: 7px;
  padding-inline: 17px;
    padding-top: 4px;
    padding-bottom: 6px;
  margin-inline: auto;
  }

  .gen-pay-pg .pay-left-top{
    border-radius:10px;
  }
 
  .genpg-txt p{
    color: var(--primary-clr);
  }

  .gen-pay-pg .pay-form-box{
    margin-top:30px;
  }

  .bot-des{
    display:none;
  }
  .gen-pay-pg .cht-change .pay-tt{
    margin-top: 10px;
    padding: 10px;
  }
  /* 23/05/2025 start */
  .gen-pay-pg .cht-change .pay-note{
    margin-top: 5px;
  }
  .hide-mobile{
    display: none;
  }
  .pay-left-mid-mobile{
    display: flex;
  }
  .genpay-top {
        margin-top: 0px;
    }
    .old-price{
        font-size: 25px;
    }
    .hide-radio-mob{
        display: none;
    }
     .price-new{
        color: #100821 !important;
        font-size: 24px !important;
        line-height: 27px!important;
        margin-left: 106px!important;
    }
    .price-timer .price-new span{
         color: #100821 !important;
        font-size: 24px !important;
    }
    .font-wgt{
    font-weight: 600;
    }
     .pay-form-box .ft-sz{
    font-size: 24px;
  }
  .tab-pane-payment .left-col {
        margin-top: 35px;
    }
    /* .tab-pane-payment .chart-box{
            margin-top: 10px;
    } */
     .desk-extra-info, .form-badge-header.dsktp-bdg-header{
        margin-top: 10px;
     }
        .nw-chg .genpay-top {
        margin-top: 0px;
    }
   /* 23/05/2025 end */
}



@media (max-width: 420px) {
.swiper-gen-content {
  padding-inline: 10px;
}

.slider-wrapper-outer .thumb-container .swiper-slide {
  height: 110px;
}
}

@media (max-width: 375px) {

.swiper-gen-content p {
  font-size: 11px;
  line-height: 17px;
}
.price-new{
  margin-left: 0px !important;
}
}
.cus-hed{
        font-size: 25px;
    font-weight: 500;
}

.pay-form-box .field-box{
    padding-bottom: 25px;
}
/* change 21/06/2025 end */
/* new button color css start*/
  .right-col .download_btn {
    background-color: #00C851; 
    color: #ffffff; 
    border:1px solid #00C851;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }

  .right-col .download_btn:hover {
    background-color:#00993d;
    border:1px solid #00993d;
    color: #ffffff; 
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  }
  .dark-btn, .chat-form-btn{
    background-color: #00C851; 
    border:1px solid #00C851;
    cursor: pointer;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }
  .pb-tc .dark-btn{
    background-color: #00C851; 
    border:1px solid #00C851;
    cursor: pointer;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }
   .pb-tc .dark-btn:hover, 
   .chat-form-btn:hover,
    .dark-btn:hover{
    background-color: #00993d; 
    border:1px solid #00993d;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  }
    .pb-tc .dark-btn:hover .form-btn-loader {
        background-color: #00993d; 
    }
    .dark-btn:hover .form-btn-loader {
        background-color: #00993d; 
    }
  .form-btn-loader{
    background: #00C851;
    color: #ffffff;
  }
  .tc-fr .form-btn-loader {
    background: #00C851;
    color: #ffffff;
  }
  #form_submit_btn::after {
    border-color: #ffffff;
  }
  .form-submit-btn span {
    color: #ffffff;
  }
  .br-wh{
    border:1px solid white;
    border-radius: 10px;
  }
 
  /* new button color css end */
/* location suggestion css start */
.suggestion-item.active {
  background-color: var(--primary-clr);
  color: white;
}
.suggestions{
  list-style:none;
  background:white; z-index:999;
  /* border: 1px solid black; */
  border-top-style: none;
  display: none;
  margin: 0px;
  padding: 0px;
  border-radius: 2px;
}
.text-block input{
  border: 1px solid black;
}
.border-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.chat-block .suggestion-item{
  color:var(--primary-clr)
}
.chat-block .suggestion-item.active{
  background-color: var(--primary-clr);
  color: white;
}
/* location suggestion css end */
#CookiebotWidget:not(.CookiebotWidget-inactive){
    opacity: 0 !important;
}

/* ----palm scan start----- */
/* Jun5-2025 - start */

.palmistry-form  .palm-wrap{
  background-color: var(--primary-clr) !important;
  color: #E3DDFF;
  padding: 20px;
  border-radius: 15px;
  max-width: 446px;
  margin-inline:auto;
}

.palmistry-form .palm-inf .image{
  width:20px;
  height:20px;
}

.palmistry-form .palm-inf .image img{
  width:100%;
  height:auto;
}

.palm-content{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.palmistry-form  .tab-pane-questions .tab-content-box {
  padding-block: 10px;
}

.palm-content-top{
  display: flex;
  justify-content: center;
  gap: 10px
}

.palm-inf{
  display: flex;
  gap: 5px;
  width: calc(50% - 10px);
  border: 1px solid var(--secondary-clr);
  padding: 8px;
  border-radius: 8px;
}

.plm-ttl{
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

.scn-plm-img-box{
  height: 360px;
  width: 300px;
}

.scn-plm-img-box img{
  height: 100%;

}

.palmerrMdl .modal-content{
  background-color: #B3A3FC;
}

.palmerrMdl .modal-body{
  color: #ffffff;
}

.pmtry-btn:focus-visible{
  background-color: #00C851 !important;
  border: 1px solid #00C851 !important;
  color:#ffffff !important;
}

.plm-rlt{
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.palm-content-btm .pcb-image img{
  background-color: #f1f1f1;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  /* as new */
  border-radius:10px
}

.pcb-slide-title .changing-text{
  font-size: 26px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  color: #B3A3FC;
}

.gui-ttl{
  margin-bottom: 16px;
  font-size: 22px;
  text-align: center;
}

.pcb-option{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.pcb-option span{
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-black);
  padding: 2px 15px;
  border-radius: 5px;
  background: #E3DDFF;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 25px;
}

.pcb-begin-btn{
  margin-top: 32px;
  margin-bottom: 32px;
  }

.pcb-begin-btn button{
  font-family: 'roca-400';
  max-width:100%;
  }

.pcb-terms p{
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
}

.pcb-terms p a{
transition:all 0.3s ease-in-out;
 text-decoration:underline;
}

.pcb-terms p a:hover{
  color:#B3A3FC;
 }

 .pcb-term span{
  font-size: 12px;
  text-align: center;
  display: inline-block;
 }

 .palmistry-step-form .tab-pane-questions.active {
    display:block ;
 }

.step-2-pane .scan-palm .sp-image img{
  background-color: #f1f1f1;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  /* as new */
  border-radius:10px;
}

.sp-cm-ttl{
  font-size: 24px;
  font-weight: bold;
  line-height: 31px;
  color: #B3A3FC;
  margin-bottom: 10px;
}

.sp-text{
  margin-bottom: 30px;
}

.privacy-text{
  margin-top: 20px;
  display: flex;
  gap: 5px;
}

.privacy-text img{
  width: 24px;
  height: 24px;
}
.pcb-btn .step-btn{
  max-width:100%;
  font-family: 'roca-400';
}
.privacy-text .text{
font-size:12px;
}

.sp-text p{
  font-size:15px;
}

.palmistry-progress-bar{
  transition: width 2s ease-in-out;
  background-color: var(--primary-clr);
}

.palmistry-progress{
  background-color: white;
  max-width: 800px;
  margin: auto;
}

.palmistry-step-form{
  padding: 20px;
}

.correct-way{
  margin-bottom:10px;
}

.correct-way img{
 width:100%;
 height:auto;
}

.wrong-way img{
  width:100%;
  height:auto;
}

/* upload image css */
#cameraContainer {
  position: relative;
  display: none;
  margin-top: 1em;
  /* display:none; */
}

video {
  /* border-radius: 10px; */
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 2px solid #333;
}

/* new-added-start */
canvas {
  border-radius: 10px;
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 2px solid #333;
  transform:scaleX(1) !important;
 
}

body.frontface canvas{
  transform:scaleX(-1) !important;
}

body.galleryface canvas{
  transform:scaleX(1) !important;
}

#photoPreview {
  margin-top: 1em;
  max-width: 300px;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  margin-inline: auto;
}

#photoPreview2 {
  max-width: 300px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  margin-inline: auto;
  transform:scaleX(1) !important;
}

body.frontface #photoPreview2{
 transform:scaleX(-1) !important;
}

body.galleryface #photoPreview2{
  transform:scaleX(1) !important;
}

/* new-added-end */

.guide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-wrapper svg {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#result {
  margin-top: 1em;
  font-weight: bold;
  min-height: 24px;
  text-align:center;
}

#photoPreview {
  margin-top: 1em;
  max-width: 300px;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  margin-inline: auto;
   transform: scaleX(-1);
}

#photoPreview2 {
  max-width: 300px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  margin-inline: auto;
   transform: scaleX(-1);
}

input[type="file"] {
  display: none;
}

.position-relative {
  position: relative;
}

.scan-blk{
  position:relative;
}
/* upload image  css  */

.up-img-form{
  display:flex;
  justify-content:center;
  margin-top: 25px;
  margin-bottom: 30px;
}

.up-img-form label{
  font-size: 20px;
  line-height: 18px;
  color: var(--secondary-clr);
  margin-bottom:0;
  cursor: pointer;
}

.check-pm{
  display: flex;
  gap: 10px;
  align-items:center;
  background-color: #99c1cc57;
  border-radius: 50px;
  transition:all 0.3s ease-in-out;
}

.check-pm:not(:last-child){
margin-bottom:20px;
}

.check-pm.active{
  background-color: var(--secondary-clr);
}

.check-pm .chk{
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-clr);
  color: #fff;
  border-radius: 50%;
  transition:all 0.3s ease-in-out;

}

.check-pm.active .chk{
  background-color: #9C3C96;
  color: var(--primary-clr);
}

.check-pm p{
  font-size:12px;
  color: #fff;
  transition:all 0.3s ease-in-out;

}

.check-pm.active p {
  color: var(--primary-clr);
}

.pm-progress-wrapper{
  width: 137px;
  height: 137px;
  position: relative;
  margin: 0 20px;
  border-radius: 50%;
}

.pm-progress-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

.palm-progress-core{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* palm-new-start */
.aly-ttl {
  position: relative;
  padding-bottom: 30px;
}

.aly-tl {
  color: #ffffff;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.aly-tl.show {
  opacity: 1;
  pointer-events: auto;
}

/* palm-new-end */

.palm-aly-image{
  margin-top:30px;
  margin-bottom:30px;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
}

.palm-aly-image {
  position: relative;
}

.progress.finger-progress {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.finger-progress-bar {
  height: 100%;
  background-color: #B3A3FC;
  transition: width 0.3s ease;
}

/* 6jun2025-start */
.palmistry-progress{
  display:flex;
}

.palmistry-progress.hide{
  display:none;
}

.pcb-terms span{
  font-size:12px;
  text-align:center;
  display:inline-block;
}

.mt-ttl{
  margin-bottom:20px;
}

.palm-aly-image img{
  width:100%;
  height:auto;
}

.changing-slider {
  /* height: 40px; */
  height: 35px;
  overflow: hidden;
}
.changing-slider h2 {
  font-size: 20px;
  text-align: center;
  margin: 0;
}

.scan-blk-cont{
  margin-top:20px;
  margin-bottom:20px;
}

.scan-blk-cont h4{
  font-size:24px;
  color:#B3A3FC;
  margin-bottom:10px;
  
}
.scan-blk-cont p{
  font-size:16px;
}

/* 6jun2025-end */
/* Jun5-2025 - end */
.square {
  width: 300px;
  height: 100%;
  background: transparent;
  border: 10px solid #B3A3FC;
  border-radius: 10px;
  position:absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
    
}

.scan {
  width: 100%;
  height: 5px;
  background: linear-gradient(
    to bottom,
    #B3A3FC 0%,      /* solid at the top */
    #B3A3FCcc 50%,   /* semi-transparent middle */
    #B3A3FC40 100%   /* more transparent/faded at bottom */
  );
  animation: scanning 1.5s linear alternate infinite;
}

@keyframes scanning {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(345px);
  }
}
.finger-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}
/* jun10-2025-start */
/* Result Page Css */
.palm-result-pg .rs-img{
  width: 300px;
  margin-bottom: 30px;
}

.palm-result-pg .rs-img img{
  width: 100%;
  height:auto;
}

.pm-res-top{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* new-2 */
  background-color: #B3A3FC;
  padding: 30px;
  border-radius: 30px;
}

.palm-result-pg .rs-title{
  font-size: 34px;
  margin-bottom: 30px;
  color:var(--primary-clr);
  text-align:center;
}

.palm-result-pg .rel-status{
  margin-top: 70px;
  display: flex;
  gap: 30px;
  flex-wrap:wrap;
}

.palm-result-pg .rel-status .rel-wrap{
  width: calc(100% / 2 - (1 * 30px) / 2);
  border: 2px solid #f1f1f1;

  padding: 20px;
  border-radius: 20px;
  transition:all 0.3s ease-in-out;
}

.palm-result-pg .rel-status .rel-wrap:hover{
  border: 2px solid #B3A3FC;
}

.palm-result-pg .rel-title{
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
}

.palm-result-pg .rel-title i{
  font-size: 30px;
  line-height: 34px;
  transform:translateY(0);
  transition:all 0.3s ease-in-out;
}

.palm-result-pg .rel-status .rel-wrap:hover .rel-title i{
  color:#B3A3FC;
  transform:translateY(-8px);
}

.palm-result-pg .rel-sta{
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
}

.palm-result-pg .rel-title span{
  font-size: 30px;
  line-height: 35px;
  color: #B3A3FC;
  font-weight: 400;
}

.palm-result-pg .rel-desc{
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  font-family: 'roca-400';
  margin-top: 10px;
}
.rs-prog{
  transition: width 2s ease-in-out;
  background-color: #B3A3FC;
  height: 100%;
  width:0%;
  border-radius: 20px;

}

.rs-progress-br{
  background-color: #f1f1f1;
  flex: 1;
  overflow: hidden;
  height: 16px;
  border-radius: 20px;
}

.res-prog-blk{
  display: flex;
  align-items: center;
  gap: 40px;
}

.rs-prog-lbl{
  font-size: 26px;
  color: #B3A3FC;
  font-weight: 500;
}

.ff-roboto{
   font-family: 'roca-400';
}

/* jun10-2025-end */
/* new-added-start */
.palmerrMdl .modal-header{
  border-bottom: transparent;
}

.palmerrMdl .btn-close{
  color: var(--primary-clr);
}
.btn-close:focus {
  outline: 0;
  box-shadow: none !important;
}

.palmerrMdl.show{
  background-color:var(--primary-clr);
}
/* new-added-end */
.palm-chk .main-step-box{
    display: flex;
}
.palm-chk .pay-form-box{
  margin-top: -35px;
}
.palm-chk .price-timer {
  font-size:26px;
}
.palm-chk .tab-pane-payment .left-col{
  margin-top: 0px;
}
.palm-chk .tab-pane-payment .extra-info{
  font-size:13px;
}
.aly-tl{
  text-wrap: nowrap;
}
.show-mobile{
  display: none;
}
@media only screen and (max-width: 1199px) {
    .palm-chk .tab-pane-payment .left-col {
      margin-top: 30px;
    }
    .palm-chk .chart-box{
      margin-top: 10px;
    }
    .palm-chk .pay-form-box{
      margin-top: 10px;;
    }
    .palm-chk .desk-extra-info {
        display: block;
    }
}
@media only screen and (max-width: 991px) {
  .palm-result-pg .rs-title{
    font-size: 30px;
  }

  .palm-result-pg .rel-status .rel-wrap{
    width: 100%;
  }

  .palm-result-pg .rel-status{
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .palm-result-pg .rs-title {
    font-size: 26px;
  }
  .palm-result-pg .rel-title i {
    font-size: 26px;
    line-height: 32px;
  }
  .palm-result-pg .rel-sta {
    font-size: 22px;
    line-height: 29px;
  }
  .palm-result-pg .rel-desc{
    font-size: 15px;
  }

  .palm-result-pg .rel-title{
    margin-bottom: 7px;
  }

  .palm-result-pg .rel-desc{
    margin-top: 7px;
  }

  .rs-prog-lbl{
    font-size: 24px;
  }
  .palm-chk .tab-pane-payment .chart-box .heading{
    margin-top: -35px;
  }
  .up-img-form label {
    font-size: 18px;
  }
}
@media only screen and (max-width: 575px) {
  .palm-result-pg{
    margin-top:50px
  }
  .palm-chk .tab-pane-payment .chart-box .heading{
    margin-top: -10px;
  }
  .form-get-started{
    margin-top: -50px;
  }
  .palm-result-pg{
    background-color: var(--primary-clr);
    margin-top: 0;
  }
}
@media only screen and (max-width: 480px) {
    .palm-result-pg .rs-title {
        font-size: 24px;
    }
    .palm-result-pg .rel-title i {
        font-size: 24px;
        line-height: 30px;
    }
    .palm-result-pg .rel-sta {
        font-size: 18px;
        line-height: 27px;
    }
    .rs-progress-br{
        height: 12px;
    }
    .rs-prog-lbl {
        font-size: 20px;
    }
    .palm-result-pg .rel-desc {
        font-size: 14px;
        line-height: 23px;
    }
    .palm-result-pg .rel-status {
        margin-top: 40px;
    }
    .palm-result-pg .rel-status {
        gap: 20px;
    }
    .palm-chk .pay-form-box{
      padding-inline: 0px;
    }
    .palm-chk .total-payout-box{
      color: var(--primary-clr);
    }
    .palm-chk .price-new{
      font-size: 30px;
      font-weight: 600;
    }
    .palm-chk .pay-form-box {
        margin-top: 0px;
    }
    .pcb-option {
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .pcb-option span {
      justify-content: center;
      width: fit-content;
    }
  .show-mobile{
    display: block;
  }
  .pcb-option{
    margin-bottom: 20px;
  }
  .changing-slider {
    height: 30px;
   }
  .palmistry-step-form{
    padding-inline: 5px;
  }
  .palmistry-step-form .tab-content-box{
    padding-inline:0 !important;
  }
  .pcb-slide-title .changing-text{
    font-size: 24px;
  }
  .pcb-begin-btn {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .palm-content-btm .pcb-image img {
    margin-bottom: 20px;
  }
  .palm-content-top{
    flex-direction:column;
  }
  .palm-inf{
    width:100%;
  }
  .sp-cm-ttl{
    margin-bottom: 6px;
  }
  .sp-text p {
    font-size: 14px;
  }
  .step-2-pane .scan-palm .sp-image img{
    margin-bottom: 20px;
  }
  .sp-text {
    margin-bottom: 20px;
  }
  .privacy-text {
    margin-top: 12px;
  }
  .up-img-form label{
    font-size: 16px;
  }
  .up-img-form {
    margin-top: 22px;
    margin-bottom: 25px;
  }
    .palmistry-form .tab-content-box {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 420px) {
  .pcb-slide-title .changing-text {
    font-size: 22px;
  }
  .gui-ttl{
    font-size:22px;
  }
  .sp-cm-ttl {
    font-size: 22px;
  }
  .palm-result-pg .rs-title {
    font-size: 20px;
  }
}
@media only screen and (max-width: 375px) {
  .pcb-slide-title .changing-text {
    font-size: 19px;
  }
  .gui-ttl{
    font-size:19px;
  }
  .sp-cm-ttl {
    font-size: 20px;
  }
}
/* -------------palm scan end ------------------- */

/* Upsell product  */
/* ==================== General ==================== */
.upsell {
   font-family: 'Roboto' !important;
   position:relative;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

.upsell::after{
  content:"";
  position: absolute;
  inset:0;
  background: url('../images/upsell/graphic-bg.png') no-repeat center center/cover;
  mix-blend-mode: overlay;
  /* opacity: 50%; */
 
}

.upsell::before{
  content:"";
  position: absolute;
  inset:0;
  background: url('../images/upsell/mainBg.png') no-repeat center center/cover;
   filter: brightness(0) saturate(100%) invert(65%) sepia(35%) saturate(1070%) hue-rotate(204deg) brightness(103%) contrast(98%);
    opacity: 19%;
}

.upsell-container {
    max-width: 800px;
    margin: auto;
    position:relative;
    z-index:1;
}

/* ==================== Offer Header ==================== */
.upsell-badge {
    background: #EEDB99;
    color: #0F172B;
    display: inline-block;
    padding: 11px 16px 10px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    border: 1px solid #AD46FF4D;
    background: #AD46FF33;
        color: #DAB2FF;
}

.upsell-badge img{
  margin-right: 5px;
  filter: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(1403%) hue-rotate(201deg) brightness(103%) contrast(104%);
}

.upsell-title {
  font-family: Roboto;
  font-weight: 500;
  font-size: 42px;
  line-height: 100%;
  margin-bottom:12px;

  
}

.upsell-subtitle {
  font-family: Roboto;
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  color: #DAB2FF;

}

/* ==================== Countdown ==================== */
.upsell-countdown {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 15px;
    margin-top:20px;
    margin-bottom:35px;
}

.upsell-countdown-box {
  border-radius: 8px;
  padding: 10px 15px;
  min-width: 80px;
  border: 1px solid #8200DB80;
  background: #59168B80;
}

.upsell-countdown-box span {
  font-family: Roboto;
  font-weight: 500;
  font-size: 24px;
  line-height: 33px;
  color: #fff;
  display:block;

}

.upsell-countdown-box small {
  font-size: 12px;
  color: #D1D5DC;
}

.upsell-colon{
  color: #fff;

}

/* ==================== Features ==================== */
.upsell-features-box {
       background: #59168B4D;
    border: 2px solid #AD46FF4D;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: left;
    margin-bottom:30px;
}

.upsell-features-box h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 26.3px;
  line-height: 31.5px;
  letter-spacing: 0%;
  text-align: center;
  max-width: 490px;
  margin-inline: auto;
  color: #DAB2FF;
  margin-bottom:20px;
}

.upsell-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.upsell-feature-item {
  display: flex ;
  gap: 12px;
  align-items: flex-start;
  background: #3f1d634a; ;
  padding: 14px;
  border-radius: 10px;
}

.upsell-feature-item img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.upsell-feature-item h3 {
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color:#ffffff;  
  margin-bottom:6px;
}

.upsell-feature-item p {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #D1D5DC;

  
}

/* ==================== Pricing ==================== */
.upsell-pricing {
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.upsell-old-price {
  font-family: Roboto;
  font-weight: 400;
  font-size: 17.5px;
  line-height: 24.5px;
  text-align: center;
  text-decoration: line-through;
  color: #DAB2FF;
}

.upsell-new-price {
  font-family: Roboto;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  letter-spacing: 0%;
  text-align: center;
  color: #E9D4FF;

  
}

.upsell-discount {
  font-family: Roboto;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  color: #FFFFFF;
  width: 47px;
  height: 22px;
  background: #E7000B;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== Buttons ==================== */
.upsell-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    max-width: 392px;
    width: 100%;
    font-family: Roboto;
    font-weight: 600;
    font-size: 18px;
    line-height: 24.5px;
    transition: 0.3s;
}

.upsell-btn-green {
  /* background: #00A63E; */
  color: #fff;
  background: linear-gradient(94.45deg, #8B5CF6 0%, #A855F7 100%);
  box-shadow: 0px 10px 25px 0px #8B5CF64D;
}

.upsell-btn-green:hover {
    background: linear-gradient(94.45deg, #9D6FF8 0%, #B266F9 100%);
}

/* ==================== Footer Text ==================== */
.upsell-info {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
  max-width:376px;
  margin-inline:auto;
  color: #F3E8FF;
  margin-top:16px;
  }


.upsell-guarantee {
    margin-top: 15px;
    font-family: Roboto;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    color: #05DF72;
}

.upsell-guarantee i {
  margin-right:6px;  
}

.upsell-no-thanks {
    margin-top: 8px;
}

.upsell-link-muted {
    color: #DAB2FF;
    font-family: Roboto;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    text-decoration: underline;
}

.upsell-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px) brightness(0.6);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C033599;
  backdrop-filter: blur(4px);
}

    .upsell-modal-content {
      border: 1px solid #FDC700;
      border-radius: 16px;
      backdrop-filter: blur(20px);
      padding: 25px;
      width: 527px;
      text-align: center;
      color: #fff;
      animation: zoomIn 0.3s ease;
      background: linear-gradient(0deg, rgba(29, 41, 61, 0.5), rgba(29, 41, 61, 0.5)),
        linear-gradient(90deg, rgba(253, 199, 0, 0.2) 0%, rgba(253, 199, 0, 0) 50%, rgba(253, 199, 0, 0.2) 100%);
      backdrop-filter: blur(100px);
      box-shadow: 0px 5px 10px 0px #00000026;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      background: #561E82;
      border: 1px solid #B3A3FC;
    }

  .upsell-tnx{
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0%;
    text-align: center;
    color: #C9D1E5;
    margin-bottom:30px;
  }

  .upsell-modal-close {
    float: right;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
  }

  .upsell-success-icon {
    margin-bottom: 30px;
  }

  .upsell-input {
    width: 100%;
    padding:10px;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 16px;
    text-align: left;
    background: #314158;
    color: #ffffff;
    padding-left: 36px;
    margin-bottom:6px;
    margin-top:8px;
    height:50px;
    border: 1px solid #FFFFFF33;
  }
  .upsell-input::placeholder{
    color:#ffffff;
  }

  .whts-num .upsell-field{
    position:relative;
  }

  .whts-num .upsell-field img{
    position: absolute;
    top: 28%;
    left: 14px;
  }
  .whts-num .upsell-field span{
    font-family: Roboto;
    font-weight: 800;
    font-size: 13px;
    line-height: 21px;
    color: #333;
    text-align:left;
    display: block;
  }

  .upsell-btn:hover {
    transform: translateY(-2px);
  }

  .upsell-what-next {
    margin-top: 20px;
    background: #612097;
    border-radius: 10px;
    padding: 15px 15px;
    text-align: left;
    margin-bottom: 20px;
    border: 1px solid #B3A3FC;
  }

  .upsell-what-next ul {
    padding-left:17px;
  }

  .upsell-purchase{
    font-family: Roboto;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 16px;
  }

  .whts-num{
    display: flex ;
    flex-direction: column;
    
  }

  .whts-num label{
    font-family: Roboto;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    text-align: left;
      margin-bottom: 5px;
  }

  .upsell-what-next h3{
       font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    color: #DAB5FF;
    margin-bottom: 10px;
  }

  .upsell-what-next ul{
    display: flex;
    flex-direction:column;
    gap:7px;
  }

  .upsell-what-next ul li{
    /* list-style: disc; */
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #F5F5F5;
    position: relative;
  }
.upsell-what-next ul li::before {
    position: absolute;
    content: "";
    background-color: #ffffff;
    width: 5px;
    height: 5px;
    display: flex;
    top: 40%;
    border-radius: 50px;
    left: -15px;
}

  .upsell-privacy{
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #C9D1E5;
    margin-top:20px;
    display:block;
  }

  /* Animation */
  @keyframes zoomIn {
    from {transform: scale(0.7); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
  }

.upsell{
  padding: 30px 20px;
}

/* ==================== Responsive ==================== */
@media (max-width: 767px) {
  .upsell-features-grid {
      grid-template-columns: 1fr;
  }
  .upsell-title {
      font-size: 24px;
  }
  .upsell-new-price {
      font-size: 22px;
  }
}

@media (max-width: 575px) {
  .upsell-modal-content{
    padding: 25px 20px;
    width: 100%;
  }

  .upsell-purchase{
    font-size:24px;
    margin-bottom:8px;
  }
  .upsell-success-icon{
    margin-bottom:20px;
  }

  .upsell-success-icon img{
    width:50px;
    height:50px;
  }
  .upsell-tnx{
    font-size: 12px;
    max-width: 272px;
    margin-inline: auto;
    margin-bottom: 12px;
  }

  .whts-num label{
    font-size: 12px;
    line-height: 12px;
  }

  .upsell-input{
    font-size:14px;
    height:40px;
    margin-bottom: 4px;
    margin-top: 6px;
  }

  .upsell-input::placeholder{
    font-size:14px;
  }

  .whts-num .upsell-field span{
    font-size:10px;
  }
  .upsell-what-next ul li{
    font-size:12px;
  }
  .upsell-what-next{
    margin-top: 10px;
    margin-bottom: 14px;
  }
  .upsell-btn {
    font-size:14px;
    height:40px;
    padding-block: 5px;
  }
  .upsell-privacy {
    font-size: 10px;
    margin-top: 12px;
}
.upsell-modal{
  padding-inline:10px;
}

.whts-num .upsell-field img{
  top: 25%;
  height: 17px;
}

.upsell-badge{
  padding: 6px 16px 5px 16px;
  font-size: 10px;
  margin-bottom: 10px;
}
.upsell-subtitle{
  font-size: 16px;
}

.upsell-title {
  margin-bottom: 5px;
}
.upsell-countdown-box{
    padding: 8px 10px;
    min-width: 70px;
}
.upsell-countdown-box span{
  line-height: 25px;
}
.upsell-countdown{
  margin-bottom: 20px
}
.upsell-features-box{
  padding: 20px 16px;
  margin-bottom:20px;
}

.upsell-features-box h2{
  font-size: 16px;
  line-height: 21px;
  max-width: 280px;
  margin-bottom: 14px;
}

.upsell-feature-item img {
  height:30px;
  width:30px;
}

.upsell-feature-item{
  padding: 11px;
}

.upsell-feature-item h3{
  font-size:12px;
}

.upsell-feature-item p{
  font-size:10px;
}

.upsell-old-price{
  font-size:16px;
}

.upsell-pricing {
  gap:8px;
  margin-bottom:17px;
}
.upsell-guarantee{
  margin-top: 12px;
    color: #EEDB99;
}

}

@media (max-width:375px) {
  .upsell-modal-content {
    width:100%;
  }
}


@media (max-width:331px) {
  .whts-num .upsell-field img{
    top: 20%;
  }
}

#upsellModal {
  display: none;  /* hidden by default */
}

/* Desktop: hide mobile CTA */
.upsell-cta-mobile {
    display: none;
}

/* Mobile: show mobile CTA below countdown */
@media (max-width: 767px) {
    .upsell-cta-mobile {
        display: block;
        margin-top: 20px; /* spacing from countdown */
        margin-bottom: 20px; /* spacing from countdown */
        text-align: center;
    }
}

#confirmWhatsappBtn {
    background-color: #00A63E; /* enabled green */
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    transition:   0.3s;
    max-width: 100%;
}

#confirmWhatsappBtn:disabled {
    background-color: #626864; /* disabled grey */
    cursor: not-allowed;
}

.phone-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.phone-prefix {
    background: #f5f5f5;
    padding: 0 10px;
    font-weight: bold;
    border-right: 1px solid #ccc;
    white-space: nowrap;
}

.phone-input-field {
    border: none;
    outline: none;
    padding: 10px;
    flex: 1;
    font-size: 14px;
}

@media (max-width: 575px) {
    .whts-num .upsell-field span {
        font-size: 12px;
    }
}

/*  Accept / Declined new buttons for upsells */
.upsell-proceeding-button-grp button {
    background: transparent;
    border-radius: 10px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 18px;
    transition: all .5s ease;
}

.upsell-proceeding-button-grp .inner-box {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    margin-inline: auto;
}

.upsell-proceeding-button-grp .accept-btn {
    min-width: 140px;
    min-height: 50px;
    background: #9759f6;
    box-shadow: 0px 10px 25px 0px transparent;
    color: #fff;
}

.upsell-proceeding-button-grp .accept-btn:hover {
    transform: scale(1.08);
    box-shadow: 0px 10px 25px 0px #8B5CF64D;
}

.upsell-proceeding-button-grp .decline-btn {
    min-width: 100px;
    border: 1px solid #ff4949;
    color: #ff4949;
    min-height: 39px;
    font-size: 16px;
    border-radius: 10px;
}

.upsell-proceeding-button-grp .decline-btn:hover {
    border-color: #ff1111;
    color: #ff1111;
    background: #ff000021;
}

@media (max-width: 575px) {
    .upsell-proceeding-button-grp button {
        font-size: 16px;
    }

    .upsell-proceeding-button-grp .accept-btn {
        min-width: 121px;
        min-height: 45px;
    }

    .upsell-proceeding-button-grp .decline-btn {
        min-width: 89px;
        min-height: 37px;
        font-size: 14px;
    }
}