/* FUTURE IDO */
.ido-list {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px 10px;
    margin-top: 80px;
}

.ido-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;

    max-width: 1367px;
    width: 100%;
    padding: 32px;

    /* скло як у попередніх */
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(0, 0, 0, 0.25) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}


.ido-list-top {
    display: flex;
    justify-content: space-between;
}

.ido-list-top-right {
    display: flex;
    gap: 32px;
    align-items: center;
}

.ido-list-title {
    color: #FFF;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 39.6px;
    letter-spacing: -1px;
}

.filter {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter p {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 39.6px;
    letter-spacing: -1px;
}

.wrap {
    height: 100%;
    display: grid;
    place-items: center;
    /* по центру екрана, можна прибрати */
}

.search {
    position: relative;
    width: 337px;
    /* підженеш під свій макет */
    max-width: 90vw;
}

.search input {
    width: 305px;
    box-sizing: border-box;
    /* height: 40px; */
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #AEAEAE;
    outline: none;
    color: #f3f3f3;
    font-size: 18px;
    letter-spacing: .2px;
    background: unset;
}

.search input::placeholder {
    color: #AEAEAE;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 39.6px;
    letter-spacing: -1px;
}



.search img {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: .95;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4));

}

.search.sm input {
    height: 46px;
    font-size: 16px;
}


input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.ido-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;

}

.ido-table-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #FFF;
}

.ido-table-top p {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 39.6px;
    letter-spacing: -1px;
    width: 25%;

}

.ido-list-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #444;
    padding: 24px 0px;
    text-decoration: none;
}

.ido-name {
    display: flex;
    gap: 12px;
    width: 25%;
}

.ido-title {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 39.6px;
    letter-spacing: -1px;
    /* width: 25%; */
}

.ido-ath {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 39.6px;
    text-align: center;
    width: 25%;
}

.ido-tvl {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 39.6px;
    text-align: center;
    width: 25%;
}

.ido-raise {
    color: #FFF;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 39.6px;
    text-align: right;
    width: 25%;
}

.th-ath,
.th-tvl {
    text-align: center;
}

.th-raise {
    text-align: right;
}







/* IDO-page */

.ido-page-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px 10px;
    margin-top: 60px;
}

.ido-page-wrapper {
    max-width: 1367px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px;




    border-radius: 24px;
    margin: 0 auto;


    /* скло як у попередніх */
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(0, 0, 0, 0.25) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

}

.ido-content-top-bar {
    margin-bottom: 24px;
}

.ido-content-top-bar a {
    display: flex;
    gap: 10px;


    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    text-decoration: none;

    color: #AEAEAE;
}

.ido-content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ido-content-top-left img {
    width: 260px;
    border-radius: 24px;
}

.ido-content-top-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.ido-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ido-links h1 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    color: #FFFFFF;
}

.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* відстань між іконками */
    max-width: 176px;
    /* приблизна ширина для 5 іконок у ряд */
    margin: 0 auto;
}

.links a {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.links a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.links img {
    width: 24px;
    height: 24px;
    filter: invert(1);
    /* якщо фон темний — робить іконки світлими */
    opacity: 0.9;
    filter: brightness(0) invert(1);
}

.ido-links button {
    /* Frame 28 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;

    /* width: 188px; */
    border: none;
    height: 56px;

    background: #A5FF6E;
    border-radius: 9999px;


    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 40px;


    color: #141414;





}

.ido-content-top-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 305px;
    width: 100%;
}

.ido-content-top-right div p:first-child {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 125%;
    color: #FFFFFF;
}

.ido-content-top-right div p:last-child {

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 125%;


    color: #AEAEAE;



}

.ido-gallery {
    display: flex;
    gap: 12px;
    margin: 15px 0px;
}

.ido-gallery img {
    width: 209px;
    height: 209px;
    border-radius: 24px;
    object-fit: cover;


}

.ido-main-content {
    margin-top: 65px;


    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 125%;


    color: #FFFFFF;




}

























/* FFFFFFFFFFFFF */
.main-title {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 80px;
    padding: 0px 10px;
}

.main-title-inner {
    display: flex;
    justify-content: center;
    max-width: 1175px;
    flex-direction: column;
    width: 100%;
}

.main-title-inner h1 {
    font-weight: 700;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 110%;

    text-align: center;
    letter-spacing: 9px;
    text-transform: uppercase;

    background: linear-gradient(180deg, #FFFFFF 0%, #BABABA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

}

.benefits {
    max-width: 718px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: auto;
    margin-top: 32px;
}

.benefit {
    display: flex;
    flex-direction: column;
}

.benefit-green {
    color: #A5FF6E;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
}

.benefit-gray {
    color: #AEAEAE;
    font-weight: 500;
    font-size: 18px;
}

/* Swiper */
.ticker {
    margin-top: 125px;
    border-top: 1px solid #A5FF6E;
    border-bottom: 1px solid #A5FF6E;
    padding: 15px 0;
}

.swiper {
    width: 100%;
    padding: 8px 6px;
}

.swiper-wrapper {
    align-items: center;
}

.ticker-slide {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    padding: 4px 54px;
    position: relative;
    border-right: 1px solid #A5FF6E;
    gap: 7px;
}

.ticker-slide+.ticker-slide {
    border-left: 1px solid #244224;
}

.token-logo {
    /* width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #213918;
    outline: 1px solid rgba(117, 255, 132, .25);
    box-shadow: 0 0 0 3px rgba(117, 255, 132, .04) inset;
    flex: 0 0 34px; */
}

.token-logo svg {
    width: 22px;
    height: 22px;
    fill: #101810;
    stroke: #101810;
}

.token-name {
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    color: #d9f7d9;
}

.token-delta {
    margin-left: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.token-delta.positive {
    color: #75ff84;
}

.token-delta.negative {
    color: #ff8585;
}

@media (max-width:700px) {
    .ticker-slide {
        gap: 10px;
        padding: 8px 14px;
    }

    .token-name {
        font-size: 14px;
    }

    .token-delta {
        font-size: 14px;
    }

    .token-logo {
        width: 30px;
        height: 30px;
    }

    .token-logo svg {
        width: 18px;
        height: 18px;
    }
}

.swiper-button-prev,
.swiper-button-next {
    color: #9bb99b;
    transition: .2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #d9f7d9;
}

@media (max-width:900px) {

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
}

@media(min-width:768px) {
    .mobile-list-item {
        display: none;
    }

    .ido-list-top-right-mobile {
        display: none;
    }
}

@media(max-width:768px) {
    .ido-categories-inner {
        flex-direction: column;
    }

    .main-title-inner h1 {
        font-size: 40px;
    }

    .benefits {
        flex-wrap: wrap;
        justify-content: center;
        gap:25px;
    }

    .token-logo {
        width: 33.7px;
        height: 33.7px;
    }

    .token-logo img {
        width: 33.7px;
        height: 33.7px;
    }

    .ido-category {
        padding: 24px 32px;
    }

    .ido-category p {
        font-size: 24px;
    }

    .ido-categories {
        margin-top: 55px;
    }

    .ticker {
        margin-top: 50px;
    }

    .ido-list-top {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 12px;
    }

    .ido-table-top {
        display: none;
    }

    .ido-list-wrapper {
        gap: 0px;
    }

    .pc-list-item {
        display: none;
    }

    .ido-name {
        width: unset;
        align-items: center;

    }

    .ido-name img {
        width: 51px;
        height: 51px;
    }

    .ido-title {
        width: unset;
        display: flex;
        align-items: center;
        min-width: 120px;
    }

    .ido-ath {
        width: unset;
        text-align: right;
    }


    .ido-raise {
        width: unset;
        text-align: right;
    }

    .ido-list-top-right {
        display: none;
    }

    .ido-list-top-right-mobile {
        display: flex;
        flex-direction: column;
    }

    .list-top-right-bar-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0px;
        border-bottom: 1px solid white;
        margin-bottom: 16px;
        ;
    }

    .list-top-right-bar-mobile p {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 40px;
        color: #FFFFFF;

    }

    .filter p {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 40px;
        color: #FFFFFF;
    }

    .search input {
        width: 100%;
    }

    /* IDO-page */
    .ido-page-wrapper {
        padding: 15px;
    }

    .ido-content-top {
        flex-direction: column;
    }

    .ido-links h1 {
        text-align: center;
    }

    .ido-content-top-left {
        flex-direction: column;
        margin-bottom: 50px;
        ;
    }

    .project-main-img {
        width: 100% !important;
        height: 336px !important;
    }

    .ido-links button {
        gap: unset;
        margin-top: 0px !important;
    }

    .ido-content-top-right {
        max-width: unset;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}