/*-----------------
    Our clients
-----------------*/
.our_clients
{
    .block_head
    {
        &.row
        {
            .col
            {
                width: 826px;
            }


            .desc
            {
                width: 620px;

                font-family: var(--font_family_tertiary);
            }
        }
    }


    .grid_row
    {
        --items_per_line: 2;
        --gap_x: var(--inner_gap_s);
        --gap_y: var(--inner_gap_s);
    }


    .item_wrap
    {
        position: relative;

        overflow: hidden;

        padding-top: 45px;


        .bg
        {
            position: absolute;
            z-index: 1;
            inset: 44px 0 0 0;

            overflow: hidden;

            pointer-events: none;

            border: 1px solid var(--border_color);
            border-radius: var(--border_radius);
            background: var(--light_color);


            &:before
            {
                position: absolute;
                top: 0;
                right: 0;

                display: block;

                width: 381px;
                height: 454px;

                content: '';
                transform: translateX(52.493%);
                pointer-events: none;

                border-radius: 454px;
                background: rgba(59, 191, 168, .20);

                filter: blur(100px);
            }
        }
    }


    .item
    {
        position: relative;
        z-index: 3;

        display: flex;
        align-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: space-between;

        min-height: 420px;

        border-radius: var(--border_radius);


        .title_wrap
        {
            position: absolute;
            top: -45px;
            left: 0;

            width: fit-content;
            max-width: calc(100% - 48px);
            padding-block: var(--inner_gap_l) 0;
            padding-inline: var(--inner_gap_l);

            border-top: 1px solid var(--border_color);
            border-left: 1px solid var(--border_color);
            border-top-left-radius: var(--border_radius);
            background: var(--light_color);


            &:after
            {
                position: absolute;
                top: -1px;
                left: 100%;

                display: block;

                width: 45px;
                margin-left: -10px;

                content: '';

                background: url(../../../images/bg_our_clients_corner.png) 0 0/ 100% 100% no-repeat;

                aspect-ratio: 1 / 1;
            }
        }


        .title
        {
            display: flex;
            align-content: stretch;
            align-items: stretch;
            flex-wrap: wrap;
            justify-content: flex-start;

            width: fit-content;

            line-height: 135%;

            border: 1px solid var(--border_color);
            border-radius: var(--border_radius_max);
            background: var(--bg_grey);


            span
            {
                padding-block: 6px;
                padding-inline: var(--inner_gap_s);
            }


            .number
            {
                margin: -1px;

                color: var(--light_color);
                border-radius: var(--border_radius_max);
                background: var(--secondary_color);
            }


            .mob
            {
                display: none;
            }
        }


        .info
        {
            position: relative;
            z-index: 3;

            display: flex;
            flex-direction: column;
            gap: var(--inner_gap_xs);

            width: calc(100% - 169px);
            padding-block: 34px var(--inner_gap_l);
            padding-inline: var(--inner_gap_l);
        }


        .name
        {
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title_xs);
            font-weight: 600;
            line-height: 110%;

            color: var(--secondary_color);
        }


        .desc
        {
            font-size: var(--font_size_l);
            line-height: 135%;

            color: var(--secondary_color);


            &.color2
            {
                color: var(--grey_color_strong);
            }
        }


        .link
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: fit-content;
            height: 60px;
            margin-top: auto;
            padding-inline: var(--inner_gap_xl);

            font-size: var(--font_size_l);
            font-weight: 500;
            line-height: 130%;
            letter-spacing: -.36px;

            transition: .2s linear;
            text-decoration: none;

            color: #1e3b43;
            border-radius: var(--border_radius_max);
            background: var(--primary_color);


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    transform: scale(1.02);

                    background: #e7f7bb;
                }
            }
        }


        .image
        {
            position: relative;

            display: block;
            overflow: hidden;

            width: 169px;
            max-width: 100%;

            border-radius: var(--border_radius);
            background: var(--secondary_color);


            &:after
            {
                position: absolute;
                top: 0;
                right: 0;

                display: block;

                width: 231px;
                height: 362px;

                content: '';
                transform: translate(var(--inner_gap_l), -84.254%);
                pointer-events: none;

                border-radius: 362px;
                background: rgba(59, 191, 168, .20);

                filter: blur(100px);
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .our_clients
    {
        .block_head
        {
            .desc
            {
                width: 480px;
            }
        }


        .grid_row
        {
            --items_per_line: 1;
        }


        .item
        {
            min-height: 380px;


            .info
            {
                gap: var(--inner_gap_s);

                padding-block: var(--block_padding_l) var(--inner_gap_l);
            }


            .name
            {
                font-size: var(--font_size_title_s);
            }


            .desc
            {
                font-size: var(--font_size);
            }


            .link
            {
                height: 56px;
                padding-inline: var(--inner_gap_l);

                font-size: var(--font_size);
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .our_clients
    {
        .block_head
        {
            &.row
            {
                .desc
                {
                    width: 324px;
                }
            }
        }
    }
}



@media (max-width: 767px)
{
    .our_clients
    {
        .item_wrap
        {
            .bg
            {
                &:before
                {
                    display: none;
                }
            }
        }


        .item
        {
            .title_wrap
            {
                padding-block: var(--inner_gap) var(--inner_gap_xxs);
                padding-inline: var(--inner_gap);
            }


            .title
            {
                font-size: var(--font_size_xs);


                &:has(.mob)
                {
                    .number + span
                    {
                        display: none;
                    }


                    .mob
                    {
                        display: block;
                    }
                }


                span
                {
                    padding-block: 5px;
                    padding-inline: var(--inner_gap_xs);
                }
            }


            .info
            {
                width: 100%;
                padding-inline: var(--inner_gap);


                .desc
                {
                    font-size: var(--font_size_s);
                }


                .link
                {
                    width: 100%;
                }
            }


            .image
            {
                width: 100%;
                height: 174px;
            }
        }
    }
}