:root {
    --platforms-card-bg-color: linear-gradient(90deg, #20338A 0%, #000B3C 100%);
    --platforms-bg: url('/images/HomeImages/IndexImages/PlatformsSectionImages/PlatformsBg.png');
    --platform-card-border: 1px solid #003D7B;
    --platform-section-gradients:
    /* Верхній градієнт */
    linear-gradient(180deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%),
    /* Лівий градієнт */
    linear-gradient(90deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%),
    /* Правий градієнт */
    linear-gradient(270deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%),
    /* Нижній градієнт */
    linear-gradient(0deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%);

    --platform-section-gradients2: linear-gradient(180deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%), /* Верхній */
        linear-gradient(0deg, #020B1F 0%, rgba(2, 11, 31, 0) 100%); /* Нижній */

}

#platforms-section{
    position:relative;
    background-image: var(--platforms-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:766px;
    width:100%;
}

.platforms-head{
    z-index:2;
    position:relative;
}

.platforms-head h3 {
    color: var(--main-page-text-color);
    font-size: 2rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom: 2.25rem;
}

.platforms-head p{
    color:var(--main-page-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    vertical-align: middle;
    font-size: 1.25rem;
}


/*#platforms-section {
    position: relative;
    background-image: var(--platforms-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 766px;
}*/
@media (min-width: 768px) {
    #platforms-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background-image: var(--platform-section-gradients);
        background-size: 100% 250px, 8.125rem 100%, 8.125rem 100%, 100% 50px;
        background-position: top, left, right, bottom;
        background-repeat: no-repeat;
    }
}


.platforms-block{
    margin-top:2rem;
}

.platforms-block #monitor{
    margin-left: 14.0625rem;
}

#platforms-cards .row{
    margin-bottom: 1.25rem;
}

.platform-card {
    border-radius: 12px;
    border: var(--platform-card-border);
    padding: 20px;
    gap: 10px;
/*    border-color: var(--platform-card-border);*/
    background: var(--platforms-card-bg-color);
    width: 18.75rem;
    max-height: 5rem;
}

    .platform-card span {
        font-size: 2rem;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
    }

.kucoin {
    color: #23AF91;
    margin-top: 4.125rem;
    margin-left: 18.625rem;
}

.binance{
    color: #EFB508;
    margin-left: 8rem;
}

.trading-view {
    color: var(--main-page-text-color);
    margin-left: 1.25rem;
}

.bybit{
    color: var(--main-page-text-color);
}

.kraken {
    color: #7133F5;
    margin-left: 1.25rem;
}

.bitget {
    color: #0CE7AF;
    margin-left: 9.9375rem;
}

.okx{
    color: var(--main-page-text-color);
    margin-left: 1.25rem;
}

.gate{
    color: var(--main-page-text-color);
    margin-left: 20rem;
}
/*#platforms-section::before,
#platforms-section::after {
    content: "";
    position: absolute;
    top: 0;
    background: linear-gradient(270deg, rgba(2, 11, 31, 0) 0%, #020B1F 48%);
     z-index: 1;
}

    #platforms-section::before{
        left:0;
        width:8.125rem;
        height: 100%;
    }

    #platforms-section::after {
        width: 8.125rem;
        right: 0;
        transform: scaleX(-1);
        height:100%;
    }*/

@media (max-width: 768px){
    #platforms-section{
        height: 579px;
    }

    .platforms-block #monitor {
        margin-left: 0;
    }

    .platforms-block{
        display: flex;
        justify-content: center;
        margin-top: 1.25rem;
    }

    #monitor{
        width:353px;
        height: 350px;
    }

    #platforms-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        /* Додаємо два градієнти через кому */
        background-image: var(--platform-section-gradients);

        /* Налаштовуємо їх розміри та позиції */
        background-size: 100% 250px, 100% 50px;
        background-position: top, bottom;
        background-repeat: no-repeat;
    }

    .platforms-head {
        z-index: 2;
        position: relative;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

        .platforms-head h3 {
            color: var(--main-page-text-color);
            font-size: 1.25rem;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .platforms-head p {
            color: var(--main-page-text-color);
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            /*vertical-align: middle;*/
            font-size: 1rem;
            /*text-align: center;*/
            text-wrap: balance;
        }

    #platforms-cards .row {
        margin-bottom: 0;
    }

    .platform-card {
        border-radius: 12px;
        border: 1px solid var(--platform-card-border);
        padding: 20px;
        gap: 10px;
/*        border-color: var(--platform-card-border);*/
        background: var(--platforms-card-bg-color);
        width: 200px !important;
        max-height: 56px;
        flex-shrink: 0;
        margin-right: 12px;
    }

        .platform-card span {
            font-size: 1.25rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
        }

        .platform-card svg{
            width: 24px;
            height: 24px;
        }

    .kucoin {
        color: #23AF91;
        margin-top: 0;
        margin-left: 0;
    }

    .binance {
        color: #EFB508;
        margin-left: 0;
    }

    .trading-view {
        color: var(--main-page-text-color);
        margin-left: 0;
    }

    .bybit {
        color: var(--main-page-text-color);
    }

    .kraken {
        color: #7133F5;
        margin-left: 0;
    }

    .bitget {
        color: #0CE7AF;
        margin-left: 0;
    }

    .okx {
        color: var(--main-page-text-color);
        margin-left: 0;
    }

    .gate {
        color: var(--main-page-text-color);
        margin-left: 0;
    }

    .marquee-container {
        overflow: hidden; 
        white-space: nowrap;
        width: 100%;
    }

    .marquee-content {
        display: flex; /* Це дозволить розмістити його в один рядок */
        animation: scroll 30s linear infinite; /* Застосування анімації */
    }

        .marquee-content:hover {
            animation-play-state: paused; /* Пауза анімації при наведенні курсору */
        }

    @keyframes scroll {
        0% {
            transform: translateX(0); /* Початкова позиція */
        }

        100% {
            transform: translateX(-423%);
        }
    }
}