.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 {
    width: 50%;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(96deg, #31EAE1 2.83%, #8B1DFF 23.95%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero p {
    font-size: 18px;
    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;
    opacity: 0.7;
    margin: 12px 0 0;
}

.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;
}


/* 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 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    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.2;
}

.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{
    padding: 120px 0 0;
}

.tools .owl-stage {
	 display: flex;
}

.tools .tools_container{
    border-radius: 20px;
    background: #CFEDFF;
    padding: 40px;
	 height: 100%;
}

.tools .tools_container .tools_thumb img{
    width: 24px;
    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;
}


/* 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.2;
}
.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{
    border-radius: 20px;
    border: 1px solid rgba(164,141,229, 0.3);
    background: #F9F4FF;
    padding: 20px 55px 20px 35px;
    position: relative;
    cursor: pointer;
}

.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: 16px;
    margin: 10px 0 0;
    display: none;
}

.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;
}

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

.workspaces-iner {
    background: url('../img/lp/workspaces-bg.png') no-repeat center top / cover;
    padding: 60px 0 60px 84px;
    border-radius: 20px;
}

.workspaces-iner h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 20px;
    background: linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.workspaces-iner p {
    color:  #5C28A3;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.33; 
}

.workspaces-iner ul {
    margin-top: 14px;
    margin-bottom: 22px;
    padding-left: 30px;
}
.workspaces-iner .button-container {
    margin-top: 22px;
}

.chaos {
    margin-top: 120px;
}

.chaos-iner {
    background: url('../img/lp/chaos-bg.png') no-repeat center top / cover;
    padding-block: 84px;
    border-radius: 20px;
    text-align: center;
}

.chaos-iner h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 20px;
    background: linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.chaos-iner p {
    color:  #5C28A3;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.39; 
}

.bottom-line {
    margin-bottom: 120px;
}

.bottom-line-iner {
    background: url('../img/lp/bottom.png') no-repeat;
    background-position: center;
    padding-block: 120px;
    text-align: center;
}

.bottom-line-iner h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 20px;
    background: linear-gradient(270deg, #20124D 5.47%, #AB84E1 102.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bottom-line-iner p {
    color:  #5C28A3;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.58; 
    margin-bottom: 44px;
}

@media (max-width: 1299px){
    .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;
    }
}

@media (max-width: 1199px){
    .hero h1 {
        font-size:46px;
    }
    .hero h1 br,
    .everything_container .everything_container_item p br,
    .starting_inner_item 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;
    }
}

@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{
        text-align: center;
    }
    .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;
    }
	 .workspaces-iner {
		padding: 45px;
	 }
	 .workspaces-iner h2 {
		font-size: 36px;
	 }
	 .workspaces-iner h2, .workspaces-iner p, .workspaces-iner .button-container {
		text-align: center;
	 }
	 .workspaces-iner p br {
		display: none;
	 }
}

@media (max-width: 767px){
    .problem,
    .everything,
    .tools,
    .faq,
    .nine-x-price
    {
        padding: 90px 0 0 !important;
    }
	 .workspaces, .chaos {
		margin-top: 90px;
	 }
    .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;
    }

    .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;
    }

    .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;
    }
	 .workspaces-iner {
		padding: 25px;
	 }
	 .chaos-iner {
		padding-inline: 25px;
	 }
	 .chaos-iner h2 {
		font-size: 36px;
	 }
	 .chaos-iner p br {
		display: none;
	}
	.bottom-line-iner {
		background-size: contain;
	}
	.bottom-line-iner h2 {
		font-size: 36px;
	 }
	 .bottom-line-iner p {
		font-size: 18px;
	 }
	 .bottom-line-iner p br {
		display: none;
	 }
	 .bottom-line {
		margin-bottom: 80px;
	 }
}

@media (max-width: 479px){
    .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;
    }
	 .everything-title-container .everything-title-name h2 {
		font-size: 32px;
	 }
	 .everything-title-container {
		margin-bottom: 30px;
	 }
	 .workspaces-iner h2 {
		font-size: 32px;
	 }
	 .chaos-iner {
		padding-block: 40px;
	 }
	 .chaos-iner h2 {
		font-size: 32px;
	 }
}