.mt-200 {
    margin-top: 200px;
}

.mt-140 {
    margin-top: 140px;

    @media (max-width: 900px) {
        margin-top: 60px;
    }
}

.mt-100 {
    margin-top: 100px;

    @media (max-width: 900px) {
        margin-top: 40px;
    }
}

.mt-80 {
    margin-top: 80px;

    @media (max-width: 900px) {
        margin-top: 30px;
    }
}

.mt-60 {
    margin-top: 60px;

    @media (max-width: 900px) {
        margin-top: 30px;
    }
}

.mt-40 {
    margin-top: 40px;
}

.mt-20 {
    margin-top: 20px;
}

.container {
    @media (max-width: 500px) {
        padding: 0 15px !important;
    }
}

.gridblock__title {

    @media (max-width: 767px) {
        font-size: 30px !important;
    }

    @media (max-width: 550px) {
        font-size: 24px !important;
    }
}

.gridblock__text {

    @media (max-width: 1000px) {
        padding-right: 0 !important;
    }

    h4 {
        font-weight: 500;
        font-size: 36px;
        line-height: 1.3;
        color: #201D26;

        @media (max-width: 900px) {
            font-size: 26px;
        }

        @media (max-width: 767px) {
            font-size: 24px;
        }

        @media (max-width: 550px) {
            font-size: 22px;
        }
    }

    p, li {
        font-weight: 400;
        font-size: 20px;
        line-height: 1.5;
        color: #59575F;

        @media (max-width: 500px) {
            font-size: 18px;
        }

        span {
            font-weight: 500;
        }
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;

        li {
            margin: 0;
        }
    }

    ol {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        list-style-type: none;
        counter-reset: num;

        li {
            position: relative;
            margin: 0;
            padding-left: 15px;

            &::before {
                content: counter(num) '.';
                counter-increment: num;
                display: inline-block;
                position: absolute;
                top: 0px;
                left: -26px;
                width: 20px;
                color: #3773ea;
                font-weight: 700;
                font-size: 20px;
                line-height: 1.5;
                text-align: right;
            }
        }
    }

}

.case-sec-top {

    .case-sec-top__title {
        font-weight: 500;
        font-size: 48px;
        line-height: 1.3;
        max-width: 1050px;

        @media (max-width: 900px) {
            font-size: 36px;
        }

        @media (max-width: 767px) {
            font-size: 32px;
        }
    }

    .case-sec-top__description {
        margin: 30px 0 0 0;
        font-weight: 400;
        font-size: 26px;
        line-height: 1.5;
        color: #59575F;
        opacity: 0.8;
    }

    .case-sec-top__banner {
        margin-top: 80px;

        @media (max-width: 900px) {
            margin-top: 60px;
        }

        img {
            display: flex;
            object-fit: cover;
            width: 100%;
            height: 100%;
            min-height: 350px;
        }
    }
}

.case-sec-grid {
    @media (max-width: 767px) {
        margin-top: 20px !important;
    }
}

.case-sec-step1 {

    .case-sec-step1__footer {

        .gridblock__title {
            font-weight: 400;
            font-size: 20px;
            line-height: 1.5;
            color: #59575F;
        }

        .case-sec-step1__footer-grid {
            display: grid;
            justify-content: space-between;
            grid-template-columns: 130px 130px 1fr;
            gap: 60px;
            align-items: center;
            margin: 0 0 40px 0;

            @media (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }

        .case-sec-step1__footer-grid-item {
            display: flex;
            gap: 12px;
            align-items: center;
            font-weight: 500;
            font-size: 22px;
            line-height: 1.35;

            span {
                color: #3773ea;
            }

            p {
                color: #201D26;
            }
        }
    }
}

.case-sec-images {
    background-color: #F4F5F6;
    overflow: hidden;
    position: relative;


    .case-sec-images__body {
        padding: 100px 0 170px 0;
        display: grid;
        align-items: center;
        grid-template-columns: .85fr 1fr;
        gap: 50px;

        @media (max-width: 1340px) {
            padding: 60px 0;
            gap: 30px;
        }
        @media (max-width: 900px) {
            padding: 30px 0;
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 15px;
        }
    }

    img {
        object-fit: contain;

    }

    .case-sec-images__left {
        position: relative;

        img {

        }

        /*img {
            position: absolute;
            top: 80px;
            height: auto;
            width: 100%;
            max-width: 841px;
            object-fit: contain;
        }*/

    }

    .case-sec-images__right {
        display: flex;
        flex-direction: column;
        gap: 15px;

        @media (max-width: 900px) {
           flex-direction: row;
        }

        img:nth-child(1) {
            position: absolute;
            top: -130px;
            right: -40px;
            height: auto;
            max-width: 740px;
            width: 100%;
            object-fit: contain;

            @media (max-width: 1340px) {
                position: relative;
                top: auto;
                right: auto;
            }
            @media (max-width: 900px) {
                display: none;
            }
        }

        img:nth-child(2) {
            max-width: 600px;
            width: 100%;
            object-fit: contain;
            transform: translateY(350px);

            @media (max-width: 1340px) {
                transform: none;
            }
        }
    }
}

.case-quote {
    background-color: #f2f4f7;
    border-radius: 12px;

    .case-quote__body {
        display: grid;
        gap: 30px;
        justify-content: space-between;
        grid-template-columns: .5fr 1fr;

        @media (max-width: 1000px) {
            grid-template-columns: 1fr;
        }
    }

    .case-quote__image {
        position: relative;

        @media (max-width: 1000px) {
            display: none;
        }

        img {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: flex;
            max-width: 217px;
            pointer-events: none;
            object-fit: contain;
            border-radius: 30px 30px 0 0;
        }
    }

    .case-quote__about {
        position: relative;
        padding: 75px 20px;
        display: flex;
        gap: 10px;

        @media (max-width: 1000px) {
            padding: 35px 20px;
            justify-content: center;
        }

        .case-quote__mark {
            display: flex;

            &:nth-child(1) {
                margin: 0 20px 0 0;
            }

            &.case-quote__mark-end {
                margin: auto 0 0 0;
            }
        }


    }

    .case-quote__text {
        max-width: 610px;
        width: 100%;


        p {
            font-weight: 400;
            font-size: 20px;
            line-height: 1.5;
            color: #59575F;

            @media (max-width: 900px) {
                font-size: 18px;
            }

            @media (max-width: 767px) {
                font-size: 16px;
            }

            @media (max-width: 500px) {
                font-size: 15px;
            }

            span {
                font-weight: 500;
            }
        }
    }

    .case-quote__mark {

        svg {
        }
    }
}

.case-sec__banner-tablet {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 84.3%;
        background-color: #4c5865;
        z-index: -1;
    }

    img {
        display: flex;
    }
}

.case-sec__banner-stocks {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);

    .case-sec__banner-stocks-body {
        padding: 100px 0;

        img {
            display: flex;
            border-radius: 20px;
            overflow: hidden;
        }
    }

    .case-sec__banner-stocks-bg {

        img {
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
    }
}

.case-sec__mediaplan {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 0;
    background-color: #F4F5F6;

    .case-sec__mediaplan-body {
        background-color: #ffffff;
        border-radius: 30px;
        overflow: hidden;
        padding: 45px 55px;

        @media (max-width: 1000px) {
            padding: 0;
            border-radius: 0;
            background-color: transparent;
        }
    }

    .case-sec__mediaplan__title {
        font-weight: 700;
        font-size: 26px;
        line-height: 1.5;
        text-transform: uppercase;
        color: #4c5865;
        margin: 0 0 20px;
    }

    .case-sec__mediaplan-content {
        overflow-x: auto;
        border-radius: 30px;

        @media (max-width: 1000px) {
            box-shadow: none !important;
        }
    }

    .case-sec__mediaplan-table {
        position: relative;
        border-radius: 30px;
        overflow: hidden;
        border-collapse: collapse;
        border-spacing: 0;
        height: auto;
        white-space: nowrap;
        width: 100%;
        min-width: 969px;

        thead {
            background-color: #4c5865;
            color: #fff;
        }

        tbody {
            background-color: #fff;

            tr {
                border-bottom: 1px solid #e5e9f0;
            }
        }

        th {
            pointer-events: none;
            padding: 14px 12px;
            background: #4e6982;
            color: #fff;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.22;

            &:not(:last-child) {
                border-right: 1px solid #6974802b;
            }
        }

        td {
            padding: 14px;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.22;
            color: #59575F;
            text-align: center;

            &:not(:last-child) {
                border-right: 1px solid #6974802b;
            }
        }

        tr {

            td:nth-child(1) {
                width: 25%;
                text-align: left;

                @media (max-width: 767px) {
                    white-space: wrap !important;
                }
            }

            td:nth-child(2) {
                width: 14.34%;

                @media (max-width: 767px) {
                    white-space: wrap !important;
                }
            }

            td:nth-child(3) {
                width: 14.24%;
            }

            td:nth-child(4) {
                width: 9.16%;
            }

            td:nth-child(5) {
                width: 7.91%;
                background: rgba(204, 255, 186, 0.2);
            }

            td:nth-child(6) {
                width: 10.72%;
                background: rgba(204, 255, 186, 0.2);
            }

            td:nth-child(7) {
                width: 10.3%;
                background: rgba(204, 255, 186, 0.2);
            }

            td:nth-child(8) {
                width: 8.33%;
                background: rgba(204, 255, 186, 0.2);
            }

        }

        .blur {
            pointer-events: none;
            user-select: none;
            filter: blur(10px) !important;
        }

        .last-row {

            td {
                font-weight: 700;
            }
        }
    }
}

.case-sec-step2 {
    margin-bottom: 100px;

    img {
        pointer-events: none;
    }

    .gridblock__row {
        grid-template-columns: 400px 1fr;
    }

    .case-quote__body {
        display: block;
        padding: 30px;
    }

    .case-quote__about {
        padding: 0;
    }

    .case-quote__text {
        max-width: none;
    }

    .case-quote__mark {
        margin: 0 !important;
    }
}

.case-sec__banner-advertising {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 60px 0;
    background-color: #f4f5f6;

    @media (max-width: 767px) {
        padding: 30px 0;
    }

    .case-sec__banner-advertising-body {

        img {
            display: flex;
            border-radius: 20px;
            overflow: hidden;
        }
    }
}

.case-sec-step2__swiper-service {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;

    .swiper-service {
        position: relative;
    }
}

.result-grid {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;

    .result-grid__item {
        flex: 1 0 31%;
        display: flex;
        flex-direction: column;
        padding: 24px;
        border-radius: 20px;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .result-grid__text {
        font-weight: 500;
        font-size: 18px;
        line-height: 1.4;
        color: #201D26;
    }

    .result-grid__value {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: auto 0 0 0;
        font-weight: 700;
        font-size: 36px;
        color: #201D26;
        white-space: nowrap;

        @media (max-width: 900px) {
            font-size: 24px;
        }

        .arrow-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #2ecb3c;
            padding: 10px;
            border-radius: 8px;

            &.down {
                background-color: #81ea44;

                svg {
                    transform: rotate(180deg);
                }
            }
        }
    }
}

.case-sec-step2__mockups {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    /*padding: 100px 0;*/

    .case-sec-step2__mockups-body {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 160px;
        padding: 0 25px;

        @media (max-width: 1500px) {
            gap: 50px;
        }
    }

    .case-sec-step2__mockups-left {
        margin: auto 0 0 0;
        display: flex;
        gap: 40px;
        overflow: hidden;

        img {
            max-width: 277px;
            object-fit: contain;

            &:nth-child(1) {
                margin: 0 0 100px 0;

                @media (max-width: 1500px) {
                    margin: 0 0 30px 0;
                }
            }

            &:nth-child(2) {
                transform: translateY(225px);

                @media (max-width: 1500px) {
                    display: none;
                }
            }
        }
    }

    .case-sec-step2__mockups-right {

        img {
            transform: translateY(-84px);

            @media (max-width: 1500px) {
                transform: translateY(-25px);
            }
        }
    }

    .case-sec-step2__mockups-bg {

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
    }
}

@media (max-width: 1250px) {
    .gridblock__row {
        -ms-grid-columns: 200px 120px 1fr;
        grid-template-columns: 200px 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 1000px) {
    .gridblock__row {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr !important;
        grid-gap: 0;
    }
}