/*-------------------
    Global styles
-------------------*/
:root
{
    --bg: #fff;
    --bg_dark: #2b2a28;
    --cont_padding: 24px;
    --cont_padding_double: calc(var(--cont_padding) * 2);
    --cont_padding_half: calc(var(--cont_padding) * .5);
    --content_width: 1200px;
    --scroll_width: 17px;
    --custom_scroll_width: 10px;
    --custom_scroll_height: 10px;
    --custom_scroll_border_radius: 0;
    --custom_scroll_scrollbar_color: var(--bg);
    --custom_scroll_scrollbar_thumb_color: var(--primary_color);
    --primary_color: #fc5a06;
    --dark_color: #2b2a28;
    --light_color: #fff;
    --grey_color: rgba(43, 42, 40, .42);
    --font_size_xxl: 22px;
    --font_size_xl: 20px;
    --font_size_l: 18px;
    --font_size: 16px;
    --font_size_s: 14px;
    --font_size_xs: 12px;
    --font_size_title_l: 122px;
    --font_size_title: 82px;
    --font_size_title_s: 42px;
    --font_size_title_xs: 32px;
    --font_family_primary: 'Unbounded', 'Arial', sans-serif;
    --font_family_secondary: 'Belcanto Modern', 'Arial', sans-serif;
    --block_head_offset: 40px;
    --block_padding_l: 40px;
    --block_padding: 32px;
    --outside_gap: 140px;
    --inner_gap_xl: 28px;
    --inner_gap_l: 24px;
    --inner_gap: 20px;
    --inner_gap_s: 16px;
    --inner_gap_xs: 12px;
    --inner_gap_xxs: 8px;
    --border_radius_max: 100px;
    --border_radius: 5px;
    --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;
}


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

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

    color: var(--dark_color);
}


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

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


img.cover
{
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    object-fit: cover;
}



/*-------------------
    Custom scroll
-------------------*/
@media (hover: hover)
{
    html ::-webkit-scrollbar
    {
        width: var(--custom_scroll_width);
        height: var(--custom_scroll_height);

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


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



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


    &.centered
    {
        justify-content: center;
    }


    & > *
    {
        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
{
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 5px;

    z-index: 3;


    .accordion_item
    {
        position: relative;

        transition: .2s linear;

        border: 1px solid transparent;
        border-radius: var(--border_radius);
        background: #363533;


        &:before
        {
            position: absolute;
            top: var(--inner_gap);
            right: var(--inner_gap);

            display: block;

            width: 788px;
            max-width: 100%;
            height: 149px;

            content: '';
            z-index: -1;
            transition: opacity .2s linear;
            pointer-events: none;

            opacity: 0;
            border-radius: 788px;
            background: rgba(252, 90, 6, .40);

            filter: blur(85px);
        }


        .head
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--inner_gap_l);

            padding: var(--block_padding);

            cursor: pointer;


            .title
            {
                width: calc(100% - 26px - var(--inner_gap_l));

                font-size: 28px;
                line-height: 135%;

                transition: color .2s linear;

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


            .icon
            {
                display: block;

                width: 26px;

                aspect-ratio: 1 / 1;
            }


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


        .data
        {
            display: none;

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

            font-size: var(--font_size_l);
            line-height: 155%;

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


        &:hover
        {
            border-color: rgba(255, 255, 255, .20);


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


        &.active
        {
            border-color: rgba(255, 255, 255, .20);


            &:before
            {
                opacity: 1;
            }


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


                .icon
                {
                    display: none;
                }


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



/*------------
    Header
------------*/
header
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    padding-block: 80px;

    z-index: 10;


    .cont
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--block_padding_l);
    }


    .phone
    {
        font-size: 26px;
        line-height: 155%;


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

            color: currentColor;
        }
    }


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

        color: var(--primary_color);

        anchor-name: --mob-btn;


        .icon
        {
            display: block;

            width: 59px;

            aspect-ratio: 1 / 1;
        }


        .icon + .icon
        {
            display: none;
        }


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


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


    .menu_modal
    {
        position: absolute;
        top: anchor(bottom);
        left: calc(anchor(right) - 520px);

        width: 520px;
        margin-block: var(--block_padding) 0;
        margin-inline: 0;
        padding: var(--block_padding_l);

        border: 2px solid rgba(0, 0, 0, .05);
        border-radius: 24px;
        background: var(--light_color);
        box-shadow: 5px 4px 35px 0 rgba(0, 0, 0, .12);

        position-anchor: --mob-btn;


        & > * + *
        {
            margin-top: var(--block_padding_l);
        }


        .sep
        {
            width: 100%;
            height: 1px;

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


        .item
        {
            .label
            {
                margin-bottom: var(--inner_gap_l);

                font-size: var(--font_size_s);
                line-height: 155%;

                color: rgba(43, 42, 40, .50);
            }


            .location
            {
                font-family: var(--font_family_secondary);
                font-size: var(--font_size_title_s);
                font-weight: 500;
                line-height: 110%;

                text-transform: lowercase;
            }


            .phone
            {
                font-size: 26px;
                line-height: 155%;


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

                    color: currentColor;
                }
            }


            .email
            {
                margin-top: 6px;

                font-size: var(--font_size_s);
                line-height: 155%;


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

                    color: currentColor;

                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 7.5%;
                    text-underline-offset: 25%;
                    text-underline-position: from-font;
                }
            }


            .socials
            {
                display: flex;
                flex-direction: column;
                gap: var(--inner_gap_xxs);

                font-size: var(--font_size_s);
                line-height: 155%;


                a
                {
                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    gap: 10px;

                    width: fit-content;

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

                    color: currentColor;


                    .icon
                    {
                        display: block;

                        width: 18px;

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


        .btn
        {
            width: 100%;
            height: 100px;

            font-size: var(--font_size_s);
            line-height: 155%;

            transition: background .2s linear;

            color: var(--light_color);
            border-radius: var(--border_radius);
            background: var(--bg_dark);


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



/*----------------
    Block head
----------------*/
.block_head
{
    display: flex;
    flex-direction: column;
    gap: var(--inner_gap);

    margin-bottom: var(--block_head_offset);


    .title
    {
        font-family: var(--font_family_secondary);
        font-size: var(--font_size_title);
        font-weight: 500;
        line-height: 110%;

        text-transform: lowercase;
    }
}



/*------------------
    Form elements
------------------*/
.form
{
    --form_border_color: #4a4a4a;
    --form_border_color_focus: var(--light_color);
    --form_error_color: red;
    --form_bg_color: transparent;
    --form_placeholder_color: rgba(255, 255, 255, .50);
    --form_line_gap: var(--inner_gap);
    --form_input_height: 52px;
    --form_input_padding_inline: 0 40px;


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


    .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_primary);
        font-size: var(--font_size);

        transition: border-color .2s linear;

        color: var(--light_color);
        border: none;
        border-bottom: 1px solid var(--form_border_color);
        background: var(--form_bg_color);


        *:-webkit-autofill
        {
            -webkit-box-shadow: inset 0 0 0 calc(var(--form_input_height) / 2) var(--form_bg_color) !important;
        }


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


            & + .icon
            {
                opacity: 1;
            }
        }


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


        & + .icon
        {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;

            display: block;

            width: 18px;
            margin-block: auto;

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

            opacity: .24;

            aspect-ratio: 1 / 1;
        }
    }


    .error_text
    {
        margin-top: 4px;

        font-size: var(--font_size_s);

        color: var(--form_error_color);
    }


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


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

        font-size: var(--font_size_s);
        line-height: 155%;

        transition: .2s linear;

        color: var(--dark_color);
        border-radius: var(--border_radius);
        background: var(--light_color);


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



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


    .cont
    {
        position: relative;

        display: flex;
        flex-direction: column;

        padding-block: 191px 56px;

        z-index: 3;
    }


    .title
    {
        padding-left: 167px;

        font-family: var(--font_family_secondary);
        font-size: var(--font_size_title_l);
        font-weight: 500;
        line-height: 110%;

        text-transform: lowercase;


        span:nth-child(2)
        {
            margin-left: 101px;
        }


        span:nth-child(3)
        {
            margin-left: 168px;
        }
    }


    .sub_title
    {
        width: 840px;
        max-width: calc(100% - 268px);
        margin-top: 52px;
        margin-left: 268px;
        padding-bottom: var(--block_padding_l);

        font-size: var(--font_size_title_xs);
        font-weight: 300;
        line-height: 155%;

        color: rgba(43, 42, 40, .82);
        border-bottom: 1px solid rgba(252, 90, 6, .12);
    }


    .desc
    {
        width: 840px;
        max-width: calc(100% - 268px);
        margin-top: var(--block_padding_l);
        margin-left: 268px;

        font-size: var(--font_size_s);
        line-height: 155%;
    }


    .pluses
    {
        width: 840px;
        max-width: calc(100% - 268px);
        margin-top: 36px;
        margin-left: 268px;


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


        .item
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-direction: column;
            gap: var(--inner_gap);

            font-size: var(--font_size_s);
            line-height: 155%;

            text-align: center;


            span
            {
                flex: 1 0 auto;

                padding-inline: var(--inner_gap_s);
            }


            .icon
            {
                display: block;

                width: 36px;
                height: 20px;


                img
                {
                    display: block;

                    width: 100%;
                    height: 100%;
                }
            }


            .icon2
            {
                display: block;

                width: 202px;
                max-width: 100%;
                height: 30px;


                img
                {
                    display: block;

                    width: 100%;
                    height: 100%;
                }
            }
        }
    }


    .image
    {
        position: absolute;
        top: 0;
        left: 50%;

        display: block;

        height: 100%;
        margin-left: -960px;

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


        @media (width >= 1920px)
        {
            left: 0;

            margin-left: 0;
        }


        img
        {
            display: block;

            height: 100%;
        }
    }
}



/*----------------
    About info
----------------*/
.about_info
{
    position: relative;

    margin-bottom: var(--outside_gap);
    padding-block: 174px 135px;

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


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

        width: 684px;
        max-width: 100%;
    }


    .pre_title
    {
        margin-bottom: var(--inner_gap_l);

        font-size: var(--font_size_title_xs);
        font-weight: 300;
        line-height: 155%;

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


    .title
    {
        font-family: var(--font_family_secondary);
        font-size: var(--font_size_title);
        font-weight: 500;
        line-height: 110%;

        text-transform: lowercase;
    }


    .desc
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap);

        width: 500px;
        max-width: 100%;
        margin-top: 50px;

        font-size: var(--font_size_s);
        line-height: 170%;
    }


    .image
    {
        position: absolute;
        right: 50%;
        bottom: 0;

        margin-right: -633px;

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


        &:before
        {
            position: absolute;
            bottom: 18.776%;
            left: 10.845%;

            display: block;

            width: 415px;

            content: '';
            z-index: 1;

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

            filter: blur(90px);
            aspect-ratio: 1 / 1;
        }


        &:after
        {
            position: absolute;
            right: -11.267%;
            bottom: 4.728%;

            display: block;

            width: 445px;
            height: 608px;

            content: '';
            z-index: 2;

            background: url('../images/about_info_photo_ornament.svg') 0 0/100% 100% no-repeat;
        }


        .photo
        {
            position: relative;

            display: block;

            width: 710px;
            height: 719px;

            z-index: 3;
        }
    }
}



/*--------------
    Services
--------------*/
.services
{
    margin-bottom: var(--outside_gap);


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


    .service
    {
        position: relative;

        overflow: hidden;

        color: var(--light_color);


        .thumb
        {
            display: block;

            background: var(--bg_dark);

            aspect-ratio: 1 / 1.0625;


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

                display: block;

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

                background: linear-gradient(0deg, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .00) 32.35%);
            }
        }


        .corner
        {
            position: absolute;
            top: var(--block_padding_l);
            left: var(--block_padding_l);

            display: block;

            width: 100px;

            z-index: 2;
            transition: color .2s linear;

            aspect-ratio: 1 / 1;
        }


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

            display: grid;
            gap: var(--inner_gap_xl);

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

            z-index: 3;
            transition: grid-template-rows .2s;

            grid-template-rows: auto 0fr;


            .name
            {
                width: 380px;
                max-width: 100%;

                font-family: var(--font_family_secondary);
                font-size: var(--font_size_title_s);
                font-weight: 500;
                line-height: 110%;

                text-transform: lowercase;
            }


            .desc
            {
                display: flex;
                overflow: hidden;
                flex-direction: column;
                gap: var(--inner_gap_s);

                width: 380px;
                max-width: 100%;
                min-height: 0;

                font-size: var(--font_size_s);
                line-height: 170%;

                transition: .2s linear;
                transform: translateY(0);

                opacity: 1;
                color: rgba(255, 255, 255, .80);
            }
        }


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


            .thumb
            {
                &:before
                {
                    background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .00) 79.04%);
                }
            }


            .info
            {
                grid-template-rows: auto 1fr;
            }


            .desc
            {
                transform: translateY(0);

                opacity: 1;
            }
        }
    }
}



/*-----------
    Steps
-----------*/
.steps
{
    margin-bottom: var(--outside_gap);


    .grid_row
    {
        counter-reset: number;

        --gap_x: 90px;
        --gap_y: var(--cont_padding_double);
    }


    .item
    {
        position: relative;

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


        &:before
        {
            position: absolute;
            top: 33px;
            left: 85px;

            display: block;

            width: calc(100% - 85px + var(--gap_x) - var(--inner_gap));
            height: 24px;

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

            background: url('../images/steps_ornament1.svg') 0 0/ auto 100% repeat-x;
        }


        &:after
        {
            position: absolute;
            top: var(--inner_gap_l);
            right: calc(var(--inner_gap) * -1);

            display: block;

            width: 82px;
            height: 42px;
            padding-inline: var(--inner_gap);

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

            background: url('../images/steps_ornament2.svg') 50%/ 42px 42px no-repeat var(--bg);
        }


        &:nth-child(3n)
        {
            &:before
            {
                width: 100vw;
            }
        }


        &:nth-child(4n)
        {
            &:before
            {
                right: calc(var(--gap_x) * -1);
                left: auto;

                width: 100vw;
            }
        }


        &:last-child
        {
            &:before
            {
                width: calc(100% - 85px);
            }
        }


        .number
        {
            position: relative;

            width: fit-content;
            min-width: 85px;
            margin-bottom: 4px;
            margin-left: calc(var(--inner_gap) * -1);
            padding-inline: var(--inner_gap);

            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title);
            font-weight: 500;
            line-height: 110%;

            z-index: 3;
            text-transform: lowercase;

            color: var(--primary_color);
            background: var(--bg);


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


        .name
        {
            font-size: var(--font_size_xxl);
            line-height: 135%;
        }


        .desc
        {
            font-size: var(--font_size_s);
            line-height: 155%;

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



/*-----------
    Cases
-----------*/
.cases
{
    margin-bottom: 100px;


    .head
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--inner_gap);

        margin-bottom: var(--block_head_offset);


        .block_head
        {
            margin-bottom: 0;
        }


        .avito_widget
        {
            display: flex;
            flex-direction: column;
            gap: var(--block_padding);

            width: 380px;
            max-width: 100%;
            padding: var(--inner_gap);

            border: 1px solid #e4e4e4;
            border-radius: var(--border_radius);


            .top,
            .bottom
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: var(--inner_gap);
            }


            .name
            {
                width: calc(100% - 80px - var(--inner_gap));

                font-size: var(--font_size_xl);
                line-height: 135%;
            }


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

                width: 80px;


                img
                {
                    display: block;

                    max-width: 100%;
                    max-height: 100%;
                }
            }


            .val
            {
                width: 60px;

                font-family: var(--font_family_secondary);
                font-size: 46px;
                font-weight: 500;
                line-height: 110%;

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

                color: var(--primary_color);
            }


            .desc
            {
                width: calc(100% - 60px - var(--inner_gap));

                font-size: var(--font_size_s);
                line-height: 155%;

                color: var(--grey_color);


                a
                {
                    color: var(--dark_color);

                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 9.5%;
                    text-underline-offset: 15.5%;
                    text-underline-position: from-font;
                }
            }
        }
    }


    .swiper
    {
        overflow: visible;

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


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


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


        .swiper-slide
        {
            transition: opacity .2s linear;
            pointer-events: none;

            opacity: .2;


            &.visible
            {
                pointer-events: auto;

                opacity: 1;
            }
        }
    }


    .case
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap);


        .video
        {
            position: relative;

            display: block;

            text-decoration: none;


            .icon
            {
                position: absolute;
                inset: 0;

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

                width: 66px;
                margin: auto;

                z-index: 3;

                color: var(--light_color);
                border: 1px solid rgba(255, 255, 255, .24);
                border-radius: 50%;
                background: rgba(255, 255, 255, .24);

                aspect-ratio: 1 / 1;
                        backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);


                svg
                {
                    display: block;

                    width: 18px;

                    aspect-ratio: 1 / 1;
                }
            }
        }


        .thumb
        {
            display: block;

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

            aspect-ratio: 1 / 1.263;
        }


        .desc
        {
            padding-inline: var(--inner_gap);

            font-size: var(--font_size_s);
            line-height: 155%;

            color: var(--grey_color);
        }
    }


    .slogan
    {
        display: block;

        margin-top: 60px;
        padding-inline: 10px;


        img
        {
            display: block;

            max-width: 100%;
            margin-inline: auto;
        }
    }
}



/*---------
    FAQ
---------*/
.FAQ
{
    padding-block: 120px 90px;

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



    .accordion_wrap
    {
        position: relative;


        .corder_top_right
        {
            position: absolute;
            top: 0;
            right: 0;

            display: block;

            width: 100px;

            transform: scale(-1, 1) translate(-50%, -50%);
            pointer-events: none;

            color: var(--primary_color);

            aspect-ratio: 1 / 1;
        }


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

            display: block;

            width: 100px;

            transform: scale(1, -1) translate(-50%, -50%);
            pointer-events: none;

            color: var(--primary_color);

            aspect-ratio: 1 / 1;
        }
    }
}



/*------------------
    Action block
------------------*/
.action_block
{
    padding-block: 90px 0;

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


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


    .info
    {
        width: 520px;
        max-width: 100%;


        .title
        {
            font-family: var(--font_family_secondary);
            font-size: 60px;
            font-weight: 500;
            line-height: 110%;

            text-transform: lowercase;
        }


        .desc
        {
            display: flex;
            flex-direction: column;
            gap: var(--inner_gap_s);

            margin-top: var(--block_padding);

            font-size: var(--font_size_s);
            line-height: 155%;

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


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

            font-size: var(--font_size_s);
            line-height: 155%;

            transition: .2s linear;

            border: 1px solid rgba(255, 255, 255, .24);
            border-radius: var(--border_radius);


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


    .form
    {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        width: calc(100% - 520px - 107px);
        padding-top: 71px;

        background: url('../images/action_form_ornament.svg') 0 0/ auto 24px repeat-x;
    }


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

        width: 100%;
        margin-top: 80px;
        padding-top: 80px;

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


        .sep
        {
            align-self: center;

            width: 1px;
            height: 160px;

            background: rgba(255, 255, 255, .12);
        }


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


            .location
            {
                width: 280px;
                max-width: 100%;

                font-family: var(--font_family_secondary);
                font-size: var(--font_size_title_s);
                font-weight: 500;
                line-height: 110%;

                text-transform: lowercase;
            }


            .phone
            {
                width: 280px;
                max-width: 100%;

                font-size: 26px;
                line-height: 155%;


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

                    color: currentColor;
                }
            }


            .email
            {
                width: 280px;
                max-width: 100%;
                margin-top: 6px;

                font-size: var(--font_size_s);
                line-height: 155%;


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

                    color: currentColor;

                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 7.5%;
                    text-underline-offset: 25%;
                    text-underline-position: from-font;
                }
            }


            .socials
            {
                display: flex;
                flex-direction: column;
                gap: var(--inner_gap_xxs);

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

                font-size: var(--font_size_s);
                line-height: 155%;


                a
                {
                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    gap: 10px;

                    width: fit-content;

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

                    color: currentColor;


                    .icon
                    {
                        display: block;

                        width: 18px;

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


    .slogan
    {
        display: block;

        margin-top: var(--block_padding_l);
        padding-inline: 10px;


        img
        {
            display: block;

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

            opacity: .15;
        }
    }


    .image
    {
        display: block;

        margin-top: var(--inner_gap_xxs);


        img
        {
            display: block;

            width: 100%;
        }
    }
}