* {
    box-sizing: border-box;
    
  }
  
  /* Общие стили */

  html{
    overflow-x: hidden;
  }
body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    background: black;
    overflow-x: hidden;
    
    

}

button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Хедер */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    box-sizing: border-box;
    
}

/* Логотип */
.header .logo {
    display: flex;
    align-items: center;
}

.header .logo img {
    width: auto;
    height: 25px;
}



/* Центрируем навигацию */
.header-nav {
    display: flex;
    flex-grow: 1; /* Заполняет доступное пространство, чтобы центровка работала */
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 70px;
}

.nav-links li {
    margin: 0 10px;
}

/* Стили для ссылок навигации */
/* Стили для ссылок навигации */
.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 8px;
    box-sizing: border-box;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Плавный переход для цвета и тени текста */
}

/* Эффект при наведении */
.nav-links a:hover {
    color: #6f00ff; /* Новый цвет текста */
    text-shadow: 0 0 8px #7b16ffc1, 0 0 15px #7b16ffc1; /* Лёгкое неоновое свечение для текста */
}



@keyframes blink {
    0%, 100% {
        opacity: 1; /* Полная видимость */
    }
    50% {
        opacity: 0.0; /* Полупрозрачность */
    }
}


/* Выключен листинг */

.listing-link {
    font-size: 18px;
    background: #6f00ff; 
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: blink 1s infinite;
    text-decoration: none;
    padding: 5px 10px;
    transition: transform 0.3s ease;

}



/* Правая часть хедера: язык, кнопка Get Started, бургер-меню */
.header-right {
    display: flex;
    align-items: center;
}

/* Языковое меню */
.language-dropdown {
    position: relative;
    margin-left: 20px;
    
}

.language-btn {
    background: transparent url('/imgz/dropdown.webp') no-repeat right center;
    background-size: 10px;
    padding-right: 15px;
    border: none;
    color: white;
    cursor: pointer;
    display: none;
}

.language-btn:hover {
    color: #848484;
}

.language-menu {
    display: none;
    position: absolute;
    background-color: rgba(23, 22, 22, 0.223);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(35, 35, 35, 0.324);

    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    top: 30px;
    right: 0;
    width: 150px;
    z-index: 10;
}

.language-menu.visible {
    display: block;
}

.language-menu li {
    width: 100%;
}

.language-menu li a {
    display: block;
    padding: 10px;
    color: #e7e7e7;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 5px;
}

.language-menu li a:hover {
    background-color: rgba(31, 30, 30, 0.289);
}

/* Бургер-меню */
.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    background-color: rgba(0, 0, 0, 0.492);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
}

.burger-line {
    width: 25px;
    height: 3px;
    background-color: rgb(164, 164, 164);
    border-radius: 5px;
}

/* Кнопка "Get Started" */
.hero-button-menu {
    padding: 0.5rem 1.9rem;
    background-color: transparent;
    border: 1px solid #6f00ff;
    background-color: #6f00ff;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    margin-left: 20px;
    display: inline-block;
    width: 100%;
}

.hero-button-menu:hover {
    background: #7409ff;
}

.burger-nav {
    display: none;
}

/* Мобильные стили */
@media (max-width: 1170px) {
.header-nav {
    margin-left: 0;
}
}


/* Мобильные стили */
@media (max-width: 991px) {

    .listing-link{
        padding: 0;
    }


    .header{
        padding: 20px 15px;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    }
    .language-btn{
        margin-right: 20px;
    }

    .hero-button-menu {
        display: none; /* Скрываем кнопку на мобильных экранах */
    }
    
    .burger-nav{
        display: block;
        
    }
    .nav-links {
        display: none; /* Скрываем на экранах меньше 991px */
    }

    .hero-button-menu {
        display: none; /* Скрываем кнопку на мобильных экранах */
    }

    .burger-menu {
        display: flex; /* Показываем бургер-меню */
    }

    .burger-nav {
        display: none; /* Скрыто по умолчанию */
        position: absolute;
        top: 71px;
        left: 0;
        width: 100%;
        background-color: rgb(0, 0, 0);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 20px;
        box-sizing: border-box;
        height: 100vh;
    }

    .burger-nav.active {
        display: block; /* Показываем при активации */
       
    }

    .burger-links {
        list-style: none;
        margin: 0;
        padding: 10px 10px !important;
        display: flex;
        flex-direction: column;
        

        
    }

    .burger-links li {
        margin: 10px 0;
        border-bottom: 1px solid rgba(108, 108, 108, 0.246);
        padding: 10px 10px;
        
        
    
    }

    .burger-links li:hover {
        background: rgba(75, 75, 75, 0.425);
        padding: 10px 10px;
        border-radius: 15px;
        
    
    }

    .burger-links a {
        color: rgb(187, 187, 187);
        text-decoration: none;
        font-weight: 500;
    
    }
    .burger-links a:hover {
        color: #6f00ff;
    }
}


.hero {
    position: relative; /* Для позиционирования элементов внутри секции */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 20px;
    background: url('/imgz/airdrop99.webp'); /* Фоновое изображение */
    background-size: cover;
    background-position: center;
    width: 100%;
    margin-top: 50px;
    overflow: hidden; /* Предотвращает выход содержимого за границы */
    
}

.hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%; /* Высота градиента */
    background: linear-gradient(to top, black, transparent 100%);
    z-index: 1; /* Под текстом, но над фоном */

    
}



.hero-left {
    width: 60%; /* 60% ширины для левой части */
    text-align: left;
    padding: 30px;
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(100px); /* Начальная позиция (снизу) */
    animation: slideUp 2s forwards; /* Анимация */
    z-index: 3;
}

.hero-left{
    z-index: 2;
}

/* Анимация для вылета снизу */
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(200px); /* Начинаем с позиции снизу */
    }
    0% {
        opacity: 0;
        transform: translateY(75px); /* Начинаем с позиции снизу */
    }

    100% {
        opacity: 1;
        transform: translateY(25px); /* Завершаем на обычной позиции */
    }
}

/* Левый блок сверху с вертикальной линией и текстом */
.hero-left-top {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
    justify-content: flex-start; /* Выравнивание по началу */
}

.vertical-line {
    width: 1px;
    height: 110px; /* Высота линии */
    background-color: #acacac38; /* Цвет линии */
    margin-right: 20px;
    align-self: stretch; /* Растягиваем линию по вертикали */
}

.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем текст вертикально */
}

.hero-text .text-1 {
    color: #d3d3d3; /* Светло-серый цвет для первого текста */
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    transform: scaleX(0.9); /* Сжимаем по оси X */
    transform-origin: left center; /* Ориентируем сжатие от левого края */
    max-width: 400px;
}

.hero-text .text-2 {
    color: transparent; /* Переливающийся текст */
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
    background: linear-gradient(90deg, #00d4ff, #e600ff, #d0ff00, #d0ff00, #aa00ff); 
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: gradientAnimation 60s ease infinite;
    transform: scaleX(0.9); /* Сжимаем по оси X */
    transform-origin: left center; /* Ориентируем сжатие от левого края */
    max-width: 400px;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%; /* Начальная позиция градиента */
    }
    50% {
        background-position: 100% 50%; /* Позиция в середине анимации */
    }
    100% {
        background-position: 0% 50%; /* Возвращаем к начальной позиции */
    }
}

.hero-title {
    font-size: 40px;
    font-weight: bold;
    margin: 0;
    background: linear-gradient(90deg,#6800e6, #6800e6, #d0ff00, #d0ff00, #e600ff, #00d4ff, #6800e6, #6800e6); /* Градиент */
    background-size: 300% 300%; /* Увеличиваем размер фона для плавного перелива */
    background-clip: text; /* Обрезаем фон по форме текста */
    -webkit-background-clip: text; /* Для WebKit-браузеров */
    color: transparent; /* Делаем цвет текста прозрачным */
    animation: gradientAnimation 60s ease infinite; /* Анимация для плавного перелива */
}

.hero-subtitle {
    color: rgb(162, 162, 162);
    font-size: 20px;
    margin-top: 10px;
}

.hero-button {
    margin-top: 20px;
    padding: 8px 20px;
    background-color: transparent;
    border: 1px solid #6f00ff;
    color: white;
    text-decoration: none;
    border-radius: 18px;
    font-size: 13px;
    display: inline-block;
}

.hero-button:hover {
    background-color: #6f00ff;
}

/* Стили для правой части (изображение) */
.hero-right {
    width: 40%; /* 40% ширины для правой части */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-top: 50px;
    opacity: 0; /* Начальное состояние */
    animation: fadeIn 1.5s ease-in-out forwards; /* Анимация */
}

/* Анимация для появления изображения */
@keyframes fadeIn {
    to {
        opacity: 1; /* Конечное состояние - полностью видимое */
    }
}

@media (max-width: 1024px) {
    .hero {
        flex-direction: column; /* Ставим элементы в столбик */
        align-items: center; /* Выравниваем по центру */
        justify-content: center;
        padding: 20px;
        margin-top: 50px;
    }

    .hero-left,
    .hero-right {
        width: 100%; /* Растягиваем обе части на всю ширину */
        padding: 10px;
        opacity: 1; /* Убираем начальную прозрачность */
        transform: translateY(0); /* Сбрасываем начальную позицию */
    }

    .hero-right img {

        margin-top: -115px !important;
        scale: 1;
        z-index: -1;
    }

    .hero-left-top {
        margin-bottom: 30px; /* Уменьшаем отступ */
    
    }

    .hero-text .text-1 {
        font-size: 12px; /* Уменьшаем на 15% */
        max-width: 85%; /* Сжимаем текст */
    }

    .hero-text .text-2 {
        font-size: 12px; /* Уменьшаем на 15% */
        max-width: 85%; /* Сжимаем текст */
    }

    .hero-title {
        font-size: 20px; /* Уменьшаем на 15% */
    }

    .hero-subtitle {
        font-size: 17px; /* Уменьшаем на 15% */
    }

    .hero-button {
        font-size: 11px; /* Уменьшаем на 15% */
        padding: 7px 17px; /* Уменьшаем размеры кнопки */
    }

     
}

.feature-section {
    
    width: 100%;

}

/* Контейнер карточек */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    max-width: 90%; /* Ограничиваем максимальную ширину */
    margin: 0 auto; /* Центрируем контейнер */
}

.section-title {
    display: none;
}

/* Стиль карточек */
.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 250px;
    width: calc(33.33% - 15px);
    padding: 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(#141217, #0e0c12);
    border: 1px solid #ffffff12;
    perspective: 1000px; /* Для эффекта переворота */
    color: white;
}

.card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

/* Передняя сторона карточки */
.card-front,
.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Скрываем заднюю сторону при перевороте */
}

.card-front {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-back {
    background-color: transparent;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
}

.card-back p{
    max-width: 350px;
}


/* Заголовок и подзаголовок карточки */
.card-title {
    font-size: 55px;
    font-weight: 500;
    margin: 0;
    transition: transform 0.3s ease;
}

.card-subtitle {
    font-size: 20px;
    color: #8d8d8d;
    margin-top: 10px;
    transition: transform 0.3s ease;
}

/* Эффекты при наведении */
.card:hover .card-inner {
    transform: rotateY(180deg); /* Переворачиваем карточку */
}



.card:hover {
    background-image: linear-gradient(#2f1a52, #2f1a52); /* Фиолетовый цвет при наведении */
}


.card-title,
.card-subtitle {
    word-wrap: break-word;  /* Перенос длинных слов */
    word-break: break-word; /* Принудительный перенос */
    white-space: normal;    /* Разрешает перенос строк */
    overflow-wrap: break-word; /* Дополнительно для переноса слов */
}

/* Для экранов шире 900px: эффект при наведении */
@media (min-width: 900px) {
    .card:hover .card-inner {
        transform: rotateY(180deg); /* Переворачиваем карточку при наведении */
    }

    .card:hover {
        background-image: linear-gradient(#2f1a52, #2f1a52); /* Фиолетовый цвет при наведении */
    }
}

/* Для экранов меньше 900px: эффект при клике */
@media (max-width: 900px) {
    /* Убираем hover для мобильных */
    .card:hover .card-inner {
        transform: none; /* Убираем поворот на ховер */
    }

    .card:hover{
        background-image: linear-gradient(#141217, #0e0c12);  
    }

    .card.flipped .card-inner {
        transform: rotateY(180deg); /* Переворачиваем карточку при клике */
    }
    .card.flipped{
        background-image: linear-gradient(#2f1a52, #2f1a52);
    }
}

/* Медиазапросы */

/* Для экранов до 900px */
@media (max-width: 900px) {
    .feature-section {
        padding: 30px; /* Уменьшаем padding */
    }

    .section-title {
        font-size: 30px; /* Уменьшаем размер заголовка */
    }

    .card-container {
        gap: 15px; /* Уменьшаем расстояние между карточками */
        max-width: 100%;
    }

    .card {
        width: calc(50% - 40px); /* Делаем 2 карточки в ряду по 50% ширины */
        padding: 15px; /* Уменьшаем padding */
        font-size: 80%; /* Уменьшаем размер шрифта */
    }

    .card-title {
        font-size: 44px; /* Уменьшаем размер заголовка карточки */
        max-width: 90%;
    }

    .card-subtitle {
        font-size: 18px; /* Уменьшаем размер подзаголовка карточки */
        max-width: 90%;
    }
}

/* Для экранов до 500px */
@media (max-width: 500px) {
    .card{
        height: 160px;
    }

    .card-back p{
        max-width: 170px;
        font-size: 10px;
    }
    .feature-section {
        padding: 10px;
    }

    .section-title {
        font-size: 25px; /* Еще меньше размер заголовка */
    }

    .card-container {
        gap: 10px; /* Еще меньше gap между карточками */
    }

    .card {
        width: calc(50% - 5px); /* Карточки все равно 2 в ряду, но теперь они меньше */
        padding: 10px; /* Еще меньше padding */
        font-size: 70%; /* Еще меньше размер шрифта */
    }

    .card-title {
        font-size: 39px; /* Еще меньше размер заголовка карточки */
    }

    .card-subtitle {
        font-size: 16px; /* Еще меньше размер подзаголовка карточки */
        margin: 0;
    }

    .hero-left12 {
    width: 100% !important;
    text-align: left;
    padding: 6%;
    opacity: 0;
    transform: translateY(100px);
    animation: slideUp 2s forwards;
    z-index: 3;
}

.hero-title12 {
    text-align: start;
    font-size: 22px !important;
    font-weight: 500;
    margin: 0;
    background: rgb(249, 246, 255);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientAnimation 60s ease infinite;
}

.hero-subtitle12 {
    text-align: start;
    color: rgb(162, 162, 162);
    font-size: 14px !important;
    margin-top: 20px;
}

}



/* Основной контейнер FAQ */
.stake-section {
    background-image: url('/imgz/airdrop111.webp');
    background-size: 100% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    padding: 40px 20px;
    text-align: center;
    height: 100%;
    width: 100%;
}

.stake-info {
    margin-bottom: 30px;
}

.stake-title {
    font-size: 3.5rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
}

.stake-subtitle {
    font-size: 1rem;
    color: #7b7b7b;
    line-height: 1.5;
}

.stake-container {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 80px;
    gap: 20px;
    position: relative;  /* Это важно для позиционирования */
    
}

.stake-left {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 1;
    position: relative;
}

.stake-image {
    max-width: 610px;
    height:auto;
    object-fit: cover;
    object-position: center;
}

.stake-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 1;
}

/* Стили для каждого FAQ элемента */
.faq-item {
    background-color: rgba(35, 33, 33, 0.112);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px; /* Начальный радиус */
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
}

/* Кнопка с вопросом */
.faq-question {
    background-color: #0000005c;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    border: none;
    padding: 25px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    gap: 10px; /* Пространство между иконкой и текстом */
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #22202020;
}

/* Иконка chevron */
.chevron-icon {
    margin-right: 35px;
    width: auto;
    height: 15px;
    transition: transform 0.3s ease; /* Плавное вращение */
    transform: rotate(0deg); /* Начальный угол вправо */
    transform-origin: center; /* Поворот вокруг центра */
}

/* Когда блок открыт */
.faq-item.open .chevron-icon {
    transform: rotate(90deg); /* Поворот на 90 градусов по часовой стрелке */
    padding-right: 0;
}


.faq-paragraph{
    padding: 2px 0 0 50px;
    color: #b7b2b2;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 300;
}


/* Ответы */
.faq-answer {
    display: block; /* Для анимации */
    max-height: 0; /* Начальная высота — 0 */
    opacity: 0; /* Начальная прозрачность — 0 */
    overflow: hidden; /* Прячем лишнее */
    padding: 0 40px;
    color: #b7b2b2;
    text-align: left;
    background-color: #11101065;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: max-height 0.5s ease, opacity 0.5s ease; /* Плавное изменение высоты и прозрачности */
}

/* Когда элемент открыт */
.faq-item.open .faq-answer {
    max-height: 1000px; /* Открытая высота (можно увеличить для более длинных ответов) */
    opacity: 1; /* Ответ становится видимым */
}

/* Когда элемент открыт */
.faq-item.open {
    border-bottom: none; /* Убираем нижнюю границу */
}

/* Показываем ответ при открытии */
.faq-item.open .faq-answer {
    display: block;
}

@media (max-width: 1241px) {
    .stake-container {
        padding: 16px 64px; /* Уменьшаем padding контейнера */
    }

    .stake-left {
        flex: 1;
        max-width: 100%; /* Уменьшаем ширину левого блока */
    }

    .stake-image {
        max-width: 100%; /* Уменьшаем ширину изображения на 20% */
        height: auto; /* Сохраняем пропорции изображения */
    }

    .stake-title {
        font-size: 2.8rem; /* Уменьшаем размер шрифта заголовка */
    }

    .faq-question {
        font-size: 1.3rem; /* Уменьшаем размер шрифта вопросов */
    }

    .faq-paragraph{
        font-size: 0.8;
    }

    .faq-answer {
        font-size: 1rem; /* Уменьшаем размер шрифта ответов */
    }
}

@media (max-width: 926px) {
    .stake-container {
        padding: 12px 50px; /* Уменьшаем padding контейнера еще на 20% */
    }

    .stake-left {
        flex: 1;
        max-width: 100%; /* Уменьшаем ширину левого блока еще на 20% */
    }

    .stake-image {
        max-width: 100%; /* Уменьшаем ширину изображения на дополнительные 20% */
        max-height: auto; /* Сохраняем пропорции изображения */
    }

    .stake-title {
        font-size: 2rem; /* Уменьшаем размер шрифта заголовка */
    }

    .faq-question {
        font-size: 0.8rem; /* Уменьшаем размер шрифта вопросов */
    }


    .faq-paragraph{
        font-size: 0.5rem;
    }

    .faq-answer {
        font-size: 0.5rem; /* Уменьшаем размер шрифта ответов */
    }
}

@media (max-width: 768px) {
    .stake-container {
        flex-direction: column; /* Меняем направление на столбик */
        padding: 0px 0px; /* Уменьшаем padding контейнера */
    }

    .stake-left, .stake-right {
        flex: none;
        width: 100%; /* Делаем блоки с вопросами и изображением на 100% ширины */
    }

    .stake-image {
        max-width: 75%; /* Уменьшаем изображение на 35% */
        height: auto; /* Сохраняем пропорции */
        transform: translateY(0rem) ;
        scale: 1.5;
        
    }

    .stake-title {
        font-size: 2.275rem; /* Уменьшаем размер шрифта заголовка на 35% */
    }

    .faq-question {
        font-size: 0.9rem; /* Уменьшаем размер шрифта вопросов */
        padding: 16px; /* Уменьшаем padding кнопки */
    }

    .faq-paragraph {
        font-size: 0.715rem; /* Уменьшаем размер шрифта описания */
    }

    .faq-answer {
        font-size: 0.715rem; /* Уменьшаем размер шрифта ответа */
        padding: 0 20px; /* Уменьшаем отступы */
    }
}

/* Стили для заголовка и подзаголовка */
.platform-section {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 120px;
   
}

.main-heading {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
}

.subheading {
    font-size: 1rem;
    color: #7b7b7b;
}

/* Общие стили для секции с картинками */
.custom-image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px;
    margin-bottom: 40px;


}

.custom-card {
    background-image: linear-gradient(#141217, #0e0c12);
    border: 1px solid #ffffff12;
    border-radius: 34px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
}

.custom-image-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.custom-image {
    width: 7%;
    border-radius: 50%;
    object-fit: cover;
}

.custom-image:hover,
.custom-image:active {
    transform: rotateY(360deg);
    transition: transform 1s ease;
}

@keyframes bounceRotate {
    0% {
        transform: rotateY(0deg);
    }
    5% {
        transform: rotateY(18deg);
    }
    10% {
        transform: rotateY(36deg);
    }
    15% {
        transform: rotateY(54deg);
    }
    20% {
        transform: rotateY(72deg);
    }
    25% {
        transform: rotateY(90deg);
    }
    30% {
        transform: rotateY(108deg);
    }
    35% {
        transform: rotateY(126deg);
    }
    40% {
        transform: rotateY(144deg);
    }
    45% {
        transform: rotateY(162deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    55% {
        transform: rotateY(198deg);
    }
    60% {
        transform: rotateY(216deg);
    }
    65% {
        transform: rotateY(234deg);
    }
    70% {
        transform: rotateY(252deg);
    }
    75% {
        transform: rotateY(270deg);
    }
    80% {
        transform: rotateY(288deg);
    }
    85% {
        transform: rotateY(306deg);
    }
    90% {
        transform: rotateY(324deg);
    }
    95% {
        transform: rotateY(342deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@media screen and (max-width: 500px) {
    .platform-section {
        text-align: center;
        margin-top: 30px;
        padding: 5px;
        margin-bottom: 0;
    }
    
    .main-heading {
        font-size: 1.8rem;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 10px;
    }
    
    .subheading {
        font-size: 0.8rem;
        color: #7b7b7b;
    }
    .custom-image-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .custom-image {
        width: 24%;
        padding: 15px;
    }

    .custom-card {
        background-image: linear-gradient(#141217, #0e0c12);
        border: 1px solid #ffffff12;
        border-radius: 28px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0px 12.5px;
    }

    .custom-image-section {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 20px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
}

.content-section {
    position: relative;
    overflow-x: none;
    padding: 50px 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    top: -20%;
    margin-bottom: 100px;
  }
  
  
  .blob-container[data-v-7326b018] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh;
    z-index: -1;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: visible;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    padding-bottom: 50px;
    background-size: 100% 100%; /* Подгоняем размер */
    background-position: center;
    transition: background-image 0.1s ease-in-out; /* Плавное изменение фона */
    
}

.blob-container[data-v-7326b018] video.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео будет растягиваться по размеру контейнера */
    z-index: -1; /* Видео будет под всеми другими элементами */
    opacity: 0.6; 
}

video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}

video::-webkit-media-controls {
    display: none !important;
}

.blob-container[data-v-7326b018]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Чтобы не перекрывать кликабельные элементы */
    z-index: 1; /* Поверх фонового изображения */
    background: linear-gradient(to bottom, black, transparent 20%), /* Верхний градиент */
                linear-gradient(to top, black, transparent 40%);   /* Нижний градиент */
}
  
  .section-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
    color: white;
    background: transparent;
    
  }
  
  .content-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; 
    background: transparent;
    
  }
  
  .text-block {
    width: 40%;
    text-align: left;
    color: white;
    padding: 40px;
    background: transparent;
  }
  
  .text-title {
    font-size: 44px;
    margin-bottom: 10px;
    margin-left: 20px;
    color: white; 
  }
  
  .text-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
    background: transparent;
  }
  
  .text-description {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    color: #bdbdbd;
    padding: 20px;
    margin-left: 20px;
  }

  .neon-button {
    display: inline-block;
    margin-top: 20px;
    margin-left: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: transparent;
    border: 1px solid #6f00ff;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0 10px #6f00ff55, 0 0 20px #6f00ff47;
    
    
  }
  
  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 1px solid #6f00ffa4;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
    
  }
  
  .neon-button:hover {
    color: #fff;
    background: #6f00ff;
    
  }
  
  .neon-button:hover::before {
    opacity: 1;
  }
  
  .image-block {
    width: 60%;
    text-align: right;
    overflow: hidden;
    background: transparent;

  }
  
  .image-block img {
    max-width: auto;
    height: 600px;
    border: 2px solid rgba(118, 37, 224, 0.727);
    border-bottom: 0.5px solid rgba(118, 37, 224, 0.727);
    border-right: none;
    border-radius: 30px 0 0 30px; /* Радиус только на верхнем левом и нижнем левом углу */
    margin-top: 40px;
    transform: translateX(100%); /* Начальная позиция: изображение за экраном */
    transition: transform 2s ease-in-out; /* Плавное перемещение */
    visibility: hidden; /* Изначально невидимо */
}

.image-block img.show {
    transform: translateX(0%); /* Когда секция в видимости, изображение выезжает */
    visibility: visible; /* Делаем изображение видимым */
    
}

.blob_1, .blob_2, .blob_3, .blob_4 {
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, 
        rgba(147, 16, 255, 0.7) 10%, 
        rgba(147, 16, 255, 0.6) 25%, 
        rgba(147, 16, 255, 0.4) 50%, 
        rgba(147, 16, 255, 0.2) 75%,
        rgba(147, 16, 255, 0.15) 80%, 
        rgba(147, 16, 255, 0.1) 85%,  
        rgba(147, 16, 255, 0.05) 90%, 
        rgba(147, 16, 255, 0) 100%
    );

    border-radius: 100%;
    position: absolute;
    transition: transform 1s cubic-bezier(0.07, 0.8, 0.16, 1), background 1s ease-in-out;
    width: 50%;
    height: auto;
    z-index: -3;
    
}

@media (max-width: 1024px) {

    .blob-container[data-v-7326b018]::after {
        height: 100%;
    }
        .blob-container[data-v-7326b018] {
            height: 100%;
            background-size: contain;
            
        } 

        .blob-container[data-v-7326b018] video.background-video {
            opacity: 0.6;
        }
    .content-section {
        padding: 0;
        
    background-size: 100% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    }
    .content-container {
      flex-direction: column;
      align-items: center;
      gap: 0; /* Дополнительное расстояние между элементами */
      justify-content: center;
      margin: 0;
    }
  
    .text-block {
      width: 85%; /* Уменьшение на 15% */
      padding: 0px; /* Пропорциональное уменьшение отступов */
    }
  
    .image-block {
      width: 100% !important; 
      text-align: center; /* Центрирование изображения */

    }
  
    .image-block img {
      height: auto; /* Уменьшение на 15% */
      border: 2px solid rgba(118, 37, 224, 0.727);
      border-radius: 15px;
      width: 95%;
    }
  
    .section-title {
      font-size: 30px; /* Уменьшение на 15% */
      margin-bottom: 15px;
    }
  
    .text-title {
      font-size: 37px; /* Уменьшение на 15% */
      margin-left: 10px;
    }
  
    .text-description {
      font-size: 14px; /* Уменьшение на 15% */
      padding: 15px; /* Пропорциональное уменьшение отступов */
      margin-left: 0;
    }
  
    .neon-button {
      font-size: 12px; /* Уменьшение на 15% */
      padding: 8px 17px; /* Пропорциональное уменьшение */
      width: auto;
      margin: 0;
      margin-left: 0;
      
    }
  }
@media (max-width: 767px) {
    .blob_1, .blob_2, .blob_3, .blob_4 {
        display: none;
    }
}

.blob_1 {
    animation: move--1 5s linear infinite alternate;
}

.blob_2 {
    animation: move--2 4s infinite alternate;
}

.blob_3 {
    animation: move--3 6s linear infinite alternate;
}

.blob_4 {
    right: 5%;
    top: 20%;
    animation: move--4 8s linear infinite alternate;
    opacity: 0.6; /* Постоянная видимость */
}

/* Анимации */
@keyframes move--1 {
    0% {
        border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
        transform: translate(0, 0);
        opacity: 0.4;
    }
    40%, 60% { /* Ускорение появления и исчезновения */
        opacity: 0.9;
    }
    100% {
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
        transform: translate(-10vw, 80vh);
        opacity: 1;
    }
}

@keyframes move--2 {
    0% {
        border-radius: 30% 70% 40% 60% / 20% 80% 60% 40%;
        transform: translate(-20vw, 0);
        opacity: 0.8;
    }
    40%, 60% {
        opacity: 0;
    }
    100% {
        border-radius: 60% 40% 50% 50% / 50% 70% 30% 60%;
        transform: translate(-90vw, 20vh);
        opacity: 1;
    }
}

@keyframes move--3 {
    0% {
        border-radius: 35% 65% 45% 55% / 30% 70% 50% 50%;
        transform: translate(10vw, 5vh);
        opacity: 1;
    }
    40%, 60% {
        opacity: 0.5;
    }
    100% {
        border-radius: 50% 50% 70% 30% / 60% 30% 70% 40%;
        transform: translate(40vw, -30vh);
        opacity: 1;
    }
}

@keyframes move--4 {
    0% {
        border-radius: 40% 60% 45% 55% / 30% 70% 50% 50%;
        transform: translate(0, 0);
    }
    50% {
        border-radius: 50% 50% 60% 40% / 60% 40% 60% 40%;
        transform: translate(10vw, -5vh);
    }
    100% {
        border-radius: 30% 70% 40% 60% / 50% 50% 70% 30%;
        transform: translate(-10vw, 5vh);
    }
}



.roadmap-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 20px 0 20px 10%; /* Отступ слева 10% */
    margin-bottom: 50px;
}

.roadmap-header {
    display: flex;
    justify-content: center; /* Центрируем элементы внутри контейнера */
    align-items: center; /* Выравниваем по центру по вертикали */
    position: absolute;
    
    width: 100%; /* Чтобы они занимали всю ширину контейнера */
    z-index: 10; /* Стрелки и заголовок поверх карточек */
    margin-bottom: 50px;
    margin-left: 20%;
}

.roadmap-header h2 {
    margin-right: 30px; /* Отступ между заголовком и стрелками */
    font-size: 2.5em;
    color: #fff;
}

.roadmap-cards-container {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
    justify-content: flex-start;
    margin-top: 10%; /* Увеличиваем отступ сверху, чтобы карточки начинались ниже */
}

.roadmap-card {
    position: relative;
    flex: 0 0 24%; /* Каждая карточка будет занимать 1/4 ширины контейнера */
    min-height: 390px;
    
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    margin-right: 25px; /* Отступ между карточками */
    border-radius: 15px;
    background-size: 100%; /* Фон будет масштабироваться */
    background-position: 50%; /* Центрируем изображение */
    transition: all .4s ease-out; /* Плавная анимация для фона */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Равномерно распределяем пространство между элементами */
}

.roadmap-card:hover {
    background-size: 115%; /* Увеличиваем фон на 15% */
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card-content h3{
    margin-top: auto; /* Текст будет прижат к нижней части карточки */
    font-size: 0.9em;
    margin-bottom: 10px;
    text-align: start;
}

.date {
    align-self: flex-start; /* Размещаем дату сверху слева */
    font-size: 0.7em;
    font-weight: bold;
}

.description {
    margin-top: 0; /* Текст будет прижат к нижней части карточки */
    font-size: 0.5em;
    margin-bottom: 10px;
    text-align: start;
    color: rgb(181, 181, 181);
}

.icon img {
    align-self: right; /* Иконка будет расположена снизу справа */
    width: 20px;
    height: 20px;
    margin-bottom: 0;
    margin-left: 85%;
    transition: transform 0.3s ease; /* Плавное изменение при анимации */
    transform-origin: center; /* Устанавливаем центр поворота иконки */

}

.roadmap-card:hover .icon {
    display: none;
}




.roadmap-nav-button {
    color: #fff;
    cursor: pointer;
    z-index: 10;
    -webkit-text-fill-color: inherit;
background-color: #141217;
background-clip: padding-box;
border: 1px solid #3e3d3d00;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 3.2rem;
height: 3.2rem;
transition-timing-function: linear;
display: flex;
position: relative;
}

.roadmap-nav-button:hover {
    background: rgba(59, 56, 56, 0.5);
}

.roadmap-nav-left,
.roadmap-nav-right {
    position: relative;
}

.roadmap-nav-left {
    margin-right: 15px;
}

@media (max-width: 500px) {

    .roadmap-section {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        padding: 20px 0px 20px 0px; /* Отступ слева 10% */
        margin-top: -80px;
    }
    
    .roadmap-cards-container {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto; /* Включаем горизонтальную прокрутку */
        scroll-behavior: smooth; /* Плавная прокрутка */
        padding-bottom: 20px; /* Немного отступа внизу */
        margin-top: 80px !important;
        
    }
    .roadmap-card {
        position: relative;
        flex: 0 0 70%; /* Каждая карточка будет занимать 1/4 ширины контейнера */
        margin: 0px 10px 0px 10px; /* Отступ слева 10% */
    }
 
    .roadmap-header{
        margin-bottom: 10px;
    }

    .roadmap-nav-button{
        display: none;
    }

    .roadmap-header h2 {
        font-size: 2em;
        margin-right: 0px;
        margin: 0;
    }

    .roadmap-header {
        margin-left: 0;
    }
}

.footer {
    background-image: linear-gradient(#0c0b0c, #0c0b0c);
    border-top: 1px solid #ffffff12;
    padding: 40px 0;
    text-align: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;

}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
}

.footer-nav li {
    margin: 0 15px;
}

.footer-nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #6f00ff;
}

.footer-community {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
}





@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%; /* Начальная позиция градиента */
    }
    50% {
        background-position: 100% 50%; /* Позиция в середине анимации */
    }
    100% {
        background-position: 0% 50%; /* Возвращаем к начальной позиции */
    }
}

.community-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Расстояние между иконками */
    margin-top: 20px;
}


.footer-community p {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(90deg, #4c00ffe0, #d4d000, #ff5efcd6, #d0ff00, #7b00ff, #ff00fbd6, #d0ff00, #8000ff, #4c00ff); 
    background-size: 300% 300%;
    /* Добавляем анимацию */
    animation: gradientAnimation 35s infinite ease-in-out;

    width: 100%;
}

.icon-link img {
    width: 26px;
    height: 26px;
    transition: transform 0.3s ease;
}

.icon-link img:hover {
    transform: scale(1.1); /* Лёгкое увеличение при наведении */
}


.footer-bottom {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #cccccc;
    margin-top: 30px;
    padding: 20px;
}

@media (max-width: 500px) {

    .footer {
        background-image: linear-gradient(#0c0b0c, #0c0b0c);
        border-top: 1px solid #ffffff12;
        padding: 20px 0;
        text-align: center;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        
    }
    .footer-community p {
        margin: 0;
        font-size: 20px !important;
        font-weight: bold;
    }

    .icon-link img {
        width: 26px;
        height: 26px;
    }

    .community-icons {
        gap: 15px;
    }


    .community-icons {
        gap: 15px;
    }


    .footer-community{
        margin: 0;
    }
    .footer-nav {
        display: none;
    }
    .footer-bottom {
        justify-content: center;
    margin-top: 0;
    }
}


.investors {
    text-align: center;
    padding: 50px 15%;
    background: url('/imgz/airdrop99.webp'); /* Фоновое изображение */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .investors-title {
    font-size: 46px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #efefef;
  }
  
  .investors-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 80px;
  }
  
  .investors-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Фиксировано 4 колонки */
    gap: 35px;
    justify-items: center;
    align-items: center;
  }
  
  .investors-logos img {
    max-width: 80%;
    height: auto;
    object-fit: contain;
    padding: 20px;
  }

  @media (max-width: 768px) {

    .investors-title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #efefef;
      }
      
      .investors-subtitle {
        font-size: 13px;
        color: #666;
        margin-bottom: 20px;
      }

    .investors-logos {
      grid-template-columns: repeat(2, 1fr); /* 2 логотипа в ряд для небольших экранов */
    }

    .investors-logos img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }

      .investors {
        text-align: center;
        padding: 20px 5%;
        background: url('/imgz/airdrop99.webp'); /* Фоновое изображение */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }


  }

  @media (max-width: 768px) {
    .investors-logos img:nth-last-child(-n+6) {
      display: none;
    }
  }
  

  .hero1 {
    position: relative; /* Для позиционирования элементов внутри секции */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 20px;
    background: url('/my_project/imgz/about-bg.png'); /* Фоновое изображение */
    background-size: cover;
    background-position: center;
    width: 100%;
    overflow: hidden; /* Предотвращает выход содержимого за границы */
    
}

.hero12 {
    position: relative; /* Для позиционирования элементов внутри секции */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 20px;
    background: url('/my_project/imgz/faqbg.png'); /* Фоновое изображение */
    background-size: cover;
    background-position: center;
    width: 100%;
    overflow: hidden; /* Предотвращает выход содержимого за границы */
    
}

.hero1::before {
    content: ''; /* Псевдоэлемент */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.208); /* Полупрозрачный черный слой */
    z-index: 1; /* Этот слой будет под содержимым */
}



.hero-gradient1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Высота градиента */
    background: linear-gradient(to top, black, transparent 100%);
    z-index: 1; /* Под текстом, но над фоном */

    
}

.hero-gradient12 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* Высота градиента */
    background: linear-gradient(to top, black, transparent 100%);
    z-index: 1; /* Под текстом, но над фоном */

    
}



.hero-left1 {
    width: 80%; /* 60% ширины для левой части */
    text-align: left;
    padding: 6%;
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(100px); /* Начальная позиция (снизу) */
    animation: slideUp 2s forwards; /* Анимация */
    z-index: 3;
}
.hero-left12 {
    width: 80%; /* 60% ширины для левой части */
    text-align: left;
    padding: 6%;
    opacity: 0; /* Начальная прозрачность */
    transform: translateY(100px); /* Начальная позиция (снизу) */
    animation: slideUp 2s forwards; /* Анимация */
    z-index: 3;
}

.hero-left1{
    z-index: 2;
}

/* Анимация для вылета снизу */
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(200px); /* Начинаем с позиции снизу */
    }
    0% {
        opacity: 0;
        transform: translateY(75px); /* Начинаем с позиции снизу */
    }

    100% {
        opacity: 1;
        transform: translateY(25px); /* Завершаем на обычной позиции */
    }
}


.hero-title1 {
    text-align:  start;
    font-size: 45px;
    font-weight: 500;
    margin: 0;
    background: rgb(249, 246, 255); /* Градиент */
    background-size: 300% 300%; /* Увеличиваем размер фона для плавного перелива */
    background-clip: text; /* Обрезаем фон по форме текста */
    -webkit-background-clip: text; /* Для WebKit-браузеров */
    color: transparent; /* Делаем цвет текста прозрачным */
    animation: gradientAnimation 60s ease infinite; /* Анимация для плавного перелива */
}

.hero-title12 {
    text-align:  start;
    font-size: 45px;
    font-weight: 500;
    margin: 0;
    background: rgb(249, 246, 255); /* Градиент */
    background-size: 300% 300%; /* Увеличиваем размер фона для плавного перелива */
    background-clip: text; /* Обрезаем фон по форме текста */
    -webkit-background-clip: text; /* Для WebKit-браузеров */
    color: transparent; /* Делаем цвет текста прозрачным */
    animation: gradientAnimation 60s ease infinite; /* Анимация для плавного перелива */
}

.hero-subtitle1 {
    text-align:  start;
    color: rgb(162, 162, 162);
    font-size: 18px;
    margin-top: 20px;
}

.hero-subtitle12 {
    text-align:  start;
    color: rgb(162, 162, 162);
    font-size: 18px;
    margin-top: 20px;
}






/* Анимация для появления изображения */
@keyframes fadeIn {
    to {
        opacity: 1; /* Конечное состояние - полностью видимое */
    }
}

@media (max-width: 1024px) {
    .hero1 {
        flex-direction: column; /* Ставим элементы в столбик */
        align-items: center; /* Выравниваем по центру */
        justify-content: center;
        padding: 20px;

    }

    .hero-left1,
    .hero-right1 {
        width: 100%; /* Растягиваем обе части на всю ширину */
        padding: 10px;
        opacity: 1; /* Убираем начальную прозрачность */
        transform: translateY(0); /* Сбрасываем начальную позицию */
    }

    .hero-right1 img {

        margin-top: -115px !important;
        scale: 1;
        z-index: -1;
    }

    .hero-left-top1 {
        margin-bottom: 30px; /* Уменьшаем отступ */
    
    }

   

    .hero-title1 {
        font-size: 26px; /* Уменьшаем на 15% */
        text-align: start;
    }

    .hero-subtitle1 {
        font-size: 16px; /* Уменьшаем на 15% */
    }
}


  
/* Секция */
.section.is-our-journey {
    position: relative;
    background: #000000;
    height: 100vh; /* Фиксируем высоту на экран */
    overflow: hidden;
    padding: 0;
  }
  
  .our-journey_wrapper {
    width: 100vw;
    height: calc(100vh - 80px); /* Учитываем высоту хедера */
    position: sticky;
    top: 80px; /* Отступ от хедера */
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column; /* Позволяем заголовку быть сверху */
    justify-content: flex-start; /* Контент начинается сверху */
  }
  
  /* Заголовок секции */
  .journey-title {
    color: #ffffff; /* Белый цвет */
    font-size: 3rem; /* Размер шрифта, можешь подправить */
    font-weight: 500;
    margin: 0 0 0 40px; /* Отступы: сверху 20px, слева 40px */
    align-self: flex-start; /* Прижимаем к левому краю */
    z-index: 10; /* Поверх контента */
  }
  
  .padding-global {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 3.5rem;
    overflow: visible;
    width: 100%;
  }
  
  .container-medium {
    width: 100%;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .padding-section-large {
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  .our-journey_content {
    display: flex;
    will-change: transform; /* Оптимизация анимации */
    transform-style: preserve-3d; /* Для 3D-анимаций */
  }
  
  .our-journey_event-block {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-radius: 12px;
    grid-template-rows: 180px 180px; /* Две строки по 180px */
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    width: 400px; /* Фиксированная ширина блока */
    display: grid;
    overflow: hidden;
    margin-right: 0; /* Отступ между блоками (вернул твой вариант) */
  }
  
  .our-journey_event-detail {
    justify-content: flex-start;
    align-items: center;
    padding: 24px 24px 24px 40px;
    display: flex;
  }
  
  .our-journey_event-detail.is-bg-grey2 {
    background-color: #141217; /* Фон для текста событий */
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
  }
  
  .our-journey_year-text {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(#4d4c53 34%, #17151a00); /* Градиент текста года */
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 3.25rem;
    font-weight: 600;
  }
  
  .text-size-medium {
    font-size: 1.25rem;
  }
  
  .text-weight-medium {
    font-weight: 500;
  }
  
  h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgb(192, 192, 192);
  }
  
  .padding-bottom {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  
  .padding-custom1 {
    padding-bottom: 1rem; /* Отступ перед описанием */
  }
  
  .text-color-grey6 {
    color: #67666e; /* Цвет текста описания */
  }
  
  .text-size-small {
    font-size: 0.875rem;
  }


  .container {
    position: relative;
    width: 1230px;
    padding: 0px 15px;
    margin: 0px auto;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .journey-title {
      font-size: 2rem; /* 3rem / 1.5 */
      margin-left: 26.6px; /* 40px / 1.5 */
    }
  
    .padding-global {
      padding-left: 1.66rem; /* 2.5rem / 1.5 */
      padding-right: 1.66rem;
      padding-top: 2.33rem; /* 3.5rem / 1.5 */
    }
  
    .our-journey_wrapper {
      height: calc(100vh - 53px); /* 80px / 1.5 */
      top: 53px;
    }
  
    .our-journey_event-block {
      width: 266px; /* 400px / 1.5 */
      grid-template-rows: 120px 120px; /* 180px / 1.5 */
    }
  
    .our-journey_event-detail {
      padding: 16px 16px 16px 26.6px; /* 24px/1.5 and 40px/1.5 */
    }
  
    .our-journey_year-text {
      font-size: 2.16rem; /* 3.25rem / 1.5 */
    }
  
    .text-size-medium {
      font-size: 0.83rem; /* 1.25rem / 1.5 */
    }
  
    h4 {
      font-size: 1.33rem; /* 2rem / 1.5 */
    }
  
    .text-size-small {
      font-size: 0.58rem; /* 0.875rem / 1.5 */
    }
  
    .container {
      width: 820px; /* 1230px / 1.5 */
      padding: 0px 10px;
    }
  }
  


/* MAP section"*/

.infoSection{
    margin-top: 5%;
    margin-bottom: 5%;
    display: none;
}

.infoSection .wrapper {
    display: flex;
    justify-content: space-between;
  }
  
  .infoSection .leftSide {
    width: 540px;
  }
  
  .mapBlock {
    position: relative;
    height: 320px;
    background: #09070b;
    border-radius: 15px;
    box-shadow: 5px 6px 35px rgba(0, 0, 0, 0.6);
  }
  
  .docBlock::before {
    content: "";
    position: absolute;
    width: 100%;
    min-width: 900px;
    height: 400px; /* увеличенная высота */
    right: 0;
    top: 0;
    background-image: linear-gradient(#161318, #0f0d13);
    border-radius: 30px; /* скруглённые углы */
    border: 1px solid #ffffff12;
    filter: drop-shadow(1px -3px 45px rgba(0, 0, 0, 0.3));
    z-index: -1;

  }
  
  
  .mapBlock::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* полупрозрачная чёрная маска */
    border-radius: 15px;
    border: 2px solid #4b00ec;
    z-index: 1;
    pointer-events: none;
    
  }
  
  .infoSection .info {
    max-width: 270px;
    margin: 20px -15% 0 auto;
    font: 14px/20px sans-serif;
    color: #acb0bc;
  }
  
  .infoSection .info .title {
    display: block;
    font: 500 20px/30px sans-serif;
    color: #fff;
  }

  .highlighted{
    color: #4b00ec;
  }
  
  .infoSection .info .address {
    display: flex;
    align-items: center;
    margin-top: 6px;
  }
  
  .infoSection .info .address img {
    margin-right: 0;
    flex-shrink: 0;
  }
  
  .infoSection .info .reg {
    margin-top: 18px;
  }
  
  .infoSection .info .reg span {
    display: block;
    font: 20px/25px sans-serif;
    color: #fff;
  }
  
  .infoSection .rightSide {
    width: 540px;
    padding-top: 35px;
  }
  
  .sectionTitle.sm {
    font: 38px/48px sans-serif;
    color: white;
    font-size: 2.2rem;
    font-weight: 600;
  }
  
  .infoSection .titleContainer+.contentContainer {
    margin-top: 50px;
  }
  
  .docBlock {
    position: relative;
    min-height: 400px;
    padding-top: 35px;
    border-radius: 15px;
  }
  
  .docList {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 30px;
  }
  
  .docList .item {
    width: 30%;
  }
  
  .docList .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity 0.3s;
  }
  
  .docList .item a:hover img {
    opacity: 0.8;
  }

  .title{
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
  }

  @media screen and (max-width: 768px) {
    .container{
        width: 100% !important;
        min-width: 100% !important;
    }
    .infoSection .wrapper {
      display: block;
      padding: 0 16px;
    }
  
    .leftSide, .rightSide {
      width: 100% !important;
      padding: 0;
    }

    .rightSide {
        padding-top: 10px !important;
    }
  
    .infoSection .titleContainer {
      text-align: center;
      margin-bottom: 0 !important;
    }

    .infoSection .titleContainer+.contentContainer {
        margin-top: 10px !important; 
        }
  
    .sectionTitle.sm {
      font-size: 1.8rem;
      line-height: 2.2rem;
    }
  
    .docBlock {
      padding: 0;
      position: relative;
      margin-bottom: 0;
      min-height: 300px;
    }
  
    .docBlock::before {
      display: none;
    }
  
    .docBlock .title {
      display: block;
      text-align: center;
      margin-bottom: 16px;
      font-size: 1rem;
      color: #999999;
    }
  
    .docList {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      padding: 0;
    }
  
    .docList .item {
      width: 45%;
      max-width: 160px;
    }
  
    .docList .item:nth-child(3) {
      display: none;
    }
  
    .mapBlock {
      width: 100%;
      height: 220px;
      margin: 30px 0 15px;
      border-radius: 15px;
      overflow: hidden;
      box-sizing: border-box;
    }
  
    .mapBlock iframe {
      display: block;
      width: 100%;
      height: 100%;
    }
  
    .mapBlock::after {
      border-radius: 15px;
    }
  
    .infoSection .info {
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
      padding: 0 10px;
      font-size: 14px;
      line-height: 20px;
      color: #acb0bc;
    }
  
    .infoSection .info .title {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 10px;
      color: #fff;
    }
  
    .infoSection .info .address {
      justify-content: center;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
    }
  
    .infoSection .info .address img {
      margin: 0 8px 0 0;
      width: 35px;
      height: 35px;
    }
  
    .infoSection .info .reg {
      margin-top: 10px;
    }
  
    .infoSection .info .reg span {
      font-size: 16px;
      line-height: 22px;
      color: #fff;
    }

    .infoSection .wrapper {
        display: flex;
        flex-direction: column;
      }
    
      .infoSection .rightSide {
        order: 1;
      }
    
      .infoSection .leftSide {
        order: 2;
      }
    
    
  }

    
  
  
  
  
  


  /* Action section"*/

  .action-section-container {
    display: flex;
    width: 100%;
    border-radius: 20px;
    background-image: linear-gradient(#161318, #0f0d13);
    border: 1px solid #ffffff12;
    margin: 0 auto;
    padding: 40px 50px;
    box-sizing: border-box;
    max-width: 80%;
    margin-bottom: 5%;
    margin-top: 5%;
    /* Add transition for smooth scaling */
    transition: transform 0.3s ease-in-out;
}

.action-section-container:hover {
    /* Scale up slightly on hover */
    transform: scale(1.01);
    
}

.action-section-left {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.action-section-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #eeeeee;
}

.action-section-text p {
    margin: 0 0 20px 0;
    font-size: 1rem;
    color: #bdbdbd;
}

.action-section-button {
    padding: 0.5rem 1.9rem;
    background-color: #6f00ff;
    border: 1px solid #6f00ff;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    width: 150px;
    text-align: center;
}

.action-section-button:hover {
    background: #6000de;
}

.action-section-right {
    width: 50%;
    padding: 20px;
    display: flex;
    align-items: center;
}

.action-section-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .action-section-container {
        flex-direction: column;
        padding: 10px !important;
        max-width: 90%;
    }

    .action-section-left,
    .action-section-right {
        width: 100%;
    }

    .action-section-right {
        margin-top: 20px;
    }

    .action-section-title {
        font-size: 2rem;
    }
}


.seo-section {
    position: relative;
    margin-top: 5%;
    background: url('/imgz/airdrop99.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
  }
  
  /* Плавный переход снизу вверх — от чёрного к прозрачному */
  .seo-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* можно увеличить для более плавного перехода */
    background: linear-gradient(to top, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  
  .seo-container {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
    position: relative;
    z-index: 3; /* поверх ::after */
  }
  
  
  .seo-left {
    flex: 0 0 40%;
    padding: 20px;
  }
  
  /* Фото с фиолетовой рамкой */
  .seo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgb(113, 1, 241);
    box-sizing: border-box;
  }
  
  .seo-right {
    flex: 0 0 60%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .seo-name {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
  }
  
  .seo-title {
    font-size: 1.5em;
    background: linear-gradient(90deg, rgb(183, 148, 254), blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
  }
  
  .seo-bio p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 1.1em;
    color: #ddd;
  }
  
  @media (max-width: 768px) {
    .seo-section {
        margin-top: 10%;
    }
    .seo-container {
      flex-direction: column;
    }
  
    .seo-left,
    .seo-right {
      flex: 0 0 100%;
      padding: 10px;
    }
  
    .seo-image {
      height: auto;
      max-height: 300px;
      border-radius: 10px;
    }
  
    .seo-name {
      font-size: 2em;
      text-align: center;
    }
  
    .seo-title {
      font-size: 1.2em;
      text-align: center;
      margin-bottom: 20px;
    }
  
    .seo-bio p {
      font-size: 1em;
      line-height: 1.5;
      text-align: justify;
    }
  
    .seo-section {
      padding: 40px 10px;
    }
  }
  
  .team-section {
    background: url(imgz/team.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
  }
  
  .team-container {
    display: flex;
    max-width: 1260px;
    margin: 0 auto;
    min-height: 500px;
    align-items: stretch;
  }
  
  /* Левая часть */
  .team-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
  }
  
  .team-title {
    font-size: 2.8em;
    margin-bottom: 10px;
    color: #ffffff;
    font-weight: 500;
  }
  
  .team-description {
    font-size: 0.8em;
    line-height: 1.5;
    color: #ffffff;
  }
  
  .team-left-bottom {
    text-align: left;
    font-weight: 500;
  }
  
  .team-members-count {
    font-size: 1.7em;
    color: rgb(109, 109, 109);
    font-weight: bold;
  }
  
  /* Правая часть */
  .team-right {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  .team-members-wrapper {
    display: flex;
    height: 80%; /* ограничение по высоте */
    width: 100%;
    gap: 20px;
    align-items: stretch;
  }
  
  /* Участник */
  .team-member {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .team-member img {
    width: 100%;
    height: calc(100% - 50px); /* оставляем место под текст */
    object-fit: cover;
    border-radius: 8px;
  }
  
  .member-info {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .member-name {
    font-size: 1.05em;
    font-weight: bold;
    margin-bottom: 2px;
  }
  
  .member-role {
    font-size: 0.95em;
    color: #aaa;
  }
  

  @media (max-width: 768px) {


    .team-title{
        padding: 0;
        margin-top: 0;
    }
    .team-section{
        padding: 0 20px;
    }
    .team-container {
      flex-direction: column;
    }

    .team-left{
        padding-top: 0;
    }
  
    .team-left,
    .team-right {
      width: 100%;
      padding: 20px 0;
    }
  
    .team-members-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: space-between;
    }

    .team-members-count{
        font-size: 18px;
    }
  
    .team-member {
      flex: 0 0 calc(50% - 8px); /* 2 в ряд с учётом gap */
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .team-member img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }
  
    .member-info {
      padding: 10px 0;
      text-align: center;
    }
  }