.hero {
    padding: 80px 0 120px;
    background: #F9F4FF;
    position: relative;
    overflow: hidden;
}

.hero .container::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -50px;
    width: 801px;
    height: 791.89px;
    background: url('../img/elipce.png') no-repeat;
    background-size: cover;
    z-index: -1;
}

.hero_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hero_inner .hero_inner_item:first-child {
    width: 65%;
}

.hero_inner .hero_inner_item {
    width: 35%;
}

.hero h1 {
    font-size: 60px;
    font-weight: 900;
    background: linear-gradient(83deg, #31EAE1 14.3%, #5498ED 40.88%, #8B1DFF 68.51%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 26px;
}

.hero p {
    font-size: 24px;
    margin-bottom: 15px;
}

.hero p strong {
    font-weight: 700;
}

.hero .button-container {
    margin: 40px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px
}

.hero .button-container a {
    padding: 13.5px 23px;
}

.hero .button-container a div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero .button-container .button-label {
    font-size: 14px;
}

.hero .button-desc {
    font-size: 14px;
    color: #88839E;
    line-height: 1.5;
    margin-bottom: 5px;
}

.hero_inner .hero_inner_item img {
    width: 100%;
}


/* problem & solution */

.problem {
    padding: 120px 0 0;
}

.problem .owl-problem .owl-stage {
    display: flex;
    align-items: stretch;
}

.problem .owl-problem .owl-item {
    display: flex;
}

.problem .owl-problem .item {
    display: flex;
    flex-direction: column;
}

.problem .owl-problem .item h2 {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 15px;
}

.problem .owl-problem .item .problem_container {
    background: #F9F4FF url('../img/elipce.png') no-repeat;
    border-radius: 30px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 65px;
    height: 100%;
    position: relative;
}


.problem .owl-problem .item .problem_container h3 {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}

.problem .owl-problem .item .problem_container p {
    font-size: 24px;
}

.problem .owl-problem .item .problem_container.blue {
    background: #3F0F68;
}

.problem .owl-problem .item .problem_container.blue h3,
.problem .owl-problem .item .problem_container.blue p {
    color: #fff;
}

/* Table */
.table {
    margin-top: 120px;
}

.table h2 {
    color: #20124D;
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2; 
    text-transform: capitalize;
}

.compare-table {
    width: 100%;
    margin-top: 34px;
    border-collapse: separate; 
    border-spacing: 0;
    border: 1px solid #E3D6F5;
    border-radius: 25px;
    overflow: hidden;
    color: #20124D;
    font-size: 16px;
    font-weight: 400;
}

.compare-table .compare-table__head {
    background: linear-gradient(90deg, #7142F1 0%, #35E0E2 104.21%);
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.compare-table .compare-table__head td:first-child {
    padding: 16px 0 16px 48px;
    text-align: left;
}

.compare-table .compare-table__list-col-1 {
    padding: 16px 0 16px 48px;
    text-align: left;
    width: 30%;
}

.compare-table .compare-table__list-col-2, .compare-table .compare-table__list-col-3 {
    text-align: center;
    font-family: Arial, sans-serif;
}

.compare-table .compare-table__list-col-2 svg, .compare-table .compare-table__list-col-3 svg {
    display: block;
    margin: 0 auto;
}

.compare-table .compare-table__list-col-2 {
    color: #23BEBE;
}

.compare-table .compare-table__list-col-3 {
    color: #3E3A4D;
}

.compare-table tr:nth-child(even) {
    background: #F8F8FC;
}


/* Everything */

.everything {
    padding: 120px 0 0;
}

.everything_inner {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.everything_container_1 {
    background: radial-gradient(138.25% 96.99% at 0% -4.43%, #FFF8C1 0%, #AFF6FF 53.37%, #C8C5FF 100%);
}

.everything_container_2 {
    background: radial-gradient(206.69% 141.29% at 100% 88.86%, #FFFDC8 0%, #F8C4FF 45.67%, #B3F2FF 100%);
}

.everything_container_3 {
    background: radial-gradient(204.62% 135.8% at 102.94% 0%, #FCFFA4 0%, #FBC1FF 50%, #C5FFE6 100%);
}

.everything_container_4 {
    background: radial-gradient(178.16% 142.84% at 100% 0%, #B2F6FD 0%, #E0D3FF 51.44%, #FEE8B8 100%);
}

.everything_container_5 {
    background: radial-gradient(214.22% 146.68% at 102.94% 0%, #AFFFDF 0%, #FBCAFF 50%, #ADFAFF 100%);
}


.everything_container {
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    padding: 60px;
    position: sticky;
    top: 5rem;
    transform-origin: bottom;
    overflow: clip;
    will-change: transform;
}

.everything_container.reverse {
    flex-direction: row-reverse;
}



.everything_container .everything_container_item h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.everything_container .everything_container_item p {
    font-size: 24px;
}



.everything-title-container {
    text-align: center;
    margin-bottom: 45px;
}

.everything-title-container .everything-title-name h2 {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(90deg, #5C28A4 -21.43%, #23BEBE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.everything-title-container .everything-title-label {
    color: #20124D;
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}


.everything_timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 0 0 50px;
    position: sticky;
    top: 75px;
    transform-origin: bottom;
    overflow: clip;
    z-index: 99;
}

.everything_timer_list {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 1px solid #E3D6F5;
    background: rgba(249, 244, 255, 0.60);
    box-shadow: 0 4px 10px -0.409px rgba(135, 21, 255, 0.05);
    padding: 5px;
}

.everything_timer_list .everything_timer_item {
    padding: 5px 15px;
    border-radius: 8px;
    color: #20124D;
    font-size: 16px;
    transition: 0.3s ease;
}

.everything_timer_list .everything_timer_item.active,
.everything_timer_list .everything_timer_item:hover {
    background: #5C28A3;
    color: #fff;
    cursor: pointer;
}


.everything_timer_play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #E3D6F5;
    background: rgba(249, 244, 255, 0.60);
    box-shadow: 0 4px 10px -0.409px rgba(135, 21, 255, 0.05);
    padding: 3px;
    position: relative;
    cursor: pointer;
}
.play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.play-icon.play {
    display: none;
}

.everything_timer_play.active .play-icon.play {
    display: block;
}

.everything_timer_play.active .play-icon.stop {
    display: none;
}

.progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring__background,
.progress-ring__fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.progress-ring__background {
    stroke: rgba(249, 244, 255, 0.60);
}

.progress-ring__fill {
    stroke: #5C28A3;
    stroke-dasharray: var(--progress) 100;
}


/* Tool */

.tools{
    background: #F9F4FF;
    margin-top: 120px;
    padding-block: 80px;
}

.tools .tools_container{
    border-radius: 25px;
    background: linear-gradient(180deg, #CB0BFA 0%, #614BEF 100%);
    padding: 40px 40px 0 40px;
    color: #fff;
}

.tools .everything-title-container {
    display: block;
}

.tools .everything-title-container .everything-title-name h2 {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #5C28A4 -19.28%, #23BEBE 127.03%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    text-align: left;
}

.tools .everything-title-label {
    margin-top: 34px;
    color: #4D029B;
    font-weight: 400;
    text-align: left;
    line-height: 1.58;
}

.tools .owl-tool .item .tools_container.blue {
    background: linear-gradient(180deg, #6343EE 0%, #4DA6FA 100%);
}

.tools .tools_container .tools_thumb img{
    width: 40px;
    margin-bottom: 15px;
}

.tools .tools_container h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px;
}

.tools .tools_container p{
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 25px;
}


/* faq */

.faq{
    padding: 120px 0 0;
}

.faq .faq_inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px
}

.faq .faq_inner .faq_inner_item{
    width: 50%;
}

.faq .faq_inner .faq_inner_item h2{
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(270deg, #20124D 70.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 45px;
    line-height: 1;
}
.faq .faq_inner .faq_inner_item img{
    width: 100%;
    border-radius: 30px;
}

.faq .faq_inner .faq_inner_item .faq_list{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item .faq_list_activator{
    position: absolute;
    top:25px;
    right:20px;
    cursor: pointer;
    transition: 0.3s ease;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item .minus-icon{
    display: none;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item.active .minus-icon{
    display: block;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item.active .plus-icon{
    display: none;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item .faq_list_activator:hover{
    opacity: 0.8;
}

.faq .faq_inner .faq_inner_item .faq_list .faq_list_item h3{
    font-size: 24px;
    font-weight: 700;
}
.faq .faq_inner .faq_inner_item .faq_list .faq_list_item p{
    font-size: 24px;
    margin: 10px 0 0;
}

.starting{
    padding: 120px 0;
}

.starting_inner{
    border-radius: 30px;
    background: #F7F2FD;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    gap:70px;
}

.starting_inner_item{
    width: 50%;
    padding: 30px;
    border-radius: 18px;
}
.starting_inner_item.starting_inner_item-list {
    padding-bottom: 200px;
    background: #fff url('../img/starting_bg.png') center bottom no-repeat;
}

.starting_inner_item-panel{
    display: flex;
    flex-direction: column;
    gap:30px;
    justify-content: space-between;
}

.starting_inner_item h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
}

.starting_inner_item ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 25px;
}

.starting_inner_item ul li{
    color: #3E3A4D;
    font-size: 16px;
    font-weight: 400;
}
.starting_inner_item ul li svg{
    position: absolute;
    top:5px;
    left:-25px;
}

.starting_inner_item ul li:before{
    display: none;
}


.starting_price{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.start-price{
    font-size: 24px;
    font-weight: 700;
}
.start-discount{
    color: #AB84E1;
    font-size: 16px;
}

.starting_plan{
    color: #3E3A4D;
    font-size: 16px;
}

.starting_agree{
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top:1px solid #A48DE5;
    color: #3E3A4D;
    font-size: 16px;
    line-height: 1.3;
    display: flex;
    gap:10px;
}


.starting_cta{
    margin: 30px 0 0;
    display: flex;
    flex-direction: column;
    gap:25px;
}

.starting_police{
    color: #989BA0;
    font-size: 16px;
    line-height: 1.4;
    border-top:1px solid rgba(164,141,229, 0.4);
    padding: 20px 0 0;
    margin: 30px 0 0;
}

.starting_police a{
    color:#4890FF;
    position: relative;
    transition: 0.3s ease;
}

.starting_police a::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #4890FF;
    transition: 0.3s ease
}

.starting_police a:hover::before{
    width: 0;
}

.button-container {
    display: flex;
    margin-top: 40px;
    gap: 30px;
}

.button-description {
    color: #989BA0;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}

.final-verdict {
    margin: 120px 0 80px;
}

.final-verdict h2 {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 800;
    background: var(--Top-bar-gradient, linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.final-inner {
    margin-top: 50px;
    position: relative;
    background: #CFEDFF;
    border-radius: 35px;
    padding: 50px 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.final-verdict .container::before{
    content: '';
    position: absolute;
    top: 120px;
    right: -50px;
    width: 801px;
    height: 791.89px;
    background: url('../img/elipce2.png') no-repeat;
    background-size: cover;
    z-index: 2;
}

.final-inner__item {
    flex: 0 1 50%;
}

.final-inner__item img {
    vertical-align: top;
    position: relative;
    z-index: 3;
}

.final-inner__item h3 {
    color: #4D029B;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.16;
}

.final-inner__item p {
    margin-top: 16px;
    color: #4D029B;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
}


@media (max-width: 1299px){
    .hero h1 {
        font-size: 54px;
    }
    .hero p br,
    .everything_container .everything_container_item h2 br,
    .tools .tools_container p br,
    .starting_inner_item ul li span br{
        display: none;
    }
    .owl-tool .owl-stage {
        display: flex;
    }
    .owl-tool .item {
        height: 100%;
    }
    .owl-tool .item .tools_container{
        height: 100%;
    }
    .faq .faq_inner .faq_inner_item .faq_list .faq_list_item h3{
        font-size:20px;
    }
    .final-inner__item .button-container {
    gap: 8px;
}
}

@media (max-width: 1199px){
    .hero h1, .tools .everything-title-container .everything-title-name h2, .faq .faq_inner .faq_inner_item h2 {
        font-size:46px;
    }
    .hero h1 br,
    .everything_container .everything_container_item p br,
    .starting_inner_item h2 br, .tools .everything-title-container .everything-title-name h2 br{
        display: none;
    }
    .hero .button-container a{
        font-size:16px;
    }
    .problem .owl-problem .item .problem_container{
        padding: 35px;
    }
    .problem .owl-problem .item .problem_container p {
        font-size: 22px;
    }
    .everything_timer_list .everything_timer_item{
        padding: 5px 8px;
    }
    .starting_inner{
        gap:30px;
    }
    .tools .everything-title-label br {
        display: none;
    }
    .button-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .faq .faq_inner .faq_inner_item h2 {
        margin: 0 0 15px;
    }
    .button-container {
        margin-top: 20px;
    }
    .final-inner__item h3 br {
        display: none;
    }
}

@media (max-width: 991px){
    .hero_inner{
        flex-direction: column;
    }
    .hero_inner .hero_inner_item{
        width: 100%;
    }
    .hero_inner .hero_inner_item:last-child{
        display: none;
    }
    .everything_timer{
        display: none;
    }
    .hero h1{
        text-align: center;
        font-size:42px;
    }
    .hero p{
        text-align: center;
        font-size:16px;
    }
    .hero .button-container{
        justify-content: center;
    }
    .hero .button-desc{
        text-align: center;
    }
    .problem .owl-problem .item h2,
    .everything-title-container .everything-title-name h2,
    .faq .faq_inner .faq_inner_item h2{
        font-size:36px;
    }

    .problem .owl-problem .item h2,
    .problem .owl-problem .item .problem_container h3,
    .problem .owl-problem .item .problem_container p{
        text-align: center;
    }
    .everything_container{
        padding: 35px;
        gap:40px;
    }
    
    .everything_container .everything_container_item h2{
        font-size:36px;
    }
    .everything_container .everything_container_item p{
        font-size:18px;
    }
    .faq .faq_inner .faq_inner_item h2, .faq .faq_inner .faq_inner_item .faq_list .faq_list_item p {
        text-align: center;
    }
    .faq .faq_inner .faq_inner_item h2 br, .faq .faq_inner .faq_inner_item .faq_list .faq_list_item p br {
        display: none;
    }
    .button-container {
        flex-direction: row;
        margin-top: 30px;
    }
    .faq .faq_inner .faq_inner_item {
        width: 100%;
    }
    .faq .faq_inner .faq_inner_item:last-child {
        display: none;
    }

    .starting_inner{
        flex-direction: column;
    }
    .starting_inner_item{
        width: 100%;
    }
    .starting_inner_item-panel{
        gap:0;
        padding: 0;
    }
    .final-verdict .container::before {
        z-index: 0;
        background: none;
        width: 0;
    }
    .final-inner {
        flex-direction: column;
    }
    .final-verdict h2 {
        font-size: 36px;
        text-align: center;
    }
    .final-inner__item h3 {
        font-size: 28px;
        text-align: center;
    }
    .final-inner__item p {
        text-align: center;
    }
    .final-inner__item img {
        display: none;
    }
}

@media (max-width: 767px){
    .problem,
    .everything,
    .tools,
    .faq,
    .nine-x-price{
        padding: 90px 0 0 !important;
    }
    .nine-x-price{
        margin: 90px 0 0 !important;
    }
    .starting {
        padding: 90px 0;
    }
    .hero {
        padding: 30px 0 70px;
    }
    .hero h1{
        font-size:36px;
    }
    .hero .button-container{
        flex-direction: column;
    }
    .hero .button-container .button-label br{
        display: none;
    }
    .hero_inner .hero_inner_item:first-child {
        width: 95%;
    }

    .problem .owl-problem .item .problem_container h3{
        font-size:24px;
    }
    .problem .owl-problem .item .problem_container p{
        font-size:16px;
    }
    .problem .owl-problem .item .problem_container{
        padding: 15px;
    }
    .table h2 {
        font-size: 32px;
    }
    .everything-title-container {
        flex-direction: column;
        justify-content: center;
        gap:15px;
    }
    .everything-title-name{
        text-align: center;
    }    
    .everything-title-container .everything-title-label{
        width: 100%;
        text-align: center;
    }
    .everything-title-name h2 br{
        display: none;
    }
    .everything_container{
        flex-direction: column !important;
        gap:30px;
    }
    .everything_container .everything_container_item h2{
        text-align: center;
    }
    .everything_container .everything_container_item h2 br{
        display: none;
    }
    .everything_container .everything_container_item p{
        text-align: center;
        font-size: 16px;
    }
    .tools .tools_container{
        padding: 15px;
        text-align: center;    
    }
    .tools .tools_container .tools_thumb img{
        margin: 0 auto 15px;
    }
    .compare-table .compare-table__head td:first-child, .compare-table .compare-table__list-col-1 {
        padding-left: 16px;
    }
    .hero h1, .tools .everything-title-container .everything-title-name h2, .faq .faq_inner .faq_inner_item h2 {
        font-size: 38px;
        text-align: center;
    }
    .faq .faq_inner .faq_inner_item h2 br, .faq .faq_inner .faq_inner_item .faq_list .faq_list_item p br {
        display: none;
    }
    .faq .faq_inner .faq_inner_item .faq_list .faq_list_item p {
        font-size: 20px;
        text-align: center;
    }
    
    .tools .everything-title-label {
        font-size: 20px;
    }
    .final-verdict {
        margin-top: 90px;
    }
    .final-inner {
        padding: 30px;
    }
    .final-inner__item p {
        font-size: 20px;
    }
}

@media (max-width: 546px) {
    .button-container {
        flex-direction: column;
    }
    .final-verdict h2 {
        font-size: 28px;
    }
    .final-inner {
        margin-top: 25px;
    }
    .final-inner__item h3 {
        font-size: 22px;
    }
    .final-inner__item p {
        font-size: 18px;
    }
}

@media (max-width: 479px){
    .hero h1 {
        font-size: 28px;
    }
    .hero .button-container a {
        font-size: 14px;
    }
    .everything_container .everything_container_item h2{
        font-size:24px;
    }
    .starting_inner{
        padding: 15px;
    }
    .starting_inner_item h2{
        font-size:12px;
    }
    .starting_price{
        flex-direction: column;
    }
    .starting_plan{
        text-align: center;
    }
    .starting_cta a{
        font-size:16px;
    }
    .faq .faq_inner .faq_inner_item .faq_list .faq_list_item h3{
        font-size:18px;
    }
    .faq .faq_inner .faq_inner_item .faq_list .faq_list_item{
        padding: 15px 55px 15px 15px;
    }
    .faq .faq_inner .faq_inner_item .faq_list .faq_list_item .faq_list_activator{
        top:16px;
    }
    .hero h1, .tools .everything-title-container .everything-title-name h2, .faq .faq_inner .faq_inner_item h2 {
        font-size: 32px;
    }
    .table h2 {
        font-size: 28px;
    }
    .tools .everything-title-label {
        font-size: 16px;
    }
}