@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); :root { --color_1: #100428; --color_2: #f4d6db; --color_3: #ff2900; --color_4:#1a004b14}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; font-family: "Roboto", sans-serif; font-family: "Abel", sans-serif; }
.btn,.light,header { color: #fff }
.split,header,section { display: flex; justify-content: space-between; align-items: center; position: relative }
header { z-index: 5; padding: 20px; position: fixed; width: 100%; }
li { float: left; list-style: none }
nav ul { padding: 0; margin: 0 }
nav li { padding:20px; border-bottom: 2px solid transparent; transition: all .3s ease; cursor: pointer; text-transform: uppercase; font-weight: 700; font-size: 14px; }
.flx { display: flex; justify-content: space-between; align-items: center; }
.flx_0 { display: flex; align-items: center; }
.flx_1 { display: flex; justify-content: space-between; }
footer .wrap>div:nth-child(1) { width: 50%; }
footer .wrap>div:nth-child(2),footer .wrap>div:nth-child(3) { width: 25%; }
footer a, .fnav>* { color: #fff; text-decoration: none; opacity: .8; transition: all .3s ease; margin: 20px; }
footer a:hover,
.fnav>*:hover { opacity: 1; cursor: pointer; }
footer .wrap div { padding: 7px 0; }
.blocks { align-items: baseline; }
.blocks>* { width: 32%; }
.wu { text-align: center; }
.blocks img { width: 90px; margin: 0 auto; display: block; margin-bottom: 60px; }
.blocks p { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin: 20px auto; color: var(--color_1); }
section { overflow: hidden; justify-content: center }
.fs,video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; z-index: -1 }
h1 { font-size: 130px; font-weight: 100; text-transform: uppercase; font-family: "Bebas Neue", sans-serif; }
p { font-size: 18px; }
.static .left p { padding-bottom: 20px }
.left h1,.right h1 { margin-bottom: 20px }
.gradientbg:after { content: ''; left: 0; top:0;width: 100%; height: 100%; position: absolute; background: linear-gradient(to bottom, var(--color_4) 35%, var(--color_1) 100%); z-index: -1; }
.hero small { font-size: 26px; text-transform: uppercase; }
.hero h1 { font-size: 142px; font-weight: 800; line-height: 140px; margin: 20px 0; color: var(--color_2); line-height: 120px; }
.hero p { font-size: 22px; width: 70%; margin:30px 0; }
.hero .left { width: 100%; padding-right: 40%; }
section.services:after { background: linear-gradient(to bottom, var(--color_4) 35%, #000000 100%); }
section.services:after { z-index: 1; }
.about { background: var(--color_1) }
.about>img { position: absolute; left: -27%; width: 59%; }
.contact {color:var(--color_2) }
.contact h2 { font-size: 112px; margin-bottom: 20px; color:var(--color_2); font-family: "Bebas Neue", sans-serif; }
.contact>img { position: absolute; left: -20%; width: 43%; }
.hr { width: 0; height: 2px; background: #0063ff; display: block; margin: 20px 0; transition: all 3s ease }
.on .hr { width: 20% }
.btn { display: inline-block; padding: 20px 40px; border-radius: 3px; font-weight: 700; position: relative; display: inline-flex; align-items: center; background: var(--color_3); text-transform: uppercase; letter-spacing: 2px; }
.btn svg { width: 25px; height: 25px; margin-left: 20px; transform: translateX(0); transition: all .3s ease }
.btn:hover svg { transform: translateX(10px) }
header .logo svg { width: 140px; height: auto; transition:all .3s ease; }
#letters {fill:#fff }
#icon { fill:var(--color_3); }
.hero nav li:nth-child(1),.about nav li:nth-child(2),.wu li:nth-child(3),.services nav li:nth-child(4),.contact nav li:nth-child(5) { border-color: #fff; opacity: 1 }
.ainfo { max-width: 70%; width: 80%; margin-top: 30px; }
.ainfo>div { color: #fff; text-decoration: none; font-size: 18px }
.ainfo a { color: #fff; text-decoration: none; }
.static .left .ainfo>* { padding-bottom: 10px; }
.sers { width: inherit; height: 300px }
#tabs .right { position: relative; flex-basis: 66% }
.wut h1:hover,.button:hover,.btn:hover { cursor: pointer }
.wua>p { display: none }
footer { background: var(--color_1); color: #fff; }
footer svg { width: 280px; height: auto; }
footer .wrap { max-width: 1270px; margin: 0 auto; padding: 20px; padding-top: 40px }
footer .wrap p { text-align: center; padding: 20px; font-size: 16px; opacity: .7; }
.contact { color: #fff }
.m { display: none }
.split { margin-top: 20px }
.close svg,
.m.menu svg { width: 30px; height: 30px; vertical-align: bottom }
.hero .left img { max-width: 500px; width: 100%; margin-bottom: 15px }
video { z-index: -2 }
.blink { animation: blink .5s infinite }
.flex { display: flex }
.header-sub-title { color: #fff; font-family: Courier; font-size: 20px; padding: .1em; font-size: 50px; margin: 20px 0 }
.logo img { width: 140px }
.hp { font-size: 30px }
section.wu:after { background: #fff }
.contact:after { background: linear-gradient(to bottom, #1a004bcf 35%, var(--color_1) 100%); }
.acs>div { position: absolute; z-index: 99; background: red; padding: 50px }
.preloader { background: var(--color_1); width: 100%; height: 100vh; top: 0; left: 0; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9; opacity: 1; transition: all .3s ease; }
.preloader.ready { opacity: 0; z-index: -99 }
.pw { display: flex; justify-content: center; align-items: center; }
.pw svg { position: absolute; /* top: 0; */
    width: 50px; height: auto; }
.loader { border: 2px solid #f3f3f314; border-top: 2px solid var(--color_1); border-top: 2px solid var(--color_1); border-radius: 50%; width: 200px; height: 200px; animation: spin 2s linear infinite; }
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
.logo_menu_mo { display: none; }
.ainfo > div { position: relative; }
.about .hr { background-color: #fff; }
.contact.static .ainfo > div>p { padding:10px 20px 10px 0!important; }
.contact .ainfo > div:after { top: 19px; }
[scrolled="1"] header { background:#0000005c }
[scrolled="1"] a #letters { opacity:0; }
[scrolled="1"] header .logo svg { width: 200px; }
.left h3 { font-size: 26px; margin-bottom: 20px; }
.hero .wrappy { padding-top: 210px; }
#icon_ { animation: change-background 4s linear infinite; }
.wrappy { max-width: 1380px; margin: 0 auto; width: 100%; display: flex; justify-content: center; align-items: center; padding: 100px 20px; }
.wrappy>* { width:49%; }
.left { padding-right:5%; }
.accentp { opacity: 0.7; }
.flxr { flex-direction: column-reverse; flex-direction: row-reverse; }
.right img { width: 160%; position: relative; }
.flxr .right img { left: -70%; }
.left #icon { width: 130px; height: auto; margin-bottom:40px; }
.wrappy .full { width:100%; }
.block svg { width:400px; height:400px }
.ainfo > div > * { color: #fff; text-decoration: none; font-size: 18px; margin: 6px 0; text-transform: uppercase; }
footer #icon { width: 60px; height: 60px; }
footer>.wrappy { padding:0 }
.fnav { display: flex; justify-content: end; }
.legal p { line-height: 30px; }
.ainfo img { width: 40px; filter: invert(1); }
.ainfo > div { display:flex; align-items: center; margin-bottom:20px; }
.ainfo > div > div { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 20px; }
.contact .wrappy { align-items: baseline; padding: 180px 20px; }
.o7 { opacity: .7; }
.contact img{width: unset;}
@media screen and (max-width:1024px) {
 section { height: unset; padding: 100px 0; }
.hero { height: 100vh; }
.about { padding-top: 0; }
.about>img { left: 0%; width: 100%; top: 0; }
.about,.contact { flex-direction: column; justify-content: unset; min-height: unset; }
.about>img,.contact>img { left: 0%; width: 100%; top: 0; position: relative; }
.blocks { justify-content: space-between; }
.blocks>* { width: 49%; margin-right: 0; }
h1 { font-size: 110px }
nav li { padding: 0 20px; border-bottom: 2px solid transparent; padding-bottom: 20px; transition: all .5s ease; opacity: .4; cursor: pointer; text-transform: uppercase; font-weight: 700; font-size: 14px; }
 }
.hero nav li:nth-child(1), .about nav li:nth-child(2), .wu li:nth-child(3), .services nav li:nth-child(4), .contact nav li:nth-child(5) { border-color: #fff; opacity: 1; }
.left #icon {
    width: 130px;
    height: auto;
    margin-bottom: 40px;
}
@media screen and (max-width:768px) {
 .hero .wrappy { padding-top: 0; }
nav { display: none }
.logo_menu_mo { display: block }
.blocks { flex-direction: column; padding-bottom:60px; }
.blocks > * { width:100%; }
.blocks img { width: 70px; }
.logo_menu_mo svg { width: 200px; height: auto; padding: 20px; }
.logo_menu_mo li>p { font-family: arial; text-transform: unset; font-size: 12px; }
.sm li { float: left; display: block; padding-right: 10px; transform: none !important }
.services .sm { display: inline-block; overflow: auto; overflow-y: hidden; max-width: 100%; margin: 0 0 1em; white-space: nowrap }
.serives h2 { padding-bottom: 40px }
.sm li { display: inline-block; vertical-align: top; float: none; padding: 20px }
.sm li:hover { cursor: pointer; }
.sm li:first-of-type { padding-left: 0 }
#tabs .right { margin-top: inherit }
.m { display: block }
nav { background:var(--color_1); color:#fff; position: absolute; left: 100%; transition: all .3s ease; width: 100%; height: 100vh; display: block; top: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
nav p.logo_menu_mo { opacity:.7; padding: 20px; }
.show nav { left: 0 }
nav li { color: #fff; float: none; opacity: 1; text-transform: uppercase; font-size: 22px; font-weight: 100; text-align: center; }
nav li:hover { cursor: pointer; }
header .close { position: absolute; color: red; top: 0; padding: 20px; right: 0 }
.hero .left img { max-width: 300px; width: 100% }
header { padding-bottom: 20px; align-items: center }
.logo img { vertical-align: sub }
nav ul li.m { border-top: 1px solid #0000004d }
ul li.m p { margin-top: 10px }
ul li.m a { color: #000; text-decoration: none }
ul li.m img { width: 140px; height: auto; filter: invert(1); border-top: 1px solid #000; margin-top: 20px }
.hp { font-size: 20px }
section { height: unset; padding: 60px 0 0 0; }
header .logo svg { width: 160px; }
footer .wrap { flex-direction: column; }
footer .wrap>*, .wrappy>*,.hero p { width: 100%; }
.right img { width:110%; ; left:-5%;vertical-align: middle; }
.ainfo { max-width: unset; width: 100%; }
.pw { top: -90px; position: relative; }
.blocks > .block { margin-bottom:40px }
.blocks > .block:last-of-type { margin-bottom:0px }
footer svg { width: 200px; }
.close svg { filter:invert(1) }
.wrappy {
    flex-direction: column;
    padding: 10px 20px;
    padding-bottom: 0;
}
.wu { text-align: center; }
.flxr .right img { left: -5%; }
.hero .left { width: 100%; padding-right: 0%; text-align: center; }
.left { padding-right: 0; padding-bottom:60px; }
.left #icon { width: 80px; }
.hero h1 { font-size: 62px; line-height: 60px; }
.hero p { font-size: 18px; width: 90%; margin: 0 auto; margin-bottom: 40px; }
.hero small { font-size: 20px; }
.left #icon { margin-bottom: 20px; }
.contact { text-align: center; }
.contact .right img { width: unset; left: unset; }
.ainfo > div { flex-direction: column; }
footer #icon { width: 50px; height: 50px; margin: 0 auto; display: block; }
footer .fnav { justify-content: center; }
.ainfo > div > div { margin-right: 0; }
.contact h2 { font-size: 62px; }
.btn{padding:20px}
 }
@media screen and (max-width:425px) {
 .blocks { flex-direction: column; }
.blocks>* { width: 100%; }
h1 { font-size: 40px; line-height: 51px; }
 }