@font-face {
    font-family: 'Orbitron-Regular';
    src: local('Orbitron-Regular'), url('fonts/Orbitron-Regular.ttf') format('truetype');
}









/* Для Chrome, Edge и Safari */
::-webkit-scrollbar {
    width: 12px;
    background-color: #1a1a1a; /* Фон трека */
}

/* «Ползунок» со стильными диагональными полосками */
::-webkit-scrollbar-thumb {
    border-radius: 20px;
    border: 2px solid #1a1a1a; /* Тем самым создаём «отступ» вокруг полосок */
    background: repeating-linear-gradient( 45deg, /* угол наклона полосок */
    #f5f5f5 0, /* белый старт */
    #f5f5f5 5px, #333333 5px, #333333 10px );
    /* Можно добавить hover-эффект или box-shadow:
       box-shadow: 0 0 5px rgba(255,255,255,0.3) inset; 
       при желании */
}

    /* При наведении (hover) на сам ползунок, можно сделать чуть светлее */
    ::-webkit-scrollbar-thumb:hover {
        background: repeating-linear-gradient( 45deg, #fff 0, #fff 5px, #444 5px, #444 10px );
    }

/* Firefox (и некоторые другие) */
* {
    scrollbar-width: thin; /* Тонкий ползунок */
    scrollbar-color: #333333 #1a1a1a; /* thumb=#333333, track=#1a1a1a */
}

/* Для IE10+ (старые браузеры) -ms-overflow-style */
body {
    -ms-overflow-style: scrollbar;
    width: 100vw; /* Если нужно именно так */
    cursor: none;
    overflow-x:hidden;
}





html {
    scroll-behavior: smooth;
}




.community-block-lw-mob {
    /* Изначально скрыто */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* Можно настроить время/функцию анимации */
}

    /* Когда нужно показать */
    .community-block-lw-mob.show {
        opacity: 1;
        transform: translateY(0);
    }















/* 3) «Виртуальный» курсор — белый круг */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    pointer-events: none; /* чтобы не мешал кликам */
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* Заливка — полупрозрачная, 
         чтобы часть фона просвечивалась,
         + mix-blend-mode даёт эффект осветления.
      */
    background: rgba(255, 255, 255, 0.4);
    mix-blend-mode: screen;
    /* Дополнительная «аура» (подсветка) вокруг круга */
    box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.35);
    transition: transform 0.1s ease-out;
}

    /* Дополнительно: 
       при клике можем чуть увеличить (или уменьшить) круг,
       чтобы дать фидбэк, если нужно
    */
    .custom-cursor.click {
        transform: translate(-50%, -50%) scale(1.3);
    }



















* {
    user-select: none; /* ������ �� ��������� ������ � ��������� */
    -webkit-user-select: none; /* ��� ��������� �� ������ WebKit (��������, Safari) */
    -moz-user-select: none; /* ��� Firefox */
    -ms-user-select: none; /* ��� Internet Explorer/Edge */
}


body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /*overflow-y: auto;*/ /* Включаем свободный вертикальный скроллинг */
    /*overflow-x: hidden;*/
    -webkit-overflow-scrolling: touch; /* Поддержка плавного скроллинга на iOS */
    touch-action: manipulation;
}


body {
    /*overflow-x: hidden;*/ /* Принудительно отключает горизонтальный скроллинг */

    font-family: 'Orbitron-Regular', sans-serif;
    background-color: black;
    color: white;
    line-height: normal;
}

.container {
    max-width: 100vw; /* Предотвращает выход элементов за пределы экрана */
    /*overflow-x: hidden;*/
}


.no-context {
    pointer-events: none; /* Отключаем любые события на элементе */
}


button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    button:focus,
    button:active {
        outline: none;
        box-shadow: none;
        background-color: transparent;
        -webkit-tap-highlight-color: transparent;
    }




















/* =============================
   1) Стили прелоадера и сетки
   ============================= */

/* Родительский прелоадер — фиксирован поверх всего */
.preloader {
    position: fixed;
    inset: 0; /* top:0; left:0; right:0; bottom:0 */
   
    z-index: 9999; /* самый верхний слой */
}
.piece {
    position: absolute;
    width: 60px; /* ������ ������� */
    height: 60px;
    background-color: black;
    /* ������� ������� ������������ */
    transition: opacity 0.3s ease;
    /* ���������� ��������� ����� (�����������) */
    opacity: 0;
}







.grid-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    width: 100%;
    height: 100%;
    /* Изначально — серый */
    
    /* Плавный переход цвета в #000 за 2 секунды */
    transition: background-color 2s ease;
    /* Если хотим ещё плавно менять прозрачность самой сетки:
         transition: opacity 2s ease, background-color 2s ease; 
         opacity: 1;
      */
}

/* 4) Каждая «ячейка» */
.grid-cell {
    background: #000; /* чёрные ячейки */
    opacity: 1; /* изначально полностью видимы */
    transition: opacity 0.6s ease; /* плавное исчезновение (можно 0.3s, 1s и т.д.) */

    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
   
    
}


.grid-container {
    background-color: #151515;
    opacity: 1;
    transition: opacity 1s ease;
}

.grid-cell {
    opacity: 1;
    transition: opacity 0.6s ease;
}



/* 3. «Диагональное мерцание»:
      background-position смещается с top-left к bottom-right */
/*@keyframes diagonalShimmer {
    0% {
        background-position: top left;
    }

    100% {
        background-position: bottom right;
    }
}
*/











/* =============================
   2) Основной контент
   ============================= */
#main-content {
    position: relative;
    z-index: 1; /* «ниже» 9999, то есть под прелоадером */
    /* добавьте нужные отступы, фон и т.д. */
}




.welcome-logo-block {
    /* Ваши ширина/высота/фон */
    width: 71.666vw;
    height: 17.097vh;
    background: url('IMG/welcome-logo-block.svg') center/contain no-repeat;
    z-index: 10;
}


#welcome-logo-block {
    /* Исходное состояние */
    opacity: 0; /* изначально скрыт */
    transform: scale(0.5); /* уменьшен в 2 раза */
    transform-origin: center;
    /* Раздельные transition: 
       1) opacity: 2s без задержки 
          (сразу начинается переход от 0 к 1)
       2) transform: 2s с задержкой 2s 
          (анимация масштаба начнётся только через 2с)
    */
    transition: opacity 0.8s ease 0s, /* сразу растёт opacity → 1 */
    transform 0.8s ease 2s; /* через 2с начинается рост scale(0.5 → 1) */
}

    /* При добавлении класса .visible задаём конечные значения: 
   opacity: 1 и transform: scale(1). 
   Но transform начнёт анимироваться с задержкой (после 2с). */
    #welcome-logo-block.visible {
        opacity: 1;
        transform: scale(1);
    }


/* 
   1) Исходное состояние (видим):
      clip-path полностью раскрыт: inset(0 0 0 0)
      + плавный transition
*/
#welcome-logo-block-lw {
    max-height: 8.503vh;
    position: absolute;
    width: 35.885vw;
    height: 8.503vh;
    margin-top: 15vh;
    background: url('IMG/welcome-logo-block-lw.svg') center/contain no-repeat;
    /* Переход clip-path за 0.4s */

    z-index: 4;
    transition: max-height 0.5s ease;
}



    /*
   2) Класс, который «убирает» блок:
      clip-path: inset(100% 0 0 0);
      означает, что обрезка идёт сверху на 100%.
      Можно менять логику (снизу, слева, polygon и т. д.)
*/
    #welcome-logo-block-lw.clip-hide {
        max-height: 0;
    
    }



















.welcome-logo-block-shadow-lw,
.welcome-logo-block-shadow-up {
    width: 71.666vw;
    height: 17.407vh;
    background: url('IMG/welcome-logo-block-shadow.svg') center/contain no-repeat;
    position: absolute;
    z-index: 9;
    transform: scale(0.5);
    opacity: 0;
}

.welcome-logo-block-shadow-lw {
    margin-top: -17.9vh;
}

.welcome-logo-block-shadow-up {
    margin-top: 18vh;
}




/* Ключевые кадры хаотичного моргания и увеличения */
@keyframes flickerToVisible {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    /*15% {
        opacity: 1;*/ /* вспышка */
    /*}

    25% {
        opacity: 0.3;*/ /* приглушение */
    /*}

    35% {
        opacity: 1;*/ /* снова вспышка */
    /*}

    50% {
        opacity: 0.2;*/ /* почти гаснет */
    /*transform: scale(0.7);*/ /* можно чуть "подпрыгнуть" */
    /*}

    65% {
        opacity: 1;
        transform: scale(0.9);
    }

    80% {
        opacity: 0.5;
    }*/

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Класс, запускающий анимацию */
.flicker-in-animation {
    animation: flickerToVisible 0.8s ease forwards;
}








/**/
/**/

























.welcome-page-sec {
   /* background-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>\
      <line x1='0' y1='100' x2='90' y2='100' stroke='rgba(255,255,255,0.2)' stroke-width='1'/>\
      <line x1='110' y1='100' x2='200' y2='100' stroke='rgba(255,255,255,0.2)' stroke-width='1'/>\
      <line x1='100' y1='0' x2='100' y2='90' stroke='rgba(255,255,255,0.2)' stroke-width='1'/>\
      <line x1='100' y1='110' x2='100' y2='200' stroke='rgba(255,255,255,0.2)' stroke-width='1'/>\
      <line x1='95' y1='100' x2='105' y2='100' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round'/>\
      <line x1='100' y1='95' x2='100' y2='105' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round'/>\
    </svg>");
    background-repeat: repeat;*/

}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Запуск анимации на элементе */
.fade-in-animation {
    animation: fadeIn 1s ease-out forwards;
}


















/* Родительский контейнер, объединяющий обе секции */
.sections-container {
    position: relative;
    /* Можно задать min-height, если известно, 
         что обе секции суммарно займут много места */
    min-height: 200vh;
}



.welcome-NET {
    position: absolute;
    width: 100vw;
    height: 200vh;
    background-image: url('IMG/net-gread.svg');
    background-size: 10vw 10vw;
    background-repeat: repeat;
    opacity: 0;
    z-index: 2;
   /* background-position: left 8vw;*/
}











.my-block {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Тут любые нужные размеры/стили */
    width: 3vw;
    height: 3vw;
    background-color:red
}




.psevdoblock {
    position: absolute;
    top: 10.5vw;
    width: 79.1vw;
    height: 29.1vw;
    
    background-color: black;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Для Safari */

    border-radius: 8px;
    z-index: 3;
    overflow: hidden;

    /* === Центрирование содержимого === */
    display: flex;
    justify-content: center; /* по горизонтали */
    align-items: center;     /* по вертикали */
}

    .psevdoblock::before {
        content: "";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        pointer-events: none;
        /* Наследуем скругление, чтобы градиент совпадал с формой блока */
        border-radius: inherit;
        /* Радиальный градиент:
     - в центре полностью прозрачно (0%)
     - у краёв лёгкое затенение (0.4) */
        background: radial-gradient( circle at center, rgba(0,0,0,0) 60%, /* 60% - абсолютно прозрачно */
        rgba(0,0,0,0.4) 100% /* у краёв уже 40% чёрного */
        );
    }
















.logo-appear .welcome-logo-block-lw {
    animation: gradientReveal 1.5s forwards ease-in-out;
}

@keyframes gradientReveal {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}

/* B) Исчезновение .welcome-logo-block-lw слева-направо (clip-path) */
.lw-fade {
    animation: fadeLeftRight 1s forwards ease;
}

@keyframes fadeLeftRight {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }

    100% {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

/* C) Увеличение .welcome-logo-block с 0.5 до 1.0 */
.logo-scale {
    animation: scaleUp 0.7s forwards ease;
}

@keyframes scaleUp {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1.0);
    }
}

















/**/
        /*0000000000*/
/**/






section {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Минимальная высота секции 100% от высоты экрана */
    width:100vw;
   
   
}
















/* ========== start-block-litle1 (вылетает сверху) ========== */
.start-block-litle1 {
    position: absolute;
    width: 2.708vw;
    height: 1.882vw;
    margin-left: 87.064vw;
    margin-top: calc(-100vh + 60.2vw);
    background-image: url('IMG/start-block-litle1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Изначально находится выше своего места */
    transform: translateY(-2vw);
    opacity: 0;
    /* 
       Длительность 0.3s,
       задержка 0.9s (т.е. ровно после окончания анимации у start-block1).
    */
    transition: transform 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}

.start-page-sec.active .start-block-litle1 {
    transform: translateY(0);
    opacity: 1;
}

/* ========== start-block-litle2 (вылетает снизу) ========== */
.start-block-litle2 {
    position: absolute;
    width: 4.739vw;
    height: 2.135vw;
    margin-left: 10.264vw;
    margin-top: calc(-100vh + 77.7vw);
    background-image: url('IMG/start-block-litle2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Изначально ниже своего места */
    transform: translateY(2vw);
    opacity: 0;
    /* Та же логика: 0.3s анимации, 0.9s задержки */
    transition: transform 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}

.start-page-sec.active .start-block-litle2 {
    transform: translateY(0);
    opacity: 1;
}

/* ========== start-block-litle3 (вылетает снизу) ========== */
.start-block-litle3 {
    position: absolute;
    width: 2.762vw;
    height: 1.822vw;
    margin-left: 87.064vw;
    margin-top: calc(-100vh + 88vw);
    background-image: url('IMG/start-block-litle3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(2vw);
    opacity: 0;
    /* Та же задержка, чтобы стартовал одновременно с litle2 */
    transition: transform 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}

.start-page-sec.active .start-block-litle3 {
    transform: translateY(0);
    opacity: 1;
}









/* === litle4 (вылетает сверху после litle3) === */
.start-block-litle4 {
    position: absolute;
    width: 1.614vw;
    height: 1.666vw;
    margin-left: 88.164vw;
    margin-top: calc(-100vh + 80.1vw);
    background-image: url('IMG/start-block-litle5.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Изначально выше своего места */
    transform: translateY(-2vw);
    opacity: 0;
    /* Запуск в 1.2s, сама анимация 0.3s */
    transition: transform 0.3s ease 1.2s, opacity 0.3s ease 1.2s;
}

.start-page-sec.active .start-block-litle4 {
    transform: translateY(0);
    opacity: 1;
}

/* === litle5 (вылетает снизу после litle3) === */
.start-block-litle5 {
    position: absolute;
    width: 1.614vw;
    height: 1.666vw;
    margin-left: 88.164vw;
    margin-top: calc(-100vh + 68.2vw);
    background-image: url('IMG/start-block-litle4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Изначально ниже своего места */
    transform: translateY(2vw);
    opacity: 0;
    /* Запуск в 1.2s, сама анимация 0.3s */
    transition: transform 0.3s ease 1.2s, opacity 0.3s ease 1.2s;
}

.start-page-sec.active .start-block-litle5 {
    transform: translateY(0);
    opacity: 1;
}









.start-page-sec {
    position: relative;
    display: block;
    z-index: 3;
}




/* ========== Сами большие блоки start-block1..3 ========== */
.start-block1, .start-block2, .start-block3 {
    position: absolute;
    font-size: 7.812vw;
    font-weight: 900;
    transition: transform 0.9s ease; /* Их анимация длится 0.9с */
    white-space: nowrap;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.start-block1 {
    margin-top: calc(-100vh + 61.6vw);
    margin-left: 9.87vw;
    transform: translate(-150%, 0);
    background-image: url('IMG/start-block1.png');
    width: 46.875vw;
    height: 6.51vw;
}

.start-block2 {
    margin-top: calc(-100vh + 71.6vw);
    margin-left: 54.5vw;
    transform: translate(150%, 0);
    background-image: url('IMG/start-block2.png');
    width: 35.625vw;
    height: 6.51vw;
}

.start-block3 {
    margin-top: calc(-100vh + 81.6vw);
    margin-left: 10.3vw;
    transform: translate(-150%, 0);
    background-image: url('IMG/start-block3.png');
    width: 60.833vw;
    height: 6.51vw;
}

/* Когда секция получает класс .active, большие блоки уезжают на место */
.start-page-sec.active .start-block1 {
    transform: translate(0, 0);
}

.start-page-sec.active .start-block2 {
    transform: translate(0, 0);
}

.start-page-sec.active .start-block3 {
    transform: translate(0, 0);
}







/* ==== Общие стили (как были) ==== */
.projects-page-sec {
    display: block;
    position: relative;
    min-height: 100vh; /* можно изменить под нужды */
}

.projects-zag-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* примерная ширина, меняйте под себя */
    min-height:10vh;
    margin: 0 auto;
    /* немножко отступов сверху/снизу */
    padding: 4vh 2vw;
    overflow: hidden; /* чтобы .overlay не вылезала наружу */
}








/* Сам заголовок */
.projects-zag {
    font-size: 4.5vw;
    font-family: 'Orbitron-Regular', Courier, monospace;
    white-space: pre;
    text-align: center;
    /* Раньше было opacity: 0; — теперь не нужно */
    /* transition: opacity 0.3s; — тоже не нужно */
    position: relative; /* для порядка */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* чтобы текст был выше фона, но ниже .overlay */
}

/* --- Стили для анимации скремблирования по буквам --- */
.scr-letter {
    display: inline-block;
    visibility: hidden; /* сначала невидимая буква */
    white-space: pre; /* чтобы пробелы корректно отображались */
}





.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    /* 
       Градиент с явной «линией»:
         - до 30%: полностью прозрачный 
         - на 31%: резкий скачок к чёрному
         - 100%: чёрный
     */
    background: linear-gradient( to bottom right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 31%, rgba(0, 0, 0, 1) 100% );
    /* Увеличенный размер, чтобы диагональ смещалась плавно */
    background-size: 300% 300%;
    /* Начальное положение: оверлей «закрывает» */
    background-position: 100% 100%;
    /* Замедленный переход (6s) */
    transition: background-position 6s ease;
}

    .overlay.reveal {
        /* При добавлении класса — градиент «уезжает» вверх/влево */
        background-position: 0% 0%;
    }
































.cross-box-left {
    position: absolute;
    width: 31.25vw;
    height: 55.555vh;
    margin-left: 0.364vw;
    margin-top: 6.018vh;
    background-image: url('IMG/cross-box-left.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Ниже креста */
    z-index: 1;
    /* Изначально скрыта */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Сам крест (svg), выше */
.cross-box-crest {
    z-index: 10;
}










.projects-lw {
    margin: 0 auto;
    margin-left: 1.927vw;
    display: flex;
    justify-content: center;
}

/* ======  Боковые блоки (с «крестами»)  ====== */
.cross-box {
    width: 31.979vw;
    height: 73.685vh;
    position: relative;
    background-color: transparent;
    transition: background-color 0.5s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
    /* SVG на весь блок */
    .cross-box svg {
        width: 100%;
        height: 100%;
        display: block;
    }
        /* Прямоугольник-рамка */
        .cross-box svg rect {
            fill: #000;
            stroke: #151515;
            stroke-width: 0.5px;
            transition: stroke 2s;
        }
        /* Линии креста */
        .cross-box svg line {
            stroke: #151515;
            stroke-width: 0.5px;
            stroke-dasharray: 400;
            stroke-dashoffset: 400;
            transition: stroke 2s, stroke-dashoffset 2s ease;
        }
    /* При наведении: рамка и линии светлеют, линии прорисовываются */
    .cross-box:hover svg rect,
    .cross-box:hover svg line {
        stroke: #aaa;
    }

    .cross-box:hover svg line {
        stroke-dashoffset: 0;
    }


    .cross-box svg rect {
        fill: #000;
        stroke: #151515;
        stroke-width: 0.5px;
        transition: fill 0.5s;
    }
    .cross-box:hover svg rect {
        fill: rgba(0,0,0,0);
    }
    .cross-box:hover {
        background-image: url('IMG/cross-box-left.png');
    }
.cross-box-right:hover {
    background-image: url('IMG/cross-box-right.png');
}














/* ======  Центральный блок (с SVG-рамкой и внутренним содержимым) ====== */
.center-box {
    width: 31.979vw;
    height: 73.685vh;
    position: relative; /* чтобы можно было позиционировать внутренние элементы */
    overflow: hidden; /* на случай, если что-то выходит за рамки */
}

    /* SVG-рамка на весь центральный блок */
    .center-box svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 2; /* рамка может быть «над» фоном, но под текстом, если надо */
        pointer-events: none;
        /* чтобы при наведении курсора на блок, hover срабатывал на .center-box, а не на отдельный svg */
    }
        /* Прямоугольник для рамки */
        .center-box svg rect {
            fill: #000; /* или fill="none" – если нужен прозрачный фон */
            stroke: #151515;
            stroke-width: 0.5px;
            transition: stroke 0.5s;
        }

/* Картинка (фон) внутри центра. 
       Позиционируем абсолютно, чтобы занять всю площадь блока. */
.center-box-lw {
    position: absolute;
    top: 0;
    left: 0;
    width: 26.666vw;
    height: 54.351vh;
    margin-left: 2.656vw;
    margin-top:10vh;
    background-image: url('IMG/center-box-img-lw.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Начальная яркость – 60% */
    filter: brightness(25%);
    transition: filter 0.5s ease;
    z-index: 2; /* ниже текста, но над фоном .center-box (fill) */
}




.center-box-lw-cen {
    background-image: url('IMG/center-box-lw-cen.png');
}





/* Текст (например, "Chill Guy TON") */
.center-box-up {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2vw;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 3; /* Чтобы текст был над картинкой и рамкой */
    text-align: center; /* Если нужно выравнивание текста по центру */
}


/* При наведении на центральный блок: 
       - Рамка (#151515 -> #aaa)
       - Картинка (brightness(100%))
       - Текст проявляется (opacity: 1) */
.center-box:hover svg rect {
    stroke: #aaa;
}

.center-box:hover .center-box-lw {
    filter: brightness(100%);
}

.center-box:hover .center-box-up {
    opacity: 1;
}






@media (max-width: 768px) {
    /* --- Боковые блоки (уже есть) --- */
    .cross-box {
        background-image: url('IMG/cross-box-left.png') !important;
    }

        .cross-box.cross-box-right {
            background-image: url('IMG/cross-box-right.png') !important;
        }

        .cross-box svg line {
            display: none;
        }

        .cross-box svg rect {
            stroke: #fff !important;
            fill: transparent !important;
        }

    .cross-box-left {
        opacity: 1 !important;
        display:none;
    }

    /* --- Центральный блок, всегда подсвеченный --- */
    /* 1) Яркость картинки - как при hover */
    .center-box-lw {
        filter: brightness(100%) !important;
    }
    /* 2) Текст - сделать видимым */
    .center-box-up {
        opacity: 1 !important;
    }
    /* 3) Рамку центрального svg также можно осветить, если нужно
          (например, сделать её белой) */
    .center-box svg rect {
        stroke: #fff !important; /* Белая рамка */
        fill: transparent !important;
    }

    /* Отключаем или минимизируем transition и hover-эффекты */
    .cross-box,
    .cross-box-left,
    .center-box,
    .center-box-lw,
    .center-box-up {
        transition: none !important;
    }
}









/*

.information-img {
    background-image: url('IMG/information-img.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 31.614vw;
    height: 41.203vh;
}

*/





.center-box-up2 {
    font-size: 1.041vw;
    color: #393939;
    width:20vw;
    margin-top:4.5vh;
}




.center-box-up23 {
   
    margin-top: 4.0vh;
}
/*
@media (max-width: 768px) {
}



@media (min-width: 768px) {
}


@media (min-width: 1000px) {
}



@media (min-width: 1920px) {
}*/
/*body {
    margin: 0;*/ /* Убираем отступы по умолчанию */
/*padding: 0;
    min-height: 700vh;*/ /* Устанавливаем минимальную высоту для body */
/*width: 100vw;*/ /* Ширина body = ширина экрана */
/*background-image: url('IMG/bdd.png');*/ /* Путь к вашему изображению */
/*background-size: cover;*/ /* Масштабируем изображение, чтобы покрыть весь фон */
/*background-repeat: no-repeat;*/ /* Убираем повторение изображения */
/*background-position: center top;*/ /* Располагаем изображение сверху и по центру */
/*}*/
.community-page-sec {
    display: block;
}

.community-page-sec {
    position: relative;
    width: 100vw;
    height: 120vh;
    display: block;
}
/*
.community-block-up {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100vw;
    height: 26.388vh;
    background-color: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s, background-color 0.5s;
}
*/







/*
          -- 2) ��������� �community-block-up� (������, ���� �����
                ������� ��� position:sticky � �.�.)
        */
.community-block-up {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100vw;
    height: 21.388vh;
    background-color: #151515;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s, background-color 0.5s;
}

/*
           -- 3) ��������� �������� ������ (.sliding-background)
        */
.sliding-background {
    /*
             ������ width/height ����� ����������,
             �� ������ ��� ��������� fallback (100vw, 8.481vh)
          */
    width: var(--marquee-width);
    height: var(--marquee-height);
    /* fallback */
    width: 100vw;
    height: 17.407vh;
    /*background-color: #111;*/
    overflow: hidden;
    position: relative;
}

    /*
           -- 4) ���� (���������) ����� � ������,
                 ����� ���� ���� �����������
        */
    .sliding-background::before,
    .sliding-background::after {
        position: absolute;
        top: 0;
        width: 10rem;
        height: 100%;
        content: "";
        z-index: 1;
    }

    .sliding-background::before {
        left: 0;
        /*background: linear-gradient(to right, #111 0%, transparent 100%);*/
    }

    .sliding-background::after {
        right: 0;
        /*background: linear-gradient(to left, #111 0%, transparent 100%);*/
    }

/*
           -- 5) ������ ������ �������� ������
                 ����� ����������� keyframes: scrolling
        */
.sliding-background-list {
    list-style: none;
    height: 100%;
    display: flex;
    /* �������� ������� �� var(--marquee-animation-duration) */
    animation: scrolling var(--marquee-animation-duration) linear infinite;
    margin: 0;
    padding: 0;
}

/* �������� �����, �������� �� -1 * (������ ������ ��������) * (���� ���������) */
@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
    }
}

/*
           -- 6) ������ ������� li (����� ����� ������
                 var(--marquee-element-width)
        */
.sliding-background-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* ����� �� �������� */
    width: var(--marquee-element-width);
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4);
    white-space: nowrap;
}

    /*
           -- 7) ���� � li ������ <img>,
                 �� �� ��� ������, ���� ����� ������� (������)
        */
    .sliding-background-list li img {
        width: 100%;
        border: 2px solid #eee;
    }

/*
           -- 8) ������: <i class="sliding-background-list-el"></i>
                 (��� ����� CSS), ������ <img>
        */
.sliding-background-list-el {
    background-image: url('IMG/community-block-up.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 17.407vh;
    width: 165.312vw;
    margin-right: 10vw;
}

























/*.sliding-background {
    background: url("IMG/community-block-up.svg") repeat-x center;
    background-size: contain;
    height: 17.407vh;
    width: 165.312vw;
    animation: slide 40s linear infinite;
}

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}
*/
.community-block-lw {
    position: sticky;
    top: 26.388vh;
    z-index: 8;
    width: 100vw;
    height: 0vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .community-block-lw transition: transform 0.5s;
    /*overflow-x: initial;*/
}

/* Исходные классы заголовка и текста */
.community-block-lw-zag {
    /*margin-left: 8.333vw;*/
    margin-left: 8.333vw;
    margin-top: 12.962vh;
    font-size: 4vw;
    transition: margin-left 0.5s ease, transform 0.5s ease;
}

.community-block-lw-text {
    position:absolute;
    margin-top: 90.796vh;
    /*margin-left: 45.885vw;*/
    margin-left: 45.885vw;
    font-size: 1.666vw;
    transition: margin-left 0.5s ease, transform 0.5s ease;
    width: 46.604vw;
    height: 47vh;
    
}

/* Классы для горизонтального движения */
.move-left {
    margin-left: 8.333vw;
}

.move-right {
    
    margin-left: 50.885vw;
}


































.roadmap-title {
    /*position: absolute;*/
    transition: opacity 0.5s ease;
    margin-left: -66.299vw;
    /*font-weight: 300;*/
    font-size: 3.333vw;
    color: #ccc; /* или #fff */
    margin-bottom:6vh
}

    .roadmap-title.fade-out {
        transition: opacity 0.5s;
        opacity: 0;
    }


/* --- Пример базовой стилизации таблицы, как у вас в коде --- */
.roadmap-table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.781vw;
    color: #ccc;
    
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    table-layout: fixed; /* фиксированный layout */
}

    .roadmap-table thead th {
        font-weight: 400;
        color: #999;
        border-bottom: 1px solid #333;
        padding: 8px;
    }

    .roadmap-table th {
        text-align: left;
    }

    .roadmap-table thead th:nth-child(1) {
        width: 15%;
    }

    .roadmap-table thead th:nth-child(2) {
        width: 35%;
    }

    .roadmap-table thead th:nth-child(3) {
        width: 20%;
    }

    .roadmap-table thead th:nth-child(4) {
        width: 30%;
    }

    .roadmap-table td, .roadmap-table th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* КЛЮЧЕВОЕ: запрещаем события на всю ячейку */
        pointer-events: none;
    }

    .roadmap-table td {
        padding: 8px;
        vertical-align: top;
        border-bottom: 1px solid #333;
    }

        .roadmap-table td[rowspan] {
            color: #fff;
        }

/* А вот на сам текст (обёрнутый в .scramble-text) —
       разрешаем pointer-events: auto; чтобы ловить hover именно на тексте */
.scramble-text {
    pointer-events: auto;
}








.psevdo {
    width: 100vw;
    height: 1.851vh;
}

.psevdo-sec{
    /*background-color:red;*/
    width:100vw;
    height:50vh;
}







































































         /* Верхний красный блок, просто для демонстрации */
         .ttk {
             width: 100vw;
             height: 100vh;
             background-color: red;
             display: flex;
             align-items: center;
             justify-content: center;
         }

section.footer-block {
    /* Снова пишем то, что нужно нам для футера: */
    display: flex;
    flex-direction: column;
    /* Главное — не выравнивать по центру, а дать возможность прижать к низу */
    justify-content: flex-start;
    align-items: normal; /* или stretch */
    min-height: 100vh; /* если нужно, иначе auto */
    width: 100%; /* или 100vw */
}


         /* Служебная тонкая полоса сверху футера */
         .footer-block-up {
             width: 100vw;
             height: 2vh;
             /*background: #111;*/ /* для наглядности */
         }



.footer-lw-wrapper {
    position: relative;
    height: 73.425vh; /* допустим, размер футера */
    overflow: hidden; /* чтобы скрывать то, что «вылезает» при transform */
    margin-top: auto; /* прижимает к низу, если вам это нужно */
}


.footer-block-lw {
    /*position: absolute;*/
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh; /* должно совпадать с .footer-lw-wrapper */
    transform: translateY(100%);
    transition: transform 0.6s ease;
    margin-top:auto;
}

/* Активное состояние */
.footer-block.active .footer-block-lw {
    transform: translateY(0);
}
/* ----------- Верхняя часть (сетка) ---------- */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 14.351vh);
    border-bottom: 1px solid #151515;
    position: relative;
}

    .footer-grid > div {
        border: 1px solid #151515;
    }

    /* Градиентная шторка сверху (пример) */
    .footer-grid::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 10vh;
        pointer-events: none;
        z-index: 999;
        background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%);
    }

/* ----------- Нижняя часть (3 колонки) ---------- */
.footer-content {
    display: flex;
    justify-content: space-between;
    /* Примерная высота, меняйте */
    height: 44.444vh;
}

/* Общие стили для колонок */
.footer-col {
    flex: 1;
    font-size: 1.822vw;
}

/* Колонка лого */
.footer-col-logo {
    width: 32vw;
    position: relative; /* для псевдоэлемента .::after */
    /* Убираем «translateX» и т.д., т.к. не нужна отдельная анимация. */
}

    .footer-col-logo::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 2px;
        background-color: #151515;
    }

/* Лого как фон */
.logo {
    width: 21.458vw; /* фиксируем ширину */
    height: 14.925vh;
    margin: 13.351vh auto 0 auto;
    /* верхний отступ 15.351vh, 
       по горизонтали auto (слева/справа), 
       это даст горизонтальное выравнивание по центру */
    background: url('IMG/logo-footer.png') center/contain no-repeat;
}
/* Левая / правая колонки */
.footer-col-left {
    margin-left: 9.79vw;
}

.footer-col-right {
    /* при желании margin-right */
}

/* Заголовок */
.footer-col-zag {
    font-size: 1.302vw;
    margin-top: 5.370vh;
    margin-bottom: 5.092vh;
    color: #494A4A;
}

/* Ссылки */
.footer-col ul {
    list-style: none;
}

    .footer-col ul li {
        margin-bottom: 2.870vh;
    }

        .footer-col ul li a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

            .footer-col ul li a:hover {
                color: #fff;
            }


















:root {
    /* Глобальные переменные (по умолчанию) */
    --marquee-width: 160vw;
    --marquee-height: 20vh;
    --marquee-elements-displayed: 10; /* по умолчанию 10 */
    --marquee-elements: 2;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 9s);
}

/* Переопределяем для конкретного блока */
.community-block-up {
    --marquee-elements-displayed: 2; /* здесь будет уже 2 */
}

        .marquee {
            width: var(--marquee-width);
            height: var(--marquee-height);
            /*background-color: #111;*/
            /*color: #eee;*/
            overflow: hidden;
            position: relative;
            width: 100vw;
            height: 29.481vh;
        }

            .marquee:before, .marquee:after {
                position: absolute;
                top: 0;
                width: 10rem;
                height: 100%;
                content: "";
                z-index: 1;
            }

            .marquee:before {
                left: 0;
                /*background: linear-gradient(to right, #111 0%, transparent 100%);*/
            }

            .marquee:after {
                right: 0;
                /*background: linear-gradient(to left, #111 0%, transparent 100%);*/
            }

        .marquee-content {
            list-style: none;
            height: 100%;
            display: flex;
            animation: scrolling var(--marquee-animation-duration) linear infinite;
        }
        /* .marquee-content:hover {
  animation-play-state: paused;
} */
        @keyframes scrolling {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
            }
        }

        .marquee-content li {
            display: flex;
            justify-content: center;
            align-items: center;
            /* text-align: center; */
            flex-shrink: 0;
            width: var(--marquee-element-width);
            max-height: 100%;
            font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
            white-space: nowrap;
        }

            .marquee-content li img {
                width: 100%;
                /* height: 100%; */
                border: 2px solid #eee;
            }


    





        .fa-github {
            background-image: url('IMG/fa-github.svg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 22.548vw;
            height: 6.481vh;
        }

        .fa-codepen {
            background-image: url('IMG/fa-codepen.svg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 10.417vw;
            height: 5.555vh;
        }

        .fa-free-code-camp {
            background-image: url('IMG/fa-free-code-camp.svg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 15.844vw;
            height: 6.481vh;
        }

        .fa-dev {
            background-image: url('IMG/fa-dev.svg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 15.346vw;
            height: 6.481vh;
        }

        .fa-react {
            background-image: url('IMG/fa-react.svg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 19.232vw;
            height: 6.481vh;
        }






.community-block-up {
    /* Скажем, вы хотите на этом блоке переопределить число элементов 
     и ширину бегущей строки: */
    --marquee-width: 275vw;
    --marquee-elements-displayed: 2;
    /* Теперь укажите локальное вычисление:
     Будет (100vw / 2) = 50vw */
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    /* Если нужно — переопределите и другие переменные, 
     например длительность анимации */
    /* --marquee-animation-duration: calc(var(--marquee-elements) * 4s); */
    margin-bottom:5vh;
}



section.community-page-sec {
    display: block;    /* убираем flex */
    min-height: 120vh; /* у вас же высота 300vh в коде */
    justify-content: initial;
    align-items: initial;
}





/*

@media (max-width: 12450px) {
    body{
        background-color:red;
    }
}
*/


#dynamic-box {
    display: none;
}



@media (max-width: 768px) {

    .psevdoblock{
        position:relative;
        top:0;
        width:45vw;
        height:22vh;
    }



    .welcome-logo-block {
        width: 43.333vw;
        height:19.531vh;
        background: url('IMG/welcome-logo-block-mob.svg') center/contain no-repeat;
    }



    .welcome-logo-block-lw,
    .welcome-logo-block-shadow-lw,
    .welcome-logo-block-shadow-up {
        display: none;
    }


    /*.projects-lw{
        display:none;
    }

    #dynamic-box{
        display:block;
        width:200px;
        height:200px;
        background-color:red;
    }*/




    /* Блок, который будет зафиксирован по центру и менять своё содержимое */
    /*#dynamic-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
        /* Подбирайте размеры под свой макет */
        /*width: 31.979vw;
        height: 67.685vh;*/
        /* Примерный фон и overflow */
        /*background: #ccc;
        overflow: hidden;
    }*/

        /* ==================== Стили для CenterBox, CrossBoxLeft и CrossBoxRight ==================== */
        /* Обратите внимание, что мы используем селекторы вида #dynamic-box .класс,
        чтобы стили применялись только к тому содержимому, которое подгружается внутрь #dynamic-box */

        /* ---------- Центральный блок (CenterBox) ---------- */
        /*#dynamic-box .center-box {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;*/ /* не даём внутренним элементам вылезать */
        /*}

            #dynamic-box .center-box svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                z-index: 2;
                pointer-events: none;*/ /* чтобы hover срабатывал на весь блок, а не на отдельный svg */
            /*}

                #dynamic-box .center-box svg rect {
                    fill: #000;
                    stroke: #151515;
                    stroke-width: 0.5px;
                    transition: stroke 0.5s;
                }*/

        /* Фоновая картинка внутри CenterBox */
        /*#dynamic-box .center-box-lw {
            position: absolute;
            top: 0;
            left: 0;
            width: 26.666vw;
            height: 54.351vh;
            margin-left: 2.656vw;
            margin-top: 10vh;
            background-image: url('IMG/center-box-img-lw.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(25%);*/ /* чуть «приглушаем» */
            /*transition: filter 0.5s ease;*/ /* плавный переход яркости */
            /*z-index: 2;
        }*/

        /* Текстовые блоки внутри CenterBox */
        /*#dynamic-box .center-box-up {
            position: absolute;
            top: 7%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 2vw;
            font-weight: bold;
            opacity: 0;*/ /* по умолчанию скрыты */
            /*transition: opacity 0.5s ease;
            z-index: 3;
            text-align: center;
        }*/
        /* Второй текст немного ниже */
        /*#dynamic-box .center-box-up2 {
            top: 15%;
            font-size: 1.5vw;
        }*/

        /* При наведении на CenterBox – рамка светлеет, фон становится ярче, текст появляется */
        /*#dynamic-box .center-box:hover svg rect {
            stroke: #aaa;
        }

        #dynamic-box .center-box:hover .center-box-lw {
            filter: brightness(100%);
        }

        #dynamic-box .center-box:hover .center-box-up {
            opacity: 1;
        }*/


        /* ---------- Общие стили для CrossBox (Left / Right) ---------- */
        /*#dynamic-box .cross-box {
            position: relative;
            background-color: transparent;
            transition: background-color 0.5s ease;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100%;
        }

            #dynamic-box .cross-box svg {
                width: 100%;
                height: 100%;
                display: block;
            }*/
                /* Прямоугольник обводки */
                /*#dynamic-box .cross-box svg rect {
                    fill: #000;
                    stroke: #151515;
                    stroke-width: 0.5px;
                    transition: stroke 2s;
                }*/
                /* Линии креста (анимация dashoffset) */
                /*#dynamic-box .cross-box svg line {
                    stroke: #151515;
                    stroke-width: 0.5px;
                    stroke-dasharray: 400;
                    stroke-dashoffset: 400;
                    transition: stroke 2s, stroke-dashoffset 2s ease;
                }*/
            /* При hover обводка светлеет и линии «прорисовываются» */
            /*#dynamic-box .cross-box:hover svg rect,
            #dynamic-box .cross-box:hover svg line {
                stroke: #aaa;
            }

            #dynamic-box .cross-box:hover svg line {
                stroke-dashoffset: 0;
            }

            #dynamic-box .cross-box:hover svg rect {
                fill: rgba(0,0,0,0);
            }*/

        /* Блок внутри CrossBoxLeft */
        /*#dynamic-box .cross-box-left {
            position: absolute;
            width: 31.25vw;
            height: 55.555vh;
            margin-left: 0.364vw;
            margin-top: 6.018vh;
            background-image: url('IMG/cross-box-left.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1;
            opacity: 0;*/ /* при желании изначально скрыта */
            /*transition: opacity 0.5s ease;
        }*/
        /* При наведении на CrossBoxLeft – можно подгружать картинку */
        /*#dynamic-box .cross-box:hover {
            background-image: url('IMG/cross-box-left.png');
        }*/

        /* Отдельные стили для CrossBoxRight (если нужны) */
        /*#dynamic-box .cross-box-right:hover {
            background-image: url('IMG/cross-box-right.png');
        }*/






    .community-block-up {
        height:19vh;
    }


       

}









.mob-ctc {
    display: none;
}




.community-block-lw-mob{
    display:none;
}

.move-right1 {
    margin-left: 73.885vw;
}


@media (max-width: 768px) {
    body{
        overflow-x:hidden;
    }


    .start-page-sec{
        overflow-x:hidden;
    }


    .custom-cursor {
        display: none;
    }

    .mob-ctc {
        display: flex;
    }


    .welcome-NET {
        background-size: 16.666vw 16.666vw;
        
    }


    .grid-cell{
        height:10vh;
        font-size:2vw;
    }




    .start-block1 {
        margin-top: calc(-100vh + 220.6vw);
        margin-left: 16.87vw;
    }

    .start-block2 {
        margin-top: calc(-100vh + 254.6vw);
        margin-left: 47.5vw;
    }

    .start-block3 {
        margin-top: calc(-100vh + 288.6vw);
        margin-left: 16.87vw;
    }






    .start-block-litle1 {
        width: 8.708vw;
        height: 5.882vw;
        margin-top: calc(-100vh + 210.2vw);
        margin-left: 74.064vw;
    }


    .start-block-litle2 {
        width: 14.739vw;
        height: 7.135vw;
        margin-top: calc(-100vh + 308.7vw);
        margin-left: 17.264vw;
    }


    .start-block-litle3 {
        width: 8.762vw;
        height: 7.822vw;
        margin-top: calc(-100vh + 276vw);
        margin-left: 73.064vw;
    }



    .start-block-litle4 {
        width: 2.614vw;
        height: 2.666vw;
        margin-top: calc(-100vh + 234.1vw);
        margin-left: 80.164vw;
    }




    .start-block-litle5 {
        width: 2.614vw;
        height: 2.666vw;
        margin-top: calc(-100vh + 280.0vw);
        margin-left: 17.164vw;
    }






















    .projects-page-sec{
        margin-bottom:10vh;
    }

    .projects-zag {
        font-size: 7.5vw;
        margin-top: 5vh;
    }







    .projects-lw{
        display:grid;
    }


    .cross-box svg {
        width: 80vw;
        height: 80vw;
        margin-left: 9.5vw;
    }


    .cross-box-right{
        display:none;
    }

    .cross-box {
        width: 97.979vw;
        height: 74vw;
        margin-bottom: 10vh;
        margin-top: 0vh;
    }

    .center-box {
        width: 80vw;
        height: 80vw;
        margin-left: 3.5vw;
        margin-top:5vh;
    }

    .center-box-lw {
        width: 73.666vw;
        height: 50vw;
    }

    .center-box-up{
        font-size:5vw;
        top:9%;
    }

    .center-box-up2 {
        font-size: 4.041vw;
        width:75vw;
    }














    .community-block-lw-zag{
        font-size:10vw;
    }


    .community-block-up {
        --marquee-width: 408vw;
    }




    .move-right {
        margin-left: 0;
    }
    .move-left{
        margin-left:0;
    }

    .community-block-lw-text {
        width: 73.604vw;
        font-size: 4.666vw;
        margin-top: 84.796vh;
        margin-left: 8.885vw;
    }


    .community-block-lw{
        display:none;
    }

    .community-block-lw-mob {
        display: block;
    }




    .community-block-lw-zag-mob1,
    .community-block-lw-zag-mob2,
    .community-block-lw-zag-mob3{
        font-size:10vw;
        margin-top:14vh;
        margin-bottom:9.375vh;
        display:flex;
        justify-content:center;
    }



    .community-block-lw-twxt-mob1,
    .community-block-lw-twxt-mob2,
    .community-block-lw-twxt-mob3 {
        font-size: 4.444vw;
        display: flex;
        justify-content: center;
        width: 77.777vw;
        text-align: center;
        margin-left:11.666vw;
    }










    section.community-page-sec {
        margin-bottom: 50vh;
    }





    .roadmap-title {
        font-size: 7.333vw;
        margin-left: 0;
    }



    .roadmap-table {
        font-size: 2.281vw;
        height:65vh;
    }









    .marquee {
        display: none;
    }






    .logo {
        margin-left: 19.5vw;
        margin-top: 44vh;
        width: 60.458vw;
        height: 20.925vh;
    }





    .footer-grid{
        display:none;
    }




    .footer-col-logo {
        position: static;
    }




    .footer-col-left {
        margin-left: -23.21vw;
    }


    .footer-col-zag {
        font-size: 4.302vw;
    }



    .footer-col {
        font-size: 4.822vw;
    }


    section.footer-block{
        min-height:73vh;
    }
}