/* cyrillic-ext */

@font-face {
    font-family: PoliticaCondensed900;
    src: url(./fonts/PoliticaCondensed-Black.ttf);
}
@font-face {
    font-family: Gilroy400;
    src: url(./fonts/Gilroy-Regular.ttf);
}
@font-face {
    font-family: Gilroy500;
    src: url(./fonts/Gilroy-Medium.ttf);
}
@font-face {
    font-family: Gilroy600;
    src: url(./fonts/Gilroy-Semibold.ttf);
}
@font-face {
    font-family: PoliticaCondensed700;
    src: url(./fonts/PoliticaCondensed-Bold.ttf);
}
@font-face {
    font-family: GillSans300;
    src: url(./fonts/GillSansProCyrillic-Light.ttf);
}
@font-face {
    font-family: GillSans400;
    src: url(./fonts/GillSansProCyrillic-Regular.ttf);
}
@font-face {
    font-family: GillSans500;
    src: url(./fonts/GillSansProCyrillic-Medium.ttf);
}


input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

body {
    line-height: 1;

}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

nav ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

html {
    overflow-x: hidden
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    color: #1b1b1c;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: 700
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,
::after,
::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}




a {
    font-size: 15px;
    display: inline-block;
    text-decoration: none;
    transition: .3s;
}



.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 15px;
}
h1{
    font-size: 265px;
    font-style: normal;
    line-height: normal;
    font-family: PoliticaCondensed900, sans-serif;
    text-align: center;
   background: -webkit-linear-gradient(268deg, #F5F5F5 41.63%, #81A9BB 100%);
      -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2{
    color: #F5F5F5;
font-size: 125px;
font-style: normal;
font-family: PoliticaCondensed700, sans-serif;
line-height: normal;
}
h3{
color: #F5F5F5;
text-shadow: 0px 0px 13px 0px #00E0FF;
font-size: 55px;
font-family: PoliticaCondensed700, sans-serif;
font-style: normal;
line-height: normal;

}
.promo{
    padding-bottom: 360px;
    padding-top: 90px;
    position: relative;
        background: url(./img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color:#000 ;
}
.promo .text-wrap{
    position: relative;
}
.promo .text-wrap .text{
    position: absolute;
    top: 295px;
    left: 0;
}
.left-col{
        position: absolute;
    right: 0px;
    top: 30px;
    z-index: 9;
}
.left-col .wrap{
    position: relative;
    width: 100%;
    height: 100%;
}
.left-col .wrap .text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -35px;
    border-radius: 10px;
    background: rgba(0, 32, 62, 0.47);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter:blur(9px);
    padding: 22px 83px;
    max-width: 632px;
    width: 100%;
}
.mob{
    display: none;
}
.left-col .wrap .text h4{
    color: #F5F5F5;
font-size: 25px;
font-family: GillSans500, sans-serif;
font-style: normal;
line-height: normal;
text-transform: uppercase;
text-align: center;
}
.left-col .wrap .text p{
    color: #F5F5F5;
text-align: center;
font-size: 20px;
font-family: GillSans300, sans-serif;
font-style: normal;
line-height: normal;
margin-top: 4px;
margin-bottom: 20px;
}

.a{
    display: block;
    background: linear-gradient(89.88deg, #004C94 0.03%, #00A5BB 99.83%);
    padding: 19px 43px;
    color: #F5F5F5;
text-align: center;
font-size: 20px;
font-family: GillSans500, sans-serif;
font-style: normal;
line-height: normal;
margin: 0 auto;
margin-bottom: 20px;
max-width: 268px;
width: 100%;
margin-top: 20px;
}
.span{
    color: #F5F5F5;
text-align: center;
text-shadow: 0px 0px 13px #00E0FF;
font-size: 20px;
font-family: PoliticaCondensed700, sans-serif;
font-style: normal;
line-height: normal;
display: block;
}
main{
    background: url(./img/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color:#000 ;
}
.middle{
    padding-top: 85px;
}
.title{
    color: #F5F5F5;
text-align: center;
text-shadow: 0px 0px 9px #00E0FF;
font-size: 65px;
font-family: PoliticaCondensed700, sans-serif;
font-style: normal;
line-height: normal;
}
.title .pre-title{
    color: #F5F5F5;
text-align: center;
font-size: 25px;
font-family: GillSans300, sans-serif;
font-style: normal;
line-height: normal;
display: block;
margin: 0 auto;
max-width: 535px;
width: 100%;
margin-top: 5px;
}
.middle-block .item.flex{
    align-items: flex-end;
}
.middle-block .item.sec{
    margin-top: 110px;
}
.middle-block .text{
    padding: 52px 32px;
    background: url(./img/border.png) no-repeat;
    display: flex;
    flex-direction: column;
    height: 415px;
    max-width: 510px;
    gap: 15px;
    align-items: flex-start;
}
.middle-block .text p{
    color: #F5F5F5;
font-size: 20px;
font-family: GillSans300, sans-serif;
font-style: normal;
line-height: normal;
}
.middle-block .text.sec{
    padding: 52px 32px;
    background: url(./img/border2.png) no-repeat;
    display: flex;
    flex-direction: column;
    height: 415px;
    max-width: 510px;
    gap: 15px;
    align-items: flex-start;
    margin-left: 55px;

}
.middle{
    position: relative;
}
.middle .img{
    position: absolute;
    bottom: -50px;
    right: 0;
    width: 50%;
}
.middle .img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.form-section .left-col{
    position: unset;
    width: fit-content;
}
.form-section .left-col .text{
        bottom: -180px;
}
.form-section .left-col .wrap .text .q{
    color: #F5F5F5;
text-align: center;
font-size: 25px;
margin-bottom: 22px;
font-family: GillSans300;
font-style: normal;
line-height: normal;
}
.form-section .left-col .wrap .text h4{
    color: #F5F5F5;
text-align: center;
text-shadow: 0px 0px 35px #007181;
font-size: 75px;
font-family: PoliticaCondensed700, sans-serif;
font-style: normal;
line-height: normal;
}
.form-section .left-col .wrap .text p{
    color: #F5F5F5;
text-align: center;
font-size: 25px;
font-family: PoliticaCondensed700;
font-style: normal;
line-height: normal;
}
.form-section .left-col .wrap .text{
    padding: 20px 30px;
}
.form-section form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 23px;
}
.form-section form button{
    
    background: linear-gradient(89.88deg, #004C94 0.03%, #00A5BB 99.83%);
    border-radius: 5px;
    max-width: 175px;
    width: 100%;
    display: block;
    border: none;
    margin: 0 auto;
    margin-top: 14px;
    padding: 13px 0;
    color: #F5F5F5;
text-align: center;
font-size: 15px;
font-family: GillSans400, sans-serif;
font-style: normal;
cursor: pointer;
line-height: normal;
}
.form-section{
    margin-top: -230px;
    padding-bottom: 180px;
}
.form-section form input{
    border-radius: 13px;
box-shadow: 0px 0px 12px 0px #00A5BB;
width: 100%;
padding: 16px 18px;
color: #F5F5F5;
font-size: 16px;
font-family: GillSans300, sans-serif;
font-style: normal;
line-height: normal;
border: none;
background: none;
}
.right-col h4{
    color: #F5F5F5;
text-align: center;
font-size: 25px;
font-family: GillSans400, sans-serif;
font-style: normal;
line-height: normal;
}
.right-col{
    background: url(./img/border3.png) no-repeat;
margin-top: 500px;
padding: 85px 50px;
}
footer{
    background: #0A2C35;
    padding-top: 17px;
    padding-bottom: 17px;
}
footer p{
    color: #FFF;
text-align: center;
font-size: 18px;
font-family: GillSans300, sans-serif;
font-style: normal;
line-height: normal;
}
footer span{
    color: #FFF;
text-align: center;
font-size: 18px;
font-family: GillSans400, sans-serif;
font-style: normal;
margin: 0 auto;
margin-top: 20px;
display: block;
line-height: normal;
}


@media (max-width: 1220px){
    h1{
        font-size: 55px;
        text-align: center;

    }
    h2{
        font-size: 35px;
        text-align: center;
    }
    h3{
        font-size: 35px;
        text-align: center;
    }
    .promo .text-wrap .text{
        position: static;
    }
    .promo .left-col{
        position: static;
        width: fit-content;
        margin: 0 auto;
        order: 2;
    }
    .promo .container{
        display: flex;
        flex-direction: column;
    }
    .title{
        font-size: 30px;
    }
    .title .pre-title{
        font-size: 13px;
        max-width: 277px;
    }
    .middle-block .item.flex{
        width: fit-content;
        flex-direction: column;
        margin: 0 auto;
        align-items: center;
        gap: 40px;
    }
    .middle-block .text.sec{
        margin-left: 0;
        margin-top: 40px;
    }
    .middle .img{
        bottom: -650px;
    }
    .promo{
        padding-bottom: 85px;
    }
    .form-section{
        margin-top: 0;
        padding-top: 650px;
    }
    .form-section .container{
        flex-direction: column;
        align-items: center;
    }
    .right-col{
        margin-top: 200px;
    }
    .middle .img{
        width: 90%;

    }
    .desc{
        display: none;
    }
    .mob{
    display: block;
}


}
@media (max-width: 800px){
    img{
        display: block;
        width: 100%;
    }
}
@media (max-width:600px){
    .left-col .wrap .text{
        position: static;
        transform: unset;
        margin-top: -100px;
    }
    .left-col .wrap{
        margin-top: -50px;
    }
    .middle .img{
        bottom: -230px;
    }
    .right-col{
        margin-top: 50px;
    }
    .form-section{
        padding-top: 500px;
    }

}
@media (max-width: 500px){
        .middle-block .text{
             background-size: contain !important;
             height: unset !important;
             width: 100%;
        }
    .middle-block .text p{
        font-size: 12px;
           
    }
    .middle-block .text.sec{
        height: 240px !important;
    }
    .left-col .wrap .text{
        padding: 10px 20px;
    }
    .left-col .wrap .text{
        margin-top: -75px;
    }
    .right-col{
    padding: 74px 33px;
    background-size: cover;
    }
    .right-col h4{
        font-size: 19px;
    }
    .form-section form input{
        padding: 10px 11px;
    }
    .form-section{
        padding-top: 350px;
        padding-bottom: 100px;
    }
    .form-section .left-col .wrap .text h4{

font-size: 30px;

}
.form-section .left-col .wrap .text p{
font-size: 13px;
margin-bottom: 7px;

}
.form-section .left-col .wrap .text .q{
    margin-bottom: 7px;
    font-size: 11px;
}
.form-section .left-col .wrap .text{
    padding: 20px 45px;
}
.form-section .left-col .wrap .text{
    padding: 13px 25px;
}
.right-col{
    background: url(./img/border3m.png) no-repeat;
}

}

@media (max-width: 370px){
    .right-col, .middle-block .text, .middle-block .text.sec{
        background: none;
    }
    .form-section{
        padding-bottom: 50px;
        padding-top: 250px;
    }
     .text{
        padding: 0 !important;
    }
    .a{
        font-size: 17px;
    }
    .middle .img{
        bottom: -120px;
    }
    .form-section .left-col .wrap .text, .promo .left-col .wrap .text{
            padding: 10px 20px !important;
    }
}



































