@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Light.woff") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff") ; font-weight: 300; font-display: swap; font-style: normal; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Regular.woff") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff") ; font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Bold.woff") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff") ; font-weight: 700; font-display: swap; font-style: normal; } @page { margin: 0cm; } * { box-sizing: border-box; font-family: 'Roboto', 'Arial', serif; } body, html { overflow-x: hidden; font-family: 'Roboto', 'Arial', serif; } h1,h2 { padding: 0; margin: 0; } .container { width: 100%; height: 100%; margin: 0 auto; position: relative; display: flex; } .logo { display: flex; width: 426px; height: 31px; gap: 13px; align-items: center; position: absolute; top: 25px; left: 0; z-index: 9999; } .logo .logo-line { display: flex; width: 7%; height: 4px; background: #ED1C24; } .logo .logo-title { display: flex; font-weight: 700; font-size: 14px; } .logo .logo-line_2 { width: 1.5px; height: 100%; background: #A7A9AC; } .logo .logo-img { display: flex; height: 35px; } .logo-white { display: flex; height: 35px; color: white; } .section-footer { position: absolute; width: 100%; display: flex; justify-content: space-between; padding: 0 40px 30px 60px; bottom: 0; font-weight: 700; font-size: 14px; letter-spacing: 1px; } .section-footer-white { position: absolute; width: 100%; display: flex; justify-content: space-between; padding: 0 40px 30px 60px; bottom: 0; font-weight: 700; font-size: 14px; color: white; letter-spacing: 1px; } .main-title { font-size: 22px; line-height: 140%; font-weight: 400; } .main-text { font-size: 18px; line-height: 1.6; font-weight: 700; padding-right: 171px; } .main-text-alt { opacity: 0.6; font-size: 18px; padding: 0; } .section { width: 100%; height: 100%; margin-bottom: 0px; } .img-fon { width: 100%; height: 100%; min-height: 1422px; } .img-fon-alt { position: relative; width: 100%; height: 100%; min-height: 1422px; filter: brightness(40%); } .text-uppercase { text-transform: uppercase; } .section-title { letter-spacing: 3px; font-size: 40px; position: relative; } .section-title-alt { letter-spacing: 3px; font-size: 40px; position: relative; margin-bottom: 5px; } .big_logo { position: absolute; left: 38px; bottom: 60px; width: 628px; min-height: 170px; } .info { position: absolute; right: 80px; bottom: 70px; color: white; display: flex; flex-direction: column; gap: 30px; width: 704px; min-height: 234px; } .info-title { font-size: 68px; font-weight: 700; margin: 0; position: relative; } .title-box-alt { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 25px; } .title-box { display: flex; flex-direction: column; position: relative; padding-bottom: 25px; } .title-box::after { transform: translateY(6px); height: 4px; } .title-box::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100px; height: 2px; background-color: #ED1C24; } .title-box::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100px; transform: translateY(7px); height: 4px; background-color: #ED1C24; } .info-text { font-size: 18px; font-weight: 300; } .info-text-2 { font-size: 38px; font-weight: 300; font-weight: bolder; } .title-box-2-alt { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 25px; } .title-box-2 { display: flex; flex-direction: column; position: relative; padding-bottom: 25px; } .title-box-2::after { transform: translateY(6px); height: 4px; } .title-box-2::before { content: ""; position: absolute; bottom: 0; left: 0; width: 450px; height: 2px; background-color: #ED1C24; } .title-box-2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 450px; transform: translateY(7px); height: 4px; background-color: #ED1C24; } .info-items { display: flex; justify-content: space-between; } .info-items-2 { display: flex; justify-content: space-between; max-width: 320px; } .info-items-2 .item { display: flex; align-items: center; } .info-items .item { display: flex; align-items: center; } .description { font-size: 17px; font-weight: 700; padding-top: 11px; } .value { font-size: 40px; font-weight: 700; } .content { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 20px 80px 20px 185px; min-height: 750px; width: 100%; max-width: 46%; } .content-length { max-width: 60%; } .content-map { position: absolute; width: 610px; min-height: 350px; background: #FFFFFF; left: 74px; bottom: 74px; padding: 40px; display: flex; flex-direction: column; gap: 30px; } .content-alt { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 8px; margin-top: 125px; font-size: 27px; min-height: 400px; } .content-title-group { display: flex; flex-direction: column; gap: 30px; max-width: 54%; } .content-block-icons { width: 100%; max-width: 700px; /* display: grid; */ /* grid-template-columns: repeat(3, auto); */ /* gap: 60px; */ /* Не используются */ } .content-items { display: flex; justify-content: space-between; } .content-items .item { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 126px; text-align: center; justify-content: space-between; } .compas { position: absolute; top: 60px; right: 80px; width: 201px; min-height: 200px; rotate: -90deg; } /* -------------------------- */ .col { width: 49.7%; min-height: 614px; position: relative; object-fit: cover; } .col-img { width: 100%; height: 100%; min-height: 700px; max-height: 700px; object-fit: cover; } .col-img-old { width: 100%; height: 100%; object-fit: cover; } .col-alt { width: 870px; height: 150%; position: relative; object-fit: cover; } .location { position: absolute; top: 48%; left: 51%; } .location svg { fill : #ED1C24; } .block-img { width: 870px; height: 100%; display: flex; flex-direction: column; gap: 20px; padding-top: 80px; } .image1 { width: 877px; min-height: 574px; } .image2 { width: 675px; min-height: 500px; } .footer-info { position: absolute; right: 80px; bottom: 60px; color: white; display: flex; flex-direction: column; gap: 10px; width: fit-content; min-height: 170px; padding: 25px; } .footer-info-value { font-size: 74px; font-weight: 700; margin: 0; } .footer-info-descr { font-size: 40px; font-weight: 400; } .footer-info-text { font-size: 16px; font-weight: 700; letter-spacing: 1px; } .section-plan { background: #fefafa; } .section-grid { display: flex; flex-wrap: wrap; gap: 10px; } .col-content { width: 50%; position: relative; display: flex; flex-direction: column; padding: 130px 60px 50px 60px; } .fill { display: flex; flex-direction: column; } .fill-title { font-size: 25px; font-weight: 700; text-transform: uppercase; } .fill-descr { font-size: 23px; font-weight: 300; } .descr-link { font-weight: 700; text-decoration: none; color: #000; } .bold-text { font-weight: 700; text-decoration: none; color: #000; } .descr-link:hover { opacity: 0.7; transition: opacity 0.25s ease-in; } .col-content .header { position: absolute; top: 30px; right: 30px; display: flex; gap: 20px; } .header-link { color: #000; font-weight: 700; } .header-link:hover { opacity: 0.7; transition: opacity 0.25s ease-in; } .header-link-phone { color: #000; font-weight: 700; text-decoration: none; } .header-link-phone:hover { opacity: 0.7; transition: opacity 0.25s ease-in; } .fill-link-box { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 23px; } .fill-link { display: flex; text-decoration: none; color: #FFF; padding: 20px 0; background: #c92026; width: 280px; border-radius: 25px; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer; } .fill-link:hover { opacity: 0.7; transition: opacity 0.25s ease-in; } .plan-alt { width: 60%; height: 100%; position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } .plan-alt-position { width: 100%; height: 50%; position: relative; display: flex; } .plan-alt-img { position: absolute; width: 100%; height: 100%; object-fit: contain; } .content-plan { width: 100%; display: flex; flex-direction: column; align-items: center; } .about__container { padding: 120px 0; flex-direction: column; } /* Используются */ .about .title-box { width: 100%; margin-bottom: 30px; max-width: 810px; } .about__content-flex { display: flex; row-gap: 20px; } .about__content { display: flex; flex-direction: column; row-gap: 20px; margin-bottom: 2px; padding-left: 185px; } .about__content-side-block--info { display: flex; flex-direction: column; margin-bottom: 30px; gap: 20px; padding-right: 95px; } .about__content-side-block--icons { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 110px; row-gap: 30px; padding-right: 130px; } .plan { position: relative; } .plan__title { padding: 0px 160px; display: flex; flex-direction: column; align-items: center; } .plan__img { display: block; width: 100%; height: auto; object-fit: contain; } .plan__compass { position: absolute; top: 20px; right: 20px; width: 125px; height: 125px; } .icon-item { display: flex; flex-direction: column; align-items: center; } .icon-item-descr { font-weight: 700; font-size: 24px; } .icon-item-label { margin-bottom: 5px; font-size: 22px; } .icon-item svg { fill: #b3b3b3; margin-bottom: 20px; } .icon-item span:not(:last-child) { display: inline-block; margin-bottom: 10px; } .container1 { display: flex; flex-wrap: wrap; justify-content: center; } .item1 { flex: 0 1 calc(100%/3 - 10px*2); margin: 5px; } .item-box1 { width: 100%; text-align: center; } .col-img-old { width: 100%; height: 100%; object-fit: cover; }