@media (max-width: 767px)
{
    /*-------------------
        Global styles
    -------------------*/
    :root
    {
        --cont_padding: 20px;
    }



    .swiper-controls .swiper-button-next,
    .swiper-controls .swiper-button-prev
    {
        display: none;
    }


    .swiper-controls .mob_icon
    {
        display: flex;
    }



    /*--------------
        Fancybox
    --------------*/
    .fancybox__slide
    {
        padding-block: var(--cont_padding_double) var(--cont_padding);
    }



    /*------------
        Header
    ------------*/
    header
    {
        padding-block: 20px;
    }


    header .city,
    header .phone,
    header .contacts_btn
    {
        display: none;
    }


    header .messengers > * + *
    {
        margin-right: 5px;
    }


    header .messengers a
    {
        width: 40px;
        height: 40px;
    }



    /*----------------
        Block head
    ----------------*/
    .block_head .title
    {
        text-align: center;
    }


    .block_head.with_slider .title,
    .block_head.with_slider .title.middle
    {
        width: 100%;
        padding-right: 80px;

        text-align: left;
    }



    /*------------------
        Form elements
    ------------------*/
    .form .amount .input
    {
        /*width: calc(100% - 140px);*/
    }


    .form .amount .btn
    {
        width: 60px;
    }


    .form .submit_btn br
    {
        display: none;
    }



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


    .first_section .bg
    {
        top: 0;
        left: 0;

        width: auto;
        height: 740px;
        margin-left: -40px;
    }


    .first_section .bg2
    {
        width: 100%;
        height: 600px;
    }


    .first_section .image
    {
        position: relative;
        right: 28%;
        bottom: 0;

        width: 100%;
        margin-top: var(--cont_padding_double);
        margin-right: 0;
    }


    .first_section .image .items
    {
        top: 80px;
        right: -104px;

        width: 232px;
    }


    .first_section .image .info
    {
        top: 380px;
        right: -116px;

        width: 180px;
    }


    .first_section .data .title,
    .first_section .data .desc
    {
        width: 100%;
    }


    .first_section .action
    {
        margin-top: var(--cont_padding);
    }


    .first_section .action > div
    {
        width: 100%;

        text-align: center;
    }


    .first_section .action .btn
    {
        width: calc(50% - 6px);
        padding-inline: var(--cont_padding);
    }



    /*-----------------
        Why it work
    -----------------*/
    .why_it_work
    {
        padding-block: var(--block_offset) calc(var(--block_offset) * 5);

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


    .why_it_work .block_head .free
    {
        position: relative;
        top: 0;
        right: 0;

        width: 160px;
        margin-inline: auto;
        margin-top: var(--cont_padding_half);

        font-size: 30px;
    }


    .why_it_work .block_head .desc
    {
        width: 100%;

        text-align: center;
    }


    .why_it_work .bg
    {
        width: 150%;
        height: auto;
        margin-left: -50%;
    }


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

        display: block;

        width: 100%;
        height: 206px;

        content: '';
        z-index: 2;

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



    /*-----------------------
        We not do repairs
    -----------------------*/
    .we_not_do_repairs .head .data
    {
        width: 100%;
        padding-bottom: 202px;

        text-align: center;
    }


    .we_not_do_repairs .head .desc span
    {
        margin-inline: 0;
    }


    .we_not_do_repairs .head .image
    {
        right: 0;
        left: 0;

        height: 222px;
    }


    .we_not_do_repairs .head .image img
    {
        margin-inline: auto;
    }


    .we_not_do_repairs .images
    {
        width: 720px;

        gap: 6px 0;
    }


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


    .we_not_do_repairs .image1 .quote1
    {
        top: 30.4%;
        left: 34.901%;
    }


    .we_not_do_repairs .image1 .quote2
    {
        top: 47.4%;
        left: 54%;

        transform: rotate(-9.97deg);
    }


    .we_not_do_repairs .image1 .quote2:before
    {
        right: -8px;
        left: auto !important;

        transform: scale(-1, 1);
    }


    .we_not_do_repairs .image2
    {
        width: 100%;
    }


    .we_not_do_repairs .image2 .img
    {
        overflow: hidden;

        border-radius: 0;
    }


    .we_not_do_repairs .image2 .img > img
    {
        width: calc(100% + 60px);
        margin-right: -60px;
    }


    .we_not_do_repairs .image2 .man
    {
        left: 8.805%;

        width: 132px;
    }


    .we_not_do_repairs .image2 .quote1
    {
        top: 9%;
        left: 33%;
    }


    .we_not_do_repairs .image2 .quote1:before
    {
        bottom: 0 !important;
        left: -6px !important;
    }


    .we_not_do_repairs .image2 .quote2
    {
        top: 30%;
        left: 52%;
    }


    .we_not_do_repairs .image2 .quote2:before
    {
        bottom: 0 !important;

        width: 17px;
        height: 16px;
    }


    .we_not_do_repairs .image3
    {
        width: 100%;
        margin-left: 0;
    }


    .we_not_do_repairs .image3 .img
    {
        overflow: hidden;

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


    .we_not_do_repairs .image3 .img > img
    {
        width: calc(100% + 60px);
        margin-left: -60px;
    }


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



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


    .for_whom .block_head
    {
        gap: 20px;
    }


    .for_whom .block_head .title
    {
        width: 100%;
    }


    .for_whom .block_head .desc
    {
        width: 100%;

        text-align: center;
    }


    .for_whom .data
    {
        padding: 0;
    }


    .for_whom .info
    {
        padding: var(--cont_padding);

        gap: 40px;
    }


    .for_whom .condition
    {
        position: relative;

        width: 100%;
        height: auto;
        padding-bottom: 144px;
    }


    .for_whom .image
    {
        bottom: -132px;

        width: 376px;
    }



    /*--------------------
        Always problem
    --------------------*/
    .always_problem .data
    {
        padding-bottom: 220px;
    }



    .always_problem .compare .item
    {
        width: 100%;
    }


    .always_problem .compare .without_us,
    .always_problem .compare .with_us
    {
        padding-block: var(--cont_padding_double);
        padding-inline: var(--cont_padding) 140px;

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


    .always_problem .compare .with_us
    {
        margin-top: 10px;
        margin-left: 0;
    }


    .always_problem .compare .without_us:before,
    .always_problem .compare .with_us:before
    {
        clip-path: none;
    }


    .always_problem .compare .without_us .image
    {
        right: -72px;
        left: auto;

        width: 224px;
    }


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


    .always_problem .compare .vs
    {
        width: 60px;
        height: 60px;

        font-size: 24px;
    }



    /*----------------
        What we do
    ----------------*/
    .what_we_do .block_head
    {
        margin-bottom: 300px;

        gap: 20px;
    }


    .what_we_do .block_head .title
    {
        width: 100%;

        text-align: center;
    }


    .what_we_do .block_head .desc
    {
        width: 100%;
        margin-bottom: 0;

        text-align: center;
    }


    .what_we_do .block_head .desc br
    {
        display: none;
    }


    .what_we_do .item,
    .what_we_do .item:nth-child(2n)
    {
        flex-wrap: wrap;

        min-height: 0;
        padding: var(--cont_padding) var(--cont_padding) 0;

        gap: 8px;
    }


    .what_we_do .item .number
    {
        width: 24px;
    }


    .what_we_do .item .number + *
    {
        width: calc(100% - 32px);

        gap: 8px;
    }


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


    .what_we_do .item .image
    {
        position: relative;
        right: 0;
        left: 0;

        width: 100%;
    }


    .what_we_do .item .image img
    {
        width: 280px;
        margin-inline: auto;
    }


    .what_we_do .item .image2 img
    {
        margin-top: -48px;
    }


    .what_we_do .bg
    {
        width: 150%;
        max-width: none;
        margin-right: -50%;
    }



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


    .how_it_works .block_head,
    .how_it_works .steps
    {
        width: 100%;
    }


    .how_it_works .image
    {
        position: relative;
        right: 0;

        width: 280px;
        margin-inline: auto;
        margin-top: var(--cont_padding_double);
        margin-bottom: -220px;
    }


    .how_it_works .bg
    {
        right: 0;

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



    /*--------------
        Why free
    --------------*/
    .why_free .message
    {
        width: 100%;

        text-align: center;
    }


    .why_free .message:before
    {
        right: 0;
        left: 0;

        margin-inline: auto;
    }


    .why_free .info .desc
    {
        text-align: center;
    }


    .why_free .info .we
    {
        margin-inline: auto;
    }



    /*-----------------
        As a result
    -----------------*/
    .as_a_result .head
    {
        padding-bottom: 0;
    }


    .as_a_result .head .title
    {
        width: 100%;

        font-size: 24px;
    }


    .as_a_result .head .desc
    {
        width: 100%;
    }


    .as_a_result .head .person
    {
        position: relative;
        left: 0;

        width: 300px;
        margin-inline: auto;
        margin-top: var(--cont_padding);
    }


    .as_a_result .head .person .quote
    {
        line-height: calc(100% + 6px);
    }



    .as_a_result .data
    {
        padding-inline: var(--cont_padding_double);
        padding-bottom: 0;
    }


    .as_a_result .data > *
    {
        width: 100%;

        text-align: center;
    }


    .as_a_result .data .sub_title
    {
        width: 100%;
        padding-block: 8px;

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


    .as_a_result .data .sub_title:before
    {
        right: 0;
        left: 0;

        margin-inline: auto;
    }


    .as_a_result .data .desc
    {
        line-height: calc(100% + 6px);
    }


    .as_a_result .data .desc br
    {
        display: none;
    }


    .as_a_result .data .image
    {
        position: relative;
        left: 0;

        margin-inline: auto;
        margin-top: var(--cont_padding_double);
    }



    /*------------
        Result
    ------------*/
    .result .grid
    {
        display: flex;
        flex-direction: column;
    }



    /*-------------
        Reviews
    -------------*/
    .reviews .block_head.with_slider .title.middle
    {
        width: 100%;
    }


    .reviews .block_head .desc
    {
        width: calc(100% - 80px);
        margin-top: var(--cont_padding);
        margin-bottom: 0;
        margin-left: 0;
    }


    .reviews .swiper-controls
    {
        margin-bottom: var(--block_head_offset);
    }


    .reviews .swiper-slide
    {
        width: 250px;
    }



    /*------------------------
        Contacts info page
    ------------------------*/
    .contacts_info .person
    {
        margin-left: -240px;
    }



    /*--------------------
        Portfolio head
    --------------------*/
    .portfolio_head .block_desc
    {
        width: 100%;

        text-align: center;
    }


    .portfolio_head .block_desc:before
    {
        left: 50%;

        margin-left: -8px;
    }


    .portfolio_head .block_desc br
    {
        display: none;
    }


    .portfolio_head .categories
    {
        padding-bottom: 0;
    }


    .portfolio_head .categories .btn
    {
        width: 100%;
    }


    .portfolio_head .categories .btn .thumb
    {
        top: auto;
        bottom: -340px;

        width: 320px;
        display: none;
    }



    /*---------------
        Portfolio
    ---------------*/
    .portfolio .tabs .btn
    {
        font-size: 15px;
    }



    /*--------------
        Projects
    --------------*/
    .projects .swiper-controls
    {
        margin-bottom: var(--block_head_offset);
    }


    .projects .swiper-slide
    {
        width: 240px;
    }


    .projects .row
    {
        margin-left: 0;
    }


    .projects .row > *
    {
        width: 100%;
        margin-left: 0;
    }



    /*-----------
        Cases
    -----------*/
    .cases .block_head .desc
    {
        width: calc(100% - 80px);
        margin-top: var(--cont_padding);
        margin-bottom: 0;
        margin-left: 0;
    }


    .cases .swiper-controls
    {
        margin-bottom: var(--block_head_offset);
    }


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


    .cases .row
    {
        margin-left: 0;
    }


    .cases .row > *
    {
        width: 100%;
        margin-left: 0;
    }



    /*------------------
        Action block
    ------------------*/
    .action_block .btns .btn
    {
        width: 240px;
        max-width: 100%;
        border-radius: 25px;
    }


    .action_block .messengers a
    {
        width: 115px;
        height: 50px;

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


    .action_block .image3
    {
        width: 180%;
        margin-inline: -40%;
    }


    .action_block .image3 .quote
    {
        width: 180px;
        padding-inline: var(--cont_padding_half);

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



    /*------------------
        Project head
    ------------------*/
    .project_head
    {
        padding-top: 0;
    }


    .project_head .data
    {
        margin-bottom: 124px;
        padding: var(--cont_padding_double) var(--cont_padding_double) 0;
    }


    .project_head .title
    {
        width: 100%;
    }


    .project_head .person
    {
        width: 100%;
    }


    .project_head .person .photo
    {
        margin-inline: auto;
        margin-bottom: 18px;
    }


    .project_head .person .text
    {
        width: 100%;
        margin-bottom: -147px;
    }


    .project_head .person .text:before
    {
        top: -6px;
        right: 0;
        left: 0;

        margin-inline: auto;
    }



    /*------------------
        Project info
    ------------------*/
    .project_info .room_gallery .title
    {
        width: 100%;
    }


    .project_info .room_gallery .row
    {
        margin-left: 0;
    }


    .project_info .room_gallery .row > *
    {
        width: 100%;
        margin-left: 0;
    }



    /*---------------
        Case head
    ---------------*/
    .case_head
    {
        padding-top: 0;
    }


    .case_head .data
    {
        padding-block: var(--cont_padding);
        padding-inline: var(--cont_padding);
    }


    .case_head .title
    {
        width: 100%;

        font-size: calc(var(--font_size_title_middle) - 5px);
    }


    .case_head .bg
    {
        height: 148px;
    }



    /*---------------
        Case info
    ---------------*/
    .case_info .gallery .row > *
    {
        width: calc(50% - var(--cont_padding));
    }



    /*-----------------
        About head
    -----------------*/
    .about_head
    {
        overflow: hidden;
    }


    .about_head .data
    {
        width: 100%;
    }


    .about_head .sub_title
    {
        width: 312px;
        padding-block: 11px 12px;

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


    .about_head .desc,
    .about_head .desc2
    {
        width: 100%;
    }


    .about_head .btn
    {
        width: 100%;
    }


    .about_head .bg
    {
        position: relative;
        right: 0;

        width: calc(100% + 400px);
        height: auto;
        margin-inline: -200px;
        margin-top: -40px;
        margin-bottom: -200px;
        left: auto;
    }


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

        display: block;

        width: 100%;
        height: 70px;

        content: '';
        z-index: 2;

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


    .about_head .bg img
    {
        width: 100%;
        min-width: 0;
        height: auto;
    }



    /*---------------
        Service 1
    ---------------*/
    .service1 .head
    {
        display: flex;
        flex-direction: column;

        gap: 16px;
    }


    .service1 .head .title,
    .service1 .head .desc
    {
        width: 100%;
    }


    .service1 .row
    {
        margin-left: 0;
    }


    .service1 .row > *,
    .service1 .row > *.big_w
    {
        width: 100%;
        margin-left: 0;
    }


    .service1 .item
    {
        min-height: 0;
    }


    .service1 .item.mark
    {
        min-height: 340px;
    }


    .service1 .btn
    {
        width: 100%;
    }


    .service1 .image
    {
        position: relative;
        top: auto;
        right: 0;
        bottom: 0;
        left: -48px;

        width: 460px;
        margin-inline: auto;
        margin-top: var(--cont_padding);
        margin-bottom: -48px;
    }



    /*---------------
        Service 2
    ---------------*/
    .service2 .head
    {
        display: flex;
        flex-direction: column;

        gap: 16px;
    }


    .service2 .head .title,
    .service2 .head .desc
    {
        width: 100%;
    }


    .service2 .row
    {
        margin-left: 0;
    }


    .service2 .row > *,
    .service2 .row > *.big_w
    {
        width: 100%;
        margin-left: 0;
    }


    .service2 .item.mark
    {
        padding-bottom: 124px;

        gap: var(--cont_padding_half);
    }


    .service2 .item .thumb
    {
        right: 0;

        height: 124px;
    }


    .service2 .item .desc
    {
        width: 100%;
    }


    .service2 .btn
    {
        width: 100%;
    }


    .service2 .bg
    {
        width: 200%;
        margin-top: 0;
    }


    .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
    {
        display: none;
    }



    /*---------------
        Service 3
    ---------------*/
    .service3 .head
    {
        display: flex;
        flex-direction: column;

        gap: 16px;
    }


    .service3 .head .title,
    .service3 .head .desc
    {
        width: 100%;
    }


    .service3 .row
    {
        margin-left: 0;
    }


    .service3 .row > *
    {
        width: 100%;
        margin-left: 0;
    }


    .service3 .items br
    {
        display: none;
    }


    .service3 .btn
    {
        width: 100%;
    }


    .service3 .image
    {
        position: relative;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 320px;
        margin-inline: auto;
        margin-top: var(--cont_padding_double);
        margin-bottom: 0;
    }



    /*---------------
        Service 4
    ---------------*/
    .service4 .head
    {
        display: flex;
        flex-direction: column;

        gap: 16px;
    }


    .service4 .head .title,
    .service4 .head .desc
    {
        width: 100%;
    }


    .service4 .row
    {
        margin-left: 0;
    }


    .service4 .row > *
    {
        width: 100%;
        margin-left: 0;
    }


    .service4 .item .thumb
    {
        display: none;
    }


    .service4 .item .desc
    {
        width: 100%;
    }


    .service4 .item.mark
    {
        gap: var(--cont_padding_half);
    }


    .service4 .item.mark .desc
    {
        margin-top: 0;
    }


    .service4 .btn
    {
        width: 100%;
    }


    .service4 .bg
    {
        left: var(--cont_padding);

        width: 400px;
        margin-bottom: var(--cont_padding_double);
    }



    /*----------------------
        Finished project
    ----------------------*/
    .finished_project
    {
        padding-bottom: 0;
    }


    .finished_project .title,
    .finished_project .info
    {
        width: 100%;
    }


    .finished_project .btn
    {
        width: 100%;
    }


    .finished_project .image
    {
        position: relative;
    }



    /*-----------
        PopUp
    -----------*/
    .modal_image
    {
        width: 100%;
        min-height: 0;
        /*margin-bottom: var(--cont_padding);*/

        aspect-ratio: 300 / 270;
        order:2;
    }


    .modal_image img
    {
        object-position: 50% 0;
    }


    #connect_modal .modal_image img
    {
        object-position: 50%;
    }


    .modal_data
    {
        width: 100%;
        padding-inline: var(--cont_padding_half);
        padding-bottom: var(--cont_padding);
        margin-top: 30px;
    }


    .modal_title
    {
        text-align: center;
    }


    .modal_title br
    {
        display: none;
    }


    .modal_desc
    {
        text-align: center;
    }


    .modal_desc br
    {
        display: none;
    }


    .modal .form
    {
        padding-right: 0;
    }



    /*-----------------
        About modal
    -----------------*/
    #about_modal .modal_inner
    {
        padding-bottom: 416px;
    }


    #about_modal .items br
    {
        display: none;
    }


    #about_modal .image
    {
        right: 0;
        left: 0;

        overflow: hidden;

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


    #about_modal .image img
    {
        margin-bottom: -260px;
    }


    #about_modal .bg
    {
        width: 100%;
        height: 369px;

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


    #about_modal .bg .circle
    {
        width: 492px;
    }



    /*-----------------
        Order modal
    -----------------*/
    #order_modal .modal_image
    {
        min-height: 376px;
    }


    #order_modal .modal_image .title
    {
        font-size: var(--font_size_title_middle);
    }
}