section.cooperation-models {
    padding: 120px 0 60px;
    position: relative;

    &.background-dark {
        color: #DADADA;

        .item-title,
        h2 {
            color: #FFFFFF;
        }
    }

    &.shine:before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        max-width: 1200px;
        height: 1110px;
        background: url(../../img/cooperation-models-shine.png) right top / contain no-repeat;
        pointer-events: none;
    }

    > .container {
        position: relative;
    }

    .btn {
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        display: inline-block;
    }

    .item-title {
        font-family: "Benzin Bold", sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.6em;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 64px;
    }

    .items {
        margin-top: 64px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-left: 100px;

        .item {
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 29px 48px 27px 103px;
            border-radius: 16px;
            background: rgba(217, 217, 217, 0.1);
            position: relative;
            min-height: 200px;

            &:after {
                content: "";
                position: absolute;
                top: calc(50% - 73px);
                left: -73px;
                width: 146px;
                height: 146px;
                background: #000000;
                border-radius: 50%;
                z-index: 1;
            }

            .number {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 126px;
                height: 126px;
                color: #F9371C;
                font-family: "Benzin Bold", sans-serif;
                font-size: 56px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.25em;
                letter-spacing: 1.5px;
                position: absolute;
                top: calc(50% - 56px);
                left: -63px;
                z-index: 10;

                &:after {
                    content: "";
                    width: 126px;
                    height: 126px;
                    position: absolute;
                    top: -7px;
                    left: 0;
                    background: url("../../img/ellipse-bg.png") center center / contain no-repeat;
                    animation: 6s linear cooperation_models_animate infinite;
                }
            }
        }
    }

    .item-description {
        font-size: 16px;
        margin-top: 4px;
    }
}


@keyframes cooperation_models_animate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* MEDIA */

@media only screen and (max-width: 768px) {
    section.cooperation-models {
        padding: 80px 0;

        h2 {
            margin-bottom: 8px;
        }

        .title-row {
            flex-wrap: wrap;
            gap: 32px;
        }

        .items {
            margin-top: 116px;
            padding: 0;
            gap: 116px;

            .item:after {
                top: -73px;
                left: 0;
            }

            .item {
                padding: 88px 20px 30px 20px;

                .number {
                    top: -57px;
                    left: 10px;
                }
            }
        }
    }
}

/* ( < 768 ) */


@media only screen and (max-width: 567px) {
    section.cooperation-models.shine:before {
        top: 410px;
        background: url(../../img/cooperation-models-mobile-shine.png.png) right top / cover no-repeat;
    }

    section.cooperation-models .item-title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 1px;
    }

    section.cooperation-models .item-description {
        line-height: 20px;
    }

    section.cooperation-models .button-wrap {
        width: 100%;
    } 
}