@media(max-width: 580px) {
    .custom-footer {
        background-color:#000
    }

    .custom-footer .custom-footer-c {
        padding: 0 20px 42px
    }

    .custom-footer .custom-footer-img {
        align-items: center;
        height: 92px
    }

    .custom-footer .custom-footer-img .img-left {
        height: 28px;
        width: 20px
    }

    .custom-footer .custom-footer-img .img-right {
        height: 14px;
        margin-left: 7px;
        width: 93px
    }

    .custom-footer .custom-footer-navs {
        font-family: Arial;
        font-size: 14px;
        font-weight: 400
    }

    .custom-footer .custom-footer-navs .item .title {
        color: #fff;
        height: 43px;
        line-height: 43px;
        position: relative
    }

    .custom-footer .custom-footer-navs .item .title .arrow-wrap {
        height: 12px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }

    .custom-footer .custom-footer-navs .item .title .arrow-wrap img {
        height: 12px;
        transform: rotate(0deg);
        transform-origin: center center;
        width: 12px
    }

    .custom-footer .custom-footer-navs .item .title.title-expand+ul {
        height: 0!important
    }

    .custom-footer .custom-footer-navs .item .title.title-expand .arrow-wrap img {
        transform: rotate(-90deg)
    }

    .custom-footer .custom-footer-navs .item ul {
        overflow: hidden
    }

    .custom-footer .custom-footer-navs .item ul li {
        color: #737373;
        height: 43px;
        line-height: 43px
    }

    .custom-footer .bottom {
        color: #829399;
        font-family: Arial;
        font-size: 12px;
        font-weight: 400;
        height: 14px;
        line-height: 14px;
        margin-top: 26px
    }
}

@media(min-width: 580px) {
    .custom-footer {
        background-color:#000;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 384px;
        width: 100%
    }

    .custom-footer .custom-footer-c {
        width: 75%
    }

    .custom-footer .top {
        box-sizing: border-box;
        height: 313.56px;
        padding-top: 57px
    }

    .custom-footer .top .left {
        align-items: center;
        display: flex;
        height: 60.052px
    }

    .custom-footer .top .left .img-left {
        height: 60.052px
    }

    .custom-footer .top .left .img-right {
        height: 30.397px;
        margin-left: 14.83px
    }

    .custom-footer .top .right {
        -moz-column-gap: 63px;
        column-gap: 63px;
        display: flex
    }

    .custom-footer .top .right ul {
        display: flex;
        flex-direction: column;
        margin-top: 32.8px;
        row-gap: 28px
    }

    .custom-footer .top .right ul li {
        color: #737373;
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .custom-footer .top .right .title {
        color: #fff;
        font-family: Overpass;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 22.8px;
        text-transform: capitalize
    }

    .custom-footer .bottom {
        align-items: center;
        border-top: 1px solid #272a2e;
        color: hsla(0,0%,100%,.45);
        display: flex;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        height: 70.44px;
        justify-content: center;
        line-height: 12px;
        text-transform: capitalize;
        width: 100%
    }
}

@media screen and (min-width: 580px)and (max-width:1920px) {
    .custom-footer-c {
        width:70%
    }
}

@media(max-width: 580px) {
    .header-button-pc {
        display:none!important
    }

    .header-button-mobile {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 4px 4px 4px 4px;
        height: 38px;
        width: 137px
    }

    .header-button-mobile .header-button-text {
        align-items: center;
        color: #fff;
        display: flex;
        font-family: Helvetica;
        font-size: 12px;
        font-weight: 700;
        height: 38px;
        justify-content: center;
        width: 100%
    }

    .header-button-mobile.one {
        left: 14px;
        top: 300px
    }

    .header-button-mobile.one .header-button-text {
        color: #fff;
        font-family: Helvetica;
        font-size: 12px;
        font-weight: 700
    }

    .header-button-mobile.two {
        left: 21px;
        top: 510px
    }

    .header-button-mobile.three {
        left: 125px;
        top: 160px
    }

    .header-button-mobile.four {
        left: 125px;
        top: 419px;
        width: 218px
    }

    .header-button-mobile.four .header-button-text {
        font-size: 13px
    }

    .header-button-mobile.five {
        left: 223px;
        top: 294px
    }

    .header-button-mobile.five .header-button-text {
        font-size: 14px
    }

    .header-button-mobile.six {
        right: 25px;
        top: 545px
    }

    .header-button-mobile.six .header-button-text {
        font-size: 13px
    }
}

@media(min-width: 580px) {
    .header-button-mobile {
        display:none!important
    }

    .header-button-pc {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 4px 4px 4px 4px;
        height: 54px;
        width: 195px
    }

    .header-button-pc .header-button-text {
        align-items: center;
        color: #fff;
        display: flex;
        font-family: Helvetica;
        font-size: 16px;
        font-weight: 700;
        height: 54px;
        justify-content: center;
        width: 100%
    }

    .header-button-pc.one {
        left: 306px;
        top: 386px
    }

    .header-button-pc.one .header-button-text {
        color: #fff;
        font-family: Helvetica;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        text-transform: uppercase
    }

    .header-button-pc.two {
        left: 478px;
        top: 721px
    }

    .header-button-pc.three {
        left: 728px;
        top: 245px
    }

    .header-button-pc.four {
        left: 818px;
        top: 516px;
        width: 312px
    }

    .header-button-pc.four .header-button-text {
        font-size: 18px
    }

    .header-button-pc.five {
        right: 401px;
        top: 386px
    }

    .header-button-pc.five .header-button-text {
        font-size: 20px
    }

    .header-button-pc.six {
        right: 325px;
        top: 731px
    }

    .header-button-pc.six .header-button-text {
        color: #fff;
        font-family: Helvetica;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        text-transform: uppercase
    }
}

@media screen and (min-width: 580px)and (max-width:1540px) {
    .header-button.one {
        left:16%;
        top: 33%
    }

    .header-button.two {
        left: 24.9%;
        top: 67.2%
    }

    .header-button.three {
        left: 37.915%;
        top: 22.83%
    }

    .header-button.four {
        left: 42.72%;
        top: 516px;
        width: 312px
    }

    .header-button.five {
        right: 20.88%;
        top: 386px
    }

    .header-button.six {
        right: 16.927%;
        top: 731px
    }
}

@media(max-width: 580px) {
    .custom-header {
        height:812px;
        position: relative
    }

    .custom-header .custom-bg {
        background: url("img/") no-repeat 42% top;
        background-size: 1357px 767px;
        height: 757px;
        z-index: -1
    }

    .custom-header .bottom {
        align-items: center;
        background-color: #f6f9f3;
        bottom: 0;
        height: 55px;
        left: 0;
        position: absolute;
        width: 100%
    }

    .custom-header .bottom .swiper-wrapper {
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear
    }

    .custom-header .bottom .bottom-item {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex: 0 0 154px;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        width: 154px
    }

    .custom-header .bottom .bottom-item-top {
        color: #000;
        font-family: Anybody-Bold;
        font-size: 17px;
        font-weight: 700
    }

    .custom-header .bottom .bottom-item-top.dd {
        font-family: Helvetica
    }

    .custom-header .bottom .bottom-item-bot {
        color: #000;
        font-size: 9px;
        white-space: nowrap
    }
}

@media(min-width: 580px) {
    .custom-header {
        height:1073px;
        position: relative
    }

    .custom-header .custom-bg {
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 1020px;
        z-index: -1
    }

    .custom-header .bottom {
        align-items: center;
        background-color: #f6f9f3;
        bottom: 0;
        display: flex;
        height: 98px;
        justify-content: center;
        left: 0;
        position: absolute;
        width: 100%
    }

    .custom-header .bottom .bottom-item {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 385px
    }

    .custom-header .bottom .bottom-item-top {
        color: #000;
        font-family: Anybody-Bold;
        font-size: 31.13px;
        font-weight: 700
    }

    .custom-header .bottom .bottom-item-top.dd {
        font-family: Helvetica
    }

    .custom-header .bottom .bottom-item-bot {
        color: #000;
        font-size: 14px
    }
}

@media screen and (min-width: 580px)and (max-width:1540px) {
    .custom-header {
        height:1073px
    }
}

@media(max-width: 580px) {
    .phone-components {
        background:#f6f9f3;
        box-sizing: border-box;
        height: 812px;
        overflow: hidden;
        padding-top: 157px;
        position: relative
    }

    .phone-components .c .title {
        color: #8fd9b5;
        font-family: Helvetica;
        font-size: 18px;
        font-weight: 400;
        line-height: 15px;
        text-align: center
    }

    .phone-components .c .desc {
        color: #000;
        font-family: Helvetica;
        font-size: 44px;
        font-weight: 700;
        line-height: 64px;
        text-align: center
    }

    .phone-components .c .tip {
        color: #000;
        font-family: Helvetica;
        font-size: 18px;
        font-weight: 400;
        line-height: 21px;
        text-align: center
    }

    .phone-components .c .home-list {
        display: flex;
        justify-content: center;
        margin-top: 30px
    }

    .phone-components .c .home-list .app-store {
        background: url("img/40479ceb51328901ade618f1e05833486203de1e.png") no-repeat 50%;
        background-size: 100% 100%;
        height: 35px;
        width: 118px
    }

    .phone-components .c .home-list .android {
        align-items: center;
        background: #000;
        border-radius: 9px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        /* height: 35px; */
        /* margin-left: 15px; */
        /* padding-left: 10px; */
        /* width: 118px; */
        padding: 10px 20px;
    }

    .phone-components .c .home-list .android .vector-img {
        height: 19px;
        margin-right: 7px;
        width: 17px
    }

    .phone-components .c .home-list .android .text {
        color: #fff;
        font-family: PingFang SC;
        font-size: 8px;
        font-weight: 400;
        line-height: 12px
    }

    .phone-components .c .home-list .android .platform {
        height: 12px;
        width: 54px
    }

    .phone-components .c .bg-phone-section {
        bottom: 0;
        height: 292px;
        position: absolute;
        width: 100%
    }

    .phone-components .c .bg-phone-section .phone-container .filter {
        background: #d9f6ea;
        border-radius: 703px 703px 703px 703px;
        filter: blur(110px);
        height: 530px;
        left: 50%;
        opacity: 1;
        position: absolute;
        top: -67px;
        transform: translateX(-50%);
        width: 568px
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone {
        height: 292px;
        overflow: hidden;
        position: relative;
        width: 100%
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .one {
        background: #d3c1dc;
        bottom: 0;
        height: 188px;
        position: absolute;
        width: 104px;
        z-index: 1
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .one.one-chunk {
        background: url("img/left1.9d615149.png") no-repeat 50%;
        background-size: 100% 100%;
        display: none;
        left: -52px
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .one.two-chunk {
        background: url("img/left2.f498ec0a.png") no-repeat 50%;
        background-size: 100% 100%;
        display: none;
        right: -52px
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .two {
        background: #f8f9f2;
        border-radius: 7px 7px 7px 7px;
        bottom: 0;
        height: 240px;
        position: absolute;
        width: 118px;
        z-index: 2
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .two.one-chunk {
        background: url("img/right1.46ca0ca4.png") no-repeat 50%;
        background-size: 100% 100%;
        left: 25px
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .two.two-chunk {
        background: url("img/right2.dcb5538a.png") no-repeat 50%;
        background-size: 100% 100%;
        right: 25px
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone .true-phone {
        bottom: -25px;
        height: 317px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 156px;
        z-index: 32
    }

    .phone-components .c .bg-phone-section .phone-container .container-phone img.true-phone-content {
        height: 100%;
        width: 100%
    }

    .phone-components .c .bg-phone-section .fj {
        height: 65px;
        position: absolute;
        right: 2px;
        top: -41px;
        width: 89px
    }

    .phone-components .c .float-left {
        background: url("img/4.0311c92a.png") no-repeat 100% 100%;
        background-size: 100% 100%;
        bottom: 0;
        height: 87px;
        left: 0;
        position: absolute;
        width: 101px;
        z-index: 10
    }

    .phone-components .c .float-left img {
        height: 87px;
        left: 17px;
        position: absolute;
        top: -316px;
        width: 76px
    }

    .phone-components .c .float-right {
        background: url("img/8.7101c7e1.png") no-repeat 0 100%;
        background-size: 100% 100%;
        bottom: 0;
        height: 59px;
        position: absolute;
        right: 0;
        width: 159px;
        z-index: 10
    }
}

@media(min-width: 580px) {
    .phone-components {
        background-color:#f6f9f3;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 100%
    }

    .phone-components .c {
        position: relative
    }

    .phone-components .title {
        color: #8fd9b5;
        font-size: 26px;
        font-weight: 400;
        letter-spacing: -.25px;
        line-height: 21.6px;
        margin-top: 65px
    }

    .phone-components .desc,.phone-components .title {
        font-family: Helvetica;
        font-style: normal;
        text-align: center;
        text-transform: uppercase
    }

    .phone-components .desc {
        color: #000;
        font-size: 80.063px;
        font-weight: 700;
        letter-spacing: -.8px;
        line-height: 84px;
        margin-top: 13.6px
    }

    .phone-components .tip {
        color: #000;
        font-family: Helvetica;
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 39px;
        margin-bottom: 40px;
        margin-top: 16px;
        text-align: center;
        text-transform: capitalize
    }

    .phone-components .home-list {
        -moz-column-gap: 22px;
        column-gap: 22px;
        display: flex;
        justify-content: center
    }

    .phone-components .home-list .app-store {
        background-image: url("40479ceb51328901ade618f1e05833486203de1e.png");
        height: 51.11px;
        position: relative;
        width: 170px;
        z-index: 999
    }

    .phone-components .home-list .google {
        background-image: url("");
        height: 51px;
        position: relative;
        width: 170px;
        z-index: 999
    }

    .phone-components .home-list .android {
        align-items: center;
        background-color: #000;
        border-radius: 9px;
        box-sizing: border-box;
        -moz-column-gap: 10px;
        column-gap: 10px;
        display: flex;
        /* height: 51px; */
        /* padding-left: 15px; */
        position: relative;
        /* width: 170px; */
        color: white;
        z-index: 999;
        padding: 10px 20px;
    }

    .phone-components .home-list .android .vector-img {
        height: 28px;
        width: 24px
    }

    .phone-components .home-list .android .android-right {
        display: flex;
        flex-direction: column
    }

    .phone-components .home-list .android .android-right .text {
        color: #fff;
        font-family: Inter;
        font-size: 11.704px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize
    }

    .phone-components .home-list .android .android-right .platform {
        margin-top: 3px
    }

    .phone-components .bg-phone-section {
        margin-top: 10px;
        position: relative
    }

    .phone-components .bg-phone-section .phone-container {
        height: 815px;
        margin-bottom: -62px;
        position: relative;
        width: 100%
    }

    .phone-components .bg-phone-section .phone-container .container-phone {
        left: 0;
        position: relative;
        top: 0
    }

    .phone-components .bg-phone-section .phone-container .filter {
        background: #d9f6ea;
        border-radius: 702.5px;
        filter: blur(110px);
        height: 100%;
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 1385px;
        z-index: 0
    }

    .phone-components .bg-phone-section .phone-container .one {
        background: #d3c1dc;
        border-radius: 20px;
        height: 545.22px;
        position: absolute;
        width: 300px
    }

    .phone-components .bg-phone-section .phone-container .one.one-chunk {
        background: url("img/left1.9d615149.png") no-repeat 50%;
        background-size: 100% 100%;
        left: 13.28%;
        top: 240.78px;
        z-index: 9
    }

    .phone-components .bg-phone-section .phone-container .one.two-chunk {
        background: url("img/left2.f498ec0a.png") no-repeat 50%;
        background-size: 100% 100%;
        left: 72.34%;
        top: 240.78px;
        z-index: 9
    }

    .phone-components .bg-phone-section .phone-container .two {
        background: #f8f9f2;
        border-radius: 20px;
        height: 614.76px;
        position: absolute;
        width: 340px
    }

    .phone-components .bg-phone-section .phone-container .two.one-chunk {
        background: url("img/right1.46ca0ca4.png") no-repeat 50%;
        background-size: 100% 100%;
        left: 26.197%;
        top: 160.24px;
        z-index: 10
    }

    .phone-components .bg-phone-section .phone-container .two.two-chunk {
        background: url("img/right2.dcb5538a.png") no-repeat 50%;
        background-size: 100% 100%;
        left: 56.77%;
        top: 159.49px;
        z-index: 11
    }

    .phone-components .bg-phone-section .phone-container .true-phone {
        left: 40.57%;
        position: relative;
        top: 51px
    }

    .phone-components .bg-phone-section .phone-container .true-phone .true-phone-content {
        height: 812px;
        left: 9px;
        position: absolute;
        top: 13px;
        width: 379px;
        z-index: 30
    }

    .phone-components .bg-phone-section .fj {
        height: 220px;
        position: absolute;
        right: 49px;
        top: -23px;
        width: 300px
    }

    .phone-components .float-left {
        background-image: url("4.0311c92a.png");
        background-position: 100%;
        background-repeat: no-repeat;
        bottom: 0;
        height: 345.64px;
        left: 0;
        position: absolute;
        width: 400px;
        z-index: 99
    }

    .phone-components .float-left .with-icon {
        bottom: 15.29px;
        flex-shrink: 0;
        height: 207.69px;
        position: absolute;
        right: 210px;
        width: 180px
    }

    .phone-components .float-right {
        background-image: url("8.7101c7e1.png");
        bottom: 0;
        height: 234.94px;
        position: absolute;
        right: 0;
        width: 626.5px;
        z-index: 99
    }
}

@media screen and (min-width: 580px)and (max-width:1820px) {
    .phone-components .bg-phone-section .phone-container .one.one-chunk {
        left:13.7%
    }

    .phone-components .bg-phone-section .phone-container .one.two-chunk {
        right: 13.54%
    }

    .phone-components .bg-phone-section .phone-container .two.one-chunk {
        left: 26.2%
    }

    .phone-components .bg-phone-section .phone-container .two.two-chunk {
        left: 56.77%
    }

    .phone-components .bg-phone-section .phone-container .true-phone {
        left: 40.57%
    }
}

@media screen and (min-width: 580px)and (max-width:1540px) {
    .phone-components .bg-phone-section .phone-container .one.one-chunk {
        left:10.7%
    }

    .phone-components .bg-phone-section .phone-container .one.two-chunk {
        right: 10.54%
    }

    .phone-components .bg-phone-section .phone-container .two.one-chunk {
        left: 23.2%
    }

    .phone-components .bg-phone-section .phone-container .two.two-chunk {
        left: 53.77%
    }

    .phone-components .bg-phone-section .phone-container .true-phone {
        left: 36.5%
    }

    .phone-components .bg-phone-section .fj {
        right: -1%
    }
}

@media(max-width: 580px) {
    .click-section {
        height:812px;
        position: relative;
        width: 100%
    }

    .click-section .bot-button-arrows {
        bottom: 120px;
        display: flex;
        left: 20px;
        position: absolute
    }

    .click-section .bot-button-arrows .arrow-left,.click-section .bot-button-arrows .arrow-right {
        height: 38px;
        margin-right: 18px;
        width: 38px
    }

    .click-section .bot-button-arrows .arrow-left {
        background: url("img/") no-repeat 50%;
        background-size: 100% 100%
    }

    .click-section .bot-button-arrows .arrow-left.arrow-active {
        background: url("img/") no-repeat 50%;
        background-size: 100% 100%
    }

    .click-section .bot-button-arrows .arrow-right {
        background: url("img/") no-repeat 50%;
        background-size: 100% 100%
    }

    .click-section .bot-button-arrows .arrow-right.arrow-active {
        background: url("img/") no-repeat 50%;
        background-size: 100% 100%
    }

    .click-section .bot-button {
        bottom: 40px;
        display: flex;
        height: 36px;
        justify-content: center;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 356px
    }

    .click-section .bot-button .button-container {
        align-items: center;
        background: #fff;
        border-radius: 21px 21px 21px 21px;
        box-sizing: border-box;
        display: flex;
        height: 36px;
        width: 356px
    }

    .click-section .bot-button .button-container .b-c-item {
        border-radius: 18px;
        display: flex;
        flex: 1;
        height: 36px;
        justify-content: center;
        overflow: hidden
    }

    .click-section .bot-button .button-container .b-c-item:first-child,.click-section .bot-button .button-container .b-c-item:nth-child(2) {
        flex: 0 0 98px
    }

    .click-section .bot-button .button-container .b-c-item:nth-child(3) {
        flex: 0 0 108px
    }

    .click-section .bot-button .button-container .b-c-item:nth-child(4) {
        flex: 0 0 52px
    }

    .click-section .bot-button .button-container .button-c-s {
        align-items: center;
        color: #464646;
        display: flex;
        flex: 1;
        font-family: Helvetica;
        font-size: 10px;
        font-weight: 300;
        justify-content: center;
        line-height: 11px;
        white-space: nowrap
    }

    .click-section .bot-button .button-container .button-c-s.active {
        background: #fe9292;
        color: #fff
    }

    .click-section .bot-button .button-container .button-c-s.active1 {
        background: #93d3a1;
        color: #fff
    }

    .click-section .bot-button .button-container .button-c-s.active2 {
        background: #eebcbc;
        color: #fff
    }

    .click-section .bot-button .button-container .button-c-s.active3 {
        background: #8b1a98;
        color: #fff
    }
}

@media(min-width: 580px) {
    .click-section {
        height:1080px;
        position: relative;
        width: 100%
    }

    .click-section .bot-button {
        bottom: 86px;
        display: flex;
        height: 52px;
        justify-content: center;
        position: absolute;
        width: 100%
    }

    .click-section .bot-button .button-container {
        align-items: center;
        background: #ecf3fe;
        border-radius: 36px;
        box-shadow: 0 4px 4px 0 rgba(0,0,0,.05);
        box-sizing: border-box;
        display: flex;
        height: 52px;
        padding: 0 20px;
        width: 677px
    }

    .click-section .bot-button .button-container .b-c-item {
        display: flex;
        flex: 1;
        justify-content: center
    }

    .click-section .bot-button .button-container .button-c-s {
        align-items: center;
        color: #464646;
        display: flex;
        flex: 1;
        font-family: Helvetica;
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        justify-content: center;
        letter-spacing: -.171px;
        line-height: 11.416px;
        text-shadow: 0 .5px 1px rgba(0,0,0,.58)
    }

    .click-section .bot-button .button-container .button-c-s.active {
        background: #fe9292
    }

    .click-section .bot-button .button-container .button-c-s.active,.click-section .bot-button .button-container .button-c-s.active1 {
        border: 12px solid #ecf3fe;
        border-radius: 34px;
        box-shadow: 0 4px 4px 0 rgba(0,0,0,.12);
        color: #fff;
        font-family: Helvetica;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        height: 55px;
        letter-spacing: -.171px;
        line-height: 11.416px;
        text-transform: capitalize;
        transform: translateY(-50%);
        width: 145px
    }

    .click-section .bot-button .button-container .button-c-s.active1 {
        background: #93d3a1
    }

    .click-section .bot-button .button-container .button-c-s.active2 {
        background: #eebcbc;
        white-space: nowrap;
        width: 185px
    }

    .click-section .bot-button .button-container .button-c-s.active2,.click-section .bot-button .button-container .button-c-s.active3 {
        border: 12px solid #ecf3fe;
        border-radius: 34px;
        box-shadow: 0 4px 4px 0 rgba(0,0,0,.12);
        color: #fff;
        font-family: Helvetica;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        height: 55px;
        letter-spacing: -.171px;
        line-height: 11.416px;
        text-transform: capitalize;
        transform: translateY(-50%)
    }

    .click-section .bot-button .button-container .button-c-s.active3 {
        background: #98009d;
        width: 145px
    }
}

@media screen and (min-width: 580px)and (max-width:1900px) {
    .click-section .verde .bottom .bg-other {
        right:135px
    }

    .click-section .verde .bottom .bg-other .s-line {
        height: 650px
    }
}

.click-section.active0 {
    background: #fff1f1
}

.click-section.active1 {
    background-color: #f1fef5
}

.click-section.active2 {
    background-color: #fdf3f3
}

.click-section.active3 {
    background-color: #f9edff
}

@media(max-width: 580px) {
    .click-section .verde {
        box-sizing:border-box;
        height: 812px;
        margin: 0 auto;
        position: relative
    }

    .click-section .verde .swiper-wrapper {
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear
    }

    .click-section .verde .top {
        display: flex
    }

    .click-section .verde .top .top-left {
        height: 441px;
        left: 10px;
        position: absolute;
        top: 18px
    }

    .click-section .verde .top .top-left img {
        height: 160px;
        width: 160px
    }

    .click-section .verde .top .top-left .line {
        background-color: #fff;
        height: 179px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 5px
    }

    .click-section .verde .top .top-right-c {
        box-sizing: content-box;
        height: 75px;
        padding-left: 118px;
        padding-top: 203px
    }

    .click-section .verde .top .top-t {
        color: #1ab791;
        font-family: Helvetica;
        font-size: 15px;
        font-weight: 700;
        line-height: 25px
    }

    .click-section .verde .top .top-b {
        color: rgba(35,35,35,.87);
        font-family: PingFang SC;
        font-size: 11px;
        font-weight: 400;
        line-height: 15px;
        margin-top: 6px;
        width: 240px
    }

    .click-section .verde .bottom {
        bottom: 202px;
        display: flex;
        height: 313px;
        left: 0;
        padding: 0 10px;
        position: absolute;
        width: 100%
    }

    .click-section .verde .bottom .card {
        box-sizing: border-box;
        flex: 0 0 218px;
        height: 313px;
        padding-top: 40px;
        position: relative;
        width: 218px;
        z-index: 1
    }

    .click-section .verde .bottom .card .card-bg {
        border-radius: 43px;
        height: 263px
    }

    .click-section .verde .bottom .card .title {
        color: #1e1e1e;
        font-family: Inter;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px
    }

    .click-section .verde .bottom .card .text {
        color: hsla(0,0%,45%,.87);
        font-family: Inter;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        margin-top: 5px
    }

    .click-section .verde .bottom .card.card-1 .card-bg,.click-section .verde .bottom .card.card-2 .card-bg,.click-section .verde .bottom .card.card-3 .card-bg,.click-section .verde .bottom .card.card-4 .card-bg {
        padding: 50px 13px 0
    }

    .click-section .verde .bottom .card .card-img {
        height: 112px;
        position: absolute;
        right: 17px;
        top: 0;
        width: 112px
    }

    .click-section .verde .bottom .card .card-img.card-on1 {
        right: 21px
    }

    .click-section .verde .bottom .card .card-img.card-on2 {
        right: 24px
    }

    .click-section .verde .bottom .card .card-img.card-on3 {
        right: 14px
    }

    .click-section .verde .bottom .card .card-img.card-on4 {
        right: 25px
    }
}

@media(min-width: 580px) {
    .click-section .verde {
        box-sizing:border-box;
        height: 768px;
        margin: 0 auto;
        padding: 61px 30px 0 39px;
        width: 1295px
    }

    .click-section .verde .top {
        display: flex
    }

    .click-section .verde .top .top-left {
        height: 441px;
        left: -90px;
        position: relative
    }

    .click-section .verde .top .top-left .line {
        background-color: #fff;
        height: 151px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 10px
    }

    .click-section .verde .top .top-right-c {
        height: 400px;
        padding-top: 70px
    }

    .click-section .verde .top .top-t {
        color: #1ab791;
        font-family: Helvetica;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 52.8px;
        margin-left: -50px;
        text-transform: capitalize
    }

    .click-section .verde .top .top-b {
        color: rgba(0,0,0,.87);
        font-family: Inter;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 33px;
        margin-left: -50px;
        margin-top: 12.8px
    }

    .click-section .verde .bottom {
        -moz-column-gap: 20px;
        column-gap: 20px;
        display: flex;
        justify-content: center;
        position: relative
    }

    .click-section .verde .bottom .card {
        border-radius: 53px;
        box-sizing: border-box;
        height: 329px;
        position: relative;
        width: 272px;
        z-index: 1
    }

    .click-section .verde .bottom .card .title {
        color: #1e1e1e;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px
    }

    .click-section .verde .bottom .card .text {
        color: hsla(0,0%,45%,.87);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        margin-top: 5px
    }

    .click-section .verde .bottom .card.card-1,.click-section .verde .bottom .card.card-2,.click-section .verde .bottom .card.card-3,.click-section .verde .bottom .card.card-4 {
        padding: 75px 17px 0
    }

    .click-section .verde .bottom .card .card-img {
        height: 140px;
        position: absolute;
        right: 21px;
        top: -50px;
        width: 140px
    }

    .click-section .verde .bottom .card .card-img.card-on1 {
        right: 21px;
        top: -50px
    }

    .click-section .verde .bottom .card .card-img.card-on2 {
        right: 24px;
        top: -50px
    }

    .click-section .verde .bottom .card .card-img.card-on3 {
        right: 14px;
        top: -50px
    }

    .click-section .verde .bottom .card .card-img.card-on4 {
        right: 25px;
        top: -50px
    }

    .click-section .verde .bottom .bg-other {
        position: absolute;
        right: 50px;
        top: 50%;
        z-index: 0
    }

    .click-section .verde .bottom .bg-other .bg-line {
        background: #fff;
        height: 10px;
        width: 882px
    }

    .click-section .verde .bottom .bg-other .b-circle {
        border: 10px solid #fff;
        border-radius: 0 100px 0 0;
        height: 175px;
        position: absolute;
        right: -160px;
        width: 175px
    }

    .click-section .verde .bottom .bg-other .s-line {
        background-color: #fff;
        height: 880px;
        position: absolute;
        right: -160px;
        top: 125px;
        width: 10px;
        z-index: 9999
    }
}

@media(max-width: 580px) {
    .click-section .media {
        box-sizing:border-box;
        height: 812px;
        justify-content: space-between;
        margin: 0 auto;
        padding-top: 61px
    }

    .click-section .media .media-container {
        display: flex;
        flex-direction: column
    }

    .click-section .media .media-container .top-text {
        display: flex;
        flex-direction: column;
        margin-left: 23px;
        width: -moz-fit-content;
        width: fit-content
    }

    .click-section .media .media-container .top-text .join {
        color: #000
    }

    .click-section .media .media-container .top-text .com,.click-section .media .media-container .top-text .join {
        display: inline;
        font-family: Helvetica;
        font-size: 38.36px;
        font-style: normal;
        font-weight: 700;
        line-height: 38.36px;
        text-transform: uppercase
    }

    .click-section .media .media-container .top-text .com {
        color: #c338e5
    }

    .click-section .media .media-container .top-text .com .mz {
        height: 58.206px;
        right: -50px;
        top: -35%;
        width: 116.413px
    }

    .click-section .media .media-container .img-container {
        background-size: 100% 100%;
        display: flex;
        height: 207px;
        margin-left: 14px;
        margin-top: 43px;
        width: 207px
    }

    .click-section .media .media-container .img-container .wite-img-container {
        background-image: url("");
        background-size: 100% 100%;
        height: 207px;
        margin-top: -10px;
        position: relative;
        width: 207px;
        z-index: 9
    }

    .click-section .media .media-container .img-container .float-img {
        height: 136px;
        right: -47px;
        top: -1px;
        width: 136px;
        z-index: 0
    }

    .click-section .media .right {
        margin-top: 45px
    }

    .click-section .media .right .line {
        background: linear-gradient(270deg,hsla(0,0%,100%,0) -1.41%,#d732fd 44.64%,hsla(0,0%,100%,0) 96.82%);
        height: 1px;
        width: 100vw
    }

    .click-section .media .right .list {
        display: flex;
        flex-direction: column;
        margin-top: 27px;
        padding: 0 18px;
        row-gap: 24px
    }

    .click-section .media .right .list .list-container .c-wap {
        display: flex;
        justify-content: space-between
    }

    .click-section .media .right .list .list-container .c-wap .left {
        color: #000;
        font-family: PingFang HK;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.207px;
        text-transform: capitalize
    }

    .click-section .media .right .list .list-container .c-wap .right-t {
        height: 14px;
        width: 14px
    }

    .click-section .media .right .list .list-container .c-container {
        color: #000;
        font-family: PingFang HK;
        font-size: 14px;
        font-style: normal;
        font-weight: 100;
        line-height: 24.207px;
        margin-top: 12px;
        text-transform: capitalize
    }
}

@media(min-width: 580px) {
    .click-section .media {
        box-sizing:border-box;
        display: flex;
        height: 772.59px;
        justify-content: space-between;
        margin: 0 auto;
        padding-top: 192px;
        width: 1300px
    }

    .click-section .media .media-container {
        display: flex;
        flex-direction: column
    }

    .click-section .media .media-container .top-text {
        display: flex;
        flex-direction: column;
        width: -moz-fit-content;
        width: fit-content
    }

    .click-section .media .media-container .top-text .join {
        color: #000
    }

    .click-section .media .media-container .top-text .com,.click-section .media .media-container .top-text .join {
        display: inline;
        font-family: Helvetica;
        font-size: 74.855px;
        font-style: normal;
        font-weight: 700;
        line-height: 74.855px;
        text-transform: uppercase
    }

    .click-section .media .media-container .top-text .com {
        color: #c338e5
    }

    .click-section .media .media-container .top-text .com .mz {
        height: 58.206px;
        right: -50px;
        top: -35%;
        width: 116.413px
    }

    .click-section .media .media-container .img-container {
        background-size: 100% 100%;
        display: flex;
        height: 404px;
        margin-top: 47.14px;
        width: 404px
    }

    .click-section .media .media-container .img-container .wite-img-container {
        background-image: url("");
        background-size: 100% 100%;
        height: 404px;
        margin-top: -10px;
        position: relative;
        width: 404px;
        z-index: 9
    }

    .click-section .media .media-container .img-container .float-img {
        height: 270px;
        right: -85px;
        top: -1px;
        width: 270px;
        z-index: 0
    }

    .click-section .media .right {
        margin-top: 131px
    }

    .click-section .media .right .line {
        background: linear-gradient(270deg,hsla(0,0%,100%,0) -1.41%,#d732fd 44.64%,hsla(0,0%,100%,0) 96.82%);
        height: 1px;
        width: 566px
    }

    .click-section .media .right .list {
        display: flex;
        flex-direction: column;
        margin-top: 17px;
        row-gap: 41px;
        width: 556px
    }

    .click-section .media .right .list .list-container .c-wap {
        display: flex;
        justify-content: space-between
    }

    .click-section .media .right .list .list-container .c-wap .left {
        color: #000;
        font-family: PingFang HK;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 24.207px;
        text-transform: capitalize
    }

    .click-section .media .right .list .list-container .c-wap .right-t {
        height: 14px;
        width: 14px
    }

    .click-section .media .right .list .list-container .c-container {
        color: #000;
        font-family: PingFang HK;
        font-size: 14px;
        font-style: normal;
        font-weight: 100;
        line-height: 24.207px;
        margin-top: 12px;
        text-transform: capitalize
    }
}

@media(max-width: 580px) {
    .click-section .social .social-container {
        box-sizing:border-box;
        height: 821px;
        margin: 0 auto;
        padding-top: 184px
    }

    .click-section .social .social-container .soc-top {
        padding-left: 20px
    }

    .click-section .social .social-container .soc-top .soc-top-top {
        color: #000;
        font-family: Helvetica;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        text-transform: capitalize
    }

    .click-section .social .social-container .soc-top .soc-top-bot {
        color: #211f1f;
        font-family: Inter;
        font-size: 11px;
        font-style: normal;
        font-weight: 300;
        line-height: 15px;
        padding: 16px 0
    }

    .click-section .social .social-container .soc-bot {
        align-items: center;
        bottom: 202px;
        display: flex;
        left: 0;
        position: absolute;
        width: 100%
    }

    .click-section .social .social-container .soc-bot .swiper-wrapper {
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear
    }

    .click-section .social .social-container .soc-bot .list {
        padding: 0 20px
    }

    .click-section .social .social-container .soc-bot .list .item {
        align-items: center;
        background: #fff;
        border-radius: 25px;
        display: flex;
        flex: 0 0 226px;
        height: 208px;
        justify-content: center;
        width: 226px
    }

    .click-section .social .social-container .soc-bot .list .item img {
        height: 130px;
        width: 130px
    }

    .click-section .social .social-container .soc-bot .pages {
        -moz-column-gap: 15.65px;
        column-gap: 15.65px;
        display: flex;
        margin-top: 41.5px
    }

    .click-section .social .social-container .soc-bot .pages .page-page {
        -moz-column-gap: 15.65px;
        column-gap: 15.65px
    }

    .click-section .social .social-container .soc-bot .pages .page-page .number {
        color: #e0e0e0;
        font-family: PingFang HK;
        font-size: 25.053px;
        font-style: normal;
        font-weight: 400;
        line-height: 37.904px;
        text-transform: capitalize
    }

    .click-section .social .social-container .soc-bot .pages .page-page .number.active {
        background: #eebcbc;
        border: 1.566px solid #fe9292;
        border-radius: 6.263px;
        color: #fff
    }

    .click-section .social .social-container .soc-bot .pages .page-commin {
        align-items: center;
        background: #fff;
        border: 1.566px solid #e0e0e0;
        border-radius: 6.263px;
        display: flex;
        height: 37.579px;
        justify-content: center;
        width: 37.579px
    }
}

@media(min-width: 580px) {
    .click-section .social .social-container {
        box-sizing:border-box;
        height: 902.59px;
        margin: 0 auto;
        padding-top: 155px;
        width: 1306px
    }

    .click-section .social .social-container .soc-top .soc-top-top {
        color: #000;
        font-family: Helvetica;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        text-transform: capitalize
    }

    .click-section .social .social-container .soc-top .soc-top-bot {
        color: #211f1f;
        font-family: Inter;
        font-size: 22px;
        font-style: normal;
        font-weight: 300;
        line-height: 33px
    }

    .click-section .social .social-container .soc-bot {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-top: 74px
    }

    .click-section .social .social-container .soc-bot .list {
        -moz-column-gap: 34px;
        column-gap: 34px;
        display: flex
    }

    .click-section .social .social-container .soc-bot .list .item {
        align-items: center;
        background: #fff;
        border-radius: 71px;
        display: flex;
        height: 355px;
        justify-content: center;
        width: 386px
    }

    .click-section .social .social-container .soc-bot .list .item img {
        height: 222px;
        width: 222px
    }

    .click-section .social .social-container .soc-bot .pages {
        -moz-column-gap: 15.65px;
        column-gap: 15.65px;
        display: flex;
        margin-top: 41.5px
    }

    .click-section .social .social-container .soc-bot .pages .page-page {
        -moz-column-gap: 15.65px;
        column-gap: 15.65px
    }

    .click-section .social .social-container .soc-bot .pages .page-page .number {
        color: #e0e0e0;
        font-family: PingFang HK;
        font-size: 25.053px;
        font-style: normal;
        font-weight: 400;
        line-height: 37.904px;
        text-transform: capitalize
    }

    .click-section .social .social-container .soc-bot .pages .page-page .number.active {
        background: #eebcbc;
        border: 1.566px solid #fe9292;
        border-radius: 6.263px;
        color: #fff
    }

    .click-section .social .social-container .soc-bot .pages .page-commin {
        align-items: center;
        background: #fff;
        border: 1.566px solid #e0e0e0;
        border-radius: 6.263px;
        display: flex;
        height: 37.579px;
        justify-content: center;
        width: 37.579px
    }
}

@media(max-width: 580px) {
    .click-section .psi-container {
        box-sizing:border-box;
        height: 821px;
        margin: 0 auto;
        padding-top: 190px;
        position: relative
    }

    .click-section .psi-container .top {
        padding-left: 20px
    }

    .click-section .psi-container .top .top-title {
        color: #1ab791;
        font-family: Helvetica;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        text-transform: capitalize
    }

    .click-section .psi-container .top .top-text {
        color: #5f5f5f;
        font-family: Inter;
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px;
        margin-top: 6px;
        width: 240px
    }

    .click-section .psi-container .psi-bot-wrap {
        bottom: 202px;
        left: 0;
        position: absolute;
        width: 100%
    }

    .click-section .psi-container .psi-bot {
        -moz-column-gap: calc(33.33333% - 300px);
        column-gap: calc(33.33333% - 300px);
        display: flex;
        margin-top: 85px
    }

    .click-section .psi-container .psi-bot .psi-bot-item {
        background: #fff;
        border-radius: 20px;
        flex: 0 0 213px;
        height: 273px;
        width: 213px
    }

    .click-section .psi-container .psi-bot .psi-bot-item .swiper-wrapper {
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear
    }

    .click-section .psi-container .psi-bot .psi-bot-item.four,.click-section .psi-container .psi-bot .psi-bot-item.one,.click-section .psi-container .psi-bot .psi-bot-item.three,.click-section .psi-container .psi-bot .psi-bot-item.two {
        padding: 36px 21px 0
    }

    .click-section .psi-container .psi-bot .psi-bot-item .psi-bot-item-title {
        color: #1e1e1e;
        font-family: Inter;
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px
    }

    .click-section .psi-container .psi-bot .psi-bot-item .psi-bot-item-text {
        color: hsla(0,0%,45%,.87);
        font-family: Inter;
        font-size: 9px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px
    }
}

@media(min-width: 580px) {
    .click-section .psi-container {
        box-sizing:border-box;
        height: 803px;
        margin: 0 auto;
        padding-top: 165px;
        width: 1300px
    }

    .click-section .psi-container .top .top-title {
        color: #93d3a1;
        font-family: Helvetica;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 52.8px;
        text-transform: capitalize
    }

    .click-section .psi-container .top .top-text {
        color: #5f5f5f;
        font-family: Inter;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 33px
    }

    .click-section .psi-container .psi-bot {
        -moz-column-gap: calc(33.33333% - 300px);
        column-gap: calc(33.33333% - 300px);
        display: flex;
        margin-top: 85px
    }

    .click-section .psi-container .psi-bot .psi-bot-item {
        background: #f7fffa;
        border-radius: 20px;
        height: 383px;
        width: 298px
    }

    .click-section .psi-container .psi-bot .psi-bot-item.one {
        padding: 50px 30px 0
    }

    .click-section .psi-container .psi-bot .psi-bot-item.two {
        padding: 50px 35px 0 26px
    }

    .click-section .psi-container .psi-bot .psi-bot-item.four,.click-section .psi-container .psi-bot .psi-bot-item.three {
        padding: 50px 30px 0
    }

    .click-section .psi-container .psi-bot .psi-bot-item .psi-bot-item-title {
        color: #1e1e1e;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px
    }

    .click-section .psi-container .psi-bot .psi-bot-item .psi-bot-item-text {
        color: hsla(0,0%,45%,.87);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }
}

@media(max-width: 580px) {
    .two-screen {
        background-color:#fffbf6;
        height: 812px;
        overflow: hidden;
        padding-top: 68px;
        position: relative
    }

    .two-screen .fill {
        background: url("img/"),0 0/100% 100% no-repeat;
        filter: blur(14.1131982803px);
        flex-shrink: 0;
        height: 275px;
        left: 44px;
        position: absolute;
        top: -184px;
        width: 275px
    }

    .two-screen .center .left {
        padding: 0 33px
    }

    .two-screen .center .left .one {
        color: #0c0c0c;
        font-family: Helvetica;
        font-size: 11px;
        font-weight: 700;
        line-height: 15px
    }

    .two-screen .center .left .middle {
        color: rgba(0,0,0,.87);
        flex-direction: column;
        flex-shrink: 0;
        height: 54px;
        justify-content: center;
        margin-top: 7px
    }

    .two-screen .center .left .middle,.two-screen .center .left .middle .k {
        font-family: Helvetica;
        font-size: 24.66px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -.645px;
        line-height: 26.91px;
        text-transform: capitalize
    }

    .two-screen .center .left .middle .k {
        color: #ffca11
    }

    .two-screen .center .left .middle .is {
        font-size: 20.18px
    }

    .two-screen .center .left .middle .infra {
        color: #35b06e;
        font-family: Helvetica;
        font-size: 24.66px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -.645px;
        line-height: 26.91px;
        text-transform: capitalize
    }

    .two-screen .center .left .desc {
        color: #232323;
        font-family: Montserrat;
        font-size: 11px;
        font-weight: 400;
        line-height: 16px;
        padding: 24px 0
    }

    .two-screen .center .left .desc .desc-one {
        font-family: ui-sans-serif;
        font-size: 16px
    }

    .two-screen .center .right {
        bottom: 56px;
        position: absolute;
        right: 0
    }

    .two-screen .center .right img {
        height: 309px;
        width: 307px
    }

    .two-screen .circle {
        background: url("img/") no-repeat;
        bottom: -139px;
        filter: blur(5px);
        height: 300px;
        left: -99px;
        position: absolute;
        width: 248px;
        z-index: 1
    }
}

@media(min-width: 580px) {
    .two-screen {
        background-color:#fffbf6;
        height: 973px;
        overflow: hidden;
        position: relative;
        width: 100%
    }

    .two-screen .fill {
        background: url("img/"),0 0/100% 100% no-repeat;
        filter: blur(16.4914112091px);
        flex-shrink: 0;
        height: 321.339px;
        left: 768px;
        position: absolute;
        top: -188.54px;
        width: 321.339px
    }

    .two-screen .circle {
        background-image: url("");
        left: 0;
        position: absolute;
        top: 590.62px
    }

    .two-screen .center {
        box-sizing: border-box;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        margin-top: 161.87px
    }

    .two-screen .center .left {
        background: linear-gradient(180deg,#fff8f2,#fff);
        border-radius: 49.974px;
        box-sizing: border-box;
        flex-shrink: 0;
        height: 604.685px;
        margin-right: 42.55px;
        padding-left: 49.8px;
        width: 804.581px;
        z-index: 3
    }

    .two-screen .center .left .desc {
        color: #232323;
        font-family: Montserrat;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 25.986px
    }

    .two-screen .center .left .desc .desc-one {
        font-family: ui-sans-serif;
        font-size: 16px
    }

    .two-screen .center .left .one {
        color: #0c0c0c;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        font-family: Helvetica;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        height: 38.98px;
        justify-content: center;
        letter-spacing: -.24px;
        line-height: 0px;
        margin-top: 65px;
        width: 387.798px
    }

    .two-screen .center .left .middle {
        color: rgba(0,0,0,.87);
        flex-direction: column;
        flex-shrink: 0;
        height: 236.421px;
        justify-content: center;
        width: 589.693px
    }

    .two-screen .center .left .middle,.two-screen .center .left .middle .k {
        font-family: Helvetica;
        font-size: 65.39px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -.645px;
        line-height: 75.199px;
        text-transform: capitalize
    }

    .two-screen .center .left .middle .k {
        color: #ffca11
    }

    .two-screen .center .left .middle .infra {
        color: #35b06e;
        font-family: Helvetica;
        font-size: 65.39px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -.645px;
        line-height: 75.199px;
        text-transform: capitalize
    }

    .two-screen .center .right img {
        border-top-left-radius: 12%;
        border-top-right-radius: 12%
    }

    .two-screen .center .right .bottom {
        align-items: center;
        background: linear-gradient(180deg,#ebfdf7 .01%,#89d4b3);
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        color: #2f2f2f;
        display: flex;
        font-family: Helvetica;
        font-size: 22.09px;
        height: 104.945px;
        justify-content: center;
        letter-spacing: -.224px;
        line-height: 32.183px;
        width: 593.691px
    }

    .two-screen .center .right .bottom,.two-screen .chunk {
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase
    }

    .two-screen .chunk {
        color: #fffbf6;
        font-family: Play;
        font-size: 195.587px;
        letter-spacing: -7.823px;
        line-height: 215.145px
    }
}

@media screen and (min-width: 580px)and (max-width:1900px) {
    .two-screen .circle {
        top:650px
    }

    .two-screen .fill {
        left: 40%
    }
}

@media(max-width: 580px) {
    .nav-c .nav {
        left:0;
        top: 0;
        z-index: 9999999
    }

    .nav-c .top-c {
        height: 85px;
        padding: 0 28px 0 18px;
        width: 100%
    }

    .nav-c .left {
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 100%;
        height: 21px;
        margin-right: 13px;
        width: 154px
    }

    .nav-c .right .menu {
        background-image: url("");
        background-size: 100% 100%;
        border-radius: 28px;
        height: 38px;
        width: 38px
    }

    .nav-c .float-bg {
        background-color: rgba(0,0,0,.502);
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 9999
    }

    .nav-c .float-bg .float-index {
        background-color: #e8fcf5;
        gap: 312.705px;
        height: inherit;
        padding: 24px 24px 24.008px;
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 99999
    }

    .nav-c .float-bg .float-index .action-button {
        position: absolute;
        right: 24px;
        top: 24px
    }

    .nav-c .float-bg .float-index .action-button .action-right {
        background-image: url("");
        background-size: 100% 100%;
        height: 17px;
        width: 17px
    }

    .nav-c .float-bg .float-index .action-container-list {
        align-items: center;
        display: flex;
        height: 100%
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul {
        display: flex;
        flex-direction: column
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul .action-list-item {
        color: #000;
        cursor: pointer;
        font-family: Helvetica;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 14.4px;
        margin: 8.15px 0;
        text-transform: uppercase;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul .action-list-item.active {
        align-items: center;
        background: #35b06e;
        border-radius: 80px;
        color: #fff;
        display: flex;
        height: 28.792px;
        justify-content: center;
        margin: 4.07px 0 4.07px -5px;
        padding: 8.5px 9.2px 5.3px 10.8px;
        width: -moz-fit-content;
        width: fit-content
    }
}

@media(min-width: 580px) {
    .nav-c .nav {
        z-index:9999999
    }

    .nav-c .top-c {
        height: 109.43px;
        padding: 0 90px 0 85px;
        width: 100%
    }

    .nav-c .left {
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 100%;
        height: 21px;
        margin-right: 13px;
        width: 154px
    }

    .nav-c .right .menu {
        background-image: url("");
        border-radius: 28px;
        height: 56px;
        width: 56px
    }

    .nav-c .float-bg {
        background-color: rgba(0,0,0,.502);
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 9999
    }

    .nav-c .float-bg .float-index {
        background-color: #e8fcf5;
        gap: 312.705px;
        height: inherit;
        padding: 24px 24px 24.008px;
        right: 0;
        top: 0;
        width: 480px;
        z-index: 99999
    }

    .nav-c .float-bg .float-index .action-button {
        align-items: center;
        display: flex;
        gap: 25.191px;
        height: 44.8px;
        justify-content: flex-end;
        padding: 12.799px 20.824px 12.809px 354.809px
    }

    .nav-c .float-bg .float-index .action-button .action-right {
        background-image: url("");
        background-size: 100% 100%;
        height: 17px;
        width: 17px
    }

    .nav-c .float-bg .float-index .action-container-list {
        align-items: center;
        display: flex;
        height: 100%
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul {
        display: flex;
        flex-direction: column
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul .action-list-item {
        color: #000;
        cursor: pointer;
        font-family: Helvetica;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 14.4px;
        margin: 8.15px 0;
        text-transform: uppercase;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .nav-c .float-bg .float-index .action-container-list .action-c-ul .action-list-item.active {
        align-items: center;
        background: #35b06e;
        border-radius: 80px;
        color: #fff;
        display: flex;
        height: 28.792px;
        justify-content: center;
        margin: 4.07px 0 4.07px -5px;
        padding: 8.5px 9.2px 5.3px 10.8px;
        width: -moz-fit-content;
        width: fit-content
    }
}

@media(max-width: 580px) {
    .kyc-alert .alert {
        background-color:rgba(0,0,0,.502);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 99999999
    }

    .kyc-alert .alert,.kyc-alert .alert-content {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .kyc-alert .alert-content {
        flex-direction: column;
        position: relative
    }

    .kyc-alert .listing-img-container {
        align-items: center;
        display: flex;
        height: auto;
        justify-content: center;
        max-width: 384pt;
        min-width: 320pt;
        overflow: hidden;
        width: 90%
    }

    .kyc-alert .listing-img {
        height: auto;
        max-width: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }

    .kyc-alert .close-btn {
        align-items: center;
        background-color: transparent;
        border: 2pt solid #35b06e;
        border-radius: 50%;
        color: #35b06e;
        cursor: pointer;
        display: flex;
        font-size: 20px;
        height: 40px;
        justify-content: center;
        margin-top: 40px;
        transition: background-color .3s ease;
        width: 40px
    }

    .kyc-alert .close-btn:hover {
        background-color: #35b06e;
        color: #fff
    }
}

@media(min-width: 580px) {
    .kyc-alert .alert {
        background-color:rgba(0,0,0,.502);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 99999999
    }

    .kyc-alert .alert,.kyc-alert .alert-content {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .kyc-alert .alert-content {
        flex-direction: column;
        position: relative
    }

    .kyc-alert .listing-img-container {
        align-items: center;
        display: flex;
        height: auto;
        justify-content: center;
        max-width: 384pt;
        min-width: 300pt;
        overflow: hidden;
        width: 90%
    }

    .kyc-alert .listing-img {
        height: auto;
        max-width: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }

    .kyc-alert .close-btn {
        align-items: center;
        background-color: transparent;
        border: 2pt solid #35b06e;
        border-radius: 50%;
        color: #35b06e;
        cursor: pointer;
        display: flex;
        font-size: 20px;
        height: 40px;
        justify-content: center;
        margin-top: 40px;
        transition: background-color .3s ease;
        width: 40px
    }

    .kyc-alert .close-btn:hover {
        background-color: #35b06e;
        color: #fff
    }
}

@media(max-width: 580px) {
    .return-btn {
        height:38px;
        left: 28px;
        position: fixed;
        top: 28px;
        width: 38px;
        z-index: 99999999
    }

    .return-btn img {
        height: 100%;
        width: 100%
    }
}

@media(min-width: 580px) {
    .return-btn {
        height:56px;
        left: 45px;
        position: fixed;
        top: 45px;
        width: 56px;
        z-index: 99999999
    }

    .return-btn img {
        height: 100%;
        width: 100%
    }
}

* {
    margin: 0;
    padding: 0
}

body,html {
    height: 100vh;
    overflow-x: hidden;
    position: relative;
    width: 100vw
}

/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/
*,:after,:before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box
}

:after,:before {
    --tw-content: ""
}

:host,html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent
}

body {
    line-height: inherit;
    margin: 0
}

hr {
    border-top-width: 1px;
    color: inherit;
    height: 0
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,strong {
    font-weight: bolder
}

code,kbd,pre,samp {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings: normal;
    font-size: 1em;
    font-variation-settings: normal
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

button,input,optgroup,select,textarea {
    color: inherit;
    font-family: inherit;
    font-feature-settings: inherit;
    font-size: 100%;
    font-variation-settings: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,legend {
    padding: 0
}

menu,ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1
}

input::placeholder,textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}

[role=button],button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,canvas,embed,iframe,img,object,svg,video {
    display: block;
    vertical-align: middle
}

img,video {
    height: auto;
    max-width: 100%
}

[hidden] {
    display: none
}

*,:after,:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.float-right {
    float: right
}

.float-left {
    float: left
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.flex {
    display: flex
}

.hidden {
    display: none
}

.w-full {
    width: 100%
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}