* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;
      
}

/* Остальной CSS код остаётся без изменений */


html {
    scroll-behavior: smooth; /* Плавная прокрутка */
}

header {
    width: 100%;
    padding: 0px 50px;
    position: fixed; /* Фиксируем навигацию */
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5a623; /* Более светлый тон для меню */
    border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница */
    z-index: 1000; /* Увеличиваем z-index, чтобы навигация была поверх других элементов */
}

.header-container {
    display: flex; /* Используем flexbox для выравнивания */
    justify-content: space-between; /* Пробел между логотипом и навигацией */
    align-items: center; /* Выравнивание по центру по вертикали */
    padding: 0px; /* Отступы вокруг контейнера */
}


.container {
    display: none;
    padding-bottom: 20px;  
}
  
  .stick {
    width: 80px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: white;
    display: inline-block;
  }
  
  .stick:last-child {
    margin-bottom: 0px;
  }
  
  .stick-1.open {
    animation: stick-1-open .6s ease-out forwards;
  }
  
  .stick-2.open {
    animation: stick-2-open .6s linear forwards;
  }
  
  .stick-3.open {
    animation: stick-3-open .6s linear forwards;
  }
  
  @keyframes stick-1-open {
    0%   {width: 80px;}
    40%  {background-color: #8e44ad; width: 8px; transform: translate(40px, 0px);}
    75%, 80%  {width: 8px; transform: translate(40px, -50px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {background-color: #8e44ad; width: 8px; transform: translate(35px, 46px);}
  }
  
  @keyframes stick-2-open {
    80%  {background-color: white; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #8e44ad; transform: translate(8px, 0px) rotate(40deg);}
  }
  
  @keyframes stick-3-open {
    80%  {background-color: white; transform: translate(0px, 0px) rotate(0deg);}
    100% {background-color: #8e44ad; transform: translate(8px, -23px) rotate(-40deg);}
  }
  
  .stick-1.close {
    width: 8px; 
    transform: translate(27px, 26px);
    animation: stick-1-close .6s ease-out forwards;
  }
  
  .stick-2.close {
    transform: translate(0px, 0px) rotate(40deg);
    animation: stick-2-close .6s ease-out forwards;
  }
  
  .stick-3.close {
    transform: translate(0px, -23px) rotate(-40deg);
    animation: stick-3-close .6s ease-out forwards;
  }
  
  @keyframes stick-1-close {
    0%, 70% {width: 0px;}
    100%    {width: 80px; transform: translate(0, 0);}
  }
  
  @keyframes stick-2-close {
    0%   {background-color: white; width: 80px;}
    20%  {background-color: white; width: 8px; transform: translate(0, 0px) rotate(40deg);}
    40%  {background-color: #8e44ad; width: 0px;}
    65%  {transform: translate(0, -70px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px;}
    100% {width: 80px; transform: translate(0, 0px);}
  }
  
  @keyframes stick-3-close {
    0%   {background-color: #8e44ad; width: 80px;}
    20%  {background-color: #8e44ad; width: 8px; transform: translate(0, -23px) rotate(-40deg);}
    40%  {background-color: white;}
    65%  {transform: translate(0, -93px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 8px;}
    100% {width: 80px; transform: translate(0, 0px);}
  }

body {
    background: linear-gradient(to bottom right, #ffcc00, #ff6600);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease; /* Плавный переход фона */
    height: auto; /* Убираем жесткое ограничение по высоте */
    padding-top: 70px; /* Увеличиваем отступ сверху, чтобы учесть высоту фиксированной навигации */
}

nav {
    display: flex; /* Выравнивание элементов навигации в строку */
    margin-left: 150px;
}

nav a {
    margin: 0 15px; /* Отступы между кнопками (по 15px слева и справа) */
    text-decoration: none; /* Убираем подчеркивание */
    color: white; /* Цвет текста */
    font-size: 25px; /* Размер шрифта */
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

nav a:hover {
    color: #8e44ad; /* Цвет текста при наведении */
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    display: flex; /* Выравнивание логотипа */
    align-items: center; /* Центрируем текст логотипа по вертикали */
}

.logo img {
    width: 130px; /* Ширина логотипа (можно изменить) */
    height: 100px; /* Автоматическая высота для сохранения пропорций */
    margin-right: 10px; /* Отступ справа от логотипа */
}

.token-name {
    margin-left: 10px;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
}

.nav-links {
    display: flex;
    gap: 20px; /* Добавляем расстояние между кнопками */
}

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

.nav-links a {
    text-decoration: none;
    color: #fff;
    padding: 10px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #ffcc00; /* Цвет при наведении */
}

/* Секция Tokenomics */
.tokenomics-section {
    padding: 50px;
    background-color: #f4f4f4; /* Светлый фон для раздела */
    color: #333;
    text-align: center;
}

#tokenomics h2 {
    font-size: 30px; /* Размер заголовка */
    margin-bottom: 20px; /* Отступ снизу у заголовка */
    color: #f5a623; /* Цвет заголовка */
}

.tokenomics-content {
    font-size: 18px;
    line-height: 1.6;
}

.tokenomics-content ul {
    list-style-type: none;
    padding: 0;
}

.tokenomics-content li {
    margin-bottom: 10px;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 50px;
    position: relative; /* Для позиционирования заголовка */
}

#tokenomics {
    width: 70%; /* Уменьшенная ширина секции */
    margin: 50px auto; /* Выравнивание по центру */
    padding: 50px; /* Внутренние отступы */
    border-radius: 20px; /* Закругленные углы */
    text-align: center; /* Текст по центру */
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 600% 600%; /* Размер градиента для плавности */
    animation: gradientAnimation 15s ease infinite; /* Анимация градиента */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

#tokenomics p, #tokenomics li {
    font-size: 20px; /* Размер текста в списке и параграфе */
    color: #f5a623; /* Цвет текста */
}

@keyframes gradientShift {
    0% {
        background-position: 100%; /* Начальное положение фона */
    }
    100% {
        background-position: 0%; /* Конечное положение фона */
    }
}

.hero-title {
    margin-bottom: 20px; /* Отступ снизу для отделения от изображения */
    font-size: 48px; /* Размер шрифта */
    text-align: center; /* Выравнивание по центру */
    background: linear-gradient(90deg, #ffcc00, #fff, #f5a623, #8e44ad, #ff6600, #ffcc00, #ffe4b5, #fff, #f5a623, #8e44ad); /* Градиент */
    -webkit-background-clip: text; /* Клип тексту к фону (для Safari) */
    background-clip: text; /* Клип тексту к фону */
    color: transparent; /* Делаем цвет текста прозрачным, чтобы использовать фон */
    background-size: 300%; /* Увеличиваем размер фона для анимации */
    animation: gradientShift 1s linear infinite; /* Анимация градиента */
    
}

.hero img {
    width: 300px;
    height: auto;
}

h2 {
    margin-top: 20px;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
   
    background: linear-gradient(90deg, #ffcc00, #fff, #f5a623, #8e44ad, #ff6600, #ffcc00, #ffe4b5, #fff, #f5a623, #8e44ad); /* Градиент */
    -webkit-background-clip: text; /* Клип тексту к фону (для Safari) */
    background-clip: text; /* Клип тексту к фону */
    color: transparent; /* Делаем цвет текста прозрачным, чтобы использовать фон */
    background-size: 300%; /* Увеличиваем размер фона для анимации */
    animation: gradientShift 1s linear infinite; /* Анимация градиента */
}

p {
    font-size: 1.7rem;
    margin: 15px 0;
    
}

.cta {
    background-color: #fff;
    color: #ff6600;
    margin-top: 20px;
    padding: 15px 50px;
    border-radius: 30px;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta:hover {
    background-color: #8e44ad;
    color: #fff;
}

.about-content {
    display: flex; /* Используем flexbox для размещения изображения и текста в ряд */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем элементы по горизонтали */
}

.about-image {
    width: 200px; /* Ширина изображения */
    height: 200px; /* Высота пропорциональна */
    margin-right: 20px; /* Отступ справа от изображения */
    border-radius: 10px; /* Скругление углов изображения */
}

#about h2 {
    font-size: 30px; /* Размер заголовка */
    margin-bottom: 20px; /* Отступ снизу у заголовка */
    color: #f5a623;
}

section {
    padding: 100px 20px; /* Общий отступ для всех секций */
    scroll-margin-top: 150px; /* Добавляем отступ при прокрутке */  
}

.how-to-buy-content {
    scroll-margin-top: 180px;
}


/* Секция About с анимацией градиента */
#about {
    width: 70%; /* Уменьшенная ширина секции */
    margin: 50px auto; /* Выравнивание по центру */
    padding: 50px; /* Внутренние отступы */
    border-radius: 20px; /* Закругленные углы */
    text-align: center; /* Текст по центру */
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 600% 600%; /* Размер градиента для плавности */
    animation: gradientAnimation 15s ease infinite; /* Анимация градиента */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Анимация плавного перемещения градиента */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



#about p {
    font-size: 20px; /* Размер текста в секции */
    color: #f5a623;
}

/* Секция Roadmap */
.roadmap-section {
    padding: 50px;
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 600% 600%; /* Размер градиента для плавности */
    animation: gradientAnimation 15s ease infinite; /* Анимация градиента */
    color: #f5a623; /* Цвет текста */
    text-align: center;
    border-radius: 20px; /* Закругление углов */
    margin: 50px auto; /* Центрирование с отступами сверху и снизу */
    width: 70%; /* Ширина аналогична другим секциям */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}


.roadmap-content {
    font-size: 18px;
    line-height: 1.6;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.roadmap-h2 {
    color: #f5a623;
}

.how-to-buy-container {
    display: flex; /* Используем flexbox для выравнивания */
    justify-content: space-between; /* Пространство между элементами */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    margin: 50px; /* Отступы вокруг контейнера */
}

.how-to-buy-section {
    padding: 50px;
    color: #f5a623; /* Цвет текста */
}

.how-to-buy-section h2 {
    height: 40px;
    font-size: 30px; /* Размер заголовка */
    margin-bottom: 20px; /* Отступ снизу у заголовка */
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 300% 300%; /* Увеличиваем размер градиента для анимации */
    animation: gradient-animation 15s ease infinite; /* Анимация градиента */
    color: #f5a623;
    
    border-radius: 20px;
}

.how-to-buy-content {
    display: flex; /* Используем flexbox для расположения контента */
    justify-content: space-between; /* Пробел между текстом и гифкой */
}


.how-to-buy-image {
    flex: 1; /* Занять 1/2 ширины */
}

.how-to-buy-image img {
    width: 100%; /* Ширина изображения */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    border-radius: 10px; /* Скругленные углы изображения */
}




.instructions {
    display: flex;
    flex-direction: column; /* Вертикальное расположение пунктов */
}


.instruction-item {
    margin: 15px 0; /* Отступ между пунктами */
    padding: 15px; /* Внутренние отступы */
    border-radius: 10px; /* Скругление углов */
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 300% 300%; /* Увеличиваем размер градиента для анимации */
    animation: gradient-animation 15s ease infinite; /* Анимация градиента */
}

.instruction-item h3 {
    font-size: 30px;
    background: linear-gradient(90deg, #ffcc00, #fff, #f5a623, #8e44ad, #ff6600, #ffcc00, #ffe4b5, #fff, #f5a623, #8e44ad); /* Градиент */
    -webkit-background-clip: text; /* Клип тексту к фону (для Safari) */
    background-clip: text; /* Клип тексту к фону */
    color: transparent; /* Делаем цвет текста прозрачным, чтобы использовать фон */
    background-size: 300%; /* Увеличиваем размер фона для анимации */
    animation: gradientShift 1s linear infinite; /* Анимация градиента */
    
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.instruction-inner {
    display: flex; /* Расположение текста и изображения в строку */
    align-items: center; /* Выравнивание по центру */
    
}


.instruction-inner p {
    flex: 1; /* Текст занимает оставшееся пространство */
    margin-right: 10px; /* Отступ справа от текста */
    font-size: 23px;
}


.instruction-inner img {
    width: 120px; /* Ширина изображения */
    height: 120px; /* Автоматическая высота для сохранения пропорций */
    border-radius: 80px; /* Скругление углов изображения */
}


.gif-container {
    flex: 0 0 40%; /* Занимает 40% ширины контейнера */
    display: flex;
    justify-content: center; /* Центрируем гифку */
    align-items: center; /* Вертикальное центрирование */
}

.gif-image {
    max-width: 100%; /* Ограничение ширины гифки */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    margin-left: 50px;
    border-radius: 10px; /* Скругление углов гифки */
}

.how-to-buy-instructions {
    flex: 1; /* Занять половину ширины */
    text-align: left; /* Текст выровнен по левому краю */
    font-size: 18px; /* Размер шрифта */
    line-height: 1.6; /* Междустрочный интервал */
}


.contact-section {
    padding: 50px;
    color: #f5a623; /* Цвет текста */
    text-align: center; /* Центрирование текста */
    background: linear-gradient(270deg, #8e44ad , rgb(24, 13, 108), rgb(74, 114, 151), #8e44ad, rgb(57, 17, 64), blue);
    background-size: 600% 600%; /* Размер градиента для плавности */
    animation: gradientAnimation 15s ease infinite; /* Анимация градиента */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
    border-radius: 20px;
    margin-bottom: 40px;
}

.contact-section h2 {
    color: #f5a623;

}

.social-icons {
    display: flex; /* Используем flexbox для расположения иконок */
    justify-content: center; /* Центрируем иконки */
    margin: 20px 0; /* Отступы */
}

.social-icons a {
    margin: 0 10px; /* Отступ между иконками */
    display: inline-block; /* Обеспечим возможность применения трансформаций */
    transition: transform 0.3s ease; /* Плавный переход для трансформации */
}


.social-icons a:hover {
    transform: scale(1.2); /* Увеличение иконки при наведении */
}

.social-icons img {
    width: 70px; /* Ширина иконок (можно изменить) */
    height: 70px; /* Высота иконок */
}

.contact-gif {
    max-width: 100%; /* Ограничение ширины гифки */
    height: 100%; /* Автоматическая высота для сохранения пропорций */
    
}



.footer {
    background-color: #8e44ad; /* Новый цвет фона для подвала */
    color: #fff; /* Цвет текста в подвале */
    text-align: center;
    padding: 10px 0; /* Отступы */
    position: relative; /* Для корректного отображения */
    bottom: 0; /* Чтобы подвал был внизу страницы */
    width: 100%; /* Занимает всю ширину */
}


@media (max-width: 768px) {

    body {
        background: #ffcc00; /* Пример однотонного фона для мобильных */
        overflow-x: hidden; /* Скрыть горизонтальную прокрутку */
        width: 100;
    }

    body.no-scroll {
    overflow: hidden; /* Скрываем прокрутку на body */
}


    header {
        display: flex;
        top: 0;
    }

    .how-to-buy-content {
        display: inline;
    }

    .about-content{
        display: inline;
        
    }

    

    .instruction-inner {
        display: inline;
    }

    .gif-image {
        margin-left: 0px;
    }

    .container {
    width: 80px;
    height: 80px;
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 20px; /* Можешь настроить позиционирование по своему вкусу */
    right: 20px;
    cursor: pointer;
    display: flex;
    }

    .nav {
        display: none; /* Скрываем навигацию по умолчанию на мобильных */
        flex-direction: column; /* Устанавливаем элементы в столбик */
        position: absolute; /* Делаем позицию абсолютной для мобильного меню */
        top: 101px; /* Отступ сверху */
        left: 0;
        right: 0;
        margin-left: 0px;
        width: 100%; /* Задаем ширину 100% */
        background-color: white; /* Цвет фона навигации */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        z-index: 1000; /* Чтобы меню было поверх других элементов */
        transition: opacity 3s linear, visibility 0.3s ease; /* Плавный переход для opacity и visibility */

    }

    .nav a {
        padding: 15px; /* Добавляем отступы для пунктов меню */
        text-align: center; /* Центрируем текст */
        color: white;
        background-color: #f5a623;
        margin-left: 0px;
        margin-right: 0;
        
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Добавляем разделительные линии */
    }

    #navbarToggleExternalContent {
        display: none; /* Скрыть меню по умолчанию */
    }

    .navbar-toggler.collapsed + .collapse {
        display: block; /* Показать меню при нажатии */
    }

    .nav a:hover {
        background-color: rgba(0, 0, 0, 0.1); /* Добавляем эффект при наведении */
    }

    .nav.active {
        display: inline-block; /* Показываем меню в виде flex на мобильных */
        margin: auto;

    }

    .ul-nav {
        display: flex; /* Устанавливаем flex-контейнер для горизонтального размещения */
        flex-direction: column; /* Вертикальное расположение элементов */
    }


    .contact-section {
        width: 80%;
    }


    
}