/* Загальні стилі для секції Tokenomics */
.progresstokenomics {
	background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    border-width: 2px 4px 4px 2px; /* Верх: 2px, Право: 4px, Низ: 4px, Ліво: 2px */
    border-color: black;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px; /* Закруглені кути */
    box-sizing: border-box; /* Включає рамку у розміри елементу */
    width: 100%; /* Займає всю ширину на всіх пристроях */
}

/* Стилі для заголовків (назви секцій, наприклад "Prelaunch Allocation") */
.progresstokenomics .title {
    font-family: "Short Stack", cursive;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    flex: 1;
}

/* Стилі для відсотків */
.progresstokenomics .percentage {
    font-family: "Short Stack", cursive;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: right;
    flex: 1;

    display: flex; /* Вирівнюємо текст і відсотки */
    align-items: center; /* Вирівнюємо по центру вертикально */
    justify-content: flex-end; /* Вирівнюємо по правій стороні */
    white-space: nowrap; /* Забороняємо перенос тексту */
}

/* Маленький текст для "(5% At Launch)" */
.small-text {
	color: #333; /* color text*/
    font-size: 1rem; /* Зменшення розміру тексту */
    margin-right: 5px; /* Відступ перед відсотками */
    display: inline-block;
    white-space: nowrap; /* Забороняємо перенос тексту */
}

/* Кольори для процентів */
.percentage-02 { color: #658c46; }
.percentage-03 { color: #98ce68; }
.percentage-04 { color: #2a488a; }
.percentage-05 { color: #2491de; }
.percentage-06 { color: #aeeffe; }
.percentage-07 { color: #ebc634; }
.percentage-08 { color: #f7aa42; }
.percentage-09 { color: #dc7738; }

/* Стилі для найменших пристроїв (до 575.98px) */
@media (max-width: 575.98px) {
    .progresstokenomics {
        flex-direction: row !important; /* Горизонтальне вирівнювання */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px;
    }

    .progresstokenomics .title {
        font-size: 0.9rem;
        margin-bottom: 0; /* Забираємо зайвий відступ */
        flex: 1;
    }

    .progresstokenomics .percentage {
        font-size: 1.1rem;
        text-align: right !important;
        margin-top: 0;
        flex: 0;
    }

    .small-text {
        font-size: 0.7rem;
        margin-left: 5px;
    }
}

/* Стилі для пристроїв до 767.98px */
@media (max-width: 767.98px) {
    .progresstokenomics {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px;
    }

    .progresstokenomics .title {
        font-size: 1rem;
        margin-bottom: 0;
        flex: 1;
    }

    .progresstokenomics .percentage {
        font-size: 1.2rem;
        text-align: right !important;
        margin-top: 0;
        flex: 0;
        white-space: nowrap; /* Забороняємо перенос тексту */
    }

    .small-text {
        font-size: 0.8rem;
        margin-left: 5px;
        white-space: nowrap; /* Забороняємо перенос тексту */
    }
}

/* Стилі для пристроїв до 991.98px */
@media (max-width: 991.98px) {
    .progresstokenomics .title {
        font-size: 1.1rem;
    }

    .progresstokenomics .percentage {
        font-size: 1.3rem;
    }

    .small-text {
        font-size: 0.9rem;
    }
}

/* Стилі для пристроїв до 1199.98px */
@media (max-width: 1199.98px) {
    .progresstokenomics .title {
        font-size: 1.15rem;
    }

    .progresstokenomics .percentage {
        font-size: 1.35rem;
    }

    .small-text {
        font-size: 1rem;
    }
}

/* Стилі для пристроїв до 1439.98px */
@media (max-width: 1439.98px) {
    .progresstokenomics .title {
        font-size: 1.2rem;
    }

    .progresstokenomics .percentage {
        font-size: 1.4rem;
    }

    .small-text {
        font-size: 0.9rem;
    }
}