@media print,
(max-width: 1023px)
{
    /*-------------------
        Global styles
    -------------------*/
    :root
    {
        --font_size_title: 40px;
        --font_size_title_middle: 30px;
        --font_size_title_small: 22px;
        --block_offset: 60px;
    }



    /*--------------
        Fancybox
    --------------*/
    .fancybox__content > .f-button.is-close-btn,
    .is-compact .fancybox__content > .f-button.is-close-btn
    {
        top: var(--cont_padding_half);
        right: var(--cont_padding_half);
    }



    /*----------------
        Pagination
    ----------------*/
    .pagination
    {
        margin-top: 40px;

        gap: 10px;
    }


    .pagination a,
    .pagination .sep
    {
        order: 2;
    }


    .pagination .prev,
    .pagination .next
    {
        order: 1;

        width: calc(50% - 5px);
        margin-bottom: var(--cont_padding_half);
    }


    .pagination .prev
    {
        margin-right: auto;
    }

    .pagination .next
    {
        margin-left: auto;
    }



    /*------------
        Header
    ------------*/
    header .phone
    {
        font-size: 18px;
    }



    /*----------------
        Block head
    ----------------*/
    .block_head.with_slider .title.middle
    {
        width: 360px;
    }



    /*----------------
        Typography
    ----------------*/
    .text_block
    {
        font-size: var(--font_size);
        line-height: calc(100% + 10px);
    }



    /*-------------------
        First section
    -------------------*/
    .first_section
    {
        padding-block: 120px 100px;
    }


    .first_section .bg
    {
        top: 0;

        width: 1340px;
        margin-left: -852px;
    }


    .first_section .bg2
    {
        right: 0;

        width: 35%;
        margin-right: 0;
    }


    .first_section .image
    {
        width: 400px;
        margin-right: -280px;
    }


    .first_section .image .items
    {
        top: 20px;
        right: -84px;

        width: 200px;
    }


    .first_section .image .items > *
    {
        font-size: 14px;
    }


    .first_section .image .items > * br
    {
        display: none;
    }


    .first_section .image .info
    {
        top: 300px;
        right: -104px;

        width: 164px;
        padding-block: var(--cont_padding_half);
        padding-inline: 40px 16px;
    }


    .first_section .image .info .name
    {
        font-size: var(--font_size);
    }


    .first_section .data .circle1,
    .first_section .data .circle2,
    .first_section .data .circle3
    {
        transform: scale(.5);
    }


    .first_section .data .quote
    {
        width: 244px;

        font-size: 16px;
    }


    .first_section .data .quote .icon
    {
        width: 28px;
        height: 32px;
    }


    .first_section .data .title
    {
        width: 380px;
    }


    .first_section .data .desc
    {
        width: 340px;
    }


    .first_section .action
    {
        margin-top: 40px;
        margin-left: 0;
        padding-inline: var(--cont_padding);

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


    .first_section .action > div
    {
        width: 220px;
        margin-right: 0;
        margin-bottom: 0;
    }


    .first_section .action .btn
    {
        height: 54px;
        padding-inline: var(--cont_padding) 15px;
    }



    /*-----------------
        Why it work
    -----------------*/
    .why_it_work .block_head .free
    {
        top: 40px;
        right: -40px;

        width: 260px;

        font-size: 36px;
    }


    .why_it_work .block_head .desc
    {
        width: 304px;

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


    .why_it_work .info
    {
        width: 436px;
    }



    /*-----------------------
        We not do repairs
    -----------------------*/
    .we_not_do_repairs .head
    {
        padding-block: var(--cont_padding);
    }


    .we_not_do_repairs .head .data
    {
        width: 368px;
    }


    .we_not_do_repairs .head .title
    {
        font-size: 20px;
    }


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


    .we_not_do_repairs .head .desc span
    {
        padding-block: 6px;

        line-height: 1.2;
    }


    .we_not_do_repairs .images
    {
        width: 720px;

        gap: 6px 0;
    }


    .we_not_do_repairs .images .image .img
    {
        height: 234px;
    }


    .we_not_do_repairs .images .image .name
    {
        font-size: var(--font_size);
    }


    .we_not_do_repairs .image1 .img
    {
        border-radius: var(--border_radius) var(--border_radius) 0 0;
    }


    .we_not_do_repairs .image1 .name
    {
        top: var(--cont_padding);
        left: var(--cont_padding);
    }


    .we_not_do_repairs .image2
    {
        width: calc(100% - 276px);
    }


    .we_not_do_repairs .image2 .img
    {
        border-radius: 0 0 0 var(--border_radius);
    }


    .we_not_do_repairs .image2 .name
    {
        left: var(--cont_padding);
    }


    .we_not_do_repairs .image3
    {
        width: 324px;
        margin-left: -48px;
    }


    .we_not_do_repairs .image3 .img
    {
        border-radius: 0 0 var(--border_radius) 0;
    }



    /*--------------
        For whom
    --------------*/
    .for_whom
    {
        padding-bottom: 368px;
    }


    .for_whom .block_head
    {
        padding-left: 0;
    }


    .for_whom .block_head .title
    {
        width: 324px;
    }


    .for_whom .block_head .desc
    {
        margin-bottom: 2px;
    }


    .for_whom .data
    {
        width: 100%;
        min-height: 0;
        padding-inline: 40px 280px;
    }


    .for_whom .info .item .title
    {
        font-size: 22px;
    }


    .for_whom .condition
    {
        right: 0;

        width: 244px;
    }


    .for_whom .condition .title
    {
        font-size: 22px;
    }


    .for_whom .condition .bg
    {
        display: none;
    }


    .for_whom .image
    {
        right: 0;
        bottom: -156px;
        left: 0;

        width: 476px;
        margin-inline: auto;

        z-index: 5;
    }



    /*--------------------
        Always problem
    --------------------*/
    .always_problem
    {
        position: relative;

        padding-bottom: 0;

        z-index: 7;
    }


    .always_problem .data .title,
    .always_problem .data .problem,
    .always_problem .data .true
    {
        width: 100%;
    }


    .always_problem .compare .item
    {
        overflow: hidden;
    }


    .always_problem .compare .without_us
    {
        padding-inline: 144px 104px;
    }


    .always_problem .compare .without_us .image
    {
        width: 188px;
    }


    .always_problem .compare .with_us
    {
        padding-inline: 104px 132px;
    }


    .always_problem .compare .with_us .image
    {
        right: -40px;
    }


    .always_problem .compare .title
    {
        font-size: 24px;
    }


    .always_problem .compare .desc
    {
        font-size: var(--font_size);
        line-height: calc(100% + 8px);
    }



    /*----------------
        What we do
    ----------------*/
    .what_we_do
    {
        padding-bottom: var(--block_offset);
    }


    .what_we_do .block_head
    {
        margin-bottom: 400px;
    }


    .what_we_do .block_head:before
    {
        display: none;
    }


    .what_we_do .block_head .desc
    {
        width: 200px;
        margin-bottom: 4px;
    }


    .what_we_do .list
    {
        width: 100%;
        margin-bottom: 0;
    }


    .what_we_do .item
    {
        min-height: 180px;
    }


    .what_we_do .item .number,
    .what_we_do .item .name
    {
        font-size: 24px;
    }


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


    .what_we_do .item .link
    {
        margin-top: 0;
    }


    .what_we_do .item .link a
    {
        font-size: var(--font_size);
    }


    .what_we_do .item .image1
    {
        right: 0;

        width: 268px;
    }


    .what_we_do .item .image2
    {
        width: 248px;
    }


    .what_we_do .item .image3
    {
        right: var(--cont_padding);

        width: 220px;
    }


    .what_we_do .item .image4
    {
        left: var(--cont_padding);

        width: 264px;
    }


    .what_we_do .bg
    {
        top: 8%;
        bottom: auto;

        width: 100%;
    }


    .what_we_do .bg:before
    {
        height: 180px;
    }


    .what_we_do .bg:after
    {
        position: absolute;
        bottom: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 206px;
        max-height: 50%;

        content: '';
        z-index: 2;

        background: linear-gradient(0deg, #eae7e6 0%, rgba(234, 231, 230, .00) 100%);
    }



    /*------------------
        How it works
    ------------------*/
    .how_it_works
    {
        padding-bottom: 80px;
    }


    .how_it_works .block_head
    {
        width: 380px;
    }


    .how_it_works .steps
    {
        width: 380px;
    }


    .how_it_works .scale
    {
        display: none;
    }


    .how_it_works .bg
    {
        width: 720px;
        margin-right: -512px;
    }


    .how_it_works .image
    {
        width: 300px;
        margin-right: -360px;
    }



    /*--------------
        Why free
    --------------*/
    .why_free
    {
        margin-bottom: var(--block_offset);
        padding-block: var(--block_offset);
    }


    .why_free:before,
    .why_free:after
    {
        display: none;
    }


    .why_free .block_head
    {
        margin-bottom: var(--cont_padding);
    }


    .why_free .info
    {
        width: 100%;
        margin-top: 0;
    }


    .why_free .info .desc
    {
        width: 100%;
    }


    .why_free .data
    {
        width: 100%;
        margin-bottom: 0;
        padding-block: var(--cont_padding_double);
    }


    .why_free .data:before
    {
        display: none;
    }


    .why_free .data .title
    {
        margin-bottom: 32px;

        font-size: 26px;
    }


    .why_free .data .items
    {
        font-variant: var(--cont_padding);
    }


    .why_free .bg
    {
        position: relative;
        left: 0;

        width: 560px;
        margin-inline: auto;
    }



    /*-----------------
        As a result
    -----------------*/
    .as_a_result .head
    {
        padding-bottom: var(--block_offset);
    }


    .as_a_result .head .title
    {
        width: 368px;

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


    .as_a_result .head .desc
    {
        width: 340px;
    }


    .as_a_result .head .person
    {
        width: 312px;
        margin-left: 0;
    }


    .as_a_result .head .person .quote
    {
        top: 12px;
        right: -64px;

        width: 188px;

        font-size: 14px;
    }



    .as_a_result .data
    {
        padding-block: var(--cont_padding_double);
    }


    .as_a_result .data > *
    {
        width: 364px;
    }


    .as_a_result .data .sub_title
    {
        padding-block: 10px 12px;

        font-size: 18px;
    }


    .as_a_result .data .image
    {
        left: var(--cont_padding);

        width: 280px;
    }



    /*------------
        Result
    ------------*/
    .result .grid
    {
        grid-template-columns: 280px 1fr;
    }


    .result .item1
    {
        min-height: 380px;
        padding: var(--cont_padding);
    }


    .result .item2
    {
        padding: var(--cont_padding);
    }


    .result .item3
    {
        padding-block: var(--cont_padding);
        padding-inline: var(--cont_padding);
    }


    .result .item .desc
    {
        font-size: 16px;
        line-height: calc(100% + 10px);
    }


    .result .item .desc small
    {
        width: 192px;
    }


    .result .item2 .image
    {
        width: 260px;
    }


    .result .item3 .image
    {
        left: 0;

        width: 200px;
    }


    .result .item3 .image .quote
    {
        top: 8px;
        right: -52px;
    }


    .result .item3 .desc
    {
        width: 192px;
        margin-top: var(--cont_padding);
    }



    /*-------------
        Reviews
    -------------*/
    .reviews .block_head.with_slider .title.middle
    {
        width: 292px;
    }


    .reviews .block_head .desc
    {
        width: 228px;

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



    /*------------------------
        Contacts info page
    ------------------------*/
    .contacts_info_page
    {
        padding-block: 100px 464px;
    }


    .contacts_info .data
    {
        width: 100%;

        text-align: center;
    }


    .contacts_info .item .val
    {
        width: 100%;
    }


    .contacts_info .item .messengers
    {
        justify-content: center;
    }


    .contacts_info .contacts_btn
    {
        width: 290px;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: var(--cont_padding);
    }


    .contacts_info .person
    {
        right: auto;
        left: 50%;

        width: 372px;
        margin-left: -200px;
    }


    .contacts_info .person .text
    {
        top: var(--cont_padding_double);
        right: -38px;

        width: 180px;
        padding-block: var(--cont_padding_half);
        padding-inline: 20px;

        font-size: 18px;
    }


    .contacts_info .bg
    {
        left: 0;

        width: 100%;
        height: 354px;
        margin-left: 0;
    }


    .contacts_info .bg .circle
    {
        width: 492px;
    }



    /*--------------------
        Portfolio head
    --------------------*/
    .portfolio_head
    {
        padding-top: var(--cont_padding);
    }


    .portfolio_head .block_head
    {
        margin-bottom: var(--cont_padding);
    }


    .portfolio_head .block_desc
    {
        width: calc(50% - var(--cont_padding_half));
    }


    .portfolio_head .categories
    {
        margin-top: var(--cont_padding);
    }


    .portfolio_head .categories .btn
    {
        padding: var(--cont_padding);
    }


    .portfolio_head .categories .name
    {
        font-size: 17px;
    }


    .portfolio_head .categories .desc
    {
        width: calc(100% - 64px);

        font-size: calc(var(--font_size) - 2px);
    }


    .portfolio_head .categories .icon
    {
        right: var(--cont_padding);
        bottom: var(--cont_padding);

        width: 40px;
        height: 40px;
    }


    .portfolio_head .categories .icon svg
    {
        width: 14px;
        height: 13px;
    }


    .portfolio_head .categories .btn .thumb
    {
        top: -176px;

        width: calc(100% - 80px);
    }



    /*---------------
        Portfolio
    ---------------*/
    .portfolio .tabs
    {
        border-radius: var(--border_radius_small);
    }


    .portfolio .tabs .btn
    {
        font-size: 16px;

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



    /*--------------
        Projects
    --------------*/
    .projects .swiper-slide
    {
        width: 320px;
    }


    .projects .project .bottom
    {
        margin-top: var(--cont_padding_half);
        margin-top: auto;
    }


    .projects .project .area,
    .projects .project .period
    {
        width: calc(50% - 5px);
        padding: 4px var(--cont_padding_half);
    }


    .projects .project .link
    {
        width: 100%;
        margin-top: 5px;
    }



    /*-----------
        Cases
    -----------*/
    .cases .block_head .desc
    {
        width: 200px;

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



    .cases .swiper-slide
    {
        width: 320px;
    }


    .cases .case .info
    {
        order: 2;

        width: 100%;
    }


    .cases .case .link
    {
        justify-content: center;

        width: 100%;
        padding-inline: var(--cont_padding);

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


    .cases .case .thumb
    {
        width: 100%;
        margin-bottom: 15px;

        aspect-ratio: 250 / 170;
    }



    /*------------------
        Action block
    ------------------*/
    .action_block
    {
        padding-top: 0;
    }


    .action_block .data
    {
        padding-block: var(--cont_padding_double) 0;
        padding-inline: var(--cont_padding_double);

        text-align: center;
    }


    .action_block .title,
    .action_block .desc
    {
        width: 100%;
    }


    .action_block .btns
    {
        justify-content: center;
    }


    .action_block .image,
    .action_block .image2,
    .action_block .image3
    {
        position: relative;
        right: 0;

        width: 400px;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        margin-top: var(--cont_padding);
    }


    .action_block .image3
    {
        width: calc(100% + var(--cont_padding_double) * 2);
        max-width: none;
        margin-inline: calc(var(--cont_padding_double) * -1);
        margin-bottom: -24px;
    }


    .action_block .image3:before
    {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 60px;

        content: '';
        z-index: 2;

        background: linear-gradient(0deg, rgba(255, 185, 111, .00) 36.16%, #ffb96f 100%);
    }


    .action_block .bg
    {
        width: 100%;
        height: 280px;
    }


    .action_block .bg img
    {
        width: 100%;

        object-fit: cover;
    }


    .action_block .image3 img
    {
        width: 100%;
        height: auto;
    }

    .action_block .image img, .action_block .image2 img, .action_block .image3 img{
        min-height: 200px;
    }



    /*------------------
        Project head
    ------------------*/
    .project_head .data
    {
        padding: var(--cont_padding_double) var(--cont_padding_double) 0;
    }


    .project_head .title
    {
        width: 440px;
    }


    .project_head .person
    {
        width: 680px;
        margin-top: var(--cont_padding_double);
    }


    .project_head .person .photo
    {
        width: 100px;
        height: 100px;
    }


    .project_head .person .text
    {
        width: calc(100% - 120px);
    }


    .project_head .person .text:before
    {
        top: 40px;
    }



    /*------------------
        Project info
    ------------------*/
    .project_info .room_gallery .title
    {
        width: 440px;

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



    /*---------------
        Case head
    ---------------*/
    .case_head .title
    {
        width: 488px;

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


    .case_head .title span
    {
        line-height: calc(100% + 8px);
    }


    .case_head .bg
    {
        height: 160px;
    }



    /*-----------------
        About head
    -----------------*/
    .about_head .data
    {
        width: 408px;
    }


    .about_head .sub_title
    {
        width: 340px;
        padding-block: 15px 16px;

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


    .about_head .desc
    {
        width: 328px;
    }


    .about_head .desc2
    {
        width: 288px;
    }


    .about_head .bg
    {
        /*margin-right: -648px;*/
        left: 16%;
    }



    /*---------------
        Service 1
    ---------------*/
    .service1 .head .number
    {
        font-size: var(--font_size);
    }


    .service1 .head .title
    {
        width: 288px;

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


    .service1 .head .desc
    {
        width: 212px;
    }


    .service1 .data
    {
        width: 100%;
    }


    .service1 .item .thumb
    {
        max-width: 300px;
    }


    .service1 .image
    {
        top: auto;
        bottom: -20px;

        width: 600px;
        margin-right: -520px;
    }



    /*---------------
        Service 2
    ---------------*/
    .service2
    {
        overflow: hidden;

        padding-top: 0;
        padding-bottom: 440px;
    }


    .service2 .head
    {
        width: 100%;
    }


    .service2 .head .number
    {
        font-size: var(--font_size);
    }


    .service2 .head .title
    {
        font-size: var(--font_size_title_middle);
    }


    .service2 .data
    {
        width: 100%;
    }


    .service2 .item .thumb
    {
        right: 0;
    }


    .service2 .item .desc
    {
        width: 240px;
    }


    .service2 .bg
    {
        top: auto;
        right: auto;
        bottom: -120px;
        left: 0;

        width: 150%;
    }


    .service2 .bg:before
    {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 270px;

        content: '';
        z-index: 2;

        background: linear-gradient(0deg, rgba(245, 245, 245, .00) 0%, #f5f5f5 100%);
    }


    .service2 .bg2
    {
        right: -100px;
        left: auto;
    }



    /*---------------
        Service 3
    ---------------*/
    .service3 .head .number
    {
        font-size: var(--font_size);
    }


    .service3 .head .title
    {
        width: 288px;

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


    .service3 .head .desc
    {
        width: 216px;
    }


    .service3 .data
    {
        width: 100%;
    }


    .service3 .image
    {
        top: auto;
        bottom: -88px;

        width: 280px;
        margin-right: -320px;
    }



    /*---------------
        Service 4
    ---------------*/
    .service4
    {
        padding-bottom: 440px;
    }


    .service4 .head
    {
        width: 100%;
    }


    .service4 .head .number
    {
        font-size: var(--font_size);
    }


    .service4 .head .title
    {
        font-size: var(--font_size_title_middle);
    }


    .service4 .data
    {
        width: 100%;
    }


    .service4 .item .desc
    {
        width: 286px;
    }


    .service4 .bg
    {
        top: auto;
        right: 0;
        bottom: var(--cont_padding_half);
        left: calc(var(--cont_padding_double) * 2);

        width: 560px;
        margin-inline: auto;
    }



    /*----------------------
        Finished project
    ----------------------*/
    .finished_project .cont
    {
        flex-direction: column;
    }


    .finished_project .info
    {
        width: 348px;
    }


    .finished_project .title
    {
        font-size: calc(var(--font_size_title_small) + 4px);
    }


    .finished_project .image
    {
        right: 0;

        margin-right: 0;
    }



    /*------------
        Footer
    ------------*/
    footer .author
    {
        order: 3;

        margin-top: 35px;
    }


    footer .links
    {
        order: 3;

        width: 140px;
        margin-top: 35px;
        margin-left: auto;
    }


    footer .menu
    {
        justify-content: center;
        order: 2;

        width: 100%;

        gap: 14px 22px;
    }


    footer .contacts
    {
        flex-direction: column;
        order: 1;

        width: 100%;
        margin: 0 0 35px;

        text-align: center;

        gap: 20px;
    }



    footer .phone
    {
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
    }


    footer .phone a
    {
        color: #303030;
    }


    footer .messengers
    {
        width: 217px;
        max-width: 100%;
        margin-inline: auto;
    }


    footer .messengers a
    {
        width: 100%;
        height: 50px;

        border-radius: 15px;
        background: #eaeaea;
    }


    footer .messengers span
    {
        display: block;
    }



    /*-----------------
        About modal
    -----------------*/
    #about_modal
    {
        width: 715px;
    }


    #about_modal .data
    {
        width: 385px;
    }


    #about_modal .image
    {
        width: 316px;
    }


    #about_modal .bg
    {
        width: 268px;
    }

  

    .cases .case{
        align-content: flex-start;
        flex-direction: column;
    }

    .cases .case .info{
        flex-grow: 1;
    }
}