/* montserrat-alternates-200 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 200;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-200.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-300 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 300;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-300.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-regular - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-regular.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-500 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 500;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-500.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-600 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 600;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-600.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-700 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-700.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-alternates-800 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat Alternates';
    font-style: normal;
    font-weight: 800;
    src: url('../assets/fonts/montserrat-alternates-v17-cyrillic_latin-800.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-200.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-300.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-regular.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-500.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-600.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-700.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - cyrillic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../assets/fonts/montserrat-v30-cyrillic_latin-800.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Montserrat Alternates', sans-serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.icon-wrapper {
    position: relative;
}

.icon-wrapper::before,
.icon-wrapper::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgb(84, 27, 218);

    z-index: 0;

    will-change: transform, filter, opacity;
}

.icon-wrapper::before {
    width: 80%;
    height: 80%;

    filter: blur(30px);

    opacity: 0.8;
}

.icon-wrapper::after {
    width: 180%;
    height: 180%;

    filter: blur(70px);

    opacity: 0.6;
}

.gradient-background {
    background-color: #10091c;
    background-image:
        linear-gradient(
            180deg,
            rgba(80, 50, 255, 0.2) 0%,
            rgba(80, 50, 255, 0) 100%
        ),
        linear-gradient(
            180deg,
            rgba(22, 11, 74, 0.2) 0%,
            rgba(22, 11, 74, 0) 100%
        ),
        linear-gradient(180deg, rgba(16, 9, 28, 0) 67.53%, #1e0d38 100%);

    background-repeat: no-repeat;
    background-size: cover;

    background-blend-mode: overlay, screen, normal;
}

@layer base {
    .text-gradient {
        background: linear-gradient(103.65deg, #583ce0 24.12%, #b893f6 112.72%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .text-gradient span {
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        color: #b892f6 !important;
        text-shadow:
            0 0 15.81px rgba(184, 146, 246, 1),
            0 0 31.62px rgba(184, 146, 246, 1),
            0 0 110.67px rgba(184, 146, 246, 1),
            0 0 221.34px rgba(184, 146, 246, 1),
            0 0 250px rgba(184, 146, 246, 1);
    }

    .gradient-text {
        background-image: linear-gradient(
            103.65deg,
            #583ce0 24.12%,
            #b893f6 112.72%
        );

        background-clip: text;
        -webkit-background-clip: text;

        color: transparent;
        -webkit-text-fill-color: transparent;

        background-size: 100%;
    }

    .gradient-page {
        background-color: #10091c;

        background-image: radial-gradient(
            50% 98.88% at 50% 50%,
            rgba(47, 30, 111, 0.6) 0%,
            rgba(44, 26, 79, 0.6) 51.53%,
            rgba(25, 0, 75, 0.6) 98.98%
        );

        background-size: cover;
        background-repeat: no-repeat;
    }

    .gradient-page-2 {
        background-color: #30023f;

        background-image: radial-gradient(
            50% 98.88% at 50% 50%,
            rgba(47, 30, 111, 0.6) 0%,
            rgba(44, 26, 79, 0.6) 51.53%,
            rgba(25, 0, 75, 0.6) 98.98%
        );

        background-size: cover;
        background-repeat: no-repeat;
    }

    .gradient-page-3 {
        background-color: #10091c;

        background-image:
            linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            radial-gradient(
                50% 98.88% at 50% 50%,
                rgba(47, 30, 111, 0.6) 0%,
                rgba(44, 26, 79, 0.6) 51.53%,
                rgba(25, 0, 75, 0.6) 98.98%
            );

        background-size: cover;
        background-repeat: no-repeat;
    }

    .gradient-border-fix {
        position: relative;
    }

    .gradient-border-fix::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        padding: 1px;
        background: linear-gradient(
            95.88deg,
            rgba(88, 60, 224, 0) 0.55%,
            #583ce0 21.41%,
            #8b6bec 54.77%,
            rgba(184, 147, 246, 0) 79.8%
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

    .orbital-wrapper {
    }

    .orbital-wrapper:hover {
        animation-play-state: paused;

        z-index: 20;
    }

    .orbital-block {
        transition: transform 0.4s ease-in-out;
        cursor: pointer;
    }

    .orbital-wrapper:hover .orbital-block {
        transform: scale(1.15);
    }

    .orbital-text {
        color: #5338a4;
        transition: color 0.4s ease-in-out;
    }

    .orbital-wrapper:hover .orbital-text {
        background: linear-gradient(
            97.42deg,
            #9b61ff 13.64%,
            #d4c6ff 60.95%,
            rgba(184, 147, 246, 0) 102.62%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .form-field-wrapper {
        position: relative;
    }

    .form-field-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 25px;
        padding: 1px;
        background: linear-gradient(103.65deg, #583ce0 24.12%, #b893f6 112.72%);
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .form-label-fix {
        position: absolute;
        left: 1.5rem;
        top: 0;
        transform: translateY(-50%);
        z-index: 10;

        padding-left: 0.5rem;
        padding-right: 0.5rem;
        color: #aaaced;
        font-size: 18px;
        line-height: 1.1;
    }

    .form-label-fix::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 10px;

        background: rgba(70, 15, 127, 0.2);

        z-index: -1;
    }
}