@media print,
(max-width: 1023px)
{
    /*-------------------
        Global styles
    -------------------*/
    :root
    {
        --font_size: 15px;
        --font_size_s: 13px;
        --font_size_title: 40px;
        --font_size_title_m: 30px;
        --font_size_title_s: 20px;
        --block_head_offset: 32px;
        --block_head_offset_s: 24px;
    }



    /*------------
        Header
    ------------*/
    header
    {
        position: fixed;
        top: auto;
        bottom: 100%;
        left: 0;

        width: 100%;
        padding: 82px 0 50px;

        z-index: 9;
        transition: transform .3s linear;

        border-radius: 0 0 var(--border_radius) var(--border_radius);
        background: rgb(var(--bg_dark) / .97);
    }


    header.show
    {
        transform: translateY(100%);
    }


    header .logo
    {
        width: 100%;

        font-size: 10px;
    }


    header .logo img
    {
        display: none;
    }


    header .logo div
    {
        display: block;

        opacity: 1;
    }


    header .rating
    {
        margin-top: 40px;
    }


    header .phone,
    header .location
    {
        width: 100%;
        margin-top: 30px;
    }


    header .feddback_btn
    {
        width: 100%;
        margin-top: 40px;
    }



    /*-----------------
        Mob. header
    -----------------*/
    .mob_header
    {
        display: block;
    }



    /*-------------------
        First section
    -------------------*/
    .first_section .cont
    {
        min-height: auto;
        padding-block: 140px var(--cont_padding);
    }


    .first_section .data
    {
        width: 100%;
    }


    .first_section .items
    {
        width: calc(50% + var(--cont_padding_double));
    }


    .first_section .btns
    {
        width: 50%;

        gap: var(--inner_gap_s);
    }


    .first_section .btns .btn
    {
        width: 100%;
        min-height: 98px;

        font-size: 17px;
    }



    .first_section .person
    {
        right: calc(var(--cont_padding) * -1);

        width: 440px;
    }


    .first_section .person .info
    {
        min-height: 160px;
    }



    /*--------------
        Services
    --------------*/
    .services .list
    {
        padding-block: var(--cont_padding);
        padding-inline: var(--cont_padding_double);
    }


    .services .service .name
    {
        max-width: calc(100% - 216px);
    }


    .services .service .price
    {
        width: 140px;
    }



    /*------------------
        Action block
    ------------------*/
    .action_block .data > .info
    {
        width: calc(100% - 348px);
    }


    .action_block .data > .info .items
    {
        margin-top: var(--cont_padding);
    }


    .action_block .form
    {
        width: 324px;
        padding: var(--cont_padding);
    }


    .action_block .success
    {
        padding: var(--cont_padding);
    }


    .action_block .person,
    .action_block .person.big
    {
        display: none;
    }



    /*----------
        Team
    ----------*/
    .team .person
    {
        padding-bottom: var(--cont_padding);
    }


    .team .person .info
    {
        width: 224px;
    }


    .team .person .data
    {
        width: calc(100% - 248px);
    }



    /*-----------
        Cases
    -----------*/
    .cases .likes
    {
        width: 232px;
    }



    .cases .grid_row
    {
        --count_per_line: 1;
    }


    .cases .grid_row > *:nth-child(6) ~ *
    {
        display: flex;
    }


    .cases .grid_row > *:nth-child(4) ~ *
    {
        display: none;
    }


    .cases .grid_row.show_all > *:nth-child(4) ~ *
    {
        display: flex;
    }



    /*-----------
        About
    -----------*/
    .about .data
    {
        padding-block: var(--cont_padding);
        padding-inline: var(--cont_padding);
    }



    /*----------------
        Requisites
    ----------------*/
    .requisites .data
    {
        padding-block: var(--cont_padding);
        padding-inline: var(--cont_padding_double);
    }



    /*------------
        Footer
    ------------*/
    footer .bottom .cont
    {
        gap: var(--inner_gap_s);
    }



    footer .logo
    {
        width: 100%;
        margin-bottom: var(--cont_padding_double);
    }



    footer .copyright
    {
        width: 100%;
    }
}
