@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Sora:100,200,300,regular,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

html{
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    font-size: 15px;
    font-family: Sora, sans-serif;
    background: #0F0715;
    --tw-text-opacity: 1;
    color: #fff;
}
input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-weight: 600;
}
section{
    scroll-margin-top: 3rem;
}
.animate-spin-slow {
    animation: spin 4s linear infinite
}
.animate-spin-slower {
    animation: spin 6s linear infinite
}
@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}
.animate-spin-reverse-slower {
    animation: spin-reverse 6s linear infinite
}
@keyframes spin-reverse {
    to {
        transform: rotate(-1turn)
    }
}
/* _navbar.css */
.navbar{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 40;
    display: block;
    width: 100%;
    overflow: hidden;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
@media (min-width: 1024px){
    .navbar{
        background-color: transparent;
        --tw-shadow-colored: 0 0 #0000;
    }
}
.navbar nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
@media (min-width: 1024px){
    .navbar nav{
        flex-wrap: nowrap;
    }
}
.navbar nav .logo{
    display: inline-block;
    white-space: nowrap;
}
.navbar nav .navbar-nav{
    margin-top: 1rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    row-gap: 0.5rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}
@media (min-width: 1024px){
    .navbar nav .navbar-nav{
        margin-top: 0px;
        flex-direction: row;
        align-items: center;
    }
}
.navbar nav .navbar-nav .nav-item .nav-link{
    position: relative;
    margin-left: 0.875rem;
    margin-right: 0.875rem;
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.navbar nav .navbar-nav .nav-item .nav-link::after{
    position: absolute;
    bottom: -0.25rem;
    inset-inline-start: 0px;
    height: 2px;
    width: 0px;
    border-radius: 9999px;
    background-color: transparent;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    content: var(--tw-content);
    transition-duration: 500ms;
}
@media (min-width: 1024px){
    .navbar nav .navbar-nav .nav-item .nav-link{
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }
}
.navbar nav .navbar-nav .nav-item .nav-link:active,
.navbar nav .navbar-nav .nav-item .nav-link:focus,
.navbar nav .navbar-nav .nav-item .nav-link:hover{
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity));
}
.navbar nav .navbar-nav .nav-item.active .nav-link{
    --tw-text-opacity: 1;
    color: rgb(124 58 237 / var(--tw-text-opacity));
}
.navbar nav .navbar-nav .nav-item.active .nav-link::after{
    width: 75%;
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity));
}
.navbar nav .navbar-nav .nav-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(124 58 237 / var(--tw-bg-opacity));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
@media (min-width: 1024px){
    .navbar nav .navbar-nav .nav-btn{
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: rgb(124 58 237 / var(--tw-text-opacity));
    }
}
.navbar.nav-sticky{
    background-color: rgb(2 6 23 / 0.6);
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-backdrop-blur: blur(40px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}


p.stroke{
    font-size:200px;
    top: 0;
    color: #2A1454;
    font-family: Inter,'sans-serif';
    left: -30px;
    font-weight: 900;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    z-index: -1;
}

.line-wave{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cardElement{
    background: linear-gradient(110.49deg, #130428 19.95%, #251043 67.64%, #38126D 107.08%, #261045 156.61%, #190634 183.21%);
    
}

.hs-accordion.active{
    background: linear-gradient(269.15deg, rgba(42, 20, 84, 0.1) 0%, rgba(135, 80, 247, 0.1) 100%);
    
}


.corner-card .corner{
    border-radius: 12px 12px 0 0;
    position: relative;
}

.corner-card .corner::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #201527;
    border-radius: 12px;
    right: -10px;
    bottom: 11px;
    z-index: 32;
}
.corner-card .corner::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0f0715;
    border-radius: 12px;
    right: -20px;
    bottom: 20px;
    z-index: 33;
}
.corner-card.reverse .corner::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #201527;
    border-radius: 12px;
    left: -17px;
    bottom: 16px;
    z-index: 37;
}
.corner-card.reverse .corner::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0f0715;
    border-radius: 3px;
    left: -20px;
    bottom: 20px;
    z-index: 50;
}

.centerAsoluteCenter{
    top: 50%;
    transform: translate(0,-50%);
}

.vertical-letter{
    position: relative;
}

.vertical-letter::after{
    --text:attr(data-text);
    content: var(--text);
    position: absolute;
    bottom: 2%;
    left: -70%;
    z-index: 0;
    font-size: 118px;
    font-weight: 600;
    color: #25252E;
    transform: rotate(-90deg) translate(31%, -50%);
    text-transform: uppercase;
}

.card.task {
    border-radius: 40px;
}

.card.task .img{
    box-shadow: 2px 2px 20px 0px #1e203f;
    border-radius: 40px;
    padding: 21px 23px;
    background-color: #3F455C;
}


.card.task .bottom-pos{
    border-radius: 28px;
    box-shadow: -2px -6px 20px 8px #1e203f;
    top: 10%;
    width: 98%;
    left: 50%;
    transform: translateX(-50%);
}

.card.task .bottom-pos:first-child{
    top: 3%;
    box-shadow: none;
}

.card.task .link{
    position: absolute;
    bottom: -50px;
    right: -16px;
    width: 50%;
    height: 50%;
    /* background: #0f0715; */
    z-index: 19;
    border-radius: 43px;
}

.card.task .link .corner-top{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    /* background: #0f0715; */
    right: -62%;
    z-index: 0;
}



.project-glass{
    left: 0%;
    transform: translateY(-50%);
    background-image: url(../img/Card.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    z-index: 23;
    border-radius: 16px;
    padding: 1rem;
}

.project-bg{
    position: relative;
    min-height: 250px;
    z-index: 1;
}

.project-bg::after{
    z-index: 0;
    border-radius: 16px;
}

#right-content{
    position: sticky;
    top: 0;
}




#video .vertical-letter::after{
    font-size: 40px;
    width: 301px;
    transform-origin: 0 0;
    /* top: 50%; */
    /* left: 50%; */
    transform: rotate(-90deg) translate(-35%, -60px);
    background: #8750F7;
    background: linear-gradient(to bottom right, #8750F7 23%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hs-accordion.active button img{
    rotate: 90deg;
}

.swiper-slide-active > div {
    border: 3px solid #8750F7!important;
}

.swiper-slide-active:nth-child(n-3) > div {
    background: linear-gradient(90.34deg, rgba(19, 39, 34, 0) -12.33%, rgba(25, 18, 31, 0.65) 32.74%);
    background-color: color(srgb 0.1223 0.093 0.2031);
}
.fs15p{
    font-size: 15px !important;
}
.stars-shoot{
    background-image: url('../img/stars.png');
    background-repeat: round;
}
.fs12p{
    font-size: 12px !important;
}

@media (max-width: 768px) {
    .vertical-letter::after{
        --text:attr(data-text);
        content: var(--text);
        position: absolute;
        bottom: 2%;
        left: -70%;
        z-index: 0;
        font-size: 118px;
        font-weight: 600;
        color: #25252E;
        display: none;
        text-transform: uppercase;
    }
}
.btt{
    top: -29px;
    right: 45px;
}
.inout{
    transform: translate(21px, -12px);
}

.item{
    cursor: pointer;
}
.item.active{
    background: rgb(126 34 206 /1);
    display: block;
}

.item.active .elements{
    background: rgba(147, 52, 232, 1);
}