*, *::before, *::after {
  box-sizing: border-box;
}

@font-face {
    font-family: Rubik;
    src: url(../fonts/rubik/Rubik-VariableFont_wght.ttf);
}

body {
    margin: 0;
    padding: 0;
    right: 0px;
    overflow-x: hidden;
}

/* ------- ПЕРВЫЙ БЛОК (ПОСЛЕ HEADER) НА ГЛАВНОЙ ------- */

.main_h1_text {
    /* Сервисный центр в Омске */
position: absolute;
width: 1019px;
height: 214px;
left: 211px;
top: 80px;
display: flex;
flex-direction: row;
align-items: center;

color: rgb(19, 19, 19);
font-family: Rubik;
font-size: 90px;
font-weight: 600;
line-height: 107px;
letter-spacing: 0%;
text-align: left;
text-transform: uppercase;
}

.main_text_icon {
    /* Icon */
position: absolute;
width: 59px;
height: 74px;
left: 211px;
top: 262px; 
}

.main_button {
    /* кнопка_узнать стоимость */
position: relative;
width: 417px;
height: 63px;
/* Автолейаут */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 10px 20px 10px 20px;
border: none;
border-radius: 10px;
background: rgb(8, 98, 248);
top: 206px;
left: 710px;

/* Автолейаут */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 10px 20px 10px 20px;

color: rgb(255, 255, 255);
font-family: Rubik;
font-size: 25px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0%;
text-align: left;

cursor: pointer;
}

.main_button:active {
    background-color: rgb(10, 81, 203);
}


.image_and_text_block {
    /* картинки + текст */
position: absolute;
height: 500px;
left: 130px;
right: 0px;
top: 420px;
bottom: -123px;
}

.image_and_text_BLOCK1 {
    /* 1 блок */
/* Rectangle 5243 */
position: absolute;
width: 320px;
height: 500px;
left: 0px;

box-sizing: border-box;
border: 2px solid rgb(8, 98, 248);
border-radius: 10px;

}

.image_and_text_block .text_title_block {
    position: absolute;
    width: 187px;
    height: 66px;
    left: 30px;
    color: rgb(8, 98, 248);
    font-family: Rubik;
    font-size: 30px;
    line-height: 33px;
    text-align: left;
}

.bold {
    font-weight: 700;
    display: block;
}

.normal {
    font-weight: 400;
    display: block;
}

.image_and_text_BLOCK1 img {
    /* Rectangle 5253 */
position: absolute;
width: 300px;
height: 222px;
left: 8px;
top: 267px;

border-radius: 10px;
}


.image_and_text_BLOCK2 img {
    /* Rectangle 5253 */
position: absolute;
width: 320px;
height: 242px;
left: 338px;
top: 0px;

border-radius: 10px;
}


.image_and_text_BLOCK3 {
    /* 3 блок */
position: absolute;
width: 320px;
height: 240px;
left: 338px;
right: 244px;
top: 52%;
bottom: -358px;

border-radius: 10px;
background: rgb(8, 98, 248);
}

.image_and_text_BLOCK3 h3 {
    /* Склад запчастей */
position: absolute;
width: 158px;
height: 66px;
left: 30px;
top: 125px;
display: flex;
flex-direction: row;
align-items: center;

color: rgb(255, 255, 255);
font-family: Rubik;
font-size: 30px;
font-weight: 600;
line-height: 33px;
letter-spacing: 0%;
text-align: left; 
}

.image_and_text_BLOCK3 img {
    margin-top: 17px; 
    margin-left: 263px;
}


.image_and_text_BLOCK4 {
    /* 3 блок */
position: absolute;
width: 561px;
height: 242px;
left: 677px;
right: -337px;
top: 0px;
bottom: -100px;
}

.image_and_text_BLOCK4 img {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 10px; 
    object-fit: cover; 
    z-index: 1;
}

.image_and_text_BLOCK4::before {
    content: ''; 
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; 
    background: linear-gradient(180deg, rgba(255,255,255,0) 24.38%, rgb(249, 249, 249) 72.521%);
    pointer-events: none; 
    z-index: 2; 
}

.image_and_text_BLOCK4 h3 {
    position: absolute;
    width: 505px;
    left: 30px;
    top: 45%;
    font-family: Rubik;
    font-size: 30px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 0%;
    text-align: left;
    z-index: 10;
}

.image_and_text_BLOCK4 h3 .title {
    color: rgb(8, 98, 248); 
}

.image_and_text_BLOCK4 h3 .subtitle {
    display: inline; 
    color: black;
}


.image_and_text_BLOCK5 {
    /* Rectangle 5252 */
position: absolute;
width: 225px;
height: 240px;
left: 677px;
top: 260px;
background-color: yellowgreen;
border-radius: 10px;
}

.image_and_text_BLOCK5 img {
    margin: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.image_and_text_BLOCK6 {
    /* Rectangle 5252 */
position: absolute;
width: 320px;
height: 240px;
left: 920px;
top: 260px;
background-color: yellowgreen;
border-radius: 10px;
}

.image_and_text_BLOCK6 img {
    margin: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}