:root {
    --black-color: #050215;
    --purple-color: #39197F;
    --pink-color: #AB6EFA;
    --cyan-color: #3191C9;
    --white-color: #FCEFFF;
}

* {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
}

body {
    background-color: var(--black-color);
    overflow-x:hidden;
}

a, p {
    text-decoration: none;
    color: var(--white-color);
}
.resp {
    position: absolute;
    left: -999em;
}
.noresp {
    position:initial;
}
header {
    display: flex;
    justify-content: center;
}

.header-all-container {
    width: 100vw;
    height: 96px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
header input[type=checkbox] {
    display: none;
}

header .icons {
    
    display: none;
}
    header .icons p {
        margin: 0;
        font-size:40px;
        cursor:pointer;
    }
header .content-header {
    font-size: 20px;
    font-weight: 700;
    color: var(--white-color);
    width: 35vw;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

    header .button-header {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

.gradient-text {
    color: var(--white-color);
    background: linear-gradient(90deg, var(--white-color) 0%, var(--cyan-color) 33%, var(--pink-color) 66%, var(--white-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glassmorphism {
    color: #313149;
    padding: 4px;
    position: relative;
    z-index: 0;
    border-radius: 25px;
    background: linear-gradient(148deg, rgba(252, 239, 255, 0.25) 1.43%, rgba(5, 2, 21, 0.20) 93.51%);
    /* glass-morphism */
    backdrop-filter: blur(16.75px);
}

    .glassmorphism:before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 2px;
        border-radius: 25px;
        background: linear-gradient(173deg, rgba(252,239,255,1) 0%, rgba(5,2,21,1) 75%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.header-container {
    width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.small-download-button {
    font-weight: 700;
    padding: 16px 60px;
    text-transform: uppercase;
    color: var(--white-color);
    background: linear-gradient(147.73deg, rgba(49, 145, 201, 0.75) 1.43%, rgba(57, 25, 127, 0.75) 93.51%);
    border-radius: 10px;
    box-shadow: 0px 0px 7.2px 0px var(--pink-color);
}

    

.big-download-button {
    font-size: 24px;
    font-weight: 700;
    padding: 18px 60px;
    text-transform: uppercase;
    color: var(--white-color);
    background: linear-gradient(147.73deg, rgba(49, 145, 201, 0.75) 1.43%, rgba(171, 110, 250, 0.75) 93.51%);
    border-radius: 10px;
    box-shadow: 0px 0px 7.2px 0px var(--pink-color);
}
.white-button {
    padding: 16px 45px;
    border-radius: 10px;
    border: 1px solid var(--white-color);
    background: var(--typo, linear-gradient(90deg, #FCEFFF 0%, #3191C9 31.5%, #AB6EFA 69.5%, #FCEFFF 100%));
    box-shadow: 0px 0px 7.2px 0px #AB6EFA;
    backdrop-filter: blur(2.5px);
    color: var(--black-color);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform:uppercase;
}

.header-login-button {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 7.2px 0px var(--pink-color);
}

   

.landpage {
    position:relative;
    margin: 0 50%;
    margin-top: 277px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    height:520px;
    z-index:0;
}

    .landpage h1 {
        font-style: italic;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 55px;
        width: -moz-fit-content;
        width: max-content;
    }

    .landpage .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        height: 130px;
    }

    .landpage .logo {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

        .landpage .logo p {
            height: fit-content;
            margin: 0px 10px;
            transform: translateY(5px);
            font-weight: 300;
            font-size: 24px;
        }

.advantages-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 auto;
}

.card {
    text-align: center;
    width: 250px;
    height: 300px;
}

    .card h1 {
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
    }

    .card p {
        font-size: 20px;
        font-weight: 300;
    }

    .card .content {
        width: 70%;
        height: 64%;
        margin: 0 auto;
        margin-top: 53px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items:center;
        gap:20px;
    }
        .card .content p, .card .content h1 {
            margin-bottom: 0 !important;
        }
            .card .content img {
                width: 80px;
                height: 80px;
                margin: 0 auto;
            }

.presentation-card {
    margin: 50px auto;
}

    .presentation-card h1 {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 35px;
        width: -moz-fit-content;
        width: fit-content;
    }

    .presentation-card p {
        font-size: 24px;
        font-weight: 300;
    }

    .presentation-card .content {
        margin: 0 auto;
        padding: 40px;
        gap:40px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

        .presentation-card .content > div {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

            .presentation-card .content > div > div {
                width: 50%;
            }

.wrapper-sliding-cards {
    display: flex;
    flex-direction: column;
    gap:30px;
    justify-content: space-evenly;
}

    .wrapper-sliding-cards .container {
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
    }

    .wrapper-sliding-cards input {
        display: none;
    }

    .wrapper-sliding-cards .sliding-card {
        width: 100%;
    }

    .wrapper-sliding-cards .content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .wrapper-sliding-cards .content p, .wrapper-sliding-cards .content h1{
            margin-bottom:0 !important;
        }

        .wrapper-sliding-cards .number {
            font-size: 48px;
            font-weight: 700;
        }

    .wrapper-sliding-cards h1 {
        color: var(--white-color);
        font-size: 36px;
        font-weight: 700;
    }

    .wrapper-sliding-cards .text p {
        font-size: 24px;
        font-weight: 300;
    }

    .wrapper-sliding-cards .description {
        display: none
    }

    .wrapper-sliding-cards .sliding-card {
        cursor: pointer;
    }

    .wrapper-sliding-cards input:checked + label .content {
        height: 300px;
        align-items: flex-start;
    }

        .wrapper-sliding-cards input:checked + label .content .text {
            margin-top: 1.3%;
            width: 45%;
        }

    .wrapper-sliding-cards input:checked + label .description {
        display: block;
    }

    .wrapper-sliding-cards input:checked + label h1 {
        color: var(--white-color);
        background: linear-gradient(90deg, var(--white-color) 0%, var(--cyan-color) 33%, var(--pink-color) 66%, var(--white-color) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: -moz-fit-content;
        width: fit-content;
        font-size: 48px;
    }

    .wrapper-sliding-cards input:checked + label .number {
        font-size: 128px;
        color: var(--white-color);
        background: linear-gradient(90deg, var(--white-color) 0%, var(--cyan-color) 33%, var(--pink-color) 66%, var(--white-color) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        width: fit-content;
        text-align: center;
    }

    .wrapper-sliding-cards .whole-number {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 130px;
    }

    .wrapper-sliding-cards .points {
        display: none;
    }

    .wrapper-sliding-cards input:checked + label .content .points {
        display: block;
    }

    .wrapper-sliding-cards .illustration {
        display: none;
        height:120%;
    }
        .wrapper-sliding-cards .illustration img{
            max-height:100%;
            height:100%;
        }

        .wrapper-sliding-cards .macbook {
            transform: translateY(-60px);
        }
    .wrapper-sliding-cards .publication {
        transform: translateY(-40px) translateX(60px);
    }
    .wrapper-sliding-cards .gestion-centralisee {
        transform: translateY(-40px) translateX(100px);
    }

    .wrapper-sliding-cards input:checked + label .content .illustration {
        display: block;
    }

    .wrapper-sliding-cards .arrow {
        padding: 0 20px;
        transform: rotate(180deg);
    }

    .wrapper-sliding-cards input:checked + label .content .arrow {
        margin-top: 1.3%;
        transform: rotate(360deg);
    }
    .bigger-title{
        padding:70px 0 43px 0;
    }
.bigger-title h1{
    font-size: 96px;
    font-weight:700;
    width:fit-content;
}
.bigger-title h2{
    color:var(--white-color);
    font-size:36px;
    font-weight:700;
    text-transform:uppercase;
}
.bigger-title p {
    color: var(--white-color);
    font-size: 24px;
    font-weight: 300;
}
.subs {
    width:74%;
    margin:0 auto;
}

    .subs .price-cards {
        z-index: 0;
        position: relative;
        border-radius: 25px;
        padding: 33px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
        .subs .price-cards::before{
            content: "";
            position: absolute;
            z-index: -1;
            inset: 0;
            padding: 2px;
            border-radius: 25px;
            background: linear-gradient(165deg, rgba(252,239,255,1) 0%, rgba(5,2,21,1) 75%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .price-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 205px;
            width: 168px;
        }

            .price-card p {
                font-size: 36px;
                font-weight: 700;
                margin:0 !important;
            }

                .price-card p span {
                    font-size: 47px;
                }

                .price-card p :last-child {
                    font-size: 24px;
                }

    .pro-card-outline {
        display: flex;
        align-items: center;
        justify-content: center;
        border:none;
        width: 233px;
        height: 284px;
        border-radius: 35px;
    }
        .pro-card-outline:has(.pro:hover) {
            border: 2px solid var(--cyan-color);
        }


    .pro-card-outline .pro {
        width: 207px !important;
        height: 253px !important;
        background: linear-gradient(147.73deg, rgba(252, 239, 255, 0.5) 1.43%, rgba(49, 145, 201, 0.5) 93.51%);
    }
        .pro-card-outline .pro :last-child {
            display: flex;
            flex-direction: column;
        }

        .pro-card-outline .pro .gradient-text {
            text-transform: uppercase;
            font-size: 20px !important;
        }

        .pro-card-outline .pro .gold-text {
            color: var(--white-color);
            background: linear-gradient(90deg, #FCEFFF 0%, #D9BA16 25%, #F4F2E8 50%, #BBA21C 75%, #F3D431 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 48px !important;
        }

    .ultra {
        background: linear-gradient(147.73deg, rgba(252, 239, 255, 0.5) 1.43%, rgba(171, 110, 250, 0.5) 93.51%);
    }
    .subs .button{
        position:absolute;
        display:flex;
        justify-content:flex-end;
        bottom:-18px;
        width:860px;
    }
        .subs .button a {
            background: linear-gradient(147.73deg, rgba(49, 145, 201, 1) 1.43%, rgba(57, 25, 127, 1) 93.51%);
            border-radius: 10px;
            box-shadow: 0px 0px 7.2px 0px var(--pink-color);
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 700;
            padding: 10px 45px;
            margin:0 20px;
        }
        .subs .button p {
            margin-bottom: 0 !important;
            margin: 0px 80px;
            width:fit-content;
        }
    .subs .learn-more {
        display: flex;
        justify-content: flex-end;
        margin-top: 60px;
        margin-bottom:40px;
        margin-right:60px;
        font-size: 24px;
        font-weight:700;
        text-transform:uppercase;
    }
    .community{
        display:flex;
        flex-direction:row;
        width:66.6%;
        margin:0 auto;
        justify-content:space-between;
    }
    .community .glassmorphism{
        height:fit-content;
    }
    .community .glassmorphism img{
        padding:22px;
    }
    .community .content{
        width:65%;
    }
    .community .content h1{
        font-size:40px;
        font-weight:700;
        width:100%;
    }
        .community .content p {
            font-size: 24px;
            font-weight: 300;
        }
        .community .content p span{
            color:var(--cyan-color);
        }
        .community .white-button{
            float:right;
            margin-top:10px;
        }
   .faq{
       margin:0 auto;
       width:80%;
       gap:17px;
   }
    .faq h1 {
        font-size: 24px;
        font-weight: 700;
    }
    .faq .text{
        width:83%;
    }
    .faq .content{
        padding:48px 31px;
        justify-content:space-between;
    }
    .faq input:checked + label .content .text{
        width:100%
    }
    .faq input:checked + label .content {
    height: auto;
    }
    .faq input:checked + label h1 {
        font-size: 24px;
        background: none;
        color: var(--white-color);
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: initial;
        padding-bottom:30px;
    }
.faq input:checked + label .description{
    font-size:20px;
    font-weight:300;
}
footer {
    margin-top: 43px;
    display: flex;
    flex-direction: column;
    height: 168px;
    gap: 25px;
}
        footer .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 158px;
            flex-shrink: 0;
        }
            footer .container .links {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                flex-shrink: 0;
                font-size: 20px;
                font-weight: 700;
            }
        footer .legal {
            display: flex;
            align-items: center;
            gap: 78px;
            justify-content:center;
        }
.pricing-table-header{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    margin-right:40px;
    position:relative;
    top:100px;
    z-index:4;
}
    .pricing-table-header .table-head {
        width: 60.7%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:50px;
        background:none;
    }
        .pricing-table-header .table-head p{
            margin:0;
            font-weight:700;
            font-size:40px;
            padding:17px 36px;
        }
    .pricing-table-header .price-cards {
        display: flex;
        flex-direction: row;
        width: 60.7%;
        justify-content: space-between;
        align-items: center;

    }
.pricing-table-container{
    height :auto;
}
    .pricing-table-container .container{
        padding-top:45px;
    }
    .pricing-table-container :first-child input + label {
        margin-top: 65px;
    }
.pricing-table-container :first-child input:checked + label {
    margin-top:0px;
}
.pricing-table-container input + label .content .table-index, .pricing-table-container input + label .content .pricing-table-content {
    display: none;
    
}
.pricing-table-container input:checked + label .content .table-index{
    display:block;
}
.pricing-table-container input:checked + label .content {
    height: auto;
    width: 96.5%;
    margin: 0 auto;
}
.pricing-table-container input + label .pricing-table {
    display: block;
    width: 100% !important;
}
.pricing-table-container input:checked + label .pricing-table {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    padding-bottom: 39px;
    justify-content: space-between;
}
.pricing-table-container input + label .pricing-category-title {
    display: flex;
    padding:20px 45px;
    width: 100%;
    justify-content: space-between;
    align-items:center;
}
.pricing-table-container input:checked + label .pricing-category-title {
    width: 297px;
    justify-content: space-between;
    padding:0;
}
    .pricing-table-container input:checked + label .pricing-category-title :last-child{
        position:absolute;
        right:16.6px;
        transform:rotateX(180deg)
    }
    .pricing-table-container h1 {
        background: none !important;
        -webkit-text-fill-color: var(--white-color) !important;
        text-transform:uppercase;
        font-size:40px !important;
        width:0px;
    }
.pricing-table-container input:checked + label .content .pricing-table-content{
    width: 62.5%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}
.pricing-table-container .pricing-table-content div{
    width:168px;
    text-align:center
}
    .pricing-table-container .pricing-table-content .column-3 {
        width: 233px;
    }
    .pricing-table-container .button {

        margin-top:10px;
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .pricing-table-container .button a {
        background: linear-gradient(147.73deg, rgba(49, 145, 201, 1) 1.43%, rgba(57, 25, 127, 1) 93.51%);
        border-radius: 10px;
        box-shadow: 0px 0px 7.2px 0px var(--pink-color);
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 700;
        padding: 5px 45px;
        margin: 0 20px;
    }

        .pricing-table-container .button p {
            margin-bottom: 0 !important;
            margin: 0px 80px;
            width: fit-content;
        }
.double-large-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 66px;
}
    .double-large-button p{
        margin:0;
    }
    .double-large-button .contact-us {
        border-radius: 25px;
        border: 1px solid var(--blanc-40, #FCEFFF);
        background: var(--Rich-Black, #050215);
        box-shadow: 0px 0px 7.2px 0px #AB6EFA;
        backdrop-filter: blur(2.5px);
    }
    .double-large-button .button {
        width: 279px;
        height: 150px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 700;
    }
        .double-large-button .button :nth-child(2) {
            font-size: 36px;
        }
input::-ms-reveal,
input::-ms-clear {
    display: none;
}
.form-wrapper {
    margin-top:106px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
    .form-wrapper p{
        margin:0;
    }
    .whole-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        padding: 55px 70px;
    }
    .whole-form h1 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 10px;
    }
        .whole-form input[type=text], .whole-form input[type=email], .whole-form input[type=password], .whole-form textarea{
            all: unset;
            border-radius: 10px;
            border: 1px solid var(--white-color);
            padding: 10px 20px;
            width: 423px;
            color: var(--white-color);
            font-weight: 300;
            font-size: 20px;
        }       
            .whole-form .smaller-input {
                display: flex;
                width: 465px;
                justify-content: space-between;
            }
        .whole-form .smaller-input input[type=text] {
            width: 40%;
        }
        .whole-form input[type=checkbox] {
            appearance: unset;
            width: 12px;
            height: 12px;
            border: 1px solid var(--white-color);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    .whole-form input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--pink-color);
    }

    .whole-form input[type="checkbox"]:checked::before {
        transform: scale(1);
    }
    .whole-form ::placeholder {
        opacity: 0.5;
        color: var(--white-color);
    }
    .whole-form .container {
        display: flex;
        justify-content: space-between;
        width: 450px;
    }
        .whole-form .container a {
            font-size: 20px;
        }

        .whole-form .container label {
            font-size: 16px;
        }
        .whole-form .container div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 145px;
        }
    .whole-form .login {
        display: flex;
        width: 423px;
        padding: 16px 45px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 34px;
        border-radius: 10px;
        border: 1px solid var(--blanc-40, #FCEFFF);
        background: linear-gradient(148deg, rgba(49, 145, 201, 0.75) 1.43%, rgba(171, 110, 250, 0.75) 93.51%);
        box-shadow: 0px 0px 7.2px 0px #AB6EFA;
        backdrop-filter: blur(2.5px);
    }
        .whole-form .login p {
            color: var(--white-color);
            text-align: center;
            font-size: 24px;
            font-weight: 700;
        }
.swap-form {
    display:flex;
    align-items:center;
    height:83px;
    width:604px;
    font-size: 40px;
    font-weight: 700;
    margin-top: 27px;
}
    .swap-form p{
        padding-left:70px;
    }
    .contact-wrapper h1 {
        font-size: 40px;
        font-weight: 700;
        width: 547px;
        margin-bottom: 30px
    }
.contact-wrapper form{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:22px;
}
.contact-wrapper .whole-form {
    padding: 33px 41px;
}
.profile-wrapper{
    display:flex;
    justify-content:space-between;
    width:980px;
    margin:0 auto;
}
.profile-wrapper .content{
    width:655px;
    padding:33px 55px;
    height:462px;
    padding:40px 23px;
}
    .profile-wrapper .content h2{
        width:fit-content;
        font-weight:700;
        font-size:32px;
    }
    .profile-wrapper .content .lists {
        display: flex;
    }
    .profile-wrapper .content ul li {
        width: 250px;
        font-size: 24px;
        color: var(--white-color);
        margin:35px 0;
    }
    .profile-wrapper .profile-pic {
        width: 280px;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .profile-wrapper .profile-pic :first-child {
        width:206px;
        height:206px;
        position:relative;
    }
    .profile-wrapper .profile-pic :last-child {
        position:absolute;
        top:54px;
        right:50px;
    }
.black-sphere {
    position: absolute;
    border-radius: 100%;
    background: #050215;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .black-sphere::after {
        content: '';
        border-radius: 980px;
        opacity: 0.5;
        background: var(--pink-color);
        filter: blur(48.54999923706055px);
        margin: 0 auto;
        width: 71.42%;
        height: 71.42%;
    }
    .black-sphere ::before{

    }
.landpage .black-sphere {
    width: 1371.998px;
    height: 686px;
    border-top-left-radius: 20000px;
    border-top-right-radius: 20000px;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 500px 0px var(--pink-color);
    -moz-box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 500px 0px var(--pink-color);
    -webkit-box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 500px 0px var(--pink-color);
    top: 213px;
    z-index: -10;
}
    .landpage .black-sphere::after {
        width: 71.42%;
        height: 142.84%;
        margin-top:50%;
    }
.star-bg {
    z-index: 0;
    width: 99vw;
    margin: 0 50%;
    transform: translateX(-50%);
    height: 1000px;
    background-image: linear-gradient(0deg, rgba(5, 2, 21, 0.9) 10%, rgba(57, 25, 127, 0.4) 70%, rgba(5, 2, 21, 0.9) 100%),url(../images/star-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 850px;
}
    .star-bg :first-child {
        width: 578px;
        height: 578px;
        top: 161px;
        left: -248px;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 208px 0px var(--pink-color);
    }
    .star-bg :nth-child(2) {
        width: 269.999px;
        height: 269.999px;
        top: 408px;
        right: 179px;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 97px 0px var(--pink-color);
    }
    .star-bg :last-child {
        width: 24.001px;
        height: 24.001px;
        top: 324px;
        right: 437px;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 8.5px 0px var(--pink-color);
    }
    .black-hole{
        height:260px;
        position:relative;
        top:-650px;
        z-index:-1;
    }
        .black-hole img {
            margin: 0 50%;
            transform: translateX(-50%);
            position: absolute;
            background-color: var(--black-color);
        }
.bigger-title{
    position:relative;
}
.bigger-title .black-sphere {
    width: 578px;
    height: 578px;
    right: -250px;
    top: -120px;
    z-index:-10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 208px 0px var(--pink-color);
}
.pricing-black-sphere .black-sphere {
    width: 1371.998px;
    height: 1371.998px;
    top:-576px;
    left:-755px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 493px 0px var(--pink-color);
}

.log-black-sphere .black-sphere {
    width: 1371.998px;
    height: 1371.998px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -1019px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 493px 0px var(--pink-color);
}

.acc-black-sphere :first-child {
    width: 305.442px;
    height: 305.442px;
    bottom: 291.5px;
    left:145px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 109.8px 0px var(--pink-color);
}
.acc-black-sphere :nth-child(2) {
    width: 66.5px;
    height: 66.5px;
    top: 167px;
    right: 432px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 24px 0px var(--pink-color);
}
.acc-black-sphere :last-child {
    width: 122.5px;
    height: 122.5px;
    bottom: 84px;
    right: 98px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 44px 0px var(--pink-color);
}

.contact-black-sphere :first-child {
    width: 394.442px;
    height: 394.442px;
    bottom: 387px;
    left: 290px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 142px 0px var(--pink-color);
}
.contact-black-sphere :nth-child(2) {
    width: 171.5px;
    height: 171.5px;
    top: 79.5px;
    right: -3px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 61.7px 0px var(--pink-color);
}
.contact-black-sphere :last-child{
    width: 63.5px;
    height: 63.5px;
    bottom: 119px;
    right: 556px;
    z-index: -10;
    box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 22.8px 0px var(--pink-color);
}
.small-download-button:hover, .big-download-button:hover, .login:hover, .button a:hover {
    background: var(--typo, linear-gradient(90deg, #FCEFFF 0%, #3191C9 31.5%, #AB6EFA 69.5%, #FCEFFF 100%));
    box-shadow: 0px 0px 7.2px 0px #AB6EFA;
    backdrop-filter: blur(2.5px);
    transition:0.3s;
}
.header-login-button:hover {
    background: var(--white-color);
    color: var(--purple-color);
    background-clip: border-box;
    -webkit-text-fill-color: unset;
}
.button :last-child:hover .gradient-text {
    color: var(--white-color) !important;
    background:none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}
.learn-more a:hover {
    color: var(--white-color) !important;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}
a:hover{
    color:var(--white-color);
}
.content-header a:hover {
    color: var(--white-color);
    background: linear-gradient(90deg, var(--white-color) 0%, var(--cyan-color) 33%, var(--pink-color) 66%, var(--white-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}
.white-button:hover{
    color:var(--black-color);
    background:none;
    background-color:var(--cyan-color);
}
.pricing-table-content .column-1:hover, .pricing-table-content .column-2:hover, .pricing-table-content .column-3:hover, .pricing-table-content .column-4:hover {
    border-radius: 25px;
    border: 2px solid var(--Magnolia, #FCEFFF);
    box-shadow: 0px 0px 22.6px 4px #AB6EFA;
    backdrop-filter: blur(4.099999904632568px);
}
.contact-us:hover {
    border: 1px solid var(--blanc-40, #FCEFFF);
    background: var(--dgrad-40, linear-gradient(148deg, rgba(252, 239, 255, 0.75) 1.43%, rgba(5, 2, 21, 0.61) 93.51%));
    box-shadow: 0px 0px 21px 0px #AB6EFA;
    backdrop-filter: blur(2.5px);
}


@media screen and (max-width: 991px) {
    .resp {
        position:initial;
    }
    .noresp{
        position:absolute;
        left:-999em;
    }
    .header-all-container {
        justify-content: space-between;
        padding: 0 50px;
    }
    header .icons {
        display: block;
    }
        header .icons .close-icon {
            display: none;
        }
    header input[type=checkbox]:checked ~ .icons .menu-icon {
        display: none;
    }
    header input[type=checkbox]:checked ~ .icons .close-icon {
        display: block;
    }
    .header-container {
        position: absolute;
        top: 10%;
        left: 0;
        width: 100vw;
        height: 0px;
        background-color: var(--black-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        gap: 40px;
        overflow: hidden;
        transition: .6s ease;
    }
    header input[type=checkbox]:checked ~ .header-container {
        height: 700px;
        z-index: 120;
    }
    header .content-header {
        align-items: flex-start;
        flex-direction: column;
    }
       
    header .button-header {
        flex-direction: column-reverse;
    }
    .header-login-button{
        margin:19px 0;
    }
    header .button-header > a{
        width:220px;
        text-align:center
    }
    .header-all-container:has(input[type=checkbox]:checked) {
        background-color: var(--black-color);
    }
    .landpage{
        margin-top:200px;
        height:750px;
    }
    .landpage h1 {
        font-size: 40px;
        width: fit-content;
        text-align: right;
    }
    .landpage .container{
        height:auto;
        gap:21px;
        padding:0;
    }
    .landpage .logo {
        flex-direction: column;
    }
        .landpage .black-sphere{
            top:600px;
            width:400px;
            height:400px;
        }
            .landpage .black-sphere::after{
                display:none;
            }

            .advantages-cards {
                flex-direction: column;
                align-items: center;
                gap: 30px;
            }
    .advantages-cards .card{
        width:350px;
        height:90px;
        justify-content:center;
    }
        .advantages-cards .card .content{
            flex-direction:row;
            margin:0 33px;
            width:auto;

        }
            .advantages-cards .card .content img {
                margin:0;
                max-height:100%;
            }
    .advantages-cards .card .content h1 {
        font-size: 16px;
    }
            .advantages-cards .card .content p{
                font-size: 13px;
            }

    .presentation-card .content > div {
        flex-direction: column;
        gap: 4px;
    }
    .presentation-card .content .second{
        flex-direction: column-reverse;
    }
        .presentation-card .content > div > div{
            width:auto;
        }
    .presentation-card h1 {
        font-size: 20px;
        margin: 0 auto 35px;
    }
    .presentation-card p{
        font-size:16px;
        width:80%;
        margin:0 auto;
    }
    .presentation-card img{
        max-height:100px;
    }
    .bigger-title h1{
        font-size:36px;
    }
    .subs{
        width:100%;
    }
    .subs .price-cards {
        flex-wrap: wrap;
        gap: 29px;
        padding:0;
    }
        .subs .price-cards::before {
            display:none;
        }
        .pro-card-outline {
            border: none;
            width: auto;
            height: auto;
        }
    .pro-card-outline .pro {
        height: 205px !important;
        width: 168px !important;
    }
            .pro-card-outline .pro .number1 {
                display: none;
            }
    .subs .button {
        flex-direction: column-reverse;
        align-items: center;
        gap:19px;
        bottom:-120px;
    }
        .subs .button p {
            margin: 0;
            width: 19em;
            text-align:center;
        }
        .subs .learn-more {
            margin-top: 140px;
        }
    .triple-wrapper input:checked + label .content {
        flex-direction: column;
        height: auto;
        padding:30px 20px;
    }
    .wrapper-sliding-cards .whole-number{
        flex-direction:row;
        width:auto;
    }
    .triple-wrapper input:checked + label .content .text{
        width:100%;
    }
    .triple-wrapper .whole-number .illustration img{
        max-width:100%;
    }
    .triple-wrapper h1{
        font-size:20px;
    }
    .triple-wrapper .number{
        font-size:36px;
    }
    .triple-wrapper .content{
        gap:10px;
    }



    .community {
        margin-top: 39px;
        flex-direction: column;
        align-items: center;
    }
        .community .content{
            width:auto;
        }
        .community .content h1 {
            font-size: 36px;
            margin-top: 25px;
        }
        .community .content p{
            font-size:16px;
        }

    .faq {
        width: auto;
        height: auto;
    }
        .faq h1, .faq .text p {
            font-size: 16px;
        }
        .faq input:checked + label h1 {
            font-size: 32px;
        }
        .faq .content{
            padding:15px 25px;
        }


    footer .container{
        flex-direction:column;
        gap:30px;
        margin-bottom:30px;
    }
        footer .container .links{
            align-items:center;
        }
        footer .legal {
            flex-direction: column;
            gap: 0px;
        }
    .black-hole{
        top:-200px;
    }
    .black-hole img {
        width: 200%
    }

    .star-bg {
        background: var(--black-color);
        top: 1000px;
        box-shadow: 0px 0px 20px 30px var(--black-color);
    }
        .star-bg .black-sphere, .bigger-title .black-sphere {
            display: none;
        }
    .whole-form{
        padding:55px 21.5px;
    }
    .whole-form input[type=text], .whole-form input[type=email], .whole-form input[type=password], .whole-form textarea {
        width: 265px;
    }
    .whole-form .container{
        width: 307px;
        flex-direction:column;
        padding:0;
    }
    .whole-form .login{
        width:307px;
    }
    .whole-form h1{
        font-size:24px;
    }
    .swap-form {
        padding: 17px 0px;
        width: 350px;
        text-align: center;
    }
    .whole-form .smaller-input{
        flex-direction:column;
        width:307px;
        gap:12px;
    }
    .contact-wrapper h1{
        font-size:24px;
        width:389px;
    }
    .whole-form .smaller-input input[type=text] {
        width: 66%;
    }
    .log-black-sphere .black-sphere {
        width: 120%;
        height: 120%;
        max-width: 450px;
        max-height: 450px;
        top: -30%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }
    .contact-black-sphere :first-child, .acc-black-sphere :first-child {
        width: 310px;
        height: 310px;
        bottom: 387px;
        left: -150px;
        z-index: -10;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 142px 0px var(--pink-color);
    }

    .contact-black-sphere :nth-child(2), .acc-black-sphere :nth-child(2) {
        width: 45px;
        height: 45px;
        top: 100px;
        right: 70px;
        z-index: -10;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 61.7px 0px var(--pink-color);
    }

    .contact-black-sphere :last-child {
        display:none;
    }

    .profile-wrapper{
        flex-direction:column;
        align-items:center;
        width:auto;
        gap:25px;
        margin-top:80px;
    }
        .profile-wrapper .content {
            height: auto;
            width: auto;
        }
        .profile-wrapper .content .lists {
            flex-direction: column;
        }
            .profile-wrapper .content ul li{
                margin:0;
            }

    .acc-black-sphere :last-child {
        width: 117px;
        height: 117px;
        bottom: 84px;
        right: -20px;
        z-index: -10;
        box-shadow: 19px 9px 59.7px -13px rgba(252, 239, 255, 0.05) inset, 0px 0px 15.2px 1px #FCEFFF,0px 0px 44px 0px var(--pink-color);
    }

    .pricing-table-header{
        align-items:center;
    }
        .pricing-table-header .price-cards{
            flex-direction:column;
            width:100%;
        }
    .pricing-table-container .container{
        padding:0;
    }
    .pricing-table-container :first-child input + label {
        margin-top: 25px;
    }
    .pricing .price-card{
        position:relative;
        bottom:-40px;
        z-index:10;
    }
    .pricing-table-container h1{
        font-size:20px !important;
    }
    .wrapper-sliding-cards .text p{
        font-size:16px;
    }
    .pricing-table-container input:checked + label .pricing-category-title {
        width: auto;
        padding-bottom:29px;
    }
    .wrapper-sliding-cards input:checked + label .content .text{
        margin-top:30px;
    }
    .pricing-table-container :first-child input:checked + label{
        margin-top:25px;
    }
    .pro-card-outline .pro .gold-text{
        font-size:36px !important;
    }
    .pro-card-outline .pro .gradient-text {
        font-size: 16px !important;
    }
    .pricing-table-container input:checked + label .content{
        width:100%;
        padding:0 29px;
    }
    .pricing-table-container input + label .pricing-category-title{
        flex-direction:row-reverse;
        justify-content:flex-end;
        gap:20px;
    }
    .pricing-table-container input:checked + label .pricing-category-title :last-child{
        position:initial;
    }
    .pricing-table-container input + label .pricing-category-title{
        padding:22px 29px;
    }
    .pricing-table-container input:checked + label .pricing-category-title{
        justify-content:flex-end;
    }
    .pricing-table-header .table-head{
        width:auto;
    }
    .pricing-table-header .table-head p {
        font-size: 16px;
    }
    .bigger-title h2{
        font-size:20px;
    }
    .bigger-title p{
        font-size:16px;
    }
    .pricing-table-header{
        top:0;
    }
    .pricing .button{
        flex-direction:column;
        align-items:center;
        gap:29px;
    }
    .pricing .button p{
        margin:0;
    }
    .double-large-button{
        flex-direction:column;
    }
}