@font-face {
font-family: 'Halvar Breitschrift';
src: url('/static/fonts/HalvarBreit-Md.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Halvar Breitschrift';
src: url('/static/fonts/HalvarBreit-Rg.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* @font-face {
font-family: 'Halvar Breitschrift';
src: url('/static/fonts/HalvarBreit-Lt.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
} */
/* .lt {
font-weight: 300;
} */
html {
--red-color: #ED1C24;
--viewport-height: 100vh;
}
body {
max-width: 1440px;
min-height: 100vh;
margin: auto;
font-family: 'Halvar Breitschrift', sans-serif;
font-size: 24px;
line-height: 1.156;
color: #000;
font-weight: 400;
overflow-x: hidden;
}
input, button, textarea {
font-family: 'Halvar Breitschrift', sans-serif;
}
.hidden {
display: none !important;
}
.header {
height: 680px;
background: #75c0f6 url('/static/i/main_bg.webp') no-repeat;
background-size: cover;
color: #fff;
border-radius: 0 0 30px 30px;
position: relative;
}
.title {
font-size: 72px;
}
.header_inner {
padding: 196px 0 0 528px;
}
.header_title {
position: relative;
z-index: 2;
font-weight: 500;
}
.header_title::after,
.footer_name::before {
content: '';
background-image: url('data:image/svg+xml;utf8,');
width: 234px;
height: 219px;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 46px;
left: 480px;
z-index: -1;
}
.whatsapp::before {
content: '';
width: 32px;
height: 32px;
flex-shrink: 0;
background-image: url('data:image/svg+xml;utf8,');
}
.header_btns {
padding-top: 73px;
display: flex;
gap: 20px;
}
.play {
font-size: 24px;
background-color: var(--red-color);
border-radius: 50px;
padding: 15px 42px;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
}
.play::before {
content: '';
width: 40px;
height: 40px;
background-size: contain;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
flex-shrink: 0;
}
.getin {
font-size: 24px;
border-radius: 50px;
padding: 14px 42px;
border: 1px solid #fff;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.getin:hover {
background-color: #fff;
color: #000;
}
.header_person {
font-size: 10px;
color: #fff;
position: absolute;
bottom: 20px;
left: 20px;
}
.block {
max-width: 1200px;
margin: auto;
padding-top: 90px;
padding-right: 20px;
padding-left: 20px;
/* box-sizing: border-box; */
}
.points {
padding-top: 40px;
display: flex;
gap: 24px;
justify-content: space-between;
}
.point {
width: 100%;
max-width: 384px;
padding: 42px;
border-radius: 30px;
background-color: #F6F6F6;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 30px;
}
.point svg {
height: auto;
flex-shrink: 0;
}
.underscore {
position: relative;
z-index: 2;
}
.underscore::after {
content: '';
width: 0;
height: 10px;
position: absolute;
bottom: 14px;
left: 0;
z-index: -1;
background-color: var(--red-color);
transition: width .8s;
}
.underscore.a::after {
width: 100%;
}
.underscore-m:after {
opacity: 0;
}
.population {
margin-top: 30px;
color: #9C9C9C;
display: flex;
align-items: center;
gap: 15px
}
.population::after {
display: none;
content: '';
width: 103px;
height: 64px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
}
.techs {
padding-top: 60px;
overflow: hidden;
font-size: 32px;
display: flex;
flex-direction: column;
gap: 32px;
}
.tech_row {
display: flex;
gap: 64px;
}
.tech {
white-space: nowrap;
}
.tech:nth-child(2n+1) {
color: var(--red-color);
font-style: italic;
}
.cit {
padding: 90px 120px;
margin-top: 90px;
background-color: #4891CB;
border-radius: 30px;
color: #64a1d3;
position: relative;
font-size: 56px;
}
/* .cit::after {
content: '';
height: 100%;
background-color: #4891CB;
position: absolute;
right: 0;
bottom: 0;
left: 0;
opacity: .85;
transition: height 8s;
pointer-events: none;
border-radius: 30px;
}
.cit.a::after{
height: 0;
} */
.cit span {
transition: color .2s;
}
.cit_colored {
color: #fff;
}
.advs {
margin-top: 60px;
border-top: 1px solid #d9d9d9;
}
.adv {
position: relative;
z-index: 2;
border-bottom: 1px solid #d9d9d9;
padding: 60px 0 30px 42px;
overflow: hidden;
font-size: 64px;
}
.adv_no {
font-size: 120px;
color: var(--red-color);
z-index: -1;
position: absolute;
top: 9px;
left: 0;
transform: translateX(1115px);
opacity: 0;
transition: all .6s;
}
.adv.a .adv_no {
transform: translateX(0);
opacity: 1;
}
.advs_more {
padding-top: 90px;
font-size: 62px;
}
.advs_text {
padding-top: 90px;
font-size: 62px;
}
.forms {
max-width: 1200px;
margin: 50px auto 0;
padding-top: 40px;
}
.forms_inner {
padding: 60px;
border-radius: 30px;
background-color: #F6F6F6;
box-sizing: border-box;
}
.form_types {
margin-top: 60px;
display: flex;
justify-content: space-between;
}
.form_type {
width: 33%;
max-width: 294px;
aspect-ratio: 1;
border-radius: 50%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 27px;
justify-content: center;
cursor: pointer;
box-shadow: 11.18px 11.18px 13.97px 0px #0000000D;
}
.form_type svg {
color: #858585;
height: auto;
}
.form_type:hover svg,
.form_type.active svg {
color: var(--red-color);
}
.form {
display: none;
padding-top: 60px;
flex-direction: column;
gap: 30px;
opacity: 0;
transition: opacity .4s;
}
.form.active {
display: flex;
}
.form.a {
opacity: 1;
}
.form_row {
position: relative;
}
.caption {
font-size: 32px;
}
.caption sup {
color: var(--red-color);
display: inline-block;
font-size: 18px;
transform: translate(0px, -12px);
}
.form input,
.form textarea {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
height: 65px;
margin-top: 20px;
border-radius: 15px;
background: #fff;
border: none;
}
.form textarea {
height: auto;
padding-top: 18px;
padding-bottom: 18px;
resize: none;
overflow-y: hidden;
}
.form input[type="file"] {
display: none;
}
.add_file_btn {
margin-top: 20px;
width: 100%;
height: 65px;
color: #858585;
background-color: #E3E3E3;
border-radius: 15px;
display: flex;
gap: 30px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.add_file_btn::before {
content: '';
width: 25px;
height: 25px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
}
.form_agree {
font-size: 16px;
color: #9B9B9B;
}
.submit {
height: 70px;
padding: 0 42px;
background-color: var(--red-color);
border-radius: 50px;
color: #fff;
border: none;
align-self: flex-start;
display: flex;
align-items: center;
cursor: pointer;
}
.form.uploading .submit {
opacity: .5;
pointer-events: none;
}
.form1 .spec_cap_type2,
.form2 .spec_cap_type1,
.form3 .spec_cap_type1 {
display: none;
}
.error_msg {
background-color: var(--red-color);
width: 100%;
height: 55px;
margin-top: -12px;
border-radius: 15px;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
position: absolute;
display: none;
z-index: 2;
}
.error .error_msg {
display: flex;
}
.error_msg::after {
content: '';
width: 28px;
height: 14px;
background-size: contain;
background-image: url('data:image/svg+xml;utf8,');
position: absolute;
right: 0;
top: 100%;
left: 0;
margin: auto;
}
.files {
display: flex;
flex-direction: column;
gap: 20px;
}
.files:not(:empty) {
padding-top: 20px;
}
.files_item {
color: #858585;
position: relative;
}
.files .error_msg {
margin-top: -85px;
}
.files_item + .files_item.error {
margin-top: 60px;
}
.files_item_head {
display: flex;
justify-content: space-between;
}
.files_item_name {
overflow: hidden;
text-overflow: ellipsis;
}
.delete_file {
cursor: pointer;
color: #e3e3e3;
}
.delete_file:hover {
color: var(--red-color);
}
.file_uploading {
position: relative;
display: flex;
justify-content: space-between;
font-size: 14px;
padding-top: 10px;
padding-bottom: 8px;
}
.file_uploading::after {
content: '';
width: 100%;
position: absolute;
height: 3px;
border-radius: 3px;
background-color: #e3e3e3;
bottom: 0;
left: 0;
}
.progress {
width: 0;
position: absolute;
height: 3px;
border-radius: 3px;
background-color: var(--red-color);
bottom: 0;
left: 0;
z-index: 2;
transition: width .8s;
}
.footer {
height: 550px;
margin-top: 90px;
background: url('/static/i/footer_bg.webp') no-repeat;
background-size: cover;
color: #fff;
box-sizing: border-box;
border-radius: 30px 30px 0 0;
}
.footer_inner {
height: 100%;
padding-bottom: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
position: relative;
}
.footer_head {
display: flex;
justify-content: space-between;
}
.footer_title {
font-size: 64px;
}
.footer_foot {
display: flex;
justify-content: space-between ;
align-items: flex-end;
}
.footer_name {
padding-left: 119px;
position: relative;
}
.footer_name::before {
width: 99px;
height: 92px;
top: -12px;
left: 0;
z-index: 1;
}
.footer_name div:nth-child(2),
.footer_name div:nth-child(3) {
font-size: 20px;
}
.footer_year {
font-size: 18px;
}
/* .whatsapp_wrap {
width: 313px;
height: 74px;
}
.whatsapp {
width: 313px;
padding: 0 42px;
box-sizing: border-box;
height: 74px;
background: linear-gradient(90deg, #20B038 0%, #60D66A 100%);
border-radius: 40px;
color: #fff;
font-size: 20px;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
z-index: 1000;
font-size: 32px;
text-decoration: none;
transition: all .4s;
}
.whatsapp_wrap.fixed {
width: 96px;
height: 64px;
}
.whatsapp_wrap.fixed .whatsapp {
width: 96px;
height: 64px;
padding: 0 32px;
position: fixed;
top: 50px;
}
.whatsapp_wrap.fixed .whatsapp span {
display: none;
} */
.whatsapp_wrap {
width: 313px;
height: 74px;
position: relative;
transition: all .2s;
}
.whatsapp {
width: 313px;
height: 74px;
padding: 0 42px;
box-sizing: border-box;
background: linear-gradient(90deg, #20B038 0%, #60D66A 100%);
border-radius: 40px;
color: #fff;
font-size: 20px;
display: flex;
/* gap: 10px; */
justify-content: center;
align-items: center;
z-index: 1000;
font-size: 32px;
text-decoration: none;
position: fixed;
top: 50px;
/* transition: all .2s; */
}
.whatsapp_wrap.fixed {
width: 96px;
/* height: 64px; */
}
.whatsapp_wrap.fixed .whatsapp {
width: 96px;
height: 64px;
padding: 0 32px;
}
.whatsapp span {
transition: all .2s;
padding-left: 10px;
width: 100%;
overflow: hidden;
}
.whatsapp_wrap.fixed .whatsapp span {
/* display: none; */
width: 0;
padding-left: 0;
}
.modal {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* display: none; */
}
.modal_overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.modal_window {
width: 100%;
max-width: 1200px;
box-sizing: border-box;
padding: 60px 60px 69px 60px;
position: relative;
background-color: #f6f6f6;
border-radius: 30px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 60px;
}
.modal_text {
font-size: 64px;
}
.modal_close {
width: 39px;
height: 39px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
position: absolute;
top: 30px;
right: 30px;
z-index: 2;
}
.modal_video {
}
.modal_video .modal_overlay {
background: url('/static/i/modal_bg.webp') no-repeat;
background-size: cover;
}
.modal_video_btns {
display: flex;
gap: 24px;
position: relative;
}
.modal_video_btn,
.contact_btn {
width: 180px;
height: 60px;
background-color: #fff;
font-size: 24px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.video_wrap {
width: 100%;
max-width: 792px;
padding: 0 8px;
position: relative;
z-index: 2;
}
.video {
width: 100%;
aspect-ratio: 1.777;
background-color: #00000055;
}
.video iframe {
width: 100%;
height: 100%;
display: block;
}
.contacts {
margin-top: 60px;
color: #fff;
font-size: 32px;
display: flex;
flex-direction: column;
gap: 30px;
}
.contact {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.contact_btn {
width: 233px;
text-decoration: none;
color: #000;
flex-shrink: 0;
}
.contact_btn.wa {
display: flex;
gap: 7px;
}
.contact_btn.wa::before {
content: '';
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;utf8,');
}
@media
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.header{
background-image: url('/static/i/main_bg@2x.webp');
}
.footer{
background-image: url('/static/i/footer_bg@2x.webp');
}
}
@media screen and (max-width: 1260px) {
.header {
background-position: -100px 0;
}
.header_inner {
padding-left: 428px;
}
}
@media screen and (max-width: 1170px) {
.header_title::after {
width: 144px;
height: 135px;
top: 35px;
left: 400px;
}
.header_btns {
flex-wrap: wrap;
padding-top: 50px;
}
.title {
font-size: 60px;
}
.cit,
.adv,
.footer_title,
.modal_text {
font-size: 54px;
}
}
@media screen and (max-width: 1024px) {
.underscore-d::after {
opacity: 0;
}
.underscore-m::after {
opacity: 1;
}
body {
font-size: 16px;
}
.header {
height: auto;
min-height: var(--viewport-height);
background-image: url('/static/i/main_bg-m.webp');
background-position: 50% 50%;
}
.header_inner {
height: 100%;
box-sizing: border-box;
padding: 44px 20px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.header_title {
padding-left: 99px;
line-height: .85;
}
.header_title::after {
width: 85px;
height: 79px;
right: auto;
top: -5px;
left: 0;
}
.header_btns {
padding: 0;
}
.play {
width: 64px;
height: 64px;
padding: 0;
gap: 0;
background: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
font-size: 14px;
}
.play::before {
width: 64px;
height: 64px;
backdrop-filter: blur(3px);
}
.play span:nth-child(1) {
padding-left: 10px;
display: inline-block;
opacity: 0.75;
}
.play span:nth-child(2) {
display: none;
}
.getin {
padding: 16px 32px;
background-color: var(--red-color);
border-color: var(--red-color);
color: #fff;
position: absolute;
bottom: 62px;
left: 20px;
font-size: 20px;
}
.getin:hover {
background-color: var(--red-color);
color: #fff;
}
.title {
font-size: 28px;
}
.accent {
font-size: 38px;
display: block;
}
.underscore::after {
height: 7px;
bottom: 4px;
}
.underscore.small::after {
height: 7px;
bottom: 3px;
}
.block {
padding-top: 60px;
}
.points_title {
font-size: 24px;
}
.points_title .accent {
font-weight: 400;
}
.points {
padding-top: 30px;
flex-direction: column;
gap: 15px;
}
.point {
padding: 20px 33px;
flex-direction: row;
gap: 20px;
}
.point:nth-child(1) svg {
width: 24px;
}
.point:nth-child(2) svg,
.point:nth-child(3) svg {
width: 32px;
}
.population {
margin-top: 10px;
font-size: 10px;
gap: 10px;
}
.population::after {
width: 35px;
height: 22px;
}
.techs {
padding-top: 30px;
font-size: 21px;
gap: 25px;
}
.cit {
margin-top: 60px;
padding: 30px 20px;
font-size: 24px;
line-height: 1.333;
font-size: 24px;
}
.title-m-l {
font-size: 38px;
font-weight: 400;
}
.advs {
margin-top: 30px;
border-top-width: 2px;
}
.adv {
padding: 42px 0 15px 27px;
font-size: 21px;
border-bottom-width: 2px;
}
.adv_no {
font-size: 70px;
top: -3px;
}
.advs_more {
padding-top: 30px;
font-size: 16px;
}
.advs_text {
padding-top: 30px;
font-size: 38px;
}
.forms {
margin-top: 40px;
padding-top: 20px;
}
.forms .title {
font-size: 24px;
}
.forms_inner {
padding: 30px 20px 56px;
}
.form_types {
margin-top: 15px;
}
.form_type {
max-width: 105px;
font-size: 10px;
position: relative;
}
.form_type:nth-child(1) svg {width: 34px;}
.form_type:nth-child(2) svg {width: 53px;}
.form_type:nth-child(3) svg {width: 44px;}
.form_type_cap {
position: absolute;
bottom: -22px;
}
.form {
padding-top: 50px;
}
.caption {
font-size: 16px;
}
.caption sup {
font-size: 10px;
transform: translate(0px, -6px);
}
.form input,
.form textarea {
height: 50px;
margin-top: 10px;
border-radius: 5px;
}
.form textarea {
padding-top: 15.5px;
padding-bottom: 15.5px;
}
.add_file_btn {
height: 50px;
border-radius: 5px;
gap: 10px;
margin-top: 10px;
}
.form_agree {
font-size: 10px;
}
.submit {
height: 55px;
font-size: 20px;
padding: 0 32px;
}
.error_msg {
margin-top: -35px;
padding: 0 11px;
box-sizing: border-box;
border-radius: 5px;
font-size: 16px;
text-align: center;
}
.files .error_msg {
margin-top: -95px;
}
.modal_window {
max-width: 375px;
padding: 30px 20px;
text-align: center;
gap: 15px;
}
.modal_text {
font-size: 24px;
}
.modal_window .submit {
align-self: center;
}
.modal_close {
width: 15px;
height: 15px;
background-size: contain;
}
.footer {
height: 435px;
background-image: url('/static/i/footer_bg-m.webp');
}
.footer_inner {
padding-bottom: 20px;
}
.footer_head {
flex-direction: column;
gap: 34px;
}
.footer_title {
font-size: 38px;
}
.footer_name {
padding-left: 55px;
}
.footer_name::before {
width: 46px;
height: 43px;
top: 0;
}
.footer_name div:nth-child(2),
.footer_name div:nth-child(3) {
font-size: 11px;
}
.footer_year {
font-size: 13px;
position: absolute;
right: 20px;
bottom: 20px;
}
.whatsapp_wrap {
width: 159px;
align-self: flex-end;
}
.whatsapp {
max-width: 159px;
box-sizing: border-box;
padding: 0 17px;
height: 56px;
font-size: 16px;
right: 20px;
}
.whatsapp::before {
background-size: contain;
width: 22px;
height: 22px;
}
.whatsapp_wrap.fixed {
width: 68px;
}
.whatsapp_wrap.fixed .whatsapp {
width: 68px;
height: 56px;
padding: 0 23px;
top: auto;
bottom: 62px;
}
.modal_video .modal_overlay {
background: rgba(0,0,0,.8);
backdrop-filter: blur(6px);
}
.modal_video_btns {
gap: 20px;
}
.modal_video_btn {
width: 147px;
height: 55px;
font-size: 20px;
}
.contacts {
font-size: 16px;
padding: 0 12px;
}
.contact_btn {
width: 157px;
height: 48px;
font-size: 14px;
}
}
@media screen and (max-width: 374px) {
.header_title {
font-size: 26px;
}
}