html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}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:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:var(--color-black);text-decoration:none}mark{background-color:#ff9;color:var(--color-black);font-style:italic;font-weight:bold}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}ul{list-style: none;}input:focus,select:focus,textarea:focus{outline: none;}


html{overflow-x: hidden;}


:root{
    --blue: #052461;
    --Roboto: "Roboto", sans-serif;
    --ArchivoBlack: "Archivo Black", sans-serif;
    --Archivo: "Archivo", sans-serif;
    --Lato: "Lato", sans-serif;
    --Jost: "Jost", sans-serif;
    --Golos: "Golos Text", sans-serif;
    --Montserrat: "Montserrat", sans-serif;
}

body{
    font-family: var(--Archivo);
	background: var(--blue);
    font-size: 16px;
    line-height: 130%;
	color: #F2F2F2;
	min-width: 320px;
    font-weight: normal;
	overflow-x: hidden;
    position: relative;
}




.container{max-width: 1792px; width: 100%; margin: 0 auto; box-sizing: border-box;}




header{position: fixed; top: 20px; left: 0; width: 100%; z-index: 500;}
    header .container{padding: 12px 48px; border-radius: 16px; background: #052461; align-items: center;}
    header nav ul{display: flex; align-items: center; justify-content: center; gap: 32px; font-family: var(--Montserrat); font-weight: 700; font-size: 14px;}
        header nav ul li a{color: #F2F2F2}
            header nav ul li a:hover{color: #fff;}
    header .pull{display: none;}
    header .data{gap: 20px;}
    header .lang{position: relative; font-family: var(--Montserrat); font-weight: 700; cursor: pointer;}
        header .lang ul{position: absolute; top: 100%; left: 0; margin-top: 5px; overflow: hidden; border-radius: 20px; border: 2px solid #F23A29; width: 100%; display: none;}
            header .lang ul li a{display: flex; padding: 8px 0 8px 16px; color: #fff; text-transform: uppercase; gap: 8px;}
                header .lang ul li a:hover{background: #F23A29}
        header .lang .current{display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: #fff; text-transform: uppercase; width: 120px; height: 48px; box-sizing: border-box; border: 2px solid #F23A29; transition: all 0.2s; padding-left: 16px; border-radius: 56px;}
            header .lang .current:after{position: absolute; top: calc(50% - 12px); right: 16px; width: 24px; height: 24px; content: ''; background: url("../img/arr.svg") 50% 50% no-repeat; transition: all 0.2s;}
            header .lang.open .current:after{transform: rotate(180deg);}

.logo img{
    width: 145px;
}



#promo{padding: 190px 0 380px; background: #021231 url("../img/promo_bg.png") 50% 0% no-repeat;}
#promo .text {
    position: relative;
    z-index: 3;
}
    #promo:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../img/promo_bg_b.png") 50% 100% repeat-x;}
    #promo .container{position: relative;}
    #promo .image{position: absolute; top: 0; right: 0; max-width: 1160px;}
        #promo .image img{width: 100%; height: 820px; object-fit: cover;}
    #promo h1{max-width: 1200px; color: #fff; font-size: 120px; line-height: 100%; letter-spacing: -2px; font-weight: normal; font-family: var(--Archivo); position: relative; z-index: 3; margin-bottom: 32px;}
        #promo h1 strong{color: #3D7AF5; font-weight: normal; display: block;}
    #promo .advantages{position: relative; z-index: 3; max-width: 914px; margin-bottom: 60px;}
        #promo .advantages .item{position: relative; padding: 16px 16px 16px 80px}
        #promo .advantages .icon{position: absolute; top: 16px; left: 16px;}
        #promo .advantages .title{margin-bottom: 8px; color: #fff; font-size: 20px; font-family: var(--ArchivoBlack); letter-spacing: -1px; color: #F2F2F2; line-height: 120%;}
        #promo .advantages p{line-height: 140%; color: #B9B9B9; font-family: var(--Montserrat); font-size: 16px;}
        #promo .advantages .item:last-child p{color: #2F2F2F}
    #promo .btn{height: 72px; padding: 0 24px; font-size: 24px;}
    #promo .about{color: #F2F2F2; font-family: var(--Archivo); font-size: 40px; line-height: 120%; max-width: 1160px; letter-spacing: -2px; position: absolute; bottom: -280px; right: 0;}
        #promo .about strong{font-weight: normal; color: #727272; font-size: 32px;}





#why{padding: 65px 0;}
    #why .data{max-width: 540px; width: 100%; position: relative;}
        #why .data p{max-width: 470px; color: #B9B9B9; font-size: 20px; letter-spacing: -1px; line-height: 140%; font-size: 20px;}
    #why .actions{position: absolute; bottom: 0; left: 0; width: 100%;}
        #why .actions .btn{width: calc(50% - 12px); height: 72px; font-size: 24px; padding: 0}
    #why .text{width: calc(100% - 610px)}
        #why .text li{margin-bottom: 48px; font-size: 40px; line-height: 120%; letter-spacing: -2px; font-family: var(--Archivo);}
            #why .text li:last-child{margin: 0;}
            #why .text li span{color: #727272; font-size: 32px; position: relative; top: -5px; display: inline-block; margin-right: 7px;}





#works{padding: 0 0 96px 0; background: #021231 url("../img/work_bg.jpg") 100% 0 no-repeat;}





#how__it__works{padding: 96px 0 0;}
    #how__it__works .grid{gap: 24px}
    #how__it__works .item{position: relative; padding: 96px 16px 32px; background: rgba(5, 36, 97, 0.5);}
        #how__it__works .item:after{position: absolute; top: 32px; left: 16px; border-radius: 50%; width: 16px; height: 16px; background: #3D7AF5; content: ''}
        #how__it__works .item .title{margin-bottom: 24px; font-size: 40px; line-height: 120%; letter-spacing: -2px;}
        #how__it__works .item p{color: #B9B9B9; font-family: var(--Lato); line-height: 140%; font-size: 18px;}





#features{padding: 96px 0 0;}
    #features ul{display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
        #features ul li{width: calc(50% - 24px); margin-bottom: 48px; font-size: 40px; line-height: 120%; letter-spacing: -2px; position: relative; box-sizing: border-box; padding-left: 62px;}
            #features ul li span{color: #F23A29; position: absolute; top: 0; left: 0;}
    #features .images div{width: calc(50% - 24px); position: relative;}
        #features .images div:last-child{top: -120px}





#core{padding: 96px 0 0;}
    #core .grid{gap: 24px}
    #core .item{position: relative; padding: 96px 16px 32px; background: rgba(5, 36, 97, 0.5);}
        #core .item:after{position: absolute; top: 32px; left: 16px; border-radius: 50%; width: 16px; height: 16px; background: #3D7AF5; content: ''}
        #core .item .title{margin-bottom: 24px; font-size: 40px; line-height: 120%; letter-spacing: -2px;}
        #core .item p{color: #B9B9B9; font-family: var(--Lato); line-height: 140%; font-size: 18px;}





#faq{padding: 64px 0;}
    #faq .data{max-width: 540px; width: 100%; position: relative;}
        #faq .data p{max-width: 470px; color: #B9B9B9; font-size: 32px; letter-spacing: -1px; line-height: 140%; margin-bottom: 90px;}
    #faq .actions{width: 100%;}
        #faq .actions .btn{width: calc(50% - 12px); height: 72px; font-size: 24px; padding: 0}
    #faq .list__data{width: calc(100% - 610px)}
    #faq .item{margin-bottom: 48px; border-bottom: 1px solid #727272;}
        #faq .item:last-child{margin: 0}
        #faq .item .question{cursor: pointer; position: relative; padding: 26px 60px 26px 0; font-size: 32px; line-height: 120%; letter-spacing: -1px; transition: absolute 0.2s}
            #faq .item .question:after{position: absolute; width: 48px; height: 48px; background: url("../img/plus.svg") 50% 50% no-repeat; content: ''; right: 0; top: calc(50% - 24px)}
            #faq .item .question.open:after{background: url("../img/minus.svg") 50% 50% no-repeat;}
            #faq .item .question.open{color: #3D7AF5}
        #faq .item .answer{padding-bottom: 16px; color: #B9B9B9; font-size: 16px; line-height: 140%; font-family: var(--Montserrat); display: none;}





#about{padding: 96px 0 0; background: #021231}
    #about p{color: #F2F2F2; font-family: var(--Archivo); font-size: 40px; line-height: 120%; letter-spacing: -2px;}
        #about p strong{font-weight: normal; color: #727272; font-size: 32px; margin-right: 10px;}





#contacts{padding: 96px 0; background: #021231 url("../img/promo_bg.png") 0% 0% no-repeat;}
    #contacts:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../img/promo_bg_b.png") 50% 100% repeat-x;}
    #contacts .container{position: relative; z-index: 3}
    #contacts .data{width: calc(100% - 625px);}
    #contacts iframe{width: 100%; height: 477px; object-fit: cover;}
    #contacts .map{margin-bottom: 48px;}
    #contacts .contacts{width: 575px;}
    #contacts .actions{padding: 48px 0 0 64px; justify-content: flex-start; gap: 24px;}
        #contacts .actions .btn{height: 72px; padding: 0 24px; font-size: 24px;}
    #contacts .note{padding: 0 0 0 64px; font-size: 56px; line-height: 100%; letter-spacing: -2px;}
    #contacts .contacts .title{margin-bottom: 48px; text-transform: uppercase; font-size: 56px; line-height: 100%; letter-spacing: -2px;}
    #contacts .contacts .location{max-width: 475px; margin-bottom: 48px; font-size: 32px; line-height: 120%; letter-spacing: -1px;}
    #contacts .contacts .row{margin-bottom: 48px}
        #contacts .contacts .row:last-child{margin: 0}
    #contacts .contacts .row span{display: block; margin-bottom: 8px; font-size: 32px; letter-spacing: -1px; line-height: 120%;}
    #contacts .contacts .row .status{font-size: 56px; line-height: 120%; letter-spacing: -1px;}
    #contacts .contacts .row a{color: #F2F2F2; font-size: 40px; letter-spacing: -1px; line-height: 120%;}
        #contacts .contacts .row a.phone{font-size: 56px;}
        #contacts .contacts .row a:hover{color: #F23A29}





footer{padding: 64px 0; background: #1c1a17;}
    footer .flex{align-items: center;}
    footer .privacy{padding: 64px 0 0; font-size: 14px; line-height: 140%; font-family: var(--Montserrat); color: #B9B9B9;}
        footer .privacy a{color: #B9B9B9;}
            footer .privacy a:hover{color: #fff;}
    footer .pay{gap: 24px; align-items: center;}
    footer nav ul{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;}
        footer nav ul li a{color: #F2F2F2; font-family: var(--Montserrat); font-weight: 700; font-size: 14px;}
            footer nav ul li a:hover{color: #3D7AF5}
    footer .socials{gap: 10px;}
        footer .socials a{display: flex; width: 40px; height: 40px; border-radius: 50%; justify-content: center; align-items: center; background: #3D7AF5;}
            footer .socials a:hover{background: #F23A29;}





#navigation{position: fixed; top: 0; left: 0; width: 100%; background: #021231; z-index: 400; height: 100%; box-sizing: border-box; overflow-y: auto; padding: 100px 16px 50px; display: none;}
#navigation nav li{margin-bottom: 25px;}
#navigation nav li a{color: #F2F2F2; font-size: 24px; font-weight: 700;}
#navigation .lang{position: absolute; bottom: 0; left: 0; padding: 16px; width: 100%; box-sizing: border-box;}
#navigation .lang ul{display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;}
#navigation .lang ul li a{display: flex; align-items: center; justify-content: center; padding: 0 16px; height: 48px; box-sizing: border-box; border: 2px solid #F23A29; border-radius: 56px; color: #fff; text-transform: uppercase; gap: 8px; font-weight: 700;}
#navigation .lang ul li a.active,#navigation .lang ul li a:hover{background: #F23A29}




.lang img{width: 24px; height: 24px; object-fit: cover;}




section{position: relative; z-index: 2; overflow: hidden;}







.flex{display: flex; justify-content: space-between; flex-wrap: wrap;}
.flex.flex__end{justify-content: flex-end;}
.flex.flex__start{justify-content: flex-start;}
.flex.flex__center{justify-content: center;}

.grid{display: grid; grid-template-columns: repeat(1,1fr); gap: 32px;}
    .grid.grid-2{grid-template-columns: repeat(2, 1fr);}
    .grid.grid-3{grid-template-columns: repeat(3, 1fr);}
    .grid.grid-5{grid-template-columns: repeat(5, 1fr);}
    .grid.grid-6{grid-template-columns: repeat(6, 1fr);}



.bt{margin-bottom: 48px; border-bottom: 2px solid #F2F2F2; padding: 0px 0px 24px; font-size: 88px; font-weight: normal; font-family: var(--Archivo); line-height: 120%;}
    .bt strong{font-weight: normal; color: #3D7AF5}
    .bt span{display: block; font-size: 32px; color: #B9B9B9; line-height: 120%; letter-spacing: -1px;}








section{box-sizing: border-box; position: relative;}



.form{position: relative;}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea,.form select{
    width: 100%; height: 48px; margin-bottom: 15px; padding: 0 25px; font-size: 14px; font-weight: 300; border: 1px solid #EAEAEA; border-radius: 5px;
}
.form textarea{resize: none; padding-top: 15px; height: 150px;}
.form .flex input{width: calc(50% - 7px)}
.form .btn{width: 100%; gap: 15px; font-size: 18px; font-weight: 500; height: 54px}




label.file{display: flex; align-items: center; margin-bottom: 10px; justify-content: space-between; border: 1px solid rgba(0, 16, 26, 0.3); padding: 0 20px; font-size: 16px; height: 62px; border-radius: 10px; max-width: 190px; font-size: 16px;}
    label.file:hover{background: rgba(0, 16, 26, 0.3); cursor: pointer;}




input[type="checkbox"],input[type="radio"]{display:none;}


label.checkbox{display: block; position: relative; padding: 0 0 0 28px; cursor: pointer; font-size: 14px; line-height: 36px;}
label.checkbox:after{position: absolute; top: calc(50% - 12px); left: 0; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #fff; content: ''; border-radius: 4px; background: #fff;}
label.checkbox i{font-style: normal;}
label.checkbox i:after{position: absolute; top: calc(50% - 12px); left: 0px; width: 20px; height: 20px; content: ''; background: url("../img/check.svg") 50% 50% no-repeat; background-size: 12px; box-sizing: border-box; display: none; border-radius: 4px; z-index: 2;}
label.checkbox input:checked + i:after{display: block;}


::placeholder{color: #959EAD;}



button{background: transparent;}



.clearfix{clear: both;}
.center{display: inline-block; width: 100%; text-align: center;}


a,svg,svg path,svg rect, svg g, svg circle{text-decoration: none; transition: all 0.15s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;}
	a:hover{transition: all 0.15s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:focus{outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

img{display: block;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-width: 100%; height: auto; transition: all 0.15s ease-out;}
div{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}



.btn,.btn:after{display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-align: center; cursor: pointer; padding: 0; border: none; transition: all 0.2s ease-out; box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;}
	.btn:hover{transition: all 0.2s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}


.btn-red{padding: 0 16px; gap: 8px; color: #fff; border-radius: 56px; height: 48px; background: #F23A29; font-family: var(--Montserrat); font-weight: 700; font-size: 16px;}
    .btn-red:hover{background: #C01B0C;}


.btn-red-tr{padding: 0 16px; gap: 8px; color: #fff; border-radius: 56px; height: 48px; border: 2px solid #F23A29;  font-family: var(--Montserrat); font-weight: 700; font-size: 16px;}
    .btn-red-tr:hover{background: #C01B0C; border-color: #C01B0C}


input,textarea,select,button{-webkit-appearance: none; box-sizing: border-box; font-family: "Unbounded", sans-serif;}