@font-face {
    font-family: 'Nexa';
    src: url('./fonts/Nexa-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NexaBold';
    src: url('./fonts/Nexa-Heavy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NexaBook';
    src: url('./fonts/Nexa-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Postertoaster';
    src: url('./fonts/Postertoaster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Geist';
    src: url('./fonts/Geist-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeistMedium';
    src: url('./fonts/Geist-Medium.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeistBlack';
    src: url('./fonts/Geist-Black.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeistSemiBlack';
    src: url('./fonts/Geist-SemiBold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeistLight';
    src: url('./fonts/Geist-Light.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeistVariableVF';
    src: url('./fonts/GeistVariableVF.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

*, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    list-style: none;
}


body {
    font-family: 'Geist', sans-serif;
    background: #0e0e0e;
    color: #fff;
    position: relative;
}
body.show-modal {
    overflow: hidden;
}
.parallax-small {
    z-index: 1;

    &:before {
        content: '';
        position: fixed;
        top: 2%;
        left: 3%;
        width: 623px;
        height: 623px;
        border-radius: 50%;
        background: url("./img/ellipse-small.png") center center/cover no-repeat;
        display: block;
        transform: translateY(var(--parallax-offset, 0));
        transition: transform 0.05s linear;
        z-index: -1;
    }
}
.parallax-big {
    z-index: 1;

    &:before {
        content: '';
        position: fixed;
        bottom: 2%;
        right: 1%;
        width: 623px;
        height: 623px;
        border-radius: 50%;
        background: url("./img/elipsse1-1.png") center center/cover no-repeat;
        opacity: .5;
        display: block;
        transform: translateY(var(--parallax-offset, 0));
        transition: transform 0.05s linear;
        z-index: -1;
    }
}
.pagination {
    position: fixed;
    top: 0;
    left: 56px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 101;

    li {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        border: 1px solid #fff;
        margin: 30px 0;
        cursor: pointer;
        background: transparent;
        transition: background 0.3s ease;
    }
    li.active {
        background: #fff;
    }
}

header, footer {
    position: relative;
    z-index: 10;
    padding: 20px 10px;
}
.counter {
    font-family: 'Postertoaster', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, calc(128 * (100vw / 1920)), 128px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #00bbff;
    text-stroke: 2px #00bbff;
}
header {
    nav {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: 16px;
        position: relative;

        .title {
            color: #737373
        }

        li {
            color: #fff;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #373737;
            text-align: right;
            cursor: pointer;
        }
    }
    @-moz-document url-prefix() {
        .outline-text {
            text-shadow:
                    1px 0 #00bbff,
                    -1px 0 #00bbff,
                    0 1px #00bbff,
                    0 -1px #00bbff;
        }
    }
    .logo {
        max-width: 243px;
        width: 100%;
    }
    .middle-block {
        position: relative;
        z-index: 1000;
        text-transform: uppercase;
        color: #fff;
        padding-top: 150px;
        padding-bottom: 150px;

        .text-1 {
            font-family: 'GeistBlack', sans-serif;
            font-size: clamp(16px, calc(40 * (100vw / 1920)), 40px);
            line-height: 110%;
            padding-bottom: 20px;
            width: 100%;
            max-width: 957px;
        }

        &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-top: 45%;
            width: 45%;
            background: linear-gradient(180deg, #00bbff 0%, #0051ff 100%);
            border-radius: 50%;
            box-shadow: 0 0 167px -15px #00508e;
            display: block;
            z-index: -1;
        }
        .text-2 span:first-child {
            font-family: 'GeistSemiBlack', sans-serif;
            font-weight: 600;
            font-size: clamp(16px, calc(82 * (100vw / 1920)), 82px);
            line-height: 120%;
        }
        .text-2 span:last-child {
            font-family: 'GeistLight', sans-serif;
            font-size: clamp(16px, calc(80 * (100vw / 1920)), 80px);
            line-height: 120%;
        }
    }
    .welcome-text {
        position:relative;
        font-weight: 500;
        font-size: clamp(16px, calc(32 * (100vw / 1920)), 32px);
        max-width: 350px;

        img.avatar {
            max-width: 68px;
            width: 100%;
            height: auto;
            margin-right: 10px;
        }
        .arrow {
            width: clamp(24px, calc(66 * (100vw / 1920)), 66px);
            height: clamp(24px, calc(66 * (100vw / 1920)), 66px);
            border-radius: 50%;
            border: 1px solid #fff;
            background: url('./img/arrow-top-rigth.png') no-repeat center center #000;
            background-size: 50%;

        }
        .title {
            font-family: 'GeistMedium', sans-serif;
        }
        .title, .text {
            padding: 12px 24px;
            position: relative;
            z-index: 10;
        }
        .text {
            font-family: 'NexaBook', sans-serif;
            font-size: clamp(16px, calc(24 * (100vw / 1920)), 24px);
        }
        &:before {
            content: '';
            position: absolute;
            bottom: -10px;
            left: -15px;
            width: clamp(50px, calc(275 * (100vw / 1920)), 275px);
            height: clamp(50px, calc(275 * (100vw / 1920)), 275px);
            background: linear-gradient(180deg, #00bbff 0%, #0051ff 100%);
            box-shadow: 0 0 167px -15px #00508e;
            border-radius: 50%;
            z-index: -1;
        }
    }

    .contact-to-us {
        cursor: pointer;
        font-size: clamp(16px, calc(48 * (100vw / 1920)), 48px);
        display: flex;
        gap: 28px;
        align-items: center;
        position: relative;
        z-index: 100000000;

        span {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: #00bbff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    /*.cont-telegram_url {*/
    /*    position: relative;*/
    /*    animation: spin 20s linear infinite;*/
    /*    transform-origin: 50% 50%;*/
    /*}*/
    /*.cont-telegram_img {*/
    /*    width: 103px;*/
    /*    height: auto;*/
    /*}*/
    .link-telegram {
        position: relative;
        z-index: 10;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    
    .cont-telegram_url{
      --size: 103px;
      --blur: 10px;
      --glass: rgba(255,255,255,0.03);
      --stroke: rgba(255,255,255,0.16);
    
      position: relative;
      display: inline-grid;
      place-items: center;
    
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      overflow: hidden;
    }
    
    .cont-telegram_url::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
    
      background:
        radial-gradient(
          circle at 30% 25%,
          rgba(255,255,255,0.18),
          rgba(255,255,255,0.05) 45%,
          rgba(255,255,255,0.03) 70%,
          rgba(255,255,255,0.02)
        ),
        var(--glass);
    
      backdrop-filter: blur(var(--blur)) saturate(140%);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    
      border: 1px solid var(--stroke);
      box-shadow:
        0 14px 35px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.25);
    
      z-index: 0;
    }
    
    .cont-telegram_url::after{
      content: "";
      position: absolute;
      width: 85%;
      height: 55%;
      left: -10%;
      top: -12%;
      border-radius: 999px;
      transform: rotate(-20deg);
    
      background: linear-gradient(
        180deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.06),
        rgba(255,255,255,0)
      );
    
      opacity: 0.7;
      pointer-events: none;
      z-index: 1;
    }
    
    .cont-telegram_img{
      width: var(--size);
      height: var(--size);
      display: block;
      position: relative;
      z-index: 2;
    
      animation: spin 20s linear infinite;
      transform-origin: 50% 50%;
    }
    
    .cont-telegram_url:hover::before{
      backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(155%);
      -webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(155%);
      border-color: rgba(255,255,255,0.20);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

section.section-1, section.section-2 {
    padding-top: clamp(15px, calc(15px + (80 * 100vw / 1920)), 80px);
    padding-bottom: clamp(15px, calc(15px + (80 * 100vw / 1920)), 80px);

    .wrap {
        padding-left: clamp(15px, calc(15px + (54 * 100vw / 1920)), 54px);
        padding-right: clamp(15px, calc(15px + (54 * 100vw / 1920)), 54px);
        font-family: 'Nexa', sans-serif;
    }
    .title {
        font-size: clamp(16px, calc(96 * (100vw / 1920)), 96px);
        text-transform: uppercase;
        font-weight: 800;
        font-family: 'GeistBlack', sans-serif;
        line-height: 100%;

        span {
            color: #00bbff;
        }
    }
}
section.section-1 {
    position: relative;
    overflow: hidden;

    &:after {
        content: '';
        position: absolute;
        top: 90%;
        left: 30%;
        width: 90%;
        padding-top: 90%;
        transform: translateY(-110%);
        background: linear-gradient(180deg, #00bbff 0%, #0051ff 100%);
        border-radius: 50%;
        box-shadow: 0 0 167px -15px #00508e;
        display: block;
        z-index: -1;
    }

    .title1 {
        font-weight: 900;
        font-family: 'NexaBold', sans-serif;
        text-transform: uppercase;
        font-size: clamp(16px, calc(40 * (100vw / 1920)), 40px);
        padding-bottom: clamp(15px, calc(15px + (108 * 100vw / 1920)), 108px);

        span {
            color: #00bbff;
        }
    }
    .description {
        font-family: Nexa, sans-serif;
        font-size: clamp(15px, calc(24 * (100vw / 1920)), 24px);
        padding-bottom: clamp(15px, calc(15px + (58 * 100vw / 1920)), 58px);
        text-transform: uppercase;
    }
    .more {
        font-family: Nexa, sans-serif;
        font-size: clamp(14px, calc(24 * (100vw / 1920)), 24px);
        color: #fff;
        text-decoration: none;
        border: 5px solid #00bbff;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: clamp(15px, calc(15px + (45 * 100vw / 1920)), 45px);
        padding-right: clamp(15px, calc(15px + (45 * 100vw / 1920)), 45px);
        display: block;
        border-radius: 50px;
    }

    img {
        width: 150%;
        transform: translateX(25%);
    }
}
section.section-2 {
    .description {
        padding-top: clamp(15px, calc(15px + (150 * 100vw / 1920)), 150px);
        padding-bottom: clamp(15px, calc(15px + (58 * 100vw / 1920)), 58px);
        font-size: clamp(15px, calc(32 * (100vw / 1920)), 32px);
        font-weight: 400;
        text-align: right;
    }

    .telegram-list-contact {
        display: flex;
        gap: 9px;

        li {
            flex: 0 1 20%
        }
        li a {
            position: relative;
            color: #000;
            width: 100%;
            height: 100%;
            display: block;
        }
        li a .name-wrap {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            width: 100%;
            justify-content: center;
        }
        li a span.name {
            padding-top: 16px;
            display: flex;
            flex-direction: column;

            b {
                color: #fff;
                font-size: clamp(15px, calc(28 * (100vw / 1920)), 28px);
                font-weight: 700;
                text-align: center;
            }
            i {
                color: #00bbff;
                font-size: clamp(15px, calc(28 * (100vw / 1920)), 28px);
                font-weight: 700;
                text-align: right;
                font-style: normal;
            }
        }
        li a img {
            width: 100%;
            height: auto;
            display: block;
        }
        li .tap-to-contact {
            position: absolute;
            left: 0;
            bottom: 0;
        }

    }
}
footer {
    .logo {
        max-width: 243px;
        width: 100%;
    }
    .middle-block {
        padding-top: clamp(15px, calc(15px + (68 * 100vw / 1920)), 68px);
    }
    nav {
        font-family: 'Nexa', sans-serif;
        font-weight: 400;
        font-size: clamp(16px, calc(40 * (100vw / 1920)), 40px);
        position: relative;

        li {
            color: #fff;
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid #373737;
            cursor: pointer;
            position: relative;
        }

    }
    .title {
        font-size: clamp(16px, calc(82 * (100vw / 1920)), 82px);
        text-transform: uppercase;
        font-weight: 600;
    }

    .copyright {
        text-align: center;
        font-size: clamp(16px, calc(24 * (100vw / 1920)), 24px);
        padding-top: clamp(15px, calc(15px + (190 * 100vw / 1920)), 190px);
        font-family: 'GeistVariableVF', sans-serif;
        font-weight: 100;
    }
}

body {
    .tap-to-home, .tap-to-contact {
        font-size: 15px;
        border-radius: 33px;
    }
    .tap-to-contact {
        padding: 10px 17px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 9px;
        background: #00bbff;
        text-decoration: none;

        &:hover {
            color: #fff;
        }

        img {
            max-width: 46px;
        }
        span {
            word-break: normal;
        }
    }
    .tap-to-home {
        color: #000;
        text-transform: uppercase;
        background: none;
        border: 1px solid #000;
        width: 100%;
        max-width: 175px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    .custom-btn-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .modal-contact.active {
        display: flex;
    }

    .modal-contact {
        position: fixed;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, .48);
        display: none;
        justify-content: center;
        align-items: center;

        .modal-wrap {
            background: #fff;
            width: 100%;
            max-width: 770px;
            padding: 91px  32px 79px;
            position: relative;
            border-radius: 16px;
            box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.08);
            margin: 0 15px;
        }
        .btn-wrap {
            position: absolute;
            top:10px;
            right: 10px
        }
        .img-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 21px;

            img {
                width: 106px;
                height: 106px;
                border-radius: 50%;
                overflow: hidden;
            }
        }
        .name-wrap {
            font-size: 24px;
            text-align: center;
            color: #000;
            font-weight: 600;
        }
        .position-wrap {
            font-size: 24px;
            text-align: center;
            color: #00bbff;
            font-weight: 600;
            margin-bottom: 28px;
        }
        .active-wrap {
            display: flex;
            justify-content: center;
            gap: 50px
        }
    }
}
.mob-ver {
    display: none !important;
}
.desktop-ver {
    display: block;
}

@media (max-width: 1400px) {
    section.section-2 .telegram-list-contact {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        li {
            flex-basis: 30%;
        }
    }
}
@media (max-width: 1000px) {
    section.section-2 .telegram-list-contact {
        li {
            flex-basis: 45%;
        }
    }
    section.section-1 {
        .box-top {
            padding-bottom: 100px;
        }
    }
}
@media (max-width: 992px) {
    section.section-1 {
        .desktop-ver {
            display: none !important;
        }

        .title1.mob-ver {
            margin-right: -27px;
        }
        .mob-ver {
            display: block !important;
        }
    }
}

@media (max-width: 700px) {
    header {
        padding-top: 70px;

        .welcome-text  {
            display: none;
        }
        .middle-block {
            &:after {
                padding-top: 60%;
                width: 60%;
            }
            .text-1 {
                font-size: 22px;
                text-align: center;
                line-height: 120%;
            }
            .text-2 span {
                font-size: 40px !important;
                text-align: center !important;
                line-height: 100% !important;
            }
            .text-2 span:first-child {
                font-weight: 600;
            }
            .text-2 span:last-child {
                font-weight: 300;
            }
        }
        .contact-to-us {
            font-size: 32px;
            margin-top: 50px;
            padding-left: 20px;

            &:before {
                content: '';
                position: absolute;
                top: -20px;
                left: 0;
                width: 100px;
                height: 100px;
                background: linear-gradient(180deg, #00bbff 0%, #0051ff 100%);
                box-shadow: 0 0 167px -15px #00508e;
                border-radius: 50%;
                z-index: -1;
            }

            span {
                background: none;

                svg path {
                    fill: #00bbff;
                }
            }
        }
        .bottom-block {
            .cont-telegram_url {
                position: absolute;
                right: 0;
                top:-70px;
                z-index: 1000000;
            }
            .cont-telegram_img {
                width: 100px;
                height: auto;
            }
        }
    }
    section.section-1 {
        .title1 {
            font-size: 24px;
        }
        .more {
            border-width: 2px;
        }
        &:after {
            top: 84%;
        }
    }
    section.section-2 .telegram-list-contact {
        li {
            flex-basis: 100%;
        }
    }
}
@media (max-width: 600px) {
    section.section-1 {
        &:after {
            top: 82%;
        }
    }
}
@media (max-width: 550px) {
    section.section-1 {
        &:after {
            top: 79%;
        }
    }
    header {
        .middle-block {
            &:after {
                padding-top: 80%;
                width: 80%;
            }
        }
    }
}
@media (max-width: 450px) {

    section.section-1 {
        &:after {
            top: 74%;
        }
    }
    header {
        .middle-block {
            &:after {
                padding-top: 100%;
                width: 100%;
            }
        }
    }
}

@media (max-width: 400px) {
    .parallax-big {
        &:before {
            bottom: -18%;
            right: -66%;
        }
    }
    .parallax-small {
        &:before {
            top: -10%;
            left: -28%;
        }
    }
    .counter {
        font-size: 48px;
    }

    .container-fluid {
        padding-left: 19px;
        padding-right: 19px;
    }
    section.section-1, section.section-2 {
        .wrap {
            padding: 0;
        }
    }
    section.section-1 {
        &:after {
            top: 64%;
            left: 34%;
            width: 90%;
        }
        .box-top {
            order: 1;
            padding-top: 20px;
        }
        .box-bottom {
            order: 0;
        }
        .item-1 {
            padding-bottom: 140px;
        }
        .title {
            font-size: 24px;
        }
        .more {
            border-width: 2px;
        }
    }

    section.section-2 {
        .title {
            text-align: right;
            font-size: 23px;
        }
        .description {
            font-size: 15px;
        }
        .telegram-list-contact {
            b, i {
                font-size: 28px !important;
                line-height: 130%;
            }
        }
    }

    footer, header {
        nav ul {
            display: flex;
            flex-direction: column;
            align-items: end;
        }
        nav li {
            margin-bottom: 8px;
            padding-bottom: 3px;
            font-size: 12px;
        }
    }
    footer {
        nav li {
            text-align: right;
        }
        .middle-block {
            padding-top: 10px;
        }
        .soc img {
            width: 16px;
            height: auto;
        }
        .title {
            font-size: 23px;
        }
        .copyright {
            font-size: 13px;
        }
    }
}



@media (min-width: 992px) {
    header, footer {
        padding: clamp(15px, calc(15px + (68 * 100vw / 1920)), 68px);
    }
    header, section.section-1, section.section-2 {
        height: 100vh;
    }
    header {
        nav {
            :after {
                content: '';
                position: absolute;
                top: 40px;
                left: 0;
                height: 1px;
                width: 100%;
                background: #373737;
            }
        }

        .middle-block {
            padding: 0;

            &:after {
                padding-top: 0;
                width: clamp(50px, calc(500 * (100vw / 1920)), 550px);
                height: clamp(50px, calc(500 * (100vw / 1920)), 500px);
            }
        }
        .bottom-block {
            margin-top: -150px;
        }

        .welcome-text {
            font-size: clamp(16px, calc(32 * (100vw / 1920)), 32px);
            padding-top: 12px;

            &:after {
                border-radius: 35px;
                z-index: 1;
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: linear-gradient(120deg, rgba(30, 30, 33, 1) 0%, rgba(30, 30, 33, 0) 100%);
                -webkit-backdrop-filter: blur(5px);
                backdrop-filter: blur(5px);
            }
        }
    }

    section.section-1 {
        &:after {
            top: 50%;
            left: 50%;
            padding-top: 0;
            transform: translate(-50%, -50%);
            width: clamp(50px, calc(690 * (100vw / 1920)), 690px);
            height: clamp(50px, calc(690 * (100vw / 1920)), 690px);
        }
        img {
            width: 100%;
            transform: translateX(0);
        }
    }
}