@font-face{
    font-family: Roboto;
    src: url(../fonts/Roboto-Light.ttf);
    font-weight: 300;
}

@font-face{
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face{
    font-family: Roboto;
    src: url(../fonts/Roboto-Medium.ttf);
    font-weight: 500;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Roboto', sans-serif;
    font-style: 16px;
    color: #fff;
}

.container{
    max-width: 1170px;
    margin: 0 auto;
}

section{
    margin-bottom: 25px;
}

.know_price{
    margin-top: 60px;
}

.section_block{
    padding: 35px 45px;
    border-radius: 15px;
    background: #0F1633;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.block_title{
    font-size: 30px;
    margin-bottom: 20px;
}

.block_about{
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    letter-spacing: 0.16px;
    margin-bottom: 25px;
}

.success_text{
    text-align: center;
    font-size: 25px;
    font-weight: 300;
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s all ease;
}

.success_text.show{
    height: 150px;
}

.block_address{
    font-weight: 300;
    margin-bottom: 35px;
}

.block_numbers{
    display: flex;
    flex-wrap: wrap;
    gap: 0 95px;
    margin-bottom: 35px;
}

.block_numbers .number_item{
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    font-weight: 500;
}

.block_numbers .number_item .number_value{
    font-size: 40px;
}

.block_diagramm{
    margin-bottom: 55px;
}

.block_diagramm .diagramm_title{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.block_diagramm .diagramm_image{
    padding: 45px 55px;
    border-radius: 15px;
    background: #FFF;
}

.block_diagramm .diagramm_image img{
    width: 100%;
}

.block_callback_form .block_title{
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 40px;
}

.block_callback_form .block_title span{
    color: #BDBDBD;
}

.block_callback_form  .block_about{
    margin-bottom: 30px;
}

.block_callback_form .block_form label{
    position: relative;
}

.block_callback_form .block_form label .error{
    position: absolute;
    top: calc(100% + 5px);
    left: 20px;
    color: red;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
}

.block_callback_form .block_form input{
    padding: 0 20px;
    width: 100%;
}

.block_callback_form .block_form input.invalid ~ .error{
    opacity: 1;
    visibility: visible;
}

.block_callback_form .block_form .name{
    width: 30%;
}

.block_callback_form .block_form .phone{
    width: 45%;
}

.block_callback_form .block_form .button{
    width: 21%;
}


.block_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: .3s all ease;
    
}

.block_form > *{
    flex: 0 0 auto;
}

.block_form .address{
    width: 50%;
}

.block_form .address input{
    padding: 0 45px;
}

.block_form span input{
    width: 100%;
}

.block_form .rooms,
.block_form .square{
    width: 13%;
}

.block_form .rooms .rooms_label{
    position: relative;
}

.block_form .rooms .rooms_label::after{
    content: '';
    display: block;
    height: 17px;
    width: 20px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .3s all ease;
}

.block_form .rooms .rooms_label.active::after{
    transform: rotateX(180deg);
}

.block_form .rooms input{
    padding: 0 20px;
    cursor: pointer;
}

.block_form .square{
    padding: 0 30px;
}

.block_form .button{
    width: 17%;
}

.block_form input,
.block_form button{
    height: 50px;
    border-radius: 15px;
    border: none;
    outline: none;
    font-size: 16px;
}

.block_form input::placeholder{
    color: rgba(0,0,0,.8);
}

.block_form input.invalid{
    outline: 1px solid red;
}

.block_form input.invalid::placeholder{
    color: red;
}

.block_form button{
    background: #D93232;
    color: #fff;
    cursor: pointer;
    transition: .3s all ease;
}

.block_form button:hover{
    background-color: #c51111;
}

.block_form .with_results{
    position: relative;
}

.block_form .with_results .results{
    position: absolute;
    width: 100%;
    top: calc(100% + 3px);
    left: 0;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    background: #F8F8F8;
    color: rgba(0, 0, 0, 0.80);
    padding: 15px 25px 15px 50px;
    gap: 15px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(35px);
    transition: .3s all ease;
}

.block_form .with_results .results .results_item{
    padding-bottom: 7px;
    border-bottom: 1px solid #D0D0D0;
    cursor: pointer;
}

.block_form .with_results .results .results_item:last-child{
    border-bottom: none;
}

.block_form .with_results .results .results_item:hover{
    color: #000;
}

.block_form .with_results.show_result .results{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.block_form .with_results.rooms .results{
    padding: 15px 25px;
    text-align: center;
}

.callback_top{
    transition: .3s all ease;
}

.callback_top.hide{
    height: 0;
    overflow: hidden;
}