/*-------------------
    Global styles
-------------------*/
:root
{
    --bg: #fff;
    --bg_grey: #f5f5f5;
    --cont_padding: 20px;
    --cont_padding_double: calc(var(--cont_padding) * 2);
    --cont_padding_half: calc(var(--cont_padding) * .5);
    --content_width: 1240px;
    --scroll_width: 17px;
    --custom_scroll_width: 10px;
    --custom_scroll_height: 10px;
    --custom_scroll_border_radius: 0;
    --primary_color: #fac000;
    --dark_color: #1a1a1a;
    --light_color: #fff;
    --grey_color: #3A3A3A;
    --font_size_xl: 20px;
    --font_size_l: 18px;
    --font_size: 16px;
    --font_size_s: 14px;
    --font_size_xs: 12px;
    --font_size_title_l: 48px;
    --font_size_title: 36px;
    --font_size_title_s: 24px;
    --font_family: 'Inter', 'Arial', sans-serif;
    --block_head_offset: 20px;
    --outside_gap: 40px;
    --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_l: 10px;
    --border_radius: 8px;
    --border_radius_s: 6px;
    --box_shadow: 0 4px 4px 0 rgba(0, 0, 0, .1);
    --zero_px: calc(0 * 1px);
}


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

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



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


    &.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);
    }


    &.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);


    &.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);


    & > .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);
}


.block
{
    margin-bottom: var(--outside_gap);


    &.bg
    {
        padding-block: var(--outside_gap);

        background: var(--bg_grey);
    }


    &.no_m
    {
        margin-bottom: 0;
    }
}


img.cover
{
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    object-fit: cover;
}



/*--------------
    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);


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



/*---------------
    Accordion
---------------*/
.accordion_item
{
    border-bottom: 1px solid #e6e6e6;


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

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

        cursor: pointer;

        color: #4a5565;


        .title
        {
            width: 100%;

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


        .icon
        {
            display: block;

            width: 24px;
            min-width: 24px;

            transition: transform .2s linear;

            aspect-ratio: 1 / 1;
        }


        &:hover
        {
            .title
            {
                text-decoration: underline;

                text-decoration-thickness: 1px;
            }
        }
    }


    .data
    {
        display: none;

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


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



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

    padding-block: var(--inner_gap_xs);

    z-index: 9;

    color: var(--light_color);
    background: var(--dark_color);


    .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;

        text-decoration: none;

        color: currentColor;

        gap: var(--inner_gap_xxxs);


        .square
        {
            width: 20px;

            border: 4px solid var(--primary_color);

            aspect-ratio: 1 / 1;
        }


        .name
        {
            font-size: var(--font_size_title_s);
            font-weight: 900;
            line-height: calc(100% + 8px);

            letter-spacing: -.6px;


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


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

        gap: var(--inner_gap_l);


        .item
        {
            list-style: none;
            & > a
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;

                padding-block: 2px;

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

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

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

                gap: var(--inner_gap_xxxs);


                .arr
                {
                    display: block;

                    width: 9px;
                    height: 4px;
                }
            }


            &:hover > a,
            & > a.active,
            &.current-menu-item a
            {
                color: var(--primary_color);
            }
        }
    }


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

        width: 24px;


        .icon
        {
            display: block;

            width: 100%;

            aspect-ratio: 1 / 1;
        }


        .icon + .icon
        {
            display: none;
        }


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


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



/*---------------
    Page head
---------------*/
.page_head
{
    position: relative;

    margin-bottom: var(--block_head_offset_s);
    padding-top: var(--inner_gap);

    text-align: center;

    color: var(--light_color);
    background: var(--dark_color);


    .cont
    {
        position: relative;

        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        padding-block: var(--outside_gap);

        z-index: 3;

        gap: var(--inner_gap_s);
    }


    .page_title
    {
        font-size: var(--font_size_title_l);
        font-weight: 900;
        line-height: 1;
    }


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

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


    .bg
    {
        position: absolute;
        inset: 0;

        display: block;

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

        opacity: .2;
    }
}



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

    margin-bottom: var(--block_head_offset);

    gap: var(--inner_gap_xxs);


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

        text-align: center;
    }


    .title
    {
        font-size: var(--font_size_title);
        font-weight: 700;
        line-height: 1;


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


        b,
        strong
        {
            font-weight: 900;
        }
    }


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

        color: var(--grey_color);
    }
}



/*------------------
    Form elements
------------------*/
.form
{
    --form_border_color: #e6e6e6;
    --form_border_color_focus: var(--dark_color);
    --form_border_radius: var(--border_radius_s);
    --form_error_color: red;
    --form_bg_color: var(--light_color);
    --form_placeholder_color: var(--grey_color);
    --form_line_gap: var(--inner_gap);
    --form_label_gap: 6px;
    --form_input_height: 40px;
    --form_input_padding_inline: var(--inner_gap_xs);
    --form_textarea_height: 118px;
    --form_textarea_padding_block: var(--inner_gap_xxs);
    --form_textarea_padding_inline: var(--inner_gap_xs);


    ::-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);
    }


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


    .label
    {
        margin-bottom: var(--form_label_gap);
    }


    .field
    {
        position: relative;
    }


    .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_s);

        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);
        }

        &.wpcf7-not-valid{
            border-color: red !important;

            &::placeholder{
                color:red;
            }
        }
    }


    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_s);
        line-height: calc(100% + 6px);

        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);
        }
    }


    .toggle
    {
        .wpcf7-form-control-wrap{
            display: none;
        }
        label
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: flex-start;

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

            cursor: pointer;

            gap: var(--inner_gap_xs);


            input
            {
                display: none;


                &:checked + .check
                {
                    background: var(--primary_color);


                    &:before
                    {
                        transform: translateX(24px);
                    }
                }
            }

            .wpcf7-form-control-wrap:has(:checked) + .check{
                background: var(--primary_color);
                &:before
                {
                    transform: translateX(24px);
                }
            }


            .check
            {
                position: relative;

                width: 48px;
                min-width: 48px;
                height: 24px;

                transition: background .2s linear;

                border: 1px solid var(--form_border_color);
                border-radius: var(--border_radius_max);
                background: var(--form_bg_color);


                &:before
                {
                    position: absolute;
                    top: -1px;
                    left: -1px;

                    display: block;

                    height: calc(100% + 2px);

                    content: '';
                    transition: transform .2s linear;

                    border: 1px solid var(--form_border_color);
                    border-radius: 50%;
                    background: var(--grey_color);

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


    .file
    {
        label
        {
            display: block;

            cursor: pointer;


            input
            {
                display: none;
            }


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

                padding: var(--inner_gap_xxs);

                font-size: var(--font_size_s);

                color: var(--grey_color);
                border-radius: var(--form_border_radius);
                background: var(--form_bg_color);

                gap: var(--inner_gap_xxs);
            }


            .icon
            {
                display: block;

                width: 24px;
                min-width: 24px;

                color: var(--dark_color);

                aspect-ratio: 1 / 1;
            }
        }


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

            margin-top: var(--inner_gap_xxs);


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

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

                font-size: var(--font_size_s);

                color: var(--grey_color);

                gap: var(--inner_gap_xxs);


                .delete_btn
                {
                    display: block;

                    width: 24px;
                    min-width: 24px;

                    aspect-ratio: 1 / 1;


                    .icon
                    {
                        display: block;

                        width: 100%;

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


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


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

        font-size: var(--font_size_xs);

        color: var(--form_error_color);
    }


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

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

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



/*----------------
    Typography
----------------*/
.text_block
{
    font-weight: 300;
    line-height: calc(100% + 8px);

    color: #4a5565;


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


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

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


.text_block img
{
    display: block;

    max-width: 100%;

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


.text_block a
{
    color: var(--primary_color);

    text-decoration-thickness: 1px;
}


.text_block a:hover
{
    text-decoration: none;
}



/*-------------
    Message
-------------*/
.message
{
    position: relative;

    padding-block: var(--inner_gap_xxs);

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

    text-align: center;

    color: var(--light_color);
    background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--primary_color);


    .close_btn
    {
        position: absolute;
        top: 0;
        right: var(--inner_gap);
        bottom: 0;

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

        width: 24px;
        margin-block: auto;

        aspect-ratio: 1 / 1;


        .icon
        {
            display: block;

            width: 100%;

            aspect-ratio: 1 / 1;
        }
    }


    .text
    {
        padding-inline: var(--inner_gap_l);
    }
}



/*----------------
    Info block
----------------*/
.info_block
{
    padding-top: var(--outside_gap);


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


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

        padding: var(--inner_gap);

        border-radius: var(--border_radius);
        background: var(--bg_grey);
        box-shadow: var(--box_shadow);

        gap: var(--inner_gap_xs);


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

            width: 60px;

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

            aspect-ratio: 1 / 1;


            img
            {
                display: block;

                width: 48px;

                aspect-ratio: 1 / 1;
            }
        }


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

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



/*--------------
    Services
--------------*/
.services
{
    .grid_row
    {
        --gap_x: var(--inner_gap_l);
        --gap_y: var(--inner_gap_l);
    }


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

        padding: var(--inner_gap);

        text-decoration: none;

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

        gap: var(--inner_gap_xs);


        .image
        {
            position: relative;


            .icon
            {
                position: absolute;
                bottom: var(--inner_gap_xs);
                left: var(--inner_gap_xs);

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

                width: 48px;

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

                aspect-ratio: 1 / 1;


                img
                {
                    display: block;

                    width: 24px;

                    aspect-ratio: 1 / 1;
                }
            }
        }


        .thumb
        {
            position: relative;

            display: block;

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

            aspect-ratio: 1 / .453;


            &:after
            {
                position: absolute;
                inset: 0;

                display: block;

                content: '';

                border-radius: inherit;
                background: rgba(0, 0, 0, .2);
            }
        }


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


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

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



/*------------
    Why we
------------*/
.why_we
{
    .grid_row
    {
        --items_per_line: 4;
    }


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

        padding: var(--inner_gap);

        border-radius: var(--border_radius);
        background: var(--bg_grey);
        box-shadow: var(--box_shadow);

        gap: var(--inner_gap_xs);


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

            width: 56px;

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

            aspect-ratio: 1 / 1;


            img
            {
                display: block;

                width: 28px;

                aspect-ratio: 1 / 1;
            }
        }


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


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

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



/*--------------
    Projects
--------------*/
.projects
{
    .grid_row
    {
        --items_per_line: 4;
    }


    .project
    {
        position: relative;

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

        border-radius: var(--border_radius);
        background: var(--light_color);
        box-shadow: var(--box_shadow);


        .sticker
        {
            position: absolute;
            top: var(--inner_gap_xs);
            right: var(--inner_gap_xs);

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

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

            z-index: 3;
            white-space: nowrap;

            border-radius: var(--border_radius_max);
            background: var(--primary_color);


            &.grey
            {
                background: rgba(229, 231, 235, .8);
            }
        }


        .thumb
        {
            display: block;

            background: var(--bg_grey);

            aspect-ratio: 1 / .443;
        }


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

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

            gap: var(--inner_gap_xs);
        }


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

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

            letter-spacing: -.6px;

            color: var(--grey_color);


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

                gap: var(--inner_gap_xxxs);
            }


            .icon
            {
                display: block;

                width: 12px;

                aspect-ratio: 1 / 1;
            }
        }


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


        .desc
        {
            font-size: var(--font_size_s);
            font-weight: 300;
            line-height: 1;
        }


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

            gap: var(--inner_gap);


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

                width: calc(50% - var(--inner_gap) / 2);
                padding-block: var(--inner_gap_xs);
                padding-inline: var(--inner_gap_s);

                text-align: center;

                border-radius: var(--border_radius);
                background: #f4f4f4;

                gap: var(--inner_gap_xxs);
            }


            .label
            {
                font-size: 10px;
                font-weight: 300;
                line-height: 1;
            }


            .val
            {
                margin-top: auto;

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


        .link
        {
            padding-block: var(--inner_gap_xxs) var(--inner_gap_xxxs);

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

            color: var(--primary_color);


            a
            {
                text-decoration: none;

                color: currentColor;
            }
        }
    }
}



/*---------------
    How works
---------------*/
.how_works
{
    .grid_row
    {
        counter-reset: number;

        --items_per_line: 4;
    }


    .item
    {
        position: relative;

        display: flex;
        overflow: hidden;
        flex-direction: column;
        justify-content: center;

        min-height: 100px;
        padding-block: var(--inner_gap_xs);
        padding-inline: 60px var(--inner_gap_xs);

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


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

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

            width: 60px;
            height: 100%;

            font-size: var(--font_size_title_l);
            font-weight: 900;

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

            opacity: .6;
            color: var(--primary_color);


            &:before
            {
                content: counter(number);
                counter-increment: number;
            }
        }


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


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

            color: #4a5565;
        }
    }
}



/*---------
    FAQ
---------*/
.FAQ
{
    margin-bottom: 0;
    .accordion
    {
        width: 960px;
        max-width: 100%;
        margin-inline: auto;
    };
}



/*------------------
    Action block
------------------*/
.action_block
{
    margin-bottom: var(--inner_gap_xs);
    padding-block: var(--outside_gap);

    text-align: center;

    color: var(--light_color);
    background: var(--dark_color);


    .block_head
    {
        margin-bottom: var(--inner_gap_s);

        gap: var(--inner_gap_s);


        .desc
        {
            color: rgba(255, 255, 255, .70);
        }
    }


    .btn
    {
        height: 48px;
        line-height: 48px;
        padding-inline: 32px;

        font-weight: 700;

        color: var(--dark_color);
        border-radius: var(--border_radius);
        background: var(--primary_color);
        text-decoration: none;
        display: inline-block;

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



/*-------------------
    Contacts info
-------------------*/
.contacts_info
{
    --content_width: 1024px;


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


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

        gap: var(--inner_gap_l);


        .title
        {
            font-size: var(--font_size_title_s);
            font-weight: 700;
            line-height: calc(100% + 8px);
        }
    }


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

        gap: var(--inner_gap_l);


        .title
        {
            font-size: var(--font_size_title_s);
            font-weight: 700;
            line-height: calc(100% + 8px);
        }


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

            gap: var(--inner_gap_l);


            .item
            {
                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: 40px;

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

                    aspect-ratio: 1 / 1;


                    svg
                    {
                        display: block;

                        width: 20px;

                        aspect-ratio: 1 / 1;
                    }


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

                        width: calc(100% - 40px - var(--inner_gap_s));

                        gap: 2px;
                    }
                }


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


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


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

                        color: currentColor;
                    }
                }


                .work_time
                {
                    color: var(--grey_color);
                }
            }
        }


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

            gap: var(--inner_gap_xxxs);


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


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

                color: var(--grey_color);
            }
        }


        .map
        {
            position: relative;

            overflow: hidden;

            height: 268px;

            background: var(--light_color);
        }
    }
}



/*------------
    Footer
------------*/
footer
{
    color: var(--light_color);
    background: var(--dark_color);


    .data
    {
        padding-block: var(--outside_gap);


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


        .title
        {
            font-size: var(--font_size_s);
            font-weight: 700;
            line-height: calc(100% + 6px);

            letter-spacing: .7px;
            text-transform: uppercase;

            color: var(--primary_color);
        }
    }


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

        border-top: 1px solid rgba(255, 255, 255, .10);
    }


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

        gap: var(--inner_gap_xs);
    }


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

        text-decoration: none;

        color: currentColor;

        gap: var(--inner_gap_xxxs);


        .square
        {
            width: 20px;

            border: 4px solid var(--primary_color);

            aspect-ratio: 1 / 1;
        }


        .name
        {
            font-size: var(--font_size_title_s);
            font-weight: 900;
            line-height: calc(100% + 8px);

            letter-spacing: -.6px;


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


    .text
    {
        width: 296px;
        max-width: 100%;

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

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


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

        gap: var(--inner_gap_s);


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

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

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

            gap: var(--inner_gap_xxs);
            list-style: none;

            a
            {
                display: inline-block;

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

                color: currentColor;


                &:hover,
                &.active
                {
                    color: var(--light_color);
                }
            }
        }
    }


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

        gap: var(--inner_gap_s);



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

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

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

            gap: var(--inner_gap_xxs);


            .name
            {
                font-weight: 600;

                color: var(--light_color);
            }


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

                gap: var(--inner_gap_xxs);
            }


            .icon
            {
                display: block;

                width: 16px;
                min-width: 16px;

                aspect-ratio: 1 / 1;
            }


            a
            {
                display: inline-block;

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

                color: currentColor;


                &:hover,
                &.active
                {
                    color: var(--light_color);
                }
            }
        }
    }


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

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

.wpcf7-not-valid-tip{
    font-size: 12px !important;
    padding-left: 14px;
    padding-top: 5px;
}


.articles
{
    margin-top: 40px;

    .article
    {
        position: relative;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        border-radius:8px;
        border: 1px solid #E6E6E6;

        .thumb{
            display: block;
            aspect-ratio: 1 / .5;
        }

        .data{
            gap:7px;
            display: flex;
            flex-direction: column;
            padding: 24px;

            .date
            {                
                font-size: 12px;
                line-height: 16px;
                color: #737373;
            }

            .name
            {

                a
                {
                    font-weight: 700;
                    font-size: 18px;
                    line-height: 25px;
                    color: #1A1A1A;
                    text-decoration:none;
                    transition: color .2s linear;
                    
                    &:hover
                    {
                        color:var(--primary_color);
                    }
                }
            }

            .desc{               
                font-size: 14px;
                line-height: 20px;
                color: #737373;
            }

            .read_more{               
                font-weight: 700;
                font-size: 14px;
                line-height: 20px;
                color: #DBA800;
                align-self: flex-end;
                text-decoration:none;
                transition: color .2s linear;
                    
                &:hover
                {
                    color:var(--dark_color);
                }
            }   
        }
    }
}


.page_head .time{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.page_head .title{   
    font-size: var(--font_size_title_l);
    font-weight: 900;
    line-height: 1;
    text-wrap-style: balance;
}

.page_head.single .cont {
    padding-block: calc(var(--outside_gap) * 2);
}

.article_info {
    .data{
        padding-block:40px;

        .sep{
            width: 100%;
            border-top: 1px solid #E6E6E6;
        }

        .back_blog{           
            display: block;
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #FAC000;
            margin-top: 32px;
            margin-bottom: 48px;
            text-decoration: none;

            transition: color .2s linear;
                    
            &:hover
            {
                color:var(--dark_color);
            }
        }
    }
}

.text_block {
    ul, ol{
        margin-left: 20px;
    }

    img{
        height: auto;
    }
}

.text_block .aligncenter, .page .text_block div.aligncenter{display:block;margin:5px auto;}
.text_block .alignright{float:right;margin:5px 0 20px 20px;}
.text_block .alignleft{float:left;margin:5px 20px 20px 0;}
.text_block a img.alignright{float:right;margin:5px 0 20px 20px;}
.text_block a img.alignnone{margin:5px 20px 20px 0;}
.text_block a img.alignleft{float:left;margin:5px 20px 20px 0;}
.text_block a img.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.text_block .wp-caption{max-width: 100%;}
.text_block .wp-caption.alignnone{margin:5px 20px 20px 0;}
.text_block .wp-caption.alignleft{margin:5px 20px 20px 0;}
.text_block .wp-caption.alignright{margin:5px 0 20px 20px;}
.text_block .wp-caption img{border:0 none;height:auto;margin:0;padding:0;width:auto;}
.text_block .wp-caption p.wp-caption-text{margin:0;padding:0 4px 5px;margin-top: 15px;}


.our_story {
    padding-block: var(--outside_gap);

    .text_block{
        width: 100%;
        max-width: 960px;
        margin-inline: auto;
    }
}

.why {
    .grid_row {
        --items_per_line: 4;
    }

    .item{
        display: flex;
        flex-direction: column;
        gap:8px;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 25px;  
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        border-radius: 8px;

        .icon{
            margin-bottom: 8px;

            img{
                display: block;
            }
        }

        .name{           
            font-weight: 700;
            font-size: 16px;
            line-height: 24px;
            color: #1A1A1A;
        }

        .desc{           
            font-size: 14px;
            line-height: 20px;
            color: #737373;
        }
    }
}


.about_me{
    margin-bottom: 0;
}

.about_me_wrap{
    width: 100%;
    max-width: 960px;
    margin-inline: auto;

    display: flex;
    gap:20px;
}

.about_me_wrap .text_block{
    width: calc(100% - 251px);   
    padding: 16px 24px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
}

.about_me_left{
    width: 231px;
}

.about_me_left_text{
    margin-top: 20px;   
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: #737373;
}

.about_me_left_text p + p{
    margin-top: 10px;
}