@media(max-width: 1540px){
    :root{
        --container-big: 1280px;
    }
    .border_right{
        right: 4%;
    }
    .border_left{
        left: 4%;
    }
}

@media(max-width: 1340px){
    :root{
        --container: 1000px;
        --container-big: 1080px;
    }
    ul.nav{
        gap: 32px;
    }
    .logo img{
        height: 52px;
    }
    header .btn_main{
        display: none;
    }
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 32px;
    }
    h3{
        font-size: 20px;
    }
    .container.gap-24, .production_row.gap-24{
        gap: 16px;
    }
    .btn_main{
        padding: 16px 28px;
    }
    .zayavka_text{
        padding: 40px;
        width: 60%;
    }
    .montazh_text{
        padding-left: 55%;
    }
    #production .btn_main{
        padding: 14px 24px;
    }
    .production_div img,
    .production_div_zayavka img{
        aspect-ratio: 16/11;
    }
    .production_div.production_div_horizontal img{
        aspect-ratio: inherit;
        height: 100%;
    }
    .production_div_horizontal{
        align-items: start;
    }
    .steps_row, .cont_row{
        flex-wrap: wrap;
    }
    .step_div{
        width: calc(33% - 9px);
    }
    .step_div::after{
        display: none;
    }
    #steps .container{
        padding-top: 180px;
    }
    .step_text, .small, .otz_text,
    .preim_div p, .btn_main{
        font-size: 14px;
    }
    .swiper_portfolio img{
        height: 420px;
    }
    .swiper_sale .swiper-slide{
        aspect-ratio: inherit;
    }
    .cont_row>*{
        width: 100%;
    }
    #map{
        width: 100%;
        aspect-ratio: 16/9;
    }
}

@media(max-width: 1140px){
    .border_right{
        right: 20px;
    }
    .border_left{
        left: 20px;
    }
}

@media(max-width: 1080px){
    header ul.nav{
        display: none;
    }
    .container{
        padding-left: 24px;
        padding-right: 24px;
    }
    .swiper_main,
    .swiper_main .swiper-wrapper{
        min-height: 70vh;
        height: 70vh;
    }
    .swiper-pagination{
        bottom: 30px !important;
    }
    .top_page{
        padding-top: 140px;
    }
    .about_text {
        order: -1;
    }
    .about_div, #about img.about_img_main{
        width: calc(50% - 8px);
        height: auto;
        aspect-ratio: 1;
    }
    .about_text{
        width: 100%;
        padding: 0;
        margin-bottom: 40px;
    }
    .zayavka_img{
        display: none;
    }
    #zayavka .container{
        margin-left: 24px;
        margin-right: 24px;
        padding: 0;
    }
    #montazh .container{
        margin-left: 24px;
        margin-right: 24px;
    }
    .montazh_bg img{
        bottom: 0;
    }
    .zayavka_text{
        width: 100%;
    }
    #price table thead tr th,
    #price table td{
        padding: 15px;
    }
    .expiration_text{
        padding-right: 5%;
    }
    .burger{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 48px;
        width: 48px;
        background: var(--main);
        border-radius: 10px;
    }
    .burger span{
        width: 22px;
        height: 2px;
        display: block;
        background: #000;
        transition: .3s;
    }
    .burger_active span:first-child{
        transform: translate(0,6px) rotate(45deg);
    }
    .burger_active span:nth-child(2){
        opacity: 0;
    }
    .burger_active span:last-child{
        transform: translate(0,-6px) rotate(-45deg);
    }
    .secret_menu{
        display: block;
        padding: 120px 0px 32px 0px;
        position: fixed;
        top: -100%;
        left:0%;
        width: 100%;
        height: auto;
        z-index: 10;
        transition: .3s;
        background: #000;
    }
    .secret_menu_active{
        top: 0;
    }
    .secret_menu ul.nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    header, header.header_active{
        background: var(--title);
    }
    .table_container{
        width: 100%;
        overflow-x: auto;
    }
    #steps .container{
        padding: 0;
        padding-left: 24px;
        padding-right: 24px;
    }
    .steps_bg{
        display: none;
    }
    #steps .title{
        width: 100%;
        padding: 270px 24px 32px 24px;
        background-image: linear-gradient(to top, #0000005f, transparent), url('/static/img/img_ms/steps_bg.webp');
        border-radius: 10px;
        background-size: cover;
    }
    .step_div{
        flex-grow: 1;
    }
    .header_end {
        align-items: center;
    }
    .social_row a img{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media(max-width: 991px){
    .border_right, .border_left{
        display: none;
    }
    #main .container{
        padding-right: 14%;
    }
    .top_text{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 16px;
        position: relative;
    }
    .top_text .swiper-navigation{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #about hr, #expiration hr{
        display: none;
    }
    #about h2{
        margin-top: 8px;
    }
    .montazh_text{
        padding-left: 35%;
    }
    .montazh_bg::before{
        background: linear-gradient(to left, #000, #0000003d);
    }
    .production_div{
        width: calc(50% - 8px);
    }
    .production_div_horizontal{
        width: 100%;
    }
    .production_div_horizontal .production_text{
        height: 100%;
    }
    .production_p{
        flex-grow: 1;
    }
    .production_div_horizontal img{
        width: calc(33% - 12px);
    }
    .expiration_text, .expiration_img{
        width: 100%;
        padding: 0;
    }
    .expiration_text_active{
        padding: 24px 32px;
    }
    .preim_div{
        width: calc(50% - 8px);
        aspect-ratio: 1;
    }
    .swiper_portfolio, .swiper_sale{
        padding-left: 24px;
    }
    .swiper_portfolio img{
        height: 340px;
    }
    .swiper_sale .swiper-slide {
        aspect-ratio: 16/9;
    }
    .footer_top, .footer_bottom {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
    .rating_div .btn_main{
        padding: 14px 24px;
    }
    .rating_div{
        padding: 24px 16px;
    }
    .expiration_text{
        gap: 8px !important;
    }
    #expiration .container{
        gap: 32px;
    }
    .cont_column{
        gap: 24px;
    }
    .modal_product .modal_content{
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
    .modal_product .swiper{
        width: 100%;
    }
    .montazh_bg img{
        height: 100%;
    }
}

@media(max-width: 600px){
    .swiper_main, .swiper_main .swiper-wrapper {
        min-height: 100vh;
        height: 100vh;
    }
    .swiper-navigation{
        display: none;
    }
    #rating .swiper-pagination,
    #otz .swiper-pagination,
    #portfolio .swiper-pagination,
    .modal_product .swiper-pagination,
    #preim .swiper-pagination{
        display: flex;
        position: relative;
        bottom: auto !important;
        margin-top: 16px;
    }
    .swiper-pagination-bullet{
        background: #D9D9D9;
        height: 12px;
        width: 12px;
    }
    .swiper-pagination-bullet-active{
        width: auto;
        aspect-ratio: 3;
        border-radius: 15px;
        background: var(--main);
    }
    .gap-48{
        gap: 32px;
    }
    .mobile{
        display: block;
    }
    .mobile.expiration_img{
        display: flex;
    }
    .montazh_text{
        padding: 0;
        max-width: 100%;
        gap: 16px;
    }
    #montazh .container{
        padding: 32px 24px 240px 24px;
    }
    .production_container_btn{
        display: none;
    }
    .production_text{
        padding: 16px;
        padding-top: 0;
    }
    .production_p{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .production_text .flex{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        width: 100%;
    }
    .production_text .flex .btn_main{
        width: 100%;
    }
    .production_div img, .production_div_zayavka img{
        aspect-ratio: 1.2;
    }
    #production .top_text .btn_main_black{
        position: relative;
    }
    #production .top_text .btn_main_black::before{
        content: "";
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid #000;
    }
    .mobile_text_productions{
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 24px;
    }
    .mobile_text_productions p{
        font-weight: 600;
        font-size: 20px;
    }
    .mobile_text_productions p span{
        padding: 4px 8px;
        background: var(--main);
        border-radius: 25px;
    }
    .btn_main, #production .btn_main_border, #price .btn_main_border{
        padding: 14px 24px;
    }
    .production_div_zayavka h3{
        margin: 0;
    }
    .production_div_zayavka{
        padding: 16px;
    }
    .expiration_img_column img{
        aspect-ratio: 1.1;
        object-fit: cover;
    }
    .expiration_text{
        padding: 0;
        background: transparent;
    }
    .expiration_text h3{
        padding: 24px 16px;
        border-radius: 10px;
        background: var(--main);
    }
    .error img, .succes img{
        height: 24px;
        width: 24px;
    }
    .zayavka_text{
        padding: 40px 16px;
    }
    .production_row_flat{
        display: flex;
    }
    .production_div_horizontal{
        width: calc(50% - 8px);
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 16px;
    }
    .production_div_horizontal img{
        width: 100%;
        aspect-ratio: 1;
    }
    .production_div_horizontal .production_text{
        width: 100%;
    }
    #main .container{
        padding-right: 24px;
    }
    .production_text .flex{
        flex-direction: column-reverse;
        gap: 16px;
    }
    #production .production_text .btn_main_border,
    #type_flat .production_text .btn_main_border{
        padding: 0;
        border: 0px;
        text-decoration: underline;
        font-size: 14px;
        text-align: left;
    }
    .modal_content{
        padding: 32px 40px;
    }
    .modal_product .swiper .swiper-slide img{
        max-height: 320px;
    }
    .modal_product .modal_product_text,
    .step_div{
        width: 100%;
    }
    .modal_product .modal_product_text{
        gap: 16px;
    }
    #steps .title{
        padding: 160px 16px 24px 16px;
    }
    .swiper_sale .swiper-slide{
        aspect-ratio: inherit;
    }
    [data-name='team_preim']{
        order: -1;
    }
    .preim_div{
        aspect-ratio: inherit;
    }
    .swiper_preim{
        padding-bottom: 30px;
    }
    .about_text{
        order: inherit;
    }
    .about_div, #about img.about_img_main{
        width: 100%;
        aspect-ratio: inherit;
    }
    .pc, .about_div_img,
    .cont_adress_div img{
        display: none;
    }
    .about_text{
        margin-top: 32px;
    }
    .about_div{
        padding: 24px 16px;
    }
    .cont_column, .cont_adress_div{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        width: 100%;
    }
    .cont_adress_div p{
        padding-left: 25px;
        position: relative;
    }
    .cont_adress_div p.cont_adress_text::before{
        content: url('/static/img/img_ms/icons/location.svg');
        position: absolute;
        left: 0;
    }
    input, .sale_text{
        width: 100%;
        max-width: 100%;
    }
    .swiper_sale .swiper-slide{
        padding: 24px 16px;
    }
    .swiper_portfolio, .swiper_sale{
        padding-right: 24px;
    }
    .main_text{
        height: 100%;
    }
    #main h1{
        display: flex;
        flex-grow: 1;
    }
}

@media(max-width:440px){
    h1{
        font-size: 32px;
    }
    p, a, li, .montazh_text p,
    .btn_main{
        font-size: 14px !important;
    }
    .rating_div .btn_main,
    #production .top_text .btn_main,
    #price .btn_main{
        padding: 8px 14px !important;
    }
    .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
    }
    .swiper-pagination-bullet-active{
        width: auto;
    }
    h2{
        font-size: 28px;
    }
    #montazh .container{
        padding-bottom: 160px;
    }
    h3{
        font-size: 18px;
    }
    .zayavka_text{
        padding: 24px 16px;
    }
    .form_check label a{
        font-size: 12px !important;
    }
    .production_div_horizontal{
        padding: 8px;
    }
    .production_div{
        width: calc(50% - 4px);
    }
    .production_row.gap-24{
        gap: 8px;
    }
    .production_text{
        gap: 8px;
    }
    #steps .title{
        padding-top: 120px;
    }
    .step_div p.numb{
        font-size: 18px !important;
        margin-bottom: 4px;
    }
    .swiper_portfolio img{
        height: 240px;
    }
    .sale_text h3{
        font-size: 24px;
    }
}