/*-------------------
    Global styles
-------------------*/
:root
{
    --bg: #fff;
    --bg_grey: #f7f7f7;
    --cont_padding: 24px;
    --cont_padding_double: calc(var(--cont_padding) * 2);
    --cont_padding_half: calc(var(--cont_padding) * .5);
    --content_width: 1282px;
    --content_width_w: 1416px;
    --sidebar_width: 254px;
    --scroll_width: 17px;
    --custom_scroll_width: 10px;
    --custom_scroll_height: 10px;
    --custom_scroll_border_radius: 0;
    --primary_color: #ff3954;
    --dark_color: #3a3a3a;
    --light_color: #fff;
    --primary_gradient: linear-gradient(93deg, #ea0c2a 8.78%, var(--primary_color) 51.26%, #ea0c2a 107.12%);
    --font_size_xl: 20px;
    --font_size_l: 18px;
    --font_size: 16px;
    --font_size_s: 14px;
    --font_size_xs: 12px;
    --font_size_title_xl: 56px;
    --font_size_title_l: 40px;
    --font_size_title: 36px;
    --font_size_title_s: 30px;
    --font_size_title_xs: 26px;
    --font_family: 'Inter', 'Fallback-Sans', 'Arial', sans-serif;
    --font_family2: 'Bounded', 'Arial', sans-serif;
    --block_head_offset_l: 48px;
    --block_head_offset: 40px;
    --block_padding: 60px;
    --inner_gap_xxl: 36px;
    --inner_gap_xl: 28px;
    --inner_gap_l: 24px;
    --inner_gap: 20px;
    --inner_gap_s: 16px;
    --inner_gap_xs: 12px;
    --inner_gap_xxs: 8px;
    --inner_gap_xxxs: 4px;
    --border_radius_max: 100px;
    --border_radius_xl: 72px;
    --border_radius_l: 36px;
    --border_radius: 30px;
    --border_radius_s: 24px;
    --border_radius_xs: 18px;
    --zero_px: calc(0 * 1px);
}


::selection
{
    color: var(--light_color);
    background: var(--primary_color);
}

::-moz-selection
{
    color: var(--light_color);
    background: var(--primary_color);
}



html
{
    height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height:         fill-available;
}


html.custom_scroll ::-webkit-scrollbar
{
    width: var(--custom_scroll_width);
    height: var(--custom_scroll_height);

    border-radius: var(--custom_scroll_border_radius);
    background-color: var(--bg);
}


html.custom_scroll ::-webkit-scrollbar-thumb
{
    border-radius: var(--custom_scroll_border_radius);
    background-color: var(--primary_color);
}


body
{
    height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height:         fill-available;

    font-family: var(--font_family);
    font-size: var(--font_size);
    font-weight: 400;
    line-height: normal;

    color: var(--dark_color);
}


body.lock
{
    overflow: clip;
}


button
{
    display: inline-block;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;

    cursor: pointer;
    vertical-align: top;
    letter-spacing: inherit;

    color: inherit;
    border: none;
    background: none;
}


.wrap
{
    position: relative;

    display: flex;
    overflow: clip;
    flex-direction: column;

    min-height: 100%;

    z-index: 5;

    background: var(--bg);
}


.wrap > .main
{
    position: relative;

    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}


.cont
{
    width: 100%;
    max-width: calc(var(--content_width) + var(--cont_padding_double));
    margin-inline: auto;
    padding-inline: var(--cont_padding);
}



.content_row
{
    & > .cont
    {
        display: flex;
        align-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .content
    {
        position: relative;

        display: flex;
        flex-direction: column;

        width: calc(100% - var(--sidebar_width) - 72px);
    }
}



.modal_btn > *
{
    pointer-events: none;
}



img.cover
{
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    object-fit: cover;
}



/*--------------
    Fancybox
--------------*/
.fancybox__container
{
    transition: .2s linear;

    --fancybox-backdrop-bg: rgba(58, 58, 58, .5);
    --f-close-button-width: 50px;
    --f-close-button-height: 50px;
    --f-close-border-radius: 50%;
    --f-close-button-color: #bbb;
    --f-close-button-hover-color: #8f8f8f;
    --f-close-button-svg-width: 14px;
    --f-close-button-svg-height: 14px;
    --f-close-button-svg-stroke-width: 1;
    --f-close-button-bg: #f3f3f3;
    --f-close-button-hover-bg: #f3f3f3;
    --f-close-button-active-bg: #f3f3f3;
}


.fancybox__slide,
.fancybox__slide.has-html,
.fancybox__slide.has-close-btn
{
    padding: var(--inner_gap);
}


.f-button.is-close-button
{
    top: 10px;
    right: 10px;
}



/*--------------
    Grid row
--------------*/
.grid_row
{
    display: flex;
    align-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;

    margin-bottom: calc(var(--gap_y) * -1);
    margin-left: calc(var(--gap_x) * -1);

    --items_per_line: 3;
    --gap_x: var(--inner_gap);
    --gap_y: var(--inner_gap);
}


.grid_row.centered
{
    justify-content: center;
}


.grid_row > *
{
    width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x));
    margin-bottom: var(--gap_y);
    margin-left: var(--gap_x);
}



/*----------------
    Pagination
----------------*/
.pagination
{
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;

    margin-top: var(--cont_padding_double);

    gap: var(--inner_gap_xxl);


    .more_btn
    {
        width: 340px;
        max-width: 100%;
        height: 60px;
        padding-inline: var(--cont_padding_double);

        font-size: calc(var(--font_size_l) - 1px);
        font-weight: 600;
        line-height: calc(100% + 7px);

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


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

        font-size: calc(var(--font_size_l) - 1px);
        line-height: calc(100% + 7px);

        color: rgba(39, 39, 39, .70);

        gap: var(--inner_gap_xxl);


        a
        {
            display: block;

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

            color: currentColor;


            .icon
            {
                display: block;

                width: 6px;
                height: 10px;
            }


            &.prev,
            &.next
            {
                opacity: .5;
                color: #686868;
            }


            &.prev
            {
                .icon
                {
                    transform: rotate(180deg);
                }
            }


            &:hover,
            &.active
            {
                opacity: 1;
                color: var(--primary_color);
            }
        }
    }
}



/*----------
    Tabs
----------*/
.tabs
{
    display: flex;
    align-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-between;

    margin-bottom: var(--cont_padding_double);
    padding-inline: var(--inner_gap_xxl);

    border-bottom: 1px solid #ececec;

    gap: var(--inner_gap_xxl);


    .btn
    {
        position: relative;

        padding-bottom: var(--inner_gap_l);

        font-size: var(--font_size_xl);
        font-weight: 600;
        line-height: calc(100% + 8px);

        transition: .2s linear;

        opacity: .4;
        color: #272727;


        &:after
        {
            position: absolute;
            right: 0;
            bottom: -1px;
            left: 0;

            width: 0;
            height: 1px;
            margin: auto;

            content: '';
            transition: width .3s linear;

            background: var(--primary_color);
        }


        &:hover,
        &.active
        {
            opacity: 1;


            &:after
            {
                width: 100%;
            }
        }
    }
}


.tab_content
{
    position: relative;

    visibility: hidden;
    overflow: hidden;

    height: 0;

    pointer-events: none;

    opacity: 0;


    &.active
    {
        visibility: visible;
        overflow: visible;

        height: auto;

        transition: opacity .5s linear;
        pointer-events: auto;

        opacity: 1;
    }
}



/*---------------
    Accordion
---------------*/
.accordion_item
{
    position: relative;


    .head
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        min-height: 95px;
        padding-block: var(--inner_gap_s);
        padding-inline: var(--inner_gap_xxl)  var(--inner_gap_l);

        cursor: pointer;
        transition: background .2s linear;

        border-radius: var(--border_radius_l);

        gap: var(--inner_gap);


        .title
        {
            width: 526px;
            max-width: calc(100% - 42px - var(--inner_gap));

            font-size: calc(var(--font_size_xl) - 1px);
            font-weight: 500;
            line-height: calc(100% + 10px);

            color: #353535;
        }


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

            width: 42px;

            transition: box-shadow .2s linear;

            color: var(--light_color);
            border-radius: 14px;
            background: var(--primary_color);

            aspect-ratio: 1 / 1;


            svg
            {
                display: block;

                width: 13px;

                transition: transform .2s linear;

                aspect-ratio: 1 / 1;
            }
        }


        &:hover
        {
            background: rgba(217, 217, 217, .15);


            .icon
            {
                box-shadow: 0 7px 24px 0 rgba(255, 0, 0, .30);
            }
        }
    }


    .data
    {
        display: none;

        padding-block: var(--inner_gap_xxs) var(--inner_gap);
        padding-inline: var(--inner_gap_xxl)  var(--inner_gap_l);
    }


    &.active
    {
        .head
        {
            .icon
            {
                svg
                {
                    transform: rotate(180deg);
                }
            }
        }
    }
}


.accordion_item + .accordion_item
{
    margin-top: var(--inner_gap_s);
    padding-top: var(--inner_gap_s);


    &:before
    {
        position: absolute;
        top: 0;
        left: var(--inner_gap_xxl);

        display: block;

        width: 959px;
        max-width: calc(100% - var(--inner_gap_xxl));
        height: 1px;

        content: '';
        pointer-events: none;

        background: #f1f1f1;
    }
}



/*------------
    Header
------------*/
header
{
    position: relative;

    padding-top: var(--inner_gap_xs);

    z-index: 9;


    .data
    {
        width: 1302px;
        max-width: calc(100% - 20px);
        margin-inline: auto;

        border-radius: var(--border_radius);
        background: var(--bg);
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
    }


    .top
    {
        padding-block: var(--inner_gap_xs);

        border-bottom: 1px solid rgba(0, 0, 0, .1);

        --cont_padding: var(--inner_gap_xs);
    }


    .bottom
    {
        padding-block: var(--inner_gap);

        --cont_padding: 55px;
    }


    .cont
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }


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

        font-weight: 700;
        line-height: calc(100% + 2px);

        text-decoration: none;

        color: currentColor;

        gap: var(--inner_gap_xxs);


        img
        {
            display: block;

            width: 36px;

            aspect-ratio: 1 / 1;
        }
    }


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

        font-size: var(--font_size_s);
        font-weight: 500;
        line-height: 1;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 10px;
            height: 15px;

            color: #d3d3d3;
        }
    }


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

        font-size: var(--font_size_s);
        font-weight: 500;
        line-height: 1;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 11px;
            height: 8px;

            color: #d3d3d3;
        }


        a
        {
            white-space: nowrap;
            text-decoration: none;

            color: currentColor;

            transition: 0.2s;

            &:hover{
                color: var(--primary_color);
            }
        }
    }


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

        font-size: var(--font_size_s);
        font-weight: 500;
        line-height: 1;

        gap: 6px;


        .icon
        {
            display: block;

            width: 13px;
            height: 13px;

            color: #d3d3d3;
        }


        a
        {
            white-space: nowrap;
            text-decoration: none;

            color: currentColor;
            transition: 0.2s;

            &:hover{
                color: var(--primary_color);
            }
        }


        .callback_btn
        {
            margin-left: var(--inner_gap_xxs);

            color: var(--primary_color);
            border-bottom: 1px solid;

            &:hover{
                border-bottom:0px;
            }
        }
    }


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


        a
        {
            position: relative;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: 45px;

            z-index: 3;
            text-decoration: none;

            color: #c0c0c0;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 0 5px 24px 0 rgba(0, 0, 0, .10);

            aspect-ratio: 1 / 1;
        }


        a + a
        {
            margin-left: -8px;
        }


        .icon
        {
            display: block;
        }


        .tg_link
        {
            .icon
            {
                transition: 0.2s;
                width: 17px;
                height: 15px;
            }

            &:hover{
                .icon
                {
                    color: #2DBAFF;
                }
            }            
        }


        .vk_link
        {
            z-index: 2;


            .icon
            {
                transition: 0.2s;
                width: 22px;
                height: 13px;
            }

            &:hover{
                .icon
                {
                    color: #0077FF;
                }
            }   
        }


        .max_link
        {
            z-index: 1;


            .icon
            {
                transition: 0.2s;
                width: 18px;
                height: 18px;
            }

            &:hover{
                .icon
                {
                    color: #6B17D1;
                }
            }   
        }
    }


    .get_example_btn
    {
        height: 45px;
        padding-inline: var(--inner_gap_l);

        font-size: var(--font_size_s);
        font-weight: 600;
        line-height: 1;

        color: var(--light_color);
        border-radius: var(--border_radius_max);
        background: var(--primary_color);
        
        transition: linear 0.2s;

        &:hover{
            transform: scale(1.05);
        }
    }


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

        gap: 50px;


        .item
        {
            position: relative;


            & > a
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                font-size: var(--font_size_s);
                line-height: 1;

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

                opacity: .5;
                color: currentColor;

                gap: var(--inner_gap_xxxs);


                .arr
                {
                    display: block;

                    width: 6px;
                    height: 4px;
                    margin-top: 2px;
                }


                &.active
                {
                    opacity: 1;
                }
            }


            &:hover > a
            {
                opacity: 1;
            }

            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    .sub
                    {
                        visibility: visible;

                        pointer-events: auto;

                        opacity: 1;
                    }
                }
            }
        }

        .sub
        {
            position: absolute;
            top: 100%;
            left: -25px;

            visibility: hidden;

            min-width: 100%;
            margin-top: 30px;
            padding: 5px;

            z-index: 9;
            transition: .2s linear;
            pointer-events: none;

            opacity: 0;
            border-radius: 15px;
            background: var(--light_color);
            box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .10);

            list-style: none;


            &.show
            {
                visibility: visible;

                pointer-events: auto;

                opacity: 1;
            }


            &:before
            {
                position: absolute;
                bottom: 100%;
                left: 0;

                display: block;

                width: 100%;
                height: 30px;

                content: '';
            }


            a
            {
                display: block;

                padding-block: 10px;
                padding-inline: 20px;

                font-size: 14px;

                transition: .2s linear;
                white-space: nowrap;
                text-decoration: none;

                color: currentColor;
                border-radius: 10px;
                opacity: 0.5;


                &:hover,
                &.active
                {
                    background: #f7f7f7;
                    opacity: 1;
                }
            }
        }
    }


    .cart_btn
    {
        font-size: var(--font_size_s);
        font-weight: 600;
        line-height: 1;


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

            gap: var(--inner_gap_xxxs);

            transition: 0.2s;

            &:hover{
                color: var(--primary_color);
            }
        }


        .count
        {
            min-width: 15px;
            height: 15px;

            font-size: 10px;
            font-weight: 700;
            line-height: calc(100% + 4px);

            text-align: center;

            color: var(--light_color);
            border-radius: 5px;
            background: var(--primary_color);
        }
    }
}



/*-----------------
    Mob. header
-----------------*/
.mob_header
{
    position: sticky;
    top: 0;

    display: none;

    width: 100%;
    padding: 10px 10px 0;

    z-index: 101;


    .data
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        padding: 15px;

        border-radius: 20px;
        background: var(--light_color);
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .10);

        gap: var(--inner_gap_xs);
    }


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

        margin-right: auto;

        font-weight: 700;
        line-height: calc(100% + 2px);

        text-decoration: none;

        color: currentColor;

        gap: var(--inner_gap_xxs);


        img
        {
            display: block;

            width: 36px;

            aspect-ratio: 1 / 1;
        }
    }


    .phone_link
    {
        position: relative;

        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;

        width: 45px;

        text-decoration: none;

        color: #b7b7b7;
        border-radius: 50%;
        background: #f4f4f4;

        aspect-ratio: 1 / 1;


        .icon
        {
            display: block;

            width: 22px;

            aspect-ratio: 1 / 1;
        }
    }


    .cart_btn
    {
        position: relative;

        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;

        width: 45px;

        color: #b7b7b7;
        border-radius: 50%;
        background: #f4f4f4;

        aspect-ratio: 1 / 1;


        .icon
        {
            display: block;

            width: 22px;

            aspect-ratio: 1 / 1;
        }


        span
        {
            position: absolute;
            top: -2px;
            right: -2px;

            min-width: 15px;
            height: 15px;

            font-size: 10px;
            font-weight: 700;
            line-height: 15px;

            text-align: center;
            white-space: nowrap;

            color: var(--light_color);
            border-radius: 5px;
            background: var(--primary_color);
            box-shadow: 0 0 0 3px var(--light_color);
        }
    }


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

        width: 45px;

        color: var(--light_color);
        border-radius: 50%;
        background: var(--primary_color);

        aspect-ratio: 1 / 1;


        .icon
        {
            display: block;

            width: 19px;
            height: 16px;
        }


        .icon + .icon
        {
            display: none;

            width: 16px;
            height: 16px;
        }


        &.active
        {
            .icon
            {
                display: none;
            }


            .icon + .icon
            {
                display: block;
            }
        }
    }
}



/*-----------------
    Mob. header
-----------------*/
.mob_menu
{
    position: fixed;
    top: 0;
    left: 0;

    display: none;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height:         fill-available;
    padding: 10px;

    z-index: 100;


    &.show
    {
        display: flex;
    }


    .data
    {
        display: flex;
        flex-direction: column;

        height: 100%;
        padding-top: 75px;

        border-radius: 20px;
        background: #fff;
        box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .10);
    }


    .scroll
    {
        overflow: auto;

        height: 100%;
        min-height: -moz-available;
        min-height: -webkit-fill-available;
        min-height:         fill-available;
        padding-block: 25px 40px;
        padding-inline: var(--inner_gap_l);

        overscroll-behavior-y: contain;
    }


    .btns
    {
        display: flex;
        flex-direction: column;

        width: 270px;
        max-width: 100%;
        margin-inline: auto;

        gap: 10px;


        .btn
        {
            width: 100%;
            height: 55px;
            padding-inline: var(--inner_gap_l);

            font-size: var(--font_size_s);
            font-weight: 500;

            color: rgba(58, 58, 58, .5);
            border-radius: var(--border_radius_s);
            background: #f4f4f4;


            &.primary
            {
                color: var(--light_color);
                background: var(--primary_color);
            }
        }
    }


    .menu
    {
        display: flex;
        flex-direction: column;

        margin-top: 25px;

        gap: 20px;


        .item
        {
            position: relative;


            & > a
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                font-size: calc(var(--font_size_l) - 1px);

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

                color: currentColor;

                gap: var(--inner_gap_xxxs);


                .arr
                {
                    display: block;

                    width: 6px;
                    height: 4px;
                    margin-top: 2px;
                }


                &.active
                {
                    opacity: 1;
                }
            }


            &:hover > a
            {
                color: var(--primary_color);
            }
        }

        .sub
        {
            display: none;

            padding: 0;
            text-align: center;
            list-style: none;

            margin-top: 20px;

            li + li{
                margin-top: 10px;
            }
            a
            {
                display: block;

                font-size: calc(var(--font_size_l) - 1px);

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

                opacity: .6;
                color: #292929;

                gap: var(--inner_gap_xxxs);


                &.active
                {
                    opacity: 1;
                    color: var(--primary_color);
                }
            }
        }
    }


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

        margin-top: 30px;

        gap: 15px;


        a
        {
            position: relative;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: 55px;

            z-index: 3;
            text-decoration: none;

            color: #c0c0c0;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 0 5px 24px 0 rgba(0, 0, 0, .10);

            aspect-ratio: 1 / 1;
        }


        .icon
        {
            display: block;
        }


        .tg_link
        {
            .icon
            {
                width: 21px;
                height: 19px;
            }
        }


        .vk_link
        {
            .icon
            {
                width: 25px;
                height: 15px;
            }
        }


        .max_link
        {
            .icon
            {
                width: 20px;
                height: 20px;
            }
        }
    }


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

        margin-top: var(--inner_gap_xxl);

        font-size: calc(var(--font_size_l) - 1px);
        font-weight: 500;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 17px;
            height: 17px;

            color: #d3d3d3;
        }


        a
        {
            white-space: nowrap;
            text-decoration: none;

            color: currentColor;
        }
    }


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

        margin-top: var(--inner_gap_xl);

        font-size: calc(var(--font_size_l) - 1px);
        font-weight: 500;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 15px;
            height: 12px;

            color: #d3d3d3;
        }


        a
        {
            white-space: nowrap;
            text-decoration: none;

            color: currentColor;
        }
    }


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

        margin-top: var(--inner_gap_xl);

        font-size: calc(var(--font_size_l) - 1px);
        font-weight: 500;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 15px;
            height: 19px;

            color: #d3d3d3;
        }
    }
}



/*-------------
    Sidebar
-------------*/
aside
{
    position: relative;

    display: flex;
    flex-direction: column;

    width: var(--sidebar_width);
    max-width: 100%;

    z-index: 3;

    gap: var(--inner_gap_xs);


    .block
    {
        padding: var(--cont_padding_double);

        border-radius: var(--border_radius_l);
        background: var(--bg_grey);


        .head
        {
            display: flex;
            flex-direction: column;

            margin-bottom: var(--inner_gap_l);

            gap: var(--inner_gap_xxs);


            .title
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_title_xs);
                font-weight: 700;
                line-height: calc(100% + 14px);

                text-transform: uppercase;

                opacity: .3;
                color: #303030;
            }


            .desc
            {
                font-size: calc(var(--font_size_l) - 1px);
                line-height: calc(100% + 7px);

                opacity: .6;
                color: rgba(45, 45, 45, .70);
            }
        }
    }


    .links
    {
        display: flex;
        flex-direction: column;

        gap: var(--inner_gap_s);


        a
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 7px);

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

            opacity: .5;
            color: #2d2d2d;

            gap: var(--inner_gap_s);


            .icon
            {
                display: block;

                width: 5px;
                height: 9px;
            }


            &:hover
            {
                opacity: 1;
            }
        }
    }


    .subscribe
    {
        --form_border_color: var(--light_color);
        --form_border_color_focus: var(--light_color);
        --form_bg_color: var(--light_color);


        .submit_btn
        {
            background: #8f8f8f;
        }
    }
}



/*---------------
    Page head
---------------*/
.page_head
{
    margin-bottom: var(--inner_gap_l);
    padding-top: 40px;


    .cont
    {
        display: flex;
        flex-direction: column;

        gap: var(--inner_gap_xl);
    }


    .row
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;

        gap: var(--inner_gap_l);
    }


    .breadcrumbs
    {
        font-weight: 500;
        line-height: calc(100% + 12px);

        color: #2d2d2d;


        a
        {
            transition: color .2s linear;
            text-decoration: none;

            color: rgba(45, 45, 45, .70);


            &:hover
            {
                color: var(--dark_color);
            }
        }


        .sep
        {
            margin-inline: 2px;

            color: rgba(45, 45, 45, .70);
        }
    }



    .page_title
    {
        font-family: var(--font_family2);
        font-size: var(--font_size_title);
        font-weight: 700;
        line-height: calc(100% + 12px);

        text-transform: uppercase;

        color: #303030;
    }


    .date
    {
        font-size: var(--font_size_s);
        font-weight: 500;
        line-height: calc(100% + 8px);

        white-space: nowrap;

        color: #c5c5c5;
    }


    .callback_btn
    {
        height: 60px;
        padding-inline: var(--inner_gap_xxl);

        font-size: calc(var(--font_size_l) - 1px);
        font-weight: 600;
        line-height: 1;

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

        transition: linear 0.2s;

        &:hover
        {
            transform: scale(1.05);
        }
    }
}



/*----------------
    Block head
----------------*/
.block_head
{
    display: flex;
    flex-direction: column;

    margin-bottom: var(--block_head_offset);

    gap: var(--inner_gap);


    &.row
    {
        align-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }


    &.center
    {
        align-content: center;
        align-items: center;

        text-align: center;
    }


    .pre_title
    {
        font-family: var(--font_family2);
        font-size: 24px;
        font-weight: 300;
        line-height: 1;

        text-transform: uppercase;

        opacity: .4;
        color: #353535;
    }


    .title
    {
        font-family: var(--font_family2);
        font-size: var(--font_size_title_l);
        font-weight: 600;
        line-height: calc(100% + 20px);

        text-transform: uppercase;

        color: #353535;


        &.default
        {
            font-size: var(--font_size_title);
        }


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


        span
        {
            color: var(--primary_color);


            &.thin
            {
                font-weight: 300;

                color: currentColor;
            }
        }


        mark
        {
            margin: -8px;
            padding: 8px;

            font-weight: 300;

            background: #fff3f3;
        }
    }


    .desc
    {
        font-size: var(--font_size_l);
        line-height: calc(100% + 7px);

        color: #545454;
    }


    .all_link
    {
        align-self: center;


        a
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: flex-start;

            font-weight: 500;
            line-height: calc(100% + 5px);

            transition: opacity .2s linear;
            white-space: nowrap;
            text-decoration: none;

            opacity: .4;
            color: #424242;

            gap: var(--inner_gap_xxxs);


            .icon
            {
                display: block;

                width: 8px;
                margin-top: 1px;

                aspect-ratio: 1 / 1;
            }


            &:hover
            {
                opacity: 1;
            }
        }
    }
}



/*------------------
    Form elements
------------------*/
.form
{
    --form_border_color: transparent;
    --form_border_color_focus: transparent;
    --form_border_radius: var(--border_radius_xs);
    --form_error_color: var(--primary_color);
    --form_bg_color: rgba(243, 243, 247, .5);
    --form_placeholder_color: rgba(50, 50, 50, .3);
    --form_columns_gap: var(--inner_gap_xs);
    --form_line_gap: var(--inner_gap_s);
    --form_input_height: 60px;
    --form_input_padding_inline: var(--inner_gap_l);
    --form_textarea_height: 132px;
    --form_textarea_padding_block: var(--inner_gap_s);
    --form_textarea_padding_inline: var(--inner_gap_l);


    ::-webkit-input-placeholder
    {
        color: var(--form_placeholder_color);
    }

    :-moz-placeholder
    {
        color: var(--form_placeholder_color);
    }

    ::-moz-placeholder
    {
        opacity: 1;
        color: var(--form_placeholder_color);
    }

    :-ms-input-placeholder
    {
        color: var(--form_placeholder_color);
    }


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

        margin-left: calc(var(--form_columns_gap) * -1);


        & > *
        {
            width: calc(50% - var(--form_columns_gap));
            margin-left: var(--form_columns_gap);
        }
    }


    .line
    {
        margin-bottom: var(--form_line_gap);
    }


    .field
    {
        position: relative;
    }


    .field + .field
    {
        margin-top: var(--inner_gap_s);
    }


    .input
    {
        display: block;

        width: 100%;
        height: var(--form_input_height);
        padding-inline: var(--form_input_padding_inline);

        font-family: var(--font_family);
        font-size: var(--font_size);

        transition: border-color .2s linear;

        color: var(--dark_color);
        border: 1px solid var(--form_border_color);
        border-radius: var(--form_border_radius);
        background: var(--form_bg_color);


        &:-webkit-autofill
        {
            -webkit-box-shadow: inset 0 0 0 50px var(--form_bg_color) !important;
        }


        &:focus
        {
            border-color: var(--form_border_color_focus);
        }


        &.error
        {
            border-color: var(--form_error_color);
        }
    }


    textarea
    {
        display: block;

        width: 100%;
        height: var(--form_textarea_height);
        padding-block: var(--form_textarea_padding_block);
        padding-inline: var(--form_textarea_padding_inline);

        font-family: var(--font_family);
        font-size: var(--font_size);
        line-height: calc(100% + 8px);

        resize: none;
        transition: border-color .2s linear;

        color: var(--dark_color);
        border: 1px solid var(--form_border_color);
        border-radius: var(--form_border_radius);
        background: var(--form_bg_color);

        --custom_scroll_width: 4px;
        --custom_scroll_height: 4px;


        &:focus
        {
            border-color: var(--form_border_color_focus);
        }


        &.error
        {
            border-color: var(--form_error_color);
        }
    }


    select
    {
        display: none;


        & ~ .arr
        {
            position: absolute;
            top: 0;
            right: var(--inner_gap_xl);
            bottom: 0;

            display: block;

            width: 9px;
            height: 6px;
            margin-block: auto;

            transition: transform .2s linear;
            pointer-events: none;

            color: #bdbdbf;
        }


        &.selected + .nice-select
        {
            & > .current,
            .multiple-options
            {
                color: var(--dark_color);
            }
        }
    }


    .nice-select
    {
        position: relative;

        cursor: pointer;


        & > .current,
        .multiple-options
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;

            height: var(--form_input_height);
            padding-inline: var(--form_input_padding_inline);

            font-family: var(--font_family);
            font-size: var(--font_size);

            transition: border-color .2s linear;

            color: var(--form_placeholder_color);
            border: 1px solid var(--form_border_color);
            border-radius: var(--form_border_radius);
            background: var(--form_bg_color);
        }


        & > .current
        {
            span
            {
                overflow: hidden;

                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }


        .nice-select-dropdown
        {
            position: absolute;
            top: 100%;
            right: 0;

            visibility: hidden;
            overflow: hidden;

            min-width: 100%;
            margin-top: var(--inner_gap_xxxs);
            padding: var(--inner_gap_xs);

            z-index: 9;
            transition: .2s linear;
            transform: none;

            opacity: 0;
            border: 1px solid var(--form_border_color);
            border-radius: var(--form_border_radius);
            background: #f9f9f9;
        }


        .list
        {
            .option
            {
                display: block;

                padding-block: var(--inner_gap_xxs);
                padding-inline: var(--inner_gap_xs);

                list-style-type: none;

                font-size: var(--font_size_s);

                cursor: pointer;
                transition: color .2s linear;

                color: var(--dark_color);


                &:hover,
                &.selected
                {
                    color: var(--primary_color);
                }


                &:empty
                {
                    display: none;
                }
            }
        }


        &.open ~ .arr
        {
            transform: rotate(180deg);
        }


        &.open
        {
            .nice-select-dropdown
            {
                visibility: visible;

                transform: none;

                opacity: 1;
            }
        }
    }


    .error_text
    {
        margin-top: var(--inner_gap_xxxs);

        font-size: var(--font_size_s);

        color: var(--form_error_color);
    }


    .checkbox
    {
        position: relative;

        display: block;

        min-height: 20px;
        padding-left: 23px;

        font-size: 12px;
        line-height: calc(100% + 7px);

        cursor: pointer;

        color: var(--primary_color);


        input
        {
            display: none;


            &:checked ~ .check
            {
                .icon
                {
                    opacity: 1;
                }


                & + *
                {
                    color: rgba(50, 50, 50, .9);
                }
            }
        }


        .check
        {
            position: absolute;
            top: .5lh;
            left: 0;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: 16px;
            height: 16px;

            transition: .2s linear;
            transform: translateY(-50%);

            border: 1px solid #dedede;
            border-radius: 6px;
            background: rgba(247, 247, 247, .5);


            .icon
            {
                display: block;

                width: 8px;
                height: 6px;

                transition: opacity .2s linear;

                opacity: 0;
            }


            & + *
            {
                transition: color .2s linear;

                color: rgba(50, 50, 50, .4);
            }
        }


        a
        {
            transition: color .2s linear;

            color: currentColor;

            text-decoration-thickness: 1px;


            &:hover
            {
                color: var(--dark_color);
            }
        }
    }


    .submit
    {
        padding-top: var(--inner_gap_xxxs);
    }


    .submit_btn
    {
        width: 100%;
        height: var(--form_input_height);
        padding-inline: var(--inner_gap_l);

        font-weight: 600;
        line-height: calc(100% + 13px);

        color: var(--light_color);
        border-radius: var(--border_radius_s);
        background: var(--primary_color);

        transition: linear 0.2s;

        &:hover {
            transform: scale(1.05);
        }
    }
}



/*----------------
    Typography
----------------*/
.text_block
{
    font-size: var(--font_size_l);
    line-height: 2;

    color: rgba(45, 45, 45, .70);


    & > *
    {
        margin-bottom: var(--inner_gap_l);
    }


    & > :last-child
    {
        margin-bottom: 0 !important;
    }

    & > :first-child
    {
        margin-top: 0 !important;
    }


    .hide
    {
        display: none;

        & > *
        {
            margin-bottom: var(--inner_gap_l);
        }


        & > :last-child
        {
            margin-bottom: 0 !important;
        }

        & > :first-child
        {
            margin-top: 0 !important;
        }
    }


    h2
    {
        font-family: var(--font_family2);
        font-size: var(--font_size_title_xs);
        font-weight: 700;
        line-height: calc(100% + 14px);

        text-transform: uppercase;

        color: #303030;
    }


    * + h2
    {
        margin-top: var(--block_padding);
    }


    h2 + *
    {
        margin-top: 0 !important;
    }


    img
    {
        display: block;

        max-width: 100%;
        margin-block: var(--cont_padding_double);

        border-radius: var(--border_radius_s);
    }


    a
    {
        color: var(--primary_color);

        text-decoration-thickness: 1px;


        &:hover
        {
            text-decoration: none;
        }
    }


    b,
    strong
    {
        font-weight: 700;

        color: #2d2d2d;
    }


    .spoler_btn
    {
        display: inline;

        color: var(--primary_color);


        .icon
        {
            display: inline-block;

            width: 5px;
            height: 9px;
            margin-left: 2px;

            vertical-align: middle;
        }
    }
}



/*-------------------
    First section
-------------------*/
.first_section
{
    position: relative;

    padding-block: 63px 89px;


    .bg
    {
        position: absolute;
        top: -137px;
        right: 50%;

        display: block;

        width: 1212px;
        max-width: 100%;
        margin-right: -960px;

        z-index: 1;
        pointer-events: none;


        img
        {
            display: block;

            width: 100%;
        }
    }


    .cont
    {
        position: relative;

        z-index: 3;
    }


    .title
    {
        width: 733px;
        max-width: 100%;

        font-family: var(--font_family2);
        font-size: var(--font_size_title_xl);
        font-weight: 600;
        line-height: calc(100% + 6px);

        text-transform: uppercase;

        color: #3a3a3a;


        mark
        {
            position: relative;

            display: block;

            width: fit-content;
            margin: 2px -4px;
            padding: 4px;

            font-weight: 300;

            background: #fff3f3;


            .line
            {
                position: absolute;
                top: 0;
                left: 0;

                display: block;

                width: 1px;
                height: 100%;

                content: '';
                pointer-events: none;

                background: var(--primary_color);


                &:before,
                &:after
                {
                    position: absolute;
                    bottom: 0;
                    left: -2px;

                    display: block;

                    width: 5px;

                    content: '';

                    border-radius: 50%;
                    background: var(--primary_color);

                    aspect-ratio: 1 / 1;
                }


                &:after
                {
                    top: 0;
                    bottom: auto;
                }


                &.end
                {
                    right: 0;
                    left: auto;
                }
            }
        }
    }


    .desc
    {
        width: 608px;
        max-width: 100%;
        margin-top: var(--inner_gap_xs);

        line-height: calc(100% + 12px);

        color: rgba(58, 58, 58, .80);


        b
        {
            font-weight: 600;

            color: #2a2a2a;
        }
    }


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

        margin-top: var(--inner_gap_l);

        gap: var(--inner_gap_xs);


        .btn
        {
            height: 60px;
            padding-inline: var(--inner_gap_xl);

            font-weight: 600;
            line-height: calc(100% + 8px);

            color: var(--light_color);
            border-radius: var(--border_radius_max);
            background: #4c4c4c;


            &.primary
            {
                background: var(--primary_gradient);
            }

            transition: linear 0.2s;

            &:hover{
                transform: scale(1.05);
            }
        }
    }


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


        a
        {
            position: relative;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: 60px;

            z-index: 3;
            text-decoration: none;

            color: #c0c0c0;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 0 5px 24px 0 rgba(0, 0, 0, .10);

            aspect-ratio: 1 / 1;
        }


        a + a
        {
            margin-left: -8px;
        }


        .icon
        {
            display: block;
        }


        .tg_link
        {
            .icon
            {
                transition: 0.2s;
                width: 17px;
                height: 15px;
            }

            &:hover{
                .icon
                {
                    color: #2DBAFF;
                }
            }    
        }


        .vk_link
        {
            z-index: 2;


            .icon
            {
                transition: 0.2s;
                width: 22px;
                height: 13px;
            }

            &:hover{
                .icon
                {
                    color: #0077FF;
                }
            }   
        }


        .max_link
        {
            z-index: 1;


            .icon
            {
                transition: 0.2s;
                width: 18px;
                height: 18px;
            }

            &:hover{
                .icon
                {
                    color: #6B17D1;
                }
            }  
        }
    }
}



/*----------------
    Stats info
----------------*/
.stats_info
{
    position: relative;

    margin-bottom: -111px;

    z-index: 3;


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

        padding-block: var(--inner_gap_xxl);
        padding-inline: var(--block_padding);

        border-radius: var(--border_radius_l);
        background: var(--light_color);
        box-shadow: 0 5px 60px 0 rgba(0, 0, 0, .10);


        .sep
        {
            width: 1px;

            background: #eaeaea;
        }


        .item
        {
            display: flex;
            flex-direction: column;

            line-height: calc(100% + 8px);

            color: rgba(58, 58, 58, .80);


            .val
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_title_l);
                font-weight: 700;
                line-height: calc(100% + 20px);

                white-space: nowrap;
                text-transform: uppercase;

                color: var(--primary_color);
            }
        }
    }
}



/*-------------
    Catalog
-------------*/
.catalog
{
    position: relative;

    z-index: 2;


    .data
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 196px 80px;

        border-radius: var(--border_radius_xl);
        background: #2f2f2f;


        & > *
        {
            position: relative;

            z-index: 3;
        }


        .block_head
        {
            .title
            {
                color: var(--light_color);
            }


            .all_link
            {
                a
                {
                    opacity: 1;
                    color: var(--light_color);

                    transition: all linear 0.2s;

                    &:hover
                    {
                       color:var(--primary_color);
                    }
                }
            }
        }


        .grid
        {
            display: grid;

            gap: var(--inner_gap_l);
            grid-template-columns: repeat(2, 1fr);
        }


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

            height: 226px;
            padding: 6px;

            text-decoration: none;

            color: currentColor;
            border-radius: var(--border_radius_l);
            background: var(--light_color);

            gap: var(--inner_gap_l);

        

            &:hover
            {
                .btn
                {
                    transform: rotate(45deg);
                }
                
            }


            &.l_h
            {
                height: calc(452px + var(--inner_gap_l));

                grid-row: span 2;
            }


            .info
            {
                display: flex;
                flex-direction: column;

                width: 296px;
                max-width: 100%;
                padding: 30px;

                gap: var(--inner_gap);
            }


            .name
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_xl);
                font-weight: 700;
                line-height: calc(100% + 8px);

                color: #272727;
            }


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

                width: 57px;
                margin-top: auto;

                color: var(--light_color);
                border-radius: 50%;
                background: var(--primary_gradient);
                box-shadow: 0 12px 60px rgba(255, 0, 0, .50);

                aspect-ratio: 1 / 1;
                transition: all linear 0.2s;


                .icon
                {
                    display: block;

                    width: 20px;

                    aspect-ratio: 1 / 1;
                }
            }


            .thumb
            {
                display: block;

                width: 276px;
                max-width: 100%;
                height: 100%;

                border-radius: var(--border_radius);
                background: var(--bg_grey);
            }
        }


        .bg
        {
            position: absolute;
            inset: 0;

            display: block;

            z-index: 1;
            pointer-events: none;
        }
    }
}



/*--------------------
    More efficient
--------------------*/
.more_efficient
{
    position: relative;

    margin-top: -92px;
    margin-bottom: 108px;

    z-index: 1;


    .data
    {
        position: relative;

        overflow: hidden;

        padding-block: 188px 72px;
        padding-inline: 72px;

        border-radius: var(--border_radius_xl);
        background: var(--primary_color);
    }


    .block_head
    {
        .title
        {
            color: var(--light_color);
        }
    }


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

        margin-bottom: var(--inner_gap_l);

        gap: var(--inner_gap_l);


        .image
        {
            display: block;

            width: calc(100% - 402px - var(--inner_gap_l));

            border-radius: var(--border_radius_l);
            background: var(--bg_grey);
        }


        .contacts
        {
            display: flex;
            flex-direction: column;

            width: 402px;
            max-width: 100%;
            padding-block: 38px var(--cont_padding_double);
            padding-inline: 30px;

            border-radius: var(--border_radius_l);
            background: var(--light_color);

            gap: var(--inner_gap_xs);


            .title
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_xl);
                font-weight: 600;
                line-height: calc(100% + 10px);

                text-align: center;
                text-transform: uppercase;

                color: #272727;
            }


            .manager
            {
                display: flex;
                align-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                justify-content: space-between;

                font-size: var(--font_size_s);
                line-height: calc(100% + 8px);

                color: #272727;


                .photo
                {
                    width: 48px;

                    border-radius: 50%;
                    background: var(--bg_grey);

                    aspect-ratio: 1 / 1;
                    gap: var(--inner_gap_xs);


                    & + *
                    {
                        width: calc(100% - 48px - var(--inner_gap_xs));
                    }
                }
            }


            .btn
            {
                width: 100%;
                height: 60px;
                margin-top: var(--inner_gap_xxs);

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 600;
                line-height: calc(100% + 7px);

                color: var(--light_color);
                border-radius: var(--border_radius_max);
                background: var(--primary_gradient);
                transition: linear 0.2s;

                &:hover {
                    transform: scale(1.05);
                }

            }


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

                width: fit-content;
                margin-inline: auto;
                margin-top: var(--inner_gap_s);

                gap: var(--inner_gap_xs);


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

                    width: 41px;

                    color: var(--primary_color);
                    border-radius: 50%;
                    background: var(--light_color);
                    box-shadow: 0 10px 24px 0 rgba(0, 0, 0, .14);

                    aspect-ratio: 1 / 1;


                    svg
                    {
                        display: block;

                        width: 14px;

                        aspect-ratio: 1 / 1;
                    }
                }


                a
                {
                    font-size: var(--font_size_l);
                    font-weight: 600;
                    line-height: 1;

                    white-space: nowrap;
                    text-decoration: none;

                    color: #3a3a3a;

                    transition: 0.2s;

                    &:hover {
                        color: var(--primary_color);
                    }
                }


                .exp
                {
                    margin-top: var(--inner_gap_xxxs);

                    font-size: calc(var(--font_size_s) - 1px);
                    line-height: calc(100% + 3px);

                    color: rgba(58, 58, 58, .60);
                }
            }
        }
    }


    .grid_row
    {
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


    .item
    {
        display: flex;
        flex-direction: column;

        padding: 30px;

        color: var(--light_color);
        border-radius: var(--border_radius_l);
        background: rgba(0, 0, 0, .18);

        gap: var(--inner_gap_s);


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

            width: 43px;
            margin-bottom: var(--inner_gap_xxxs);

            border-radius: 50%;
            background: var(--light_color);

            aspect-ratio: 1 / 1;


            img
            {
                display: block;

                width: 22px;

                aspect-ratio: 1 / 1;
            }
        }


        .name
        {
            font-size: var(--font_size_xl);
            font-weight: 600;
            line-height: 1;
        }


        .desc
        {
            line-height: calc(100% + 12px);

            color: #ffe8eb;
        }
    }
}



/*------------
    Videos
------------*/
.videos
{
    margin-bottom: 96px;


    & > .data
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 86px 124px;

        border-radius: var(--border_radius_xl);
        background: #2f2f2f;
    }


    .cont
    {
        position: relative;

        z-index: 3;
    }


    .swiper
    {
        overflow: visible;

        --spaceBetween-0: var(--inner_gap_xs);
        --spaceBetween-1024: var(--inner_gap);
        --spaceBetween-1280: var(--inner_gap_l);
        --slidesPerView-0: auto;
        --slidesPerView-1024: 3;
        --slidesPerView-1280: 4;


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-1280);
            }


            .swiper-slide
            {
                width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280));
            }
        }


        .swiper-pagination-bullet
        {
            border-color: #2f2f2f;
            background: #6e6e6e;


            &:hover,
            &.active
            {
                border-color: var(--primary_color);
                background: var(--primary_color);
            }
        }
    }


    .head
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;

        margin-bottom: var(--inner_gap_xl);


        .block_head
        {
            margin-bottom: 0;

            gap: var(--inner_gap_xxl);


            .title
            {
                color: var(--light_color);
            }


            .desc
            {
                width: auto;

                font-size: var(--font_size);
                line-height: calc(100% + 7px);

                color: #acacac;
            }
        }
    }


    .link
    {
        position: relative;

        display: block;

        text-decoration: none;

        color: currentColor;


        .thumb
        {
            display: block;

            border-radius: var(--border_radius_s);
            background: var(--bg_grey);

            aspect-ratio: 1 / 1.576;
        }


        .icon
        {
            position: absolute;
            inset: 0;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            width: 60px;
            margin: auto;
            padding-left: 4px;

            z-index: 3;

            color: var(--light_color);
            border-radius: 22px;
            background: var(--primary_color);

            aspect-ratio: 1 / 1;
            transition: linear 0.2s;

            svg
            {
                display: block;

                width: 19px;
                height: 23px;
            }
        }

        &:hover
        {
            .icon
            {
                transform: scale(1.2);
            }
        }
    }
}



/*-----------------
    About block
-----------------*/
.about_block
{
    margin-bottom: 95px;


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


    .data
    {
        display: flex;
        flex-direction: column;

        padding: 42px;

        color: var(--light_color);
        border-radius: var(--border_radius_l);
        background: var(--primary_color);

        gap: var(--inner_gap_xxs);


        .title
        {
            font-family: var(--font_family2);
            font-size: var(--font_size_title);
            font-weight: 700;
            line-height: calc(100% + 14px);

            text-transform: uppercase;
        }


        .desc
        {
            display: flex;
            flex-direction: column;

            line-height: calc(100% + 10px);

            gap: var(--inner_gap_xs);
        }


        .link
        {
            margin-top: var(--cont_padding_double);


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

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

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 600;
                line-height: calc(100% + 7px);

                text-decoration: none;

                color: #353535;
                color: var(--dark_color);
                border-radius: var(--border_radius_max);
                background: var(--light_color);

                transition: linear 0.2s;

                &:hover {
                    transform: scale(1.05);
                }
            }
        }
    }


    .stats
    {
        position: relative;

        padding-top: 54px;
        padding-bottom: 120px;


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



        .item
        {
            display: flex;
            flex-direction: column;

            line-height: calc(100% + 8px);

            color: rgba(58, 58, 58, .80);


            .val
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_title_l);
                font-weight: 700;
                line-height: calc(100% + 20px);

                white-space: nowrap;
                text-transform: uppercase;

                color: var(--primary_color);


                span
                {
                    font-size: 24px;
                }
            }
        }


        .video_action
        {
            position: absolute;
            bottom: 0;
            left: 0;

            width: 100%;

            pointer-events: none;


            .title
            {
                font-size: 24px;
                font-weight: 600;
                line-height: calc(100% + 6px);

                color: #353535;


                span
                {
                    display: inline-block;

                    margin-inline: cacl(var(--inner_gap_xxs)) * -1;
                    padding-inline: var(--inner_gap_xxs);

                    vertical-align: top;

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


            .arrow
            {
                position: absolute;
                right: 48px;
                bottom: -28px;

                display: block;

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

                pointer-events: none;


                img
                {
                    display: block;

                    width: 100%;
                }
            }
        }
    }


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

        margin-top: var(--cont_padding_double);

        gap: var(--inner_gap_xxl);
    }


    .boss
    {
        position: relative;

        display: flex;
        flex-direction: column;

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


        .photo
        {
            display: block;

            height: 100%;

            border-radius: var(--border_radius_l);
        }


        .info
        {
            position: absolute;
            bottom: var(--inner_gap_l);
            left: var(--inner_gap_l);

            width: calc(100% - var(--inner_gap_l) * 2);
            padding: var(--inner_gap_s);

            z-index: 3;
            text-align: center;

            color: var(--light_color);
            border-radius: var(--border_radius_xs);
            background: rgba(0, 0, 0, .30);

                    backdrop-filter: blur(11.5px);
            -webkit-backdrop-filter: blur(11.5px);
            transform: translateZ(0); 
            will-change: backdrop-filter;


            .name
            {
                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 600;
                line-height: calc(100% + 3px);
            }


            .post
            {
                font-size: var(--font_size_s);
                line-height: calc(100% + 6px);
            }
        }
    }


    .video
    {
        width: calc(100%);


        .link
        {
            position: relative;

            display: block;

            text-decoration: none;

            color: currentColor;

            transition: linear 0.2s;

            &:hover {
                transform: scale(1.05);
            }


            .thumb
            {
                display: block;

                height: 480px;

                border-radius: var(--border_radius_s);
                background: var(--bg_grey);
            }


            .icon
            {
                position: absolute;
                inset: 0;

                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                width: 89px;
                margin: auto;
                padding-left: 4px;

                z-index: 3;

                color: var(--light_color);
                border-radius: 50%;
                background: var(--primary_color);

                aspect-ratio: 1 / 1;


                svg
                {
                    display: block;

                    width: 32px;

                    aspect-ratio: 1 / 1;
                }
            }
        }
    }
}



/*-------------------
    Articles page
-------------------*/
.articles_page
{
    margin-bottom: 96px;

    --sidebar_width: 376px;


    .content
    {
        width: calc(100% - var(--sidebar_width) - var(--block_padding));


        .articles
        {
            margin-bottom: 0;
        }
    }


    .categories
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

        margin-bottom: var(--inner_gap_xxl);

        gap: var(--inner_gap_xs);


        a
        {
            display: block;

            padding-block: 2px 4px;
            padding-inline: var(--inner_gap_l);

            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 500;
            line-height: calc(100% + 11px);

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

            color: rgba(56, 56, 56, .6);
            border-radius: var(--border_radius_max);
            background: var(--bg_grey);


            &:hover
            {
                color: var(--dark_color);
            }


            &.active
            {
                color: var(--light_color);
                background: var(--primary_color);
            }
        }
    }
}



/*------------------
    Article info
------------------*/
.article_info
{
    position: relative;

    margin-bottom: 90px;
    padding-bottom: 96px;

    --sidebar_width: 376px;


    &:after
    {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        width: var(--content_width);
        height: 1px;
        margin-inline: auto;

        content: '';
        pointer-events: none;

        background: #f2f2f2;
    }


    .content
    {
        width: calc(100% - var(--sidebar_width) - var(--block_padding));
        padding-top: var(--inner_gap_l);
    }
}



/*--------------
    Articles
--------------*/
.articles
{
    margin-bottom: 108px;


    .swiper
    {
        overflow: visible;

        padding-inline: 0px;

        --spaceBetween-0: var(--inner_gap_xs);
        --spaceBetween-1024: var(--inner_gap);
        --spaceBetween-1280: var(--inner_gap_l);
        --slidesPerView-0: auto;
        --slidesPerView-1024: 3;
        --slidesPerView-1280: 4;


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-1280);
            }


            .swiper-slide
            {
                width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280));
            }
        }
    }


    .grid_row
    {
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


    .article
    {
        display: flex;
        flex-direction: column;

        padding: var(--inner_gap_xs);

        border-radius: var(--border_radius_l);
        background: var(--light_color);
        box-shadow: 0 24px 72px 0 rgba(0, 0, 0, .10);

        gap: var(--inner_gap_xs);


        .image
        {
            position: relative;

            display: block;

            margin-bottom: var(--inner_gap_s);

            text-decoration: none;

            color: currentColor;


            .info
            {
                position: absolute;
                bottom: 0;
                left: 0;

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

                width: 100%;
                padding: var(--inner_gap_s);

                font-size: calc(var(--font_size_s) - 1px);
                font-weight: 500;

                z-index: 3;
                white-space: nowrap;
                pointer-events: none;

                color: rgba(255, 255, 255, .8);

                gap: 6px;


                & > *
                {
                    padding-block: var(--inner_gap_xxxs);
                    padding-inline: var(--inner_gap_xxs);

                    border-radius: 7px;
                    background: rgba(0, 0, 0, .40);

                            backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    transform: translateZ(0); 
                    will-change: backdrop-filter;
                }
            }
        }


        .thumb
        {
            display: block;

            border-radius: var(--border_radius_s);
            background: var(--bg_grey);

            aspect-ratio: 1 / .878;
        }


        .data
        {
            display: flex;
            flex-direction: column;

            padding-block: 0 var(--inner_gap_xs);
            padding-inline: var(--inner_gap_xs);

            gap: var(--inner_gap_xxs);


            .name
            {
                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 500;
                line-height: calc(100% + 7px);


                a
                {
                    display: inline-block;

                    transition: color .2s linear;
                    vertical-align: top;
                    text-decoration: none;

                    color: currentColor;


                    &:hover
                    {
                        color: var(--primary_color);
                    }
                }
            }


            .desc
            {
                font-size: var(--font_size_s);
                font-weight: 300;
                line-height: calc(100% + 8px);

                opacity: .6;
                color: #353535;
            }


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

                width: 100%;
                height: 54px;
                margin-top: var(--inner_gap_xxxs);

                font-weight: 500;

                transition: color .2s linear;
                white-space: nowrap;
                text-decoration: none;

                color: rgba(53, 53, 53, .6);
                border-radius: var(--border_radius_xs);
                background: var(--bg_grey);

                gap: var(--inner_gap_xxxs);


                .icon
                {
                    display: block;

                    width: 8px;
                    margin-top: 1px;

                    aspect-ratio: 1 / 1;
                }


                &:hover
                {
                    color: var(--dark_color);
                }
            }
        }
    }
}



/*------------------
    Action block
------------------*/
.action_block
{
    margin-bottom: var(--block_padding);


    .cont
    {
        &.row
        {
            display: flex;
            align-content: stretch;
            align-items: stretch;
            flex-wrap: wrap;
            justify-content: space-between;

            --content_width: var(--content_width_w);
            gap: var(--inner_gap_xs);


            .data
            {
                width: calc(100% - 563px - var(--inner_gap_xs));
            }
        }


        &.l_w
        {
            --content_width: var(--content_width_w);

            .data
            {
                display: flex;
                align-content: stretch;
                align-items: stretch;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }


    .data
    {
        position: relative;

        overflow: hidden;

        padding-block: 72px var(--block_padding);
        padding-inline: var(--block_padding);

        border-radius: var(--border_radius_xl);
        background: #e92f48;


        & > *
        {
            position: relative;

            z-index: 3;
        }


        .info
        {
            display: flex;
            flex-direction: column;

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


            .contacts
            {
                margin-top: auto;
                padding-top: var(--cont_padding_double);
            }
        }


        .block_title
        {
            font-family: var(--font_family2);
            font-size: 60px;
            font-weight: 300;
            line-height: calc(100% + 13px);

            text-transform: uppercase;

            color: var(--light_color);


            &.small
            {
                font-size: var(--font_size_title);
                line-height: calc(100% + 28px);
            }


            b
            {
                font-weight: 700;
            }
        }


        .block_desc
        {
            margin-top: var(--inner_gap);

            font-size: var(--font_size_l);
            font-weight: 300;

            color: var(--light_color);
        }


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

            color: var(--light_color);

            row-gap: var(--inner_gap);
            column-gap: var(--inner_gap_xl);


            .label
            {
                width: 100%;

                font-size: var(--font_size_l);
                font-weight: 600;
            }


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

                font-size: var(--font_size_s);
                font-weight: 500;
                line-height: 1;

                gap: var(--inner_gap_xxxs);


                .icon
                {
                    display: block;

                    width: 14px;

                    aspect-ratio: 1 / 1;
                }


                a
                {
                    white-space: nowrap;
                    text-decoration: none;

                    color: currentColor;
                }
            }


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

                gap: var(--inner_gap_xs);


                a
                {
                    position: relative;

                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: center;

                    width: 38px;

                    z-index: 3;
                    text-decoration: none;

                    color: #595959;
                    border-radius: 10px;
                    background: var(--light_color);

                    aspect-ratio: 1 / 1;

                    transition: linear 0.2s;

                    &:hover
                    {
                        transform: scale(1.2);
                    }
                }


                .icon
                {
                    display: block;
                }


                .tg_link
                {
                    .icon
                    {
                        width: 16px;
                        height: 16px;
                    }
                }


                .vk_link
                {
                    .icon
                    {
                        width: 19px;
                        height: 12px;
                    }
                }


                .max_link
                {
                    .icon
                    {
                        width: 14px;
                        height: 14px;
                    }
                }
            }
        }


        .grid_row
        {
            margin-top: 40px;

            --items_per_line: 2;
            --gap_x: var(--inner_gap_xs);
            --gap_y: var(--inner_gap_xs);
        }


        .item
        {
            display: flex;
            flex-direction: column;

            padding: var(--inner_gap_l);

            border-radius: var(--border_radius_l);
            background: var(--light_color);

            gap: var(--inner_gap_xs);


            .title
            {
                font-family: var(--font_family2);
                font-size: 24px;
                font-weight: 700;
                line-height: calc(100% + 10px);

                text-transform: uppercase;

                color: #353535;
            }


            .form
            {
                margin-top: auto;
            }


            .phone
            {
                display: flex;
                align-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                justify-content: space-between;

                gap: 6px;


                .icon
                {
                    display: block;

                    width: 18px;
                    margin-block: 6px;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;


                    & + *
                    {
                        display: flex;
                        flex-direction: column;

                        width: calc(100% - 18px - 6px);

                        gap: 2px;
                    }
                }


                a
                {
                    font-size: var(--font_size_l);
                    font-weight: 500;
                    line-height: calc(100% + 12px);

                    white-space: nowrap;
                    text-decoration: none;

                    color: #323232;

                    transition: 0.2s;

                    &:hover{
                        color: var(--primary_color);
                    }
                }


                .work_time
                {
                    font-size: var(--font_size_xs);
                    line-height: calc(100% + 7px);

                    opacity: .4;
                    color: #323232;
                }
            }


            .email
            {
                display: flex;
                align-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                justify-content: space-between;

                gap: var(--inner_gap_xxs);


                .icon
                {
                    display: block;

                    width: 18px;
                    margin-block: 6px;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;


                    & + *
                    {
                        display: flex;
                        flex-direction: column;

                        width: calc(100% - 18px - var(--inner_gap_xxs));

                        gap: 2px;
                    }
                }


                a
                {
                    font-size: var(--font_size_l);
                    font-weight: 500;
                    line-height: calc(100% + 12px);

                    white-space: nowrap;
                    text-decoration: none;

                    color: #323232;

                    transition: 0.2s;

                    &:hover{
                        color: var(--primary_color);
                    }
                }
            }


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

                margin-top: auto;
                padding-top: var(--font_size_xs);

                gap: var(--inner_gap_xxs);


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

                    width: calc(50% - var(--inner_gap_xxs) / 2);
                    height: 60px;

                    font-weight: 600;

                    text-decoration: none;

                    color: rgba(53, 53, 53, .8);
                    border-radius: var(--border_radius_xs);
                    background: #fafafa;

                    gap: var(--inner_gap_xxs);

                    transition: linear 0.2s;

                    &:hover {
                        transform: scale(1.05);
                    }


                    &.vk_link
                    {
                        .icon
                        {
                            width: 23px;
                            height: 15px;

                            color: #07f;
                        }
                    }


                    &.tg_link
                    {
                        .icon
                        {
                            width: 20px;
                            height: 16px;

                            color: #2dbaff;
                        }
                    }
                }


                .icon
                {
                    display: block;
                }
            }
        }


        .feedback
        {
            width: 414px;
            max-width: 100%;
            padding: var(--inner_gap_xxl);

            border-radius: var(--border_radius_l);
            background: var(--light_color);
        }


        .bg
        {
            position: absolute;
            inset: 0;

            display: block;

            z-index: 1;
            pointer-events: none;

            opacity: .075;
        }
    }


    .image
    {
        display: block;

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

        border-radius: var(--border_radius_xl);
        background: var(--bg_grey);
    }


    .subscribe
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        margin-top: var(--inner_gap_l);
        padding-block: 52px;

        border-radius: var(--border_radius_xl);
        background: #2f2f2f;


        & > *
        {
            position: relative;

            z-index: 3;
        }


        .cont
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }


        .info
        {
            display: flex;
            flex-direction: column;

            color: var(--light_color);

            gap: var(--inner_gap_xs);


            .title
            {
                font-family: var(--font_family2);
                font-size: var(--font_size_title);
                font-weight: 700;
                line-height: calc(100% + 12px);

                text-transform: uppercase;
            }


            .desc
            {
                font-size: var(--font_size_l);
                font-weight: 300;
                line-height: calc(100% + 10px);
            }
        }


        .form, form
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: space-between;

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

            --form_border_radius: var(--border_radius_s);
            --form_bg_color: rgba(255, 255, 255, .05);
            --form_placeholder_color: rgba(255, 255, 255, .4);
            --form_line_gap: 0;
            gap: var(--inner_gap_xs);


            .line
            {
                width: calc(100% - 180px - var(--inner_gap_xs));
            }


            .input
            {
                color: var(--light_color);

                
            }


            .checkbox
            {
                color: rgba(255, 255, 255, .4);


                .check
                {
                    border: none;
                    background: var(--form_bg_color);                   
                   


                    & + *
                    {
                        color: currentColor;
                    }
                }


                a
                {
                    &:hover
                    {
                        color: var(--light_color);
                    }
                }
            }


            .submit
            {
                width: 180px;
                max-width: 100%;
                padding: 0;
            }


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

                padding-inline: var(--inner_gap);

                gap: var(--inner_gap_xxs);


                .icon
                {
                    display: block;

                    width: 17px;

                    aspect-ratio: 1 / 1;
                }
            }


            .agree
            {
                width: 100%;
            }
        }


        .bg
        {
            position: absolute;
            inset: 0;

            display: block;

            z-index: 1;
            pointer-events: none;

            opacity: .05;
        }
    }
}



/*--------------------
    Other articles
--------------------*/
.other_articles
{
    .list
    {
        display: flex;
        flex-direction: column;

        gap: var(--inner_gap_xl);
    }


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

        margin: calc(var(--inner_gap_xs) * -1);
        padding: var(--inner_gap_xs);

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

        color: currentColor;
        border-radius: var(--border_radius_s);

        gap: var(--inner_gap_xs);


        .thumb
        {
            display: block;

            width: 84px;
            max-width: 100%;
            min-height: 96px;

            border-radius: var(--border_radius_xs);
        }


        .info
        {
            display: flex;
            flex-direction: column;

            width: calc(100% - 84px - var(--inner_gap_xs));

            gap: var(--inner_gap_xxxs);


            .name
            {
                font-size: var(--font_size);
                font-weight: 500;
                line-height: calc(100% + 6px);

                transition: color .2s linear;

                color: rgba(53, 53, 53, .6);
            }


            .date
            {
                font-size: calc(var(--font_size_s) - 1px);
                font-weight: 500;
                line-height: calc(100% + 7px);

                color: #c2c2c2;
            }
        }


        &:hover
        {
            background: var(--light_color);


            .name
            {
                color: #353535;
            }
        }
    }
}



/*----------------
    About info
----------------*/
.about_info
{
    margin-bottom: 84px;


    .cont
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .data
    {
        display: flex;
        flex-direction: column;

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

        gap: var(--inner_gap_xl);


        .title
        {
            font-family: var(--font_family2);
            font-size: var(--font_size_title_l);
            font-weight: 700;
            line-height: calc(100% + 11px);

            text-transform: uppercase;

            color: #303030;
        }


        .desc
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: space-between;

            gap: var(--inner_gap_s);


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

                width: 42px;

                color: var(--light_color);
                border-radius: 12px;
                background: var(--primary_color);

                aspect-ratio: 1 / 1;


                svg
                {
                    display: block;

                    width: 18px;

                    aspect-ratio: 1 / 1;
                }
            }


            .text_block
            {
                width: calc(100% - 42px - var(--inner_gap_s));

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 400;
                line-height: calc(100% + 11px);

                color: rgba(45, 45, 45, .70);


                span
                {
                    font-weight: 500;

                    color: var(--dark_color);
                }
            }
        }
    }


    .image
    {
        width: 629px;
        max-width: 100%;

        border-radius: var(--border_radius_l);
        background: var(--bg_grey);

        aspect-ratio: 1 / .682;
    }
}



/*-------------
    History
-------------*/
.history
{
    margin-bottom: 172px;


    .data
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 80px 56px;

        color: var(--light_color);
        border-radius: var(--border_radius_xl);
        background: #2f2f2f;


        &:before
        {
            position: absolute;
            top: -96px;
            left: -161px;

            display: block;

            width: 955px;
            height: 794px;

            content: '';
            z-index: 1;
            pointer-events: none;

            border-radius: 955px;
            background: rgba(0, 0, 0, .40);

            filter: blur(180px);
            transform: translateZ(0); 
            will-change: backdrop-filter;
        }
    }


    .cont
    {
        position: relative;

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

        z-index: 3;
    }


    .info
    {
        display: flex;
        flex-direction: column;

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

        gap: var(--inner_gap_s);


        .title
        {
            font-family: var(--font_family2);
            font-size: var(--font_size_title_l);
            font-weight: 700;
            line-height: calc(100% + 11px);

            text-transform: uppercase;
        }


        .desc
        {
            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 500;
            line-height: calc(100% + 11px);

            color: rgba(255, 255, 255, .7);


            span
            {
                color: var(--light_color);
            }
        }
    }


    .items
    {
        position: relative;

        display: flex;
        flex-direction: column;

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

        gap: var(--inner_gap_xxl);


        &:before
        {
            position: absolute;
            bottom: 0;
            left: 0;

            display: block;

            width: 20px;
            height: calc(100% + 25px);

            content: '';
            z-index: 1;
            pointer-events: none;

            border-radius: var(--border_radius_max);
            background: linear-gradient(180deg, #2f2f2f 16.35%, var(--primary_color));
        }


        .item
        {
            position: relative;

            display: flex;
            flex-direction: column;

            padding-left: 68px;

            z-index: 3;


            &:before
            {
                position: absolute;
                top: var(--inner_gap_xs);
                left: 0;

                display: block;

                width: 20px;

                content: '';
                pointer-events: none;

                border-radius: 50%;
                background: var(--light_color);

                aspect-ratio: 1 / 1;
            }


            .year
            {
                font-family: var(--font_family2);
                font-size: 24px;
                font-weight: 600;
                line-height: 2;
            }


            .desc
            {
                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 500;
                line-height: calc(100% + 11px);

                color: rgba(255, 255, 255, .7);
            }
        }
    }


    .bg
    {
        position: absolute;
        bottom: 0;
        left: 9.675%;

        display: block;

        width: 648px;
        max-width: 100%;
        max-height: 100%;

        z-index: 2;
        pointer-events: none;

        mix-blend-mode: lighten;


        img
        {
            display: block;

            width: 100%;
        }
    }
}



/*-----------------
    Our mission
-----------------*/
.our_mission
{
    margin-bottom: 100px;


    .cont
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        gap: var(--cont_padding_double);
    }


    .title
    {
        display: block;


        img
        {
            display: block;

            height: 120px;
        }
    }


    .title2
    {
        img
        {
            height: 126px;
        }
    }


    .text
    {
        width: 572px;
        padding-block: var(--inner_gap_xl);
        padding-inline: 76px;

        font-size: var(--font_size_l);
        line-height: calc(100% + 12px);

        color: var(--light_color);
        border-radius: 43px;
        background: var(--primary_color);
    }


    .image
    {
        display: block;

        width: 288px;
        max-width: 100%;
        height: 148px;

        border-radius: 43px;
        background: var(--bg_grey);
    }
}



/*-------------
    Founder
-------------*/
.founder
{
    margin-bottom: 107px;

    --content_width: var(--content_width_w);


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

        gap: var(--inner_gap_xs);
    }


    .image
    {
        display: block;

        width: 563px;
        max-width: 100%;
        min-height: 586px;

        border-radius: var(--border_radius_xl);
        background: var(--bg_grey);
    }


    .data
    {
        display: flex;
        flex-direction: column;

        width: calc(100%);
        padding-block: 65px;
        padding-inline: var(--block_padding);

        border-radius: var(--border_radius_xl);
        background: rgba(245, 245, 245, .50);

        gap: var(--inner_gap_l);


        .title
        {
            font-family: var(--font_family2);
            font-size: var(--font_size_title_l);
            font-weight: 700;
            line-height: calc(100% + 17px);

            text-transform: uppercase;
        }


        .desc
        {
            line-height: calc(100% + 13px);

            color: #303030;
            max-width: 760px;
            text-align: center;
            margin: 0 auto;
        }


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

            margin-top: var(--inner_gap_xxxs);

            font-size: var(--font_size_l);
            font-weight: 600;
            line-height: calc(100% + 13px);

            color: #303030;


            .signature
            {
                position: relative;

                display: block;

                width: 189px;
                height: 0;


                img
                {
                    position: absolute;
                    top: 50%;
                    left: 0;

                    display: block;

                    width: 100%;

                    transform: translateY(-50%);
                }
            }
        }
    }
}



/*----------
    Team
----------*/
.team
{
    margin-bottom: 108px;


    .data
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 86px;

        border-radius: var(--border_radius_xl);
        background: #f9f9f9;
    }


    .block_head
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

        gap: 32px;


        .desc
        {
            line-height: calc(100% + 7px);

            color: #545454;
        }
    }


    .grid_row
    {
        --items_per_line: 4;
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


    .person
    {
        display: flex;
        flex-direction: column;

        padding-block: var(--inner_gap_xs) var(--inner_gap_xl);
        padding-inline: var(--inner_gap_xs);

        border-radius: var(--border_radius_l);
        background: var(--light_color);

        gap: var(--inner_gap_l);


        .photo
        {
            display: block;

            border-radius: var(--border_radius_s);
            background: var(--bg_grey);

            aspect-ratio: 1 / 1.208;
        }


        .info
        {
            display: flex;
            flex-direction: column;

            padding-inline: var(--inner_gap_xs);

            gap: var(--inner_gap_xs);
        }


        .name
        {
            font-family: var(--font_family2);
            font-size: var(--font_size_l);
            font-weight: 300;

            text-transform: uppercase;

            color: #353535;


            b
            {
                display: block;

                margin-top: var(--inner_gap_xxxs);

                font-size: 24px;
                font-weight: 700;
            }
        }


        .post
        {
            font-size: var(--font_size_s);
            line-height: calc(100% + 7px);

            color: #acacac;
        }
    }
}



/*-------------------
    Contacts info
-------------------*/
.contacts_info
{
    margin-bottom: 72px;
    padding-top: var(--inner_gap_xs);


    .data
    {
        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: var(--block_padding);

        border-radius: var(--border_radius_xl);
        background: #f9f9f9;
    }


    .grid_row
    {
        --items_per_line: 5;
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


    .item
    {
        display: flex;
        flex-direction: column;

        padding-block: var(--inner_gap_xl) var(--inner_gap);
        padding-inline: var(--inner_gap_xl);

        border-radius: var(--border_radius_s);
        background: var(--light_color);

        gap: var(--inner_gap_xxs);


        &.messengers
        {
            gap: var(--inner_gap_xs);


            a
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;

                height: 37px;
                padding-inline: var(--inner_gap);

                font-size: calc(var(--font_size_l) - 1px);
                line-height: calc(100% + 7px);

                text-decoration: none;

                color: rgba(45, 45, 45, .8);
                border-radius: var(--border_radius_max);
                background: var(--light_color);
                box-shadow: 0 4.8px 48px 0 rgba(0, 0, 0, .08);

                gap: var(--inner_gap_xs);

                transition: linear 0.2s;

                &:hover
                {
                    transform: scale(1.05);
                }


                svg
                {
                    display: block;

                    color: var(--primary_color);
                }


                &.tg_link
                {
                    svg
                    {
                        width: 18px;
                        height: 18px;
                        margin-right: 1px;
                    }
                }


                &.vk_link
                {
                    svg
                    {
                        width: 20px;
                        height: 12px;
                    }
                }


                &.max_link
                {
                    svg
                    {
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }
                }
            }
        }


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

            height: 24px;
            margin-bottom: var(--inner_gap_xxs);

            color: var(--primary_color);


            svg
            {
                display: block;

                height: 100%;

                aspect-ratio: 1 / 1;
            }
        }


        .label
        {
            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 600;
            line-height: calc(100% + 7px);

            color: #2d2d2d;
        }


        .val
        {
            line-height: calc(100% + 8px);

            color: rgba(45, 45, 45, .80);


            a
            {
                text-decoration: none;

                color: currentColor;

                transition: 0.2s;

                &:hover{
                    color: var(--primary_color);
                }
            }
        }
    }


    .btns
    {
        margin-top: var(--inner_gap_l);


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


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

            height: 83px;
            padding-inline: var(--inner_gap_xxl);

            font-size: var(--font_size_l);
            font-weight: 600;
            line-height: calc(100% + 6px);

            text-decoration: none;

            color: var(--light_color);
            border-radius: var(--border_radius_max);
            background: #353535;

            gap: var(--inner_gap);

            transition: linear 0.2s;

            &:hover
            {
                transform: scale(1.05);
            }


            .icon
            {
                display: block;

                height: 24px;

                aspect-ratio: 1 / 1;
            }
        }
    }
}



/*-------------------
    Photo gallery
-------------------*/
.photo_gallery
{
    margin-bottom: 120px;


    .cont
    {
        &.l_w
        {
            --content_width: var(--content_width_w);
        }
    }


    .block_head
    {
        width: var(--content_width);
        max-width: 100%;
        margin-inline: auto;


        .desc
        {
            align-self: flex-end;

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

            font-size: var(--font_size);
            line-height: calc(100% + 10px);
        }
    }


    .swiper
    {
        overflow: visible;

        --spaceBetween: var(--inner_gap_xs);


        .swiper-button-next,
        .swiper-button-prev
        {
            --swiper-navigation-sides-offset: 43px;
        }
    }


    .link
    {
        display: block;

        text-decoration: none;

        color: currentColor;
        border-radius: 60px;
    }


    .image
    {
        display: block;

        min-height: 200px;

        border-radius: 60px;
        background: var(--bg_grey);

        aspect-ratio: 1 / .408;
    }
}



/*----------------
    Requisites
----------------*/
.requisites
{
    margin-bottom: 108px;


    .cont
    {
        display: flex;
        align-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .data
    {
        display: flex;
        flex-direction: column;

        width: 444px;
        max-width: 100%;
        padding-top: var(--inner_gap_xxl);

        gap: var(--inner_gap_l);
    }


    .title
    {
        font-family: var(--font_family2);
        font-size: var(--font_size_title);
        font-weight: 700;
        line-height: calc(100% + 12px);

        text-transform: uppercase;

        color: #303030;
    }


    .desc
    {
        width: 391px;
        max-width: 100%;

        font-size: calc(var(--font_size_l) - 1px);
        line-height: calc(100% + 11px);

        color: rgba(45, 45, 45, .70);
    }


    .items
    {
        display: flex;
        flex-direction: column;

        font-size: calc(var(--font_size_l) - 1px);
        line-height: calc(100% + 11px);

        white-space: nowrap;

        color: rgba(45, 45, 45, .70);

        gap: var(--inner_gap_s);


        & > *
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: space-between;

            gap: var(--inner_gap_s);
        }


        .line
        {
            align-self: flex-end;

            width: 100%;
            height: 1px;
            margin-bottom: 8px;

            background: rgba(0, 0, 0, .10);
        }
    }


    .address
    {
        display: flex;
        flex-direction: column;

        margin-top: var(--inner_gap_xl);
        padding-block: var(--inner_gap_xl) var(--inner_gap_xxl);
        padding-inline: var(--inner_gap_xl);

        font-size: calc(var(--font_size_l) - 1px);
        line-height: calc(100% + 11px);

        color: rgba(45, 45, 45, .70);
        border-radius: var(--border_radius_l);
        background: #f9f9f9;

        gap: var(--inner_gap_xxl);


        b
        {
            font-weight: 600;
        }


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

            height: 60px;
            padding-inline: var(--inner_gap_xxl);

            font-weight: 600;
            line-height: calc(100% + 7px);

            text-decoration: none;

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

            gap: var(--inner_gap_xs);

            transition: linear 0.2s;

            &:hover
            {
                transform: scale(1.05);
            }


            .icon
            {
                display: block;

                width: 20px;

                aspect-ratio: 1 / 1;
            }
        }
    }


    .map
    {
        position: relative;

        overflow: hidden;

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

        border-radius: 48px;
        background: var(--bg_grey);
    }
}



/*-------------------
    Category head
-------------------*/
.category_head
{
    margin-bottom: 83px;
    padding-top: 40px;


    .data
    {
        position: relative;

        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        min-height: 432px;
        margin-inline: auto;
        padding-block: 42px;

        color: var(--light_color);
        border-radius: 48px;
        background: var(--primary_color);


        .cont
        {
            position: relative;

            z-index: 3;
        }


        .breadcrumbs
        {
            margin-bottom: 32px;

            color: rgba(255, 255, 255, .8);


            a
            {
                text-decoration: none;

                color: rgba(255, 255, 255, .6);
            }


            .sep
            {
                color: rgba(255, 255, 255, .6);
            }
        }


        .title
        {
            width: 634px;
            max-width: 100%;

            font-family: var(--font_family2);
            font-size: var(--inner_gap_xxl);
            font-weight: 700;
            line-height: calc(100% + 12px);

            text-transform: uppercase;
        }


        .desc
        {
            width: 652px;
            max-width: 100%;
            margin-top: var(--inner_gap_s);

            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 11px);

            color: currentColor;
        }


        .image
        {
            position: absolute;
            inset: 0;

            display: block;

            z-index: 1;
            pointer-events: none;
        }
    }
}



/*-------------------
    Category info
------------------*/
.category_info
{
    position: relative;

    margin-bottom: 108px;
    padding-bottom: 96px;


    &:after
    {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        width: var(--content_width);
        height: 1px;
        margin-inline: auto;

        content: '';
        pointer-events: none;

        background: #f2f2f2;
    }



    .description
    {
        margin-top: 58px;

        font-weight: 400;
        line-height: calc(100% + 14px);

        color: #2f2f2f;
    }



    .categories
    {
        display: flex;
        flex-direction: column;

        margin-bottom: var(--inner_gap_xxl);
        padding: 40px;

        border-radius: var(--border_radius_l);
        background: #f9f9f9;

        gap: var(--inner_gap_xxl);


        .section
        {
            display: flex;
            flex-direction: column;

            gap: var(--inner_gap);
        }


        .title
        {
            font-size: 22px;
            font-weight: 600;
            line-height: calc(100% + 6px);

            color: #272727;
        }


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

            gap: var(--inner_gap_xs);


            a
            {
                display: block;

                padding-block: 3px;
                padding-inline: var(--inner_gap_l);

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 500;
                line-height: calc(100% + 11px);

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

                color: #383838;
                border-radius: var(--border_radius_max);
                background: var(--light_color);


                &.all_link
                {
                    min-width: 145px;
                }


                &:hover
                {
                    color: var(--primary_color);
                }


                &.active
                {
                    color: var(--light_color);
                    background: var(--primary_color);
                }
            }
        }
    }



    .bottom_categories
    {
        display: flex;
        flex-direction: column;

        margin-top: 44px;

        gap: var(--inner_gap);


        .title
        {
            font-size: 22px;
            font-weight: 600;
            line-height: calc(100% + 6px);

            color: #272727;
        }


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

            gap: var(--inner_gap_xs);


            a
            {
                display: block;

                padding-block: 3px;
                padding-inline: var(--inner_gap_l);

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 500;
                line-height: calc(100% + 11px);

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

                color: #383838;
                border-radius: var(--border_radius_max);
                background: #f9f9f9;


                &.all_link
                {
                    min-width: 145px;
                }


                &:hover
                {
                    color: var(--primary_color);
                }


                &.active
                {
                    color: var(--light_color);
                    background: var(--primary_color);
                }
            }
        }
    }
}



/*--------------
    Products
--------------*/
.products
{
    &.border
    {
        position: relative;

        margin-bottom: 92px;
        padding-bottom: 108px;


        &:after
        {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;

            display: block;

            width: var(--content_width);
            height: 1px;
            margin-inline: auto;

            content: '';
            pointer-events: none;

            background: #f2f2f2;
        }
    }


    .swiper
    {
        overflow: visible;

        padding-inline: 65px;

        --spaceBetween-0: var(--inner_gap_xs);
        --spaceBetween-1024: var(--inner_gap);
        --spaceBetween-1280: var(--inner_gap_l);
        --slidesPerView-0: auto;
        --slidesPerView-1024: 3;
        --slidesPerView-1280: 4;


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-1280);
            }


            .swiper-slide
            {
                width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280));
            }
        }


        .swiper-slide
        {
            visibility: hidden;

            transition: opacity .2s linear, visibility .2s linear;
            pointer-events: none;

            opacity: 0;


            &.visible
            {
                visibility: visible;

                pointer-events: auto;

                opacity: 1;
            }
        }
    }


    .grid_row
    {
        --items_per_line: 4;
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


    .product
    {
        position: relative;

        display: flex;
        flex-direction: column;

        border-radius: var(--border_radius_l);
        background: var(--light_color);
        box-shadow: 0 4.8px 75px 0 rgba(0, 0, 0, .05);


        .stickers
        {
            position: absolute;
            top: var(--inner_gap_l);
            left: var(--inner_gap_l);

            display: flex;
            flex-direction: column;

            z-index: 3;

            gap: var(--inner_gap_xxxs);


            .sticker
            {
                width: fit-content;
                padding-block: 2px;
                padding-inline: var(--inner_gap_xs);

                font-size: var(--font_size_s);
                font-weight: 500;
                line-height: 2;

                white-space: nowrap;

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


        .btns
        {
            position: absolute;
            top: 26px;
            right: 18px;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;

            z-index: 3;

            color: var(--light_color);


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

                height: 29px;
                padding-inline: 6px;


                .icon
                {
                    display: block;
                }


                &.favorite_btn
                {
                    .icon
                    {
                        width: 19px;
                        height: 17px;
                    }
                }


                &.compare_btn
                {
                    .icon
                    {
                        width: 15px;
                        height: 17px;
                    }
                }
            }
        }


        .image
        {
            display: block;

            text-decoration: none;

            color: currentColor;
        }


        .thumb
        {
            display: block;

            border-radius: var(--border_radius_l);
            background: var(--bg_grey);

            aspect-ratio: 1 / 1;
        }


        .info
        {
            display: flex;
            flex: 1 0 auto;
            flex-direction: column;

            padding-block: var(--inner_gap_xl) var(--inner_gap_l);
            padding-inline: var(--inner_gap_l);
        }


        .name
        {
            font-size: 24px;
            font-weight: 600;
            line-height: calc(100% + 4px);

            color: #272727;


            a
            {
                display: inline-block;

                transition: color .2s linear;
                vertical-align: top;
                text-decoration: none;

                color: currentColor;


                &:hover
                {
                    color: var(--primary_color);
                }
            }
        }


        .min
        {
            margin-top: 10px;

            font-size: calc(var(--font_size_xl) - 1px);
            font-weight: 400;
            line-height: calc(100% + 9px);

            color: rgba(39, 39, 39, .70);
        }


        .buy
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            margin-top: auto;
            padding-top: var(--inner_gap_xl);
        }


        .price
        {
            font-size: calc(var(--font_size_title) - 2px);
            font-weight: 700;
            line-height: 1;

            white-space: nowrap;

            color: #272727;
        }


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

            width: 47px;

            color: var(--light_color);
            border-radius: 50%;
            background: var(--primary_color);

            aspect-ratio: 1 / 1;

            transition: linear 0.2s;

            &:hover
            {
                transform: scale(1.1);
            }

            .icon
            {
                display: block;

                width: 22px;

                aspect-ratio: 1 / 1;
            }
        }
    }


    .callback_banner
    {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding-block: 40px var(--inner_gap_l);
        padding-inline: var(--inner_gap_l);

        border-radius: var(--border_radius_l);
        background: #303030;
        box-shadow: 0 4.8px 75px 0 rgba(0, 0, 0, .05);


        .title
        {
            font-size: 24px;
            font-weight: 600;
            line-height: calc(100% + 4px);

            text-align: center;

            color: var(--light_color);
        }


        .desc
        {
            margin-top: var(--inner_gap);

            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 5px);

            text-align: center;

            color: rgba(255, 255, 255, .70);
        }


        .form
        {
            margin-top: auto;
            padding-top: 40px;

            --form_border_radius: var(--border_radius_max);
            --form_bg_color: #393939;
            --form_placeholder_color: rgba(255, 255, 255, .5);


            .input
            {
                color: var(--light_color);
            }


            .checkbox
            {
                color: rgba(255, 255, 255, .80);


                .check
                {
                    color: var(--light_color);
                    border: none;
                    background: #393939;

                    & + *
                    {
                        color: rgba(255, 255, 255, .80);
                    }
                }
            }


            .submit
            {
                margin-top: 36px;
            }


            .submit_btn
            {
                height: 56px;

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


.content
{
    .products
    {
        .grid_row
        {
            --items_per_line: 3;
        }
    }
}



/*------------
    Filter
------------*/
.filter
{
    .mob_btn
    {
        display: none;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;

        width: 100%;
        height: 65px;
        padding-inline: 35px;

        font-size: var(--font_size_l);
        font-weight: 600;
        line-height: calc(100% + 6px);

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

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 24px;

            aspect-ratio: 1 / 1;
        }


        .count
        {
            min-width: 17px;
            height: 17px;
            padding-block: 2px 1px;
            padding-inline: 1px;

            font-size: var(--font_size_xs);
            font-weight: 700;
            line-height: calc(100% + 2px);

            text-align: center;

            color: #2e2e2e;
            border-radius: 6px;
            background: var(--light_color);
        }


        .arr
        {
            display: block;

            width: 12px;
            height: 8px;
            margin-left: auto;

            transition: transform .2s linear;
        }


        &.active
        {
            .arr
            {
                transform: rotate(180deg);
            }
        }
    }


    .form
    {
        display: flex;
        flex-direction: column;

        gap: var(--inner_gap_xl);
        --form_border_color: rgba(0, 0, 0, .10);
        --form_border_color_focus: rgba(0, 0, 0, .10);
        --form_border_radius: 0;
        --form_bg_color: none;
        --form_input_height: 42px;


        .item
        {
            display: flex;
            flex-direction: column;

            gap: var(--inner_gap_l);


            .label
            {
                font-size: 22px;
                font-weight: 600;
                line-height: calc(100% + 6px);

                color: #272727;
            }


            .data
            {
                display: flex;
                flex-direction: column;

                gap: var(--inner_gap_s);


                &.range
                {
                    --form_input_padding_inline: 38px var(--inner_gap_xs);
                }
            }


            .field + .field
            {
                margin-top: 0;
            }


            .fields
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;

                margin-top: var(--inner_gap_xxxs);


                .field
                {
                    width: calc(50% - var(--inner_gap_s) / 2);
                }


                .prefix
                {
                    position: absolute;
                    top: 0;
                    left: 0;

                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: flex-start;

                    height: 100%;
                    padding-left: 15px;

                    line-height: calc(100% + 12px);

                    pointer-events: none;

                    color: rgba(39, 39, 39, .40);
                }
            }
        }


        .checkbox
        {
            min-height: 28px;
            padding-left: 43px;

            font-size: var(--font_size);
            line-height: calc(100% + 10px);

            color: #272727;


            .check
            {
                top: 0;

                width: 28px;
                height: 28px;

                transform: none;

                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 8px;
                background: none;


                & + *
                {
                    color: rgba(50, 50, 50, .9);
                }


                .icon
                {
                    width: 12px;
                    height: 9px;
                }
            }
        }


        .submit
        {
            display: flex;
            flex-direction: column;

            gap: var(--inner_gap_xs);


            .submit_btn
            {
                height: 52px;

                border-radius: var(--border_radius_max);
                background: var(--primary_gradient);
            }


            .reset_btn
            {
                width: 100%;
                height: 52px;

                font-weight: 600;
                line-height: calc(100% + 8px);

                border: 1px solid #e3e3e3;
                border-radius: var(--border_radius_max);
            }
        }
    }
}



/*------------------
    Product info
------------------*/
.product_info
{
    margin-bottom: 149px;


    .cont
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .images
    {
        position: relative;

        display: flex;
        flex-direction: column;

        width: calc(100% - 580px - 72px);

        gap: var(--inner_gap_l);


        .zoom
        {
            position: absolute;
            top: var(--inner_gap_xxl);
            right: var(--inner_gap_xxl);

            width: 29px;

            z-index: 3;
            pointer-events: none;

            color: var(--light_color);

            aspect-ratio: 1 / 1;
        }


        .big
        {
            .swiper
            {
                border-radius: var(--border_radius_l);

                --spaceBetween-0: 10px;
                --spaceBetween-768: 0;
                --slidesPerView-0: auto;
                --slidesPerView-768: 1;


                &:not(.swiper-initialized)
                {
                    .swiper-wrapper
                    {
                        gap: var(--spaceBetween-768);
                    }
                }

                .swiper-button-next,
                .swiper-button-prev
                {
                    background: var(--light_color);

                    --swiper-navigation-color: rgba(50, 50, 50, .5);
                    --swiper-navigation-size: 60px;
                    --swiper-navigation-sides-offset: var(--inner_gap_l);
                }


                .swiper-horizontal > .swiper-pagination-bullets,
                .swiper-pagination-bullets.swiper-pagination-horizontal,
                .swiper-pagination-custom,
                .swiper-pagination-fraction
                {
                    bottom: var(--inner_gap_xl);
                }


                .swiper-pagination-bullet
                {
                    width: 8px;
                    height: 8px;

                    transform: none;

                    border: none;
                    border-radius: 50%;
                    background: var(--light_color);


                    &:hover,
                    &.active
                    {
                        background: var(--light_color);
                    }
                }


                .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet
                {
                    margin: 0;
                }
            }


            .image
            {
                display: block;

                text-decoration: none;

                color: currentColor;
            }


            .thumb
            {
                display: block;

                aspect-ratio: 1 / 1;
            }
        }


        .thumbs
        {
            .swiper
            {
                --spaceBetween-0: var(--inner_gap_s);
                --spaceBetween-768: var(--inner_gap_s);
                --slidesPerView-0: 4;
                --slidesPerView-768: 4;


                &:not(.swiper-initialized)
                {
                    .swiper-wrapper
                    {
                        gap: var(--spaceBetween-768);
                    }


                    .swiper-slide
                    {
                        width: calc(100% / var(--slidesPerView-768) - var(--spaceBetween-768));
                    }
                }


                .swiper-slide
                {
                    border-radius: var(--border_radius_xs);
                }
            }


            .thumb
            {
                display: block;

                cursor: pointer;

                border-radius: var(--border_radius_xs);

                aspect-ratio: 1 / 1;
            }
        }
    }


    .data
    {
        display: flex;
        flex-direction: column;

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

        gap: var(--font_size_xs);


        .product_title
        {
            width: 438px;
            max-width: 100%;

            font-family: var(--font_family2);
            font-size: var(--font_size_title_s);
            font-weight: 700;
            line-height: calc(100% + 12px);

            text-transform: uppercase;

            color: #323232;
        }


        .articul
        {
            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 12px);

            color: rgba(45, 45, 45, .70);
        }


        .desc
        {
            width: 502px;
            max-width: 100%;
            margin-top: var(--inner_gap_xxs);

            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 12px);

            color: #2d2d2d;
        }


        .buy
        {
            display: flex;
            flex-direction: column;

            margin-top: var(--inner_gap_xl);
            padding: var(--inner_gap_xl);

            border-radius: var(--border_radius_l);
            background: var(--light_color);
            box-shadow: 0 8.4px 72px 0 rgba(0, 0, 0, .05);
        }


        .features
        {
            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 12px);

            color: #2d2d2d;
        }


        .any_size
        {
            margin-top: var(--inner_gap);

            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 600;
            line-height: calc(100% + 12px);

            color: #2d2d2d;
        }


        .min
        {
            margin-top: var(--inner_gap_xxxs);

            font-size: calc(var(--font_size_l) - 1px);
            line-height: calc(100% + 12px);

            color: #2d2d2d;
        }


        .price
        {
            width: fit-content;
            margin-top: var(--inner_gap_l);
            padding-block: var(--inner_gap_xs);
            padding-inline: var(--inner_gap_xl);

            font-size: var(--font_size_xl);
            line-height: calc(100% + 8px);

            color: #323232;
            border-radius: 40px;
            background: #f9f9f9;


            b
            {
                font-size: var(--font_size_title_s);
                line-height: 28px;
            }
        }


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

            margin-top: var(--inner_gap_xxl);

            gap: var(--inner_gap_xs);


            .btn
            {
                min-width: 172px;
                height: 60px;
                padding-inline: var(--inner_gap_xxl);

                font-size: calc(var(--font_size_l) - 1px);
                font-weight: 600;
                line-height: calc(100% + 7px);

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

                transition: linear 0.2s;

                &:hover
                {
                    transform: scale(1.05);
                }


                &.outlined_btn
                {
                    color: var(--dark_color);
                    border: 1px solid rgba(0, 0, 0, .10);
                    background: none;
                }
            }
        }


        .manager
        {
            position: relative;

            display: flex;
            overflow: hidden;
            flex-direction: column;

            margin-top: var(--inner_gap_xxl);
            padding: 30px;

            border-radius: var(--border_radius_l);
            background: #e92f48;

            gap: var(--inner_gap_xs);


            & > *
            {
                position: relative;

                z-index: 3;
            }


            .title
            {
                position: relative;

                font-family: var(--font_family2);
                font-size: 24px;
                font-weight: 300;
                line-height: calc(100% + 10px);

                z-index: 3;
                text-transform: uppercase;

                color: var(--light_color);


                b
                {
                    font-weight: 700;
                }
            }


            .info
            {
                position: relative;

                display: flex;
                flex-direction: column;

                width: 366px;
                max-width: 100%;
                padding-block: 30px;
                padding-inline: var(--inner_gap_l);

                z-index: 3;

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

                gap: var(--inner_gap_xxs);


                .phone
                {
                    display: flex;
                    align-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    font-weight: 500;
                    line-height: calc(100% + 13px);

                    color: #323232;

                    gap: var(--inner_gap_xxs);


                    .icon
                    {
                        display: block;

                        width: 18px;
                        margin-block: 5px;

                        color: var(--primary_color);

                        aspect-ratio: 1 / 1;
                    }


                    a
                    {
                        white-space: nowrap;
                        text-decoration: none;

                        color: currentColor;

                        transition: 0.2s;

                        &:hover{
                            color: var(--primary_color);
                        }
                    }


                    .work_time
                    {
                        font-size: var(--font_size_xs);
                        font-weight: 400;
                        line-height: calc(100% + 7px);

                        opacity: .4;
                    }


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

                        margin-left: auto;

                        gap: var(--inner_gap_xxs);


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

                            width: 48px;

                            text-decoration: none;

                            color: currentColor;
                            border-radius: 14px;
                            background: #fafafa;

                            aspect-ratio: 1 / 1;

                            transition: linear 0.2s;

                            &:hover
                            {
                                transform: scale(1.2);
                            }


                            svg
                            {
                                display: block;
                            }


                            &.tg_link
                            {
                                color: #2dbaff;


                                svg
                                {
                                    width: 17px;
                                    height: 15px;
                                }
                            }


                            &.vk_link
                            {
                                color: #07f;


                                svg
                                {
                                    width: 22px;
                                    height: 13px;
                                }
                            }
                        }
                    }
                }


                .email
                {
                    display: flex;
                    align-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    font-weight: 500;
                    line-height: calc(100% + 13px);

                    color: #323232;

                    gap: var(--inner_gap_xxs);


                    .icon
                    {
                        display: block;

                        width: 18px;
                        margin-block: 6px;

                        color: var(--primary_color);

                        aspect-ratio: 1 / 1;


                        & + *
                        {
                            width: calc(100% - 18px - var(--inner_gap_xxs));
                        }
                    }


                    a
                    {
                        white-space: nowrap;
                        text-decoration: none;

                        color: currentColor;

                        transition: 0.2s;

                        &:hover{
                            color: var(--primary_color);
                        }
                    }
                }
            }


            .person
            {
                position: absolute;
                right: 0;
                bottom: 0;

                z-index: 2;


                .photo
                {
                    display: block;

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


                    img
                    {
                        display: block;

                        width: 100%;
                    }
                }


                .post
                {
                    position: absolute;
                    bottom: 30px;
                    left: 50%;

                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: center;

                    width: 110px;
                    height: 31px;
                    padding-bottom: 2px;

                    font-size: 10px;
                    font-weight: 700;

                    transform: translateX(-50%);
                    white-space: nowrap;

                    color: var(--light_color);
                    border-radius: 8px;
                    background: rgba(0, 0, 0, .50);

                            backdrop-filter: blur(7.72px);
                    -webkit-backdrop-filter: blur(7.72px);

                    transform: translateZ(0); 
                    will-change: backdrop-filter;
                }
            }


            .bg
            {
                position: absolute;
                inset: 0;

                display: block;

                z-index: 1;
                pointer-events: none;

                opacity: .075;
            }
        }
    }
}



/*------------------
    Product data
------------------*/
.product_data
{
    margin-bottom: 98px;


    .mob_btn
    {
        display: none;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        width: 100%;
        height: 65px;
        padding-inline: 35px;

        font-size: var(--font_size_l);
        font-weight: 600;
        line-height: calc(100% + 6px);

        transition: .2s linear;

        color: #383838;
        border-radius: var(--border_radius_max);
        background: #f8f8f8;

        gap: var(--inner_gap_xxs);


        .icon
        {
            display: block;

            width: 12px;
            height: 8px;
            margin-left: auto;

            transition: transform .2s linear;
        }


        &.active
        {
            color: var(--light_color);
            background: var(--primary_color);


            .arr
            {
                transform: rotate(180deg);
            }
        }
    }


    .mob_btn ~ .mob_btn
    {
        margin-top: var(--inner_gap);
    }


    .features
    {
        display: flex;
        flex-direction: column;

        width: 820px;
        max-width: 100%;
        margin-inline: auto;

        font-size: calc(var(--font_size_l) - 1px);
        line-height: calc(100% + 11px);

        color: #2d2d2d;

        gap: var(--inner_gap_xl);


        & > *
        {
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            flex-wrap: nowrap;
            justify-content: space-between;

            gap: var(--inner_gap_s);
        }


        .label
        {
            white-space: nowrap;

            color: rgba(45, 45, 45, .70);
        }


        .line
        {
            width: 100%;
            height: 1px;
            margin-bottom: var(--inner_gap_xxs);

            background: rgba(0, 0, 0, .10);
        }


        .val
        {
            width: 465px;
            min-width: 465px;
            max-width: 100%;

            font-weight: 500;
        }
    }


    .steps
    {
        display: flex;
        flex-direction: column;

        width: 442px;
        max-width: 100%;
        margin-inline: auto;

        counter-reset: number;

        gap: var(--inner_gap_s);


        .step
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            min-height: 80px;
            padding: var(--inner_gap_l);

            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 500;
            line-height: calc(100% + 6px);

            color: #2d2d2d;
            border-radius: 15px;
            background: #f8f8f8;

            gap: var(--inner_gap_xs);


            .number
            {
                width: 24px;

                font-weight: 700;

                text-align: center;
                white-space: nowrap;

                color: var(--primary_color);


                &:before
                {
                    content: counter(number, decimal-leading-zero);
                    counter-increment: number;
                }


                & + *
                {
                    width: calc(100% - 24px - var(--inner_gap_xs));
                }
            }
        }
    }


    .delivery_payment
    {
        width: 1042px;
        max-width: 100%;
        margin-inline: auto;


        .item
        {
            display: flex;
            flex-direction: column;

            padding: var(--inner_gap_l);

            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 500;
            line-height: calc(100% + 6px);

            color: #2d2d2d;
            border-radius: 15px;
            background: #f8f8f8;

            gap: var(--inner_gap_s);


            .name
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;

                font-weight: 700;

                gap: var(--inner_gap_xxs);


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

                    width: 18px;

                    aspect-ratio: 1 / 1;


                    img
                    {
                        display: block;

                        max-width: 100%;
                        max-height: 100%;
                    }
                }


                span
                {
                    width: calc(100% - 18px - var(--inner_gap_xxs));
                }
            }


            .desc
            {
                padding-left: calc(18px + var(--inner_gap_xxs));


                ul
                {
                    display: flex;
                    flex-direction: column;

                    gap: var(--inner_gap_xxs);


                    li
                    {
                        position: relative;

                        display: block;
                        overflow: hidden;

                        padding-left: var(--inner_gap_xs);

                        list-style-type: none;


                        &:before
                        {
                            position: absolute;
                            top: .5lh;
                            left: 0;

                            display: block;

                            width: 6px;

                            content: '';
                            transform: translateY(-50%);

                            border-radius: 50%;
                            background: var(--primary_color);

                            aspect-ratio: 1 / 1;
                        }
                    }
                }
            }
        }
    }


    .files
    {
        width: 1060px;
        max-width: 100%;
        margin-inline: auto;


        .grid_row
        {
            --items_per_line: 4;
        }


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

            padding-block: var(--inner_gap);
            padding-inline: var(--inner_gap_l);

            text-decoration: none;

            color: #2d2d2d;
            border-radius: 15px;
            background: #f8f8f8;

            gap: var(--inner_gap_xxs);


            .icon
            {
                width: 14px;
                height: 17px;

                color: var(--primary_color);


                & + *
                {
                    max-width: calc(100% - 14px - var(--inner_gap_xxs));
                }
            }


            .name
            {
                font-size: 17px;
                font-weight: 700;
                line-height: calc(100% + 4px);
            }


            .desc
            {
                margin-top: 3px;

                font-size: 11px;
                font-weight: 500;

                opacity: .5;
            }
        }
    }


    .questions
    {
        display: flex;
        flex-direction: column;

        width: 550px;
        max-width: 100%;
        margin-inline: auto;

        counter-reset: number;

        gap: var(--inner_gap_s);


        .item
        {
            display: flex;
            flex-direction: column;

            padding: var(--inner_gap_l);

            font-size: calc(var(--font_size_l) - 1px);

            color: #2d2d2d;
            border-radius: 15px;
            background: #f8f8f8;

            gap: var(--inner_gap_xs);


            .question
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;

                font-weight: 700;
                line-height: calc(100% + 9px);

                gap: var(--inner_gap_xs);


                .icon
                {
                    display: block;

                    width: 18px;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;
                }


                span
                {
                    width: calc(100% - 18px - var(--inner_gap_xs));
                }
            }


            .answer
            {
                padding-left: calc(18px + var(--inner_gap_xs));

                line-height: calc(100% + 9px);
            }
        }
    }
}



/*-------------------
    Consult block
-------------------*/
.consult_block
{
    margin-bottom: 122px;


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

        --content_width: var(--content_width_w);
        gap: var(--inner_gap_xs);
    }


    .data
    {
        position: relative;

        overflow: hidden;

        width: calc(100% - 563px - var(--inner_gap_xs));
        padding-block: 72px var(--block_padding);
        padding-inline: var(--block_padding);

        color: var(--light_color);
        border-radius: var(--border_radius_xl);
        background: #e92f48;


        & > *
        {
            position: relative;

            z-index: 3;
        }


        .block_title
        {
            width: 662px;
            max-width: 100%;

            font-family: var(--font_family2);
            font-size: 38px;
            font-weight: 700;
            line-height: calc(100% + 20px);

            text-transform: uppercase;
        }


        .block_desc
        {
            width: 613px;
            max-width: 100%;
            margin-top: var(--inner_gap_xs);

            font-size: var(--font_size_l);
            font-weight: 300;
            line-height: calc(100% + 13px);
        }


        .form
        {
            width: 602px;
            max-width: 100%;
            margin-top: var(--inner_gap_xxl);

            --form_border_radius: var(--border_radius_s);
            --form_bg_color: #b92539;
            --form_placeholder_color: #ff7689;
            --form_line_gap: var(--inner_gap_xs);
            --form_input_height: 72px;
            --form_input_padding_inline: var(--inner_gap_xl);


            .input
            {
                color: var(--light_color);
            }


            .agree
            {
                align-self: center;
            }


            .checkbox
            {
                color: var(--light_color);


                .check
                {
                    color: var(--light_color);
                    border-color: transparent;
                    background: rgba(185, 37, 57, .5);


                    & + *
                    {
                        color: var(--light_color);
                    }
                }
            }


            .submit_btn
            {
                color: var(--dark_color);
                background: var(--light_color);
            }
        }


        .bg
        {
            position: absolute;
            inset: 0;

            display: block;

            z-index: 1;
            pointer-events: none;

            opacity: .075;
        }
    }


    .image
    {
        display: block;

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

        border-radius: var(--border_radius_xl);
        background: var(--bg_grey);
    }
}



/*----------------------
    Other categories
----------------------*/
.other_categories
{
    position: relative;

    margin-bottom: 92px;
    padding-bottom: 108px;


    &:after
    {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        width: var(--content_width);
        height: 1px;
        margin-inline: auto;

        content: '';
        pointer-events: none;

        background: #f2f2f2;
    }


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


    .category
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;

        padding: var(--inner_gap_l);

        text-decoration: none;

        color: currentColor;
        border-radius: 48px;
        background: #f8f8f8;

        gap: var(--inner_gap_xl);


        .thumb
        {
            width: 150px;
            max-width: 100%;

            border-radius: 28px;
            background: var(--light_color);

            aspect-ratio: 1 / 1;


            & + *
            {
                display: flex;
                align-self: center;
                flex-direction: column;

                width: calc(100% - 150px - var(--inner_gap_xl));

                gap: var(--inner_gap_xs);
            }
        }


        .name
        {
            font-size: 22px;
            font-weight: 600;
            line-height: calc(100% + 6px);

            transition: color .2s linear;

            color: #272727;
        }


        .desc
        {
            width: 240px;
            max-width: 100%;

            line-height: calc(100% + 6px);

            color: #272727;


            &.l_w
            {
                width: 324px;
            }
        }


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

            margin-top: var(--inner_gap_xxs);

            color: var(--primary_color);

            gap: var(--inner_gap_xxs);




            .icon
            {
                display: block;

                width: 5px;
                height: 9px;
                margin-top: 2px;
            }
        }


        &:hover
        {
            .name
            {
                color: var(--primary_color);
            }
        }
    }
}



/*--------------
    Get free
--------------*/
.get_free
{
    position: relative;

    margin-bottom: 96px;
    padding-bottom: 96px;


    &:after
    {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        width: var(--content_width);
        height: 1px;
        margin-inline: auto;

        content: '';
        pointer-events: none;

        background: #f2f2f2;
    }


    .cont
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .block_head
    {
        width: 700px;
        max-width: 100%;
        margin-bottom: 0;

        gap: var(--inner_gap_xl);


        .desc
        {
            b
            {
                display: block;

                margin-bottom: var(--inner_gap_xxs);

                color: #2a2a2a;
            }
        }
    }


    .form
    {
        width: 421px;
        max-width: 100%;
        padding: var(--cont_padding_double);

        border-radius: 60px;
        background: rgba(255, 255, 255, .6);
        box-shadow: 0 24px 60px 0 rgba(0, 0, 0, .10);

        --form_border_radius: var(--border_radius_s);
        --form_input_height: 76px;


        .submit_btn
        {
            border-radius: var(--border_radius_max);

            transition: linear 0.2s;

            &:hover {
                transform: scale(1.05);
            }
        }
    }
}



/*------------
    Why we
------------*/
.why_we
{
    margin-bottom: 133px;


    .block_head
    {
        margin-bottom: 80px;
    }


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


    .item
    {
        display: flex;
        flex-direction: column;

        padding: var(--cont_padding_double);

        border-radius: var(--border_radius_l);
        background: var(--light_color);
        box-shadow: 0 24px 72px 0 rgba(0, 0, 0, .10);

        gap: var(--inner_gap);


        .top
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: space-between;

            gap: var(--inner_gap_s);
        }


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

            width: 54px;

            border-radius: var(--border_radius_xs);
            background: var(--primary_color);

            aspect-ratio: 1 / 1;


            img
            {
                display: block;

                width: 30px;

                aspect-ratio: 1 / 1;
            }
        }


        .name
        {
            align-self: center;

            width: calc(100% - 54px - var(--inner_gap_s));

            font-size: var(--font_size_xl);
            font-weight: 700;
            line-height: calc(100% + 8px);

            color: #424242;
        }


        .desc
        {
            font-size: calc(var(--font_size_xl) - 1px);
            line-height: calc(100% + 11px);

            opacity: .7;
            color: #2f2f2f;
        }
    }
}



/*-------------
    Reviews
-------------*/
.reviews
{
    margin-bottom: 136px;


    .swiper
    {
        overflow: visible;

        --spaceBetween-0: var(--inner_gap_xs);
        --spaceBetween-768: var(--inner_gap_l);
        --slidesPerView-0: auto;
        --slidesPerView-768: auto;


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-768);
            }
        }


        .swiper-slide
        {
            width: 372px;
        }
    }


    .head
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;

        margin-bottom: 67px;


        .block_head
        {
            width: 478px;
            max-width: 100%;
            margin-bottom: 0;
        }

        .swiper-controls{
            align-self: center;
        }


        .rating
        {
            position: relative;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;

            width: 263px;
            max-width: 100%;
            padding-block: var(--inner_gap_s) var(--inner_gap);
            padding-inline: var(--inner_gap);

            border-radius: var(--border_radius_s);
            background: var(--light_color);
            box-shadow: 0 15px 46px 0 rgba(0, 0, 0, .10);

            margin-right: auto;


            .val
            {
                font-family: var(--font_family2);
                font-size: 23px;
                font-weight: 700;
                line-height: calc(100% + 12px);

                color: #424242;
            }


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

                margin-bottom: 2px;
                margin-left: var(--inner_gap_s);

                color: var(--primary_color);

                gap: 6px;


                .icon
                {
                    display: block;

                    width: 17px;
                    height: 15px;
                }
            }


            .logo_2gis
            {
                position: absolute;
                top: -8px;
                right: -12px;

                display: block;

                transform: rotate(15deg);

                filter: drop-shadow(0 12px 27px #0f0);


                img
                {
                    display: block;

                    width: 46px;

                    aspect-ratio: 1/1;
                }
            }


            .more
            {
                width: 100%;
                margin-top: var(--inner_gap_xxxs);

                line-height: calc(100% + 5px);

                color: #7a7a7a;


                a
                {
                    color: var(--primary_color);

                    text-decoration-thickness: 1px;
                }
            }
        }
    }


    .review
    {
        display: flex;
        flex-direction: column;

        padding: var(--inner_gap_xxl);

        border-radius: var(--border_radius_l);
        background: #fbfbfb;

        gap: var(--inner_gap_l);


        .author
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            gap: var(--inner_gap_s);


            .photo
            {
                display: block;

                width: 54px;

                border-radius: var(--border_radius_xs);

                aspect-ratio: 1 / 1;
            }


            .name
            {
                width: calc(100% - 54px - var(--inner_gap_s));

                font-size: var(--font_size_l);
                font-weight: 600;
                line-height: calc(100% + 3px);

                color: #424242;
            }
        }


        .text
        {
            font-weight: 300;
            line-height: calc(100% + 12px);

            color: #3a3a3a;
        }


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

            margin-top: var(--inner_gap_xl);

            text-decoration: none;

            gap: var(--inner_gap_l);


            .info{
                display: flex;
                color: #3A3A3A;
                gap:10px;
                flex-direction: column;
            }



            .thumb
            {
                display: block;

                width: 72px;
                max-width: 100%;
                height: 100px;

                border: 1px solid #e5e5e5;
                border-radius: 10px;
            }



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

                margin-bottom: var(--inner_gap);

                font-size: var(--font_size_s);
                font-weight: 500;
                line-height: calc(100% + 5px);

                color: var(--primary_color);

                gap: var(--inner_gap_xxs);


                .icon
                {
                    display: block;

                    width: 9px;

                    aspect-ratio: 1 / 1;
                }
            }
        }
    }
}



/*--------------
    Trust us
--------------*/
.trust_us
{
    margin-bottom: 112px;


    & > .data
    {
        overflow: hidden;

        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 64px;

        border-radius: 48px;
        background: #fafafa;
    }


    .block_head
    {
        position: relative;

        margin-bottom: var(--inner_gap_xl);
        padding-bottom: var(--block_padding);


        .desc
        {
            width: 544px;
            max-width: 100%;
        }


        &:after
        {
            position: absolute;
            right: 112px;
            bottom: 0;

            display: block;

            width: 100vw;
            height: 1px;

            content: '';
            pointer-events: none;

            background: #f1f1f1;
        }
    }


    .logos
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;


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

            height: 102px;


            img
            {
                display: block;

                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}



/*-------------------
    Delivery info
-------------------*/
.delivery_info
{
    margin-bottom: 108px;


    & > .data
    {
        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
    }


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


    .item
    {
        position: relative;

        display: flex;
        overflow: hidden;
        flex-direction: column;

        padding-block: 48px 56px;
        padding-inline: 84px 168px;

        color: var(--light_color);
        border-radius: 48px;
        background: #262626;

        gap: var(--inner_gap_xs);


        &:nth-child(2n)
        {
            padding-inline: 84px 120px;
        }


        &.primary
        {
            background: var(--primary_color);


            .name
            {
                .icon
                {
                    img
                    {
                        width: 23px;
                        height: 14px;
                    }
                }
            }


            .desc
            {
                width: 332px;

                color: currentColor;
                background: none;

                -webkit-text-fill-color: currentColor;
            }


            .image
            {
                align-content: center;
                align-items: center;
            }
        }


        & > *
        {
            position: relative;

            z-index: 3;
        }


        .name
        {
            position: relative;

            padding-left: 32px;

            font-family: var(--font_family2);
            font-size: 24px;
            font-weight: 600;
            line-height: calc(100% + 13px);

            text-transform: uppercase;

            gap: var(--inner_gap_xxs);


            .icon
            {
                position: absolute;
                top: .5lh;
                left: 0;

                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                transform: translateY(-50%);


                img
                {
                    display: block;

                    width: 24px;
                    height: 17px;
                }
            }
        }


        .desc
        {
            max-width: 100%;
            padding-left: 32px;

            font-size: calc(var(--font_size_l) - 1px);
            font-weight: 300;
            line-height: calc(100% + 8px);

            background: linear-gradient(99deg, rgba(255, 255, 255, .40) -3.63%, rgba(255, 255, 255, .70) 46.69%, rgba(255, 255, 255, .40) 100%);
            -webkit-background-clip: text;
                    background-clip: text;

            -webkit-text-fill-color: transparent;
        }


        .image
        {
            position: absolute;
            right: 0;
            bottom: 0;

            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            flex-wrap: wrap;
            justify-content: flex-start;

            height: 100%;

            z-index: 1;
            pointer-events: none;


            img
            {
                display: block;

                max-height: 100%;
            }
        }
    }
}



/*---------
    FAQ
---------*/
.FAQ
{
    margin-bottom: 95px;


    & > .data
    {
        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 64px;

        border-radius: 48px;
        background: #fafafa;
    }


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

        margin-bottom: 51px;


        .block_head
        {
            margin-bottom: 0;
        }


        .contacts
        {
            display: flex;
            flex-direction: column;

            gap: var(--inner_gap_s);


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

                width: fit-content;

                font-size: var(--font_size_l);
                font-weight: 500;
                line-height: calc(100% + 3px);

                transition: opacity .2s linear;

                opacity: .4;
                color: #424242;

                gap: var(--inner_gap_xxs);


                .icon
                {
                    display: block;

                    width: 19px;

                    aspect-ratio: 1 / 1;
                }


                &:hover
                {
                    opacity: 1;
                }
            }


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

                gap: var(--inner_gap_xxxs);


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

                    width: 91px;
                    height: 34px;

                    text-decoration: none;

                    color: currentColor;
                    border-radius: 12px;
                    background: var(--light_color);
                    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .00);


                    .icon
                    {
                        display: block;
                    }


                    &.vk_link
                    {
                        color: #07f;


                        .icon
                        {
                            width: 16px;
                            height: 10px;
                        }
                    }


                    &.tg_link
                    {
                        color: #2dbaff;


                        .icon
                        {
                            width: 14px;
                            height: 12px;
                        }
                    }
                }
            }
        }
    }


    .text_block
    {
        width: 828px;
        max-width: 100%;

        font-size: var(--font_size);
        font-weight: 300;
        line-height: calc(100% + 13px);

        color: #353535;
    }


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

        margin-top: 80px;
        padding-inline: var(--inner_gap_xxl)  var(--inner_gap_l);

        gap: var(--inner_gap_xs);


        .data
        {
            position: relative;

            width: calc(100% - 349px - var(--inner_gap_xs));
            padding: var(--cont_padding_double);

            color: var(--light_color);
            border-radius: var(--border_radius_l);
            background: linear-gradient(91deg, #2d2d2d 19.66%, #434343 49.52%, #2d2d2d 79.6%);


            & > *
            {
                position: relative;

                z-index: 3;
            }


            .title
            {
                width: 402px;
                max-width: 100%;

                font-family: var(--font_family2);
                font-size: var(--font_size_title_s);
                font-weight: 600;
                line-height: calc(100% + 15px);

                text-transform: uppercase;
            }


            .desc
            {
                margin-top: var(--inner_gap_xs);

                font-weight: 300;
            }


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

                width: fit-content;
                margin-top: var(--inner_gap_l);
                padding-block: var(--inner_gap_s);
                padding-inline: var(--inner_gap_s) var(--inner_gap);

                text-transform: uppercase;

                border-radius: var(--border_radius_xs);
                background: rgba(0, 0, 0, .1);

                gap: var(--inner_gap_xs);


                .icon
                {
                    display: block;

                    width: 19px;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;
                }


                a
                {
                    font-family: var(--font_family2);
                    font-size: calc(var(--font_size_xl) - 1px);

                    white-space: nowrap;
                    text-decoration: none;

                    color: currentColor;
                    transition: 0.2s;

                    &:hover{
                        color: var(--primary_color);
                    }
                }


                .work_time
                {
                    margin-top: var(--inner_gap_xxxs);

                    font-size: calc(var(--font_size_s));
                    font-weight: 300;

                    opacity: .5;
                }
            }


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

                width: fit-content;
                margin-top: var(--inner_gap_xxs);
                padding-block: var(--inner_gap_s);
                padding-inline: var(--inner_gap_s) var(--inner_gap);

                text-transform: uppercase;

                border-radius: var(--border_radius_xs);
                background: rgba(0, 0, 0, .1);

                gap: var(--inner_gap_xs);


                .icon
                {
                    display: block;

                    width: 19px;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;
                }


                a
                {
                    font-family: var(--font_family2);
                    font-size: calc(var(--font_size_xl) - 1px);

                    white-space: nowrap;
                    text-decoration: none;

                    color: currentColor;

                    transition: 0.2s;

                    &:hover{
                        color: var(--primary_color);
                    }
                }
            }


            .image
            {
                position: absolute;
                right: 0;
                bottom: 0;

                display: block;

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

                z-index: 1;
                pointer-events: none;


                img
                {
                    display: block;

                    width: 100%;
                }
            }
        }


        .messengers
        {
            display: flex;
            flex-direction: column;

            width: 349px;
            max-width: 100%;
            padding: var(--cont_padding_double);

            border-radius: var(--border_radius_l);
            background: var(--light_color);
            box-shadow: 0 24px 84px 0 rgba(0, 0, 0, .10);

            gap: var(--inner_gap_l);


            .label
            {
                font-size: calc(var(--font_size_xl) - 1px);
                font-weight: 500;
                line-height: calc(100% + 9px);

                color: #353535;
            }


            .items
            {
                display: flex;
                flex-direction: column;

                gap: var(--inner_gap_xs);


                a
                {
                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    width: 100%;
                    height: 60px;
                    padding-inline: var(--inner_gap_l);

                    font-weight: 600;

                    text-decoration: none;

                    color: rgba(53, 53, 53, .8);
                    border-radius: var(--border_radius_xs);
                    background: #fafafa;

                    gap: var(--inner_gap_xxs);

                    transition: linear 0.2s;

                    &:hover {
                        transform: scale(1.05);
                    }


                    .icon
                    {
                        display: block;
                    }


                    &.vk_link
                    {
                        .icon
                        {
                            width: 22px;
                            height: 13px;

                            color: #07f;
                        }
                    }


                    &.tg_link
                    {
                        .icon
                        {
                            width: 19px;
                            height: 17px;
                            margin-inline: 2px 1px;

                            color: #2dbaff;
                        }
                    }


                    span
                    {
                        width: calc(100% - 22px - var(--inner_gap_xxs));
                    }
                }
            }
        }
    }
}



/*------------
    Footer
------------*/
footer
{
    margin-bottom: -20px;


    .data
    {
        width: var(--content_width_w);
        max-width: calc(100% - var(--cont_padding_double));
        margin-inline: auto;
        padding-block: 52px;

        border-radius: 48px;
        background: var(--bg_grey);
    }


    .cont
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .info
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

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

        gap: var(--cont_padding_double);
    }


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

        font-size: var(--font_size_s);
        line-height: 1;

        text-decoration: none;

        color: currentColor;

        gap: var(--inner_gap_xs);


        img
        {
            display: block;

            width: 36px;

            aspect-ratio: 1 / 1;
        }
    }


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

        font-size: var(--font_size_s);
        line-height: 1;

        gap: var(--inner_gap_xxl);


        a
        {
            transition: opacity .2s linear;
            text-decoration: none;

            opacity: .5;
            color: currentColor;


            &:hover,
            &.active
            {
                opacity: 1;
            }
        }
    }


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

        width: 100%;

        font-size: var(--font_size_xs);
        font-weight: 300;
        line-height: calc(100% + 2px);

        gap: var(--cont_padding_double);


        a
        {
            transition: opacity .2s linear;

            opacity: .5;
            color: currentColor;

            text-decoration-thickness: 1px;


            &:hover
            {
                opacity: 1;
            }
        }
    }


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

        gap: var(--inner_gap_xs);


        .label
        {
            font-size: var(--font_size_s);
            font-weight: 500;
            line-height: 1;
        }


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

            gap: var(--inner_gap_xxs);


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

                width: 47px;

                text-decoration: none;

                color: currentColor;
                border-radius: 50%;
                background: var(--bg);

                aspect-ratio: 1 / 1;

                transition: linear 0.2s;

                &:hover
                {
                    transform: scale(1.2);
                }
            }


            .icon
            {
                display: block;
            }


            .tg_link
            {
                color: #2dbaff;


                .icon
                {
                    width: 17px;
                    height: 15px;
                }
            }


            .vk_link
            {
                color: #07f;


                .icon
                {
                    width: 22px;
                    height: 13px;
                }
            }


            .max_link
            {
                color: #6b17d1;


                .icon
                {
                    width: 18px;
                    height: 18px;
                }
            }
        }
    }


    .contacts
    {
        display: flex;
        align-content: flex-end;
        align-items: flex-end;
        flex-direction: column;

        font-size: var(--font_size_s);
        font-weight: 500;
        line-height: 1;

        text-align: right;

        gap: var(--inner_gap);


        .icon
        {
            display: block;

            color: #d3d3d3;
        }


        a
        {
            white-space: nowrap;
            text-decoration: none;

            color: currentColor;

            transition: 0.2s;

            &:hover {
                color: var(--primary_color);
            }

        }


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

            gap: var(--inner_gap_xxs);


            .icon
            {
                width: 10px;
                height: 15px;
            }
        }


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

            gap: var(--inner_gap_xxs);


            .icon
            {
                width: 12px;
                height: 9px;
            }
        }


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

            gap: 6px;


            .icon
            {
                width: 14px;
                height: 14px;
            }
        }


        .work_time
        {
            margin-top: calc(var(--inner_gap_xxs) * -1);

            font-size: var(--font_size_xs);
            font-weight: 400;
            line-height: calc(100% + 7px);

            opacity: .4;
        }


        .callback_btn
        {
            height: 47px;
            margin-top: var(--inner_gap_xxs);
            padding-inline: var(--inner_gap_l);

            font-size: calc(var(--font_size_s) - 1px);
            font-weight: 600;
            line-height: 1;

            color: var(--light_color);
            border-radius: var(--border_radius_max);
            background: var(--primary_color);
            box-shadow: 0 4.8px 72px 0 rgba(0, 0, 0, .10);

            transition: linear 0.2s;

            &:hover {
                transform: scale(1.05);
            }
        }
    }
}



/*-----------
    PopUp
-----------*/
.modal
{
    display: none;
    visibility: visible !important;
    flex-direction: column;

    width: var(--modal_width);
    max-width: 100%;
    padding-block: var(--block_padding) var(--inner_gap_xl);
    padding-inline: var(--inner_gap_xl);

    cursor: default;

    color: var(--dark_color);
    border-radius: var(--border_radius_l);
    background: var(--light_color);

    --modal_width: 355px;


    .title
    {
        font-family: var(--font_family2);
        font-size: 30px;
        font-weight: 700;
        line-height: calc(100% + 14px);

        text-transform: uppercase;

        color: #585858;


        &.small
        {
            font-size: 26px;
        }
    }


    .desc
    {
        margin-top: var(--inner_gap_s);

        font-size: var(--font_size_s);
        line-height: calc(100% + 8px);

        color: rgba(58, 58, 58, .80);
    }


    .form
    {
        margin-top: var(--inner_gap);
    }


    &#cart_modal
    {
        .list
        {
            display: flex;
            flex-direction: column;

            margin-top: var(--inner_gap);

            gap: 10px;
        }


        .product
        {
            position: relative;

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

            padding: 10px;

            border-radius: 15px;
            background: #f6f6f6;

            gap: var(--inner_gap_s);


            .delete_btn
            {
                position: absolute;
                top: var(--inner_gap_xs);
                right: var(--inner_gap_xs);

                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                transition: .2s linear;

                opacity: .7;
                color: #bbb;


                .icon
                {
                    display: block;

                    width: 12px;

                    aspect-ratio: 1 / 1;
                }


                &:hover
                {
                    opacity: 1;
                    color: #8f8f8f;
                }
            }


            .thumb
            {
                display: block;

                width: 60px;

                border-radius: 10px;

                aspect-ratio: 1 / 1;


                & + *
                {
                    display: flex;
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    width: calc(100% - 60px - var(--inner_gap_s));

                    gap: var(--inner_gap_xxs);
                }
            }


            .name
            {
                width: 100%;
                padding-right: var(--inner_gap_l);

                font-size: var(--font_size_l);
                font-weight: 600;

                color: #272727;
            }


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


                .btn
                {
                    width: 15px;

                    transition: transform .2s linear;

                    color: var(--primary_color);

                    aspect-ratio: 1 / 1;


                    .icon
                    {
                        display: block;

                        width: 100%;

                        aspect-ratio: 1 / 1;
                    }


                    &:hover
                    {
                        transform: scale(1.2);
                    }
                }


                .input
                {
                    display: block;

                    width: 70px;
                    height: 15px;
                    padding-inline: var(--inner_gap_xxs);

                    font-family: var(--font_family);
                    font-size: calc(var(--font_size_s) - 1px);

                    text-align: center;

                    color: rgba(39, 39, 39, .70);
                    border: none;
                    background: none;
                }
            }


            .price
            {
                font-size: calc(var(--font_size_s) - 1px);
                font-weight: 700;

                color: var(--primary_color);
            }
        }
    }


    &.success
    {
        align-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        height: 436px;

        text-align: center;


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

            width: 40px;
            margin-bottom: var(--inner_gap);

            color: var(--light_color);
            border-radius: 15px;
            background: var(--primary_color);

            aspect-ratio: 1 / 1;


            svg
            {
                display: block;

                width: 18px;
                height: 14px;
            }
        }
    }
}

.show_mob{
    display: none !important;
}