@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root { --color_1: #0063ff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; font-family: "Roboto", sans-serif; }
.btn,.light,header { color: #fff }
.services .inner,.split,header,section { display: flex; justify-content: space-between; align-items: center; position: relative }
header { z-index: 5; align-items: inherit; border-bottom: 1px solid #ffffff1c; padding: 20px; position: fixed; width: 100%; padding-bottom: 0 }
li { float: left; list-style: none }
nav ul { padding: 0; margin: 0 }
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; }
.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; }
footer a:hover,
.fnav>*:hover { opacity: 1; cursor: pointer; }
footer .wrap div { padding: 7px 0; }
.blocks { margin-top: 40px;align-items: baseline; }
.blocks>* { width: 32%; margin-right: 20px; }
.blocks img { width: 100%; }
.blocks p { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin-top: 20px; }
section { height: 80vh; min-height: 1210px; overflow: hidden; justify-content: center }
.inner { max-width: 1230px; padding: 20px; transition: all 1s ease-out; width: 100% }
.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-family: 'Anton'; font-weight: 100; text-transform: uppercase; line-height: 150px; }
p { font-size: 18px; line-height: 30px; }
.static .left p { padding-bottom: 20px }
.left h1,.right h1 { margin-bottom: 20px }
section.hero:after,
section.services:after,
.wu:after { content: ''; left: 0; width: 100%; height: 100%; position: absolute; background: linear-gradient(to bottom, rgb(0 0 0 / 70%) 35%, #000 100%); z-index: -1; }
section.services:after { background: linear-gradient(to bottom, #000000c7 35%, #000000 100%); }
section.services:after { z-index: 1; }
section.services .inner { z-index: 3; }
.about { background: var(--color_1) }
.about.light .inner { width: 40% }
.about>img { position: absolute; left: -27%; width: 59%; }
.contact>img { position: absolute; left: -20%; width: 43%; }
.about.static .btn { background: #000; }
.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; margin-top: 20px; position: relative; display: inline-flex; align-items: center }
.btn svg { width: 25px; height: 25px; margin-left: 20px; transform: translateX(0); transition: all .3s ease }
.btn:hover svg { transform: translateX(10px) }
.static .inner { transform: translateX(-310%); opacity: 0 }
.static.on .inner { animation: an1 .6s forwards }
header .logo svg { width: 200px; height: auto; filter: invert(1); }
@keyframes an1 {100% { transform: translateX(0); opacity: 1 }}
.static .btn { transform: translateX(-410%); opacity: 0 }
.static.on .btn { animation: an2 .8s forwards; animation-delay: .5s }
@keyframes an2 {100% { transform: translateX(0); opacity: 1 }}
.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 }
.sm li { opacity: .3; transition: all .3s ease; cursor: pointer }
[show=Stra] .sm li:nth-child(1),[show=Mark] .sm li:nth-child(2),[show=Chan] .sm li:nth-child(3),[show=Plat] .sm li:nth-child(4),[show=Trad] .sm li:nth-child(5),[show=Repo] .sm li:nth-child(6) { opacity: 1; transform: scale(1.1) translateX(6px) translateY(-1px) }
.sm li { float: none; line-height: 30px }
.sers { position: relative; width: 580px }
.sers>.s { position: absolute; opacity: 0; transform: translate(500%); transition: all .3s ease }
[show=Stra] [s="1"],[show=Mark] [s="2"],[show=Chan] [s="3"],[show=Plat] [s="4"],[show=Trad] [s="5"],[show=Repo] [s="6"] { opacity: 1; transform: translate(0) }
section.services img.fs { z-index: 0 }
section.services h2 { margin-bottom: 20px }
.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 .inner { max-width: 1230px }
#tabs .right { position: relative; flex-basis: 66% }
.wut h1 { transform: scale(.5) translateX(-50%); opacity: .4; margin-bottom: 10px; transition: all .3s ease }
.wut h1:hover { cursor: pointer }
.wua>p { display: none }
footer { background: #000; color: #fff }
footer svg { width: 280px; height: auto; filter: invert(1); opacity: .3; margin-top: 7px; }
footer .wrap { max-width: 1270px; margin: 0 auto; padding: 20px; padding-top: 40px }
footer .wrap p { text-align: center; padding: 20px; font-size: 12px }
.contact { color: #fff }
.about.contact .inner { width: 50% }
#formy { display: flex; flex-direction: column }
#formy textarea { height: 110px }
#formy label { font-weight: 700; padding-bottom: 5px }
.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 }
.hero .btn,
.services .btn { background: var(--color_1) }
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 }
section.contact:after { background: linear-gradient(to bottom, #0063ff 35%, #0063ff4d 100%); }
.acs>div { position: absolute; z-index: 99; background: red; padding: 50px }
#as { display: flex; flex-direction: column; background: #000; color: #fff; width: 200px; font-size: 14px; position: fixed; right: -70%; height: 100vh; z-index: 3; transition: all .3s ease }
#as>div { box-sizing: border-box }
#as>div:hover { cursor: pointer; background: #000; filter: contrast(.9) }
.co .m span,
.fsz .m span,
.hy .m span,
.lf .m span,
.ml .m span { width: 23%; height: 1px; background: rgba(255, 255, 255, .3); transition: all .3s ease }
.fsz .m span { width: 32% }
.hy .m span,
.lf .m span,
.ml .m span { width: 100% }
#as div p { padding: 20px }
#aa { position: fixed; width: 50px; height: 50px; border-radius: 50%; background: #202b56; margin: 20px; right: 0; bottom: 0; z-index: 4; text-align: center; line-height: 50px; transition: all .3s ease; transform: scale(1) }
#aa:hover { cursor: pointer; transform: scale(1.3) }
#aa img { width: 20px; height: auto; position: relative; top: 6px }
[slideOut="1"] #as { right: 0 }
[slideOut="1"] #aa { background: #1e3696; transform: scale(1) }
#as svg { width: 15px; height: 15px; position: relative; top: 4px; margin-right: 16px }
#formy .split span { width: 48% }
.contact { z-index: -1 }
.mask { position: fixed; width: 100%; height: 100%; background: black; left: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 1; transition: all .3s ease; }
.mask img { width: 60px; height: auto; }
.contact { z-index: 1 }
.preloader { background: #fff; width: 100%; height: 100vh; top: 0; left: 0; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 3; opacity: 1; transition: all .3s ease; }
.preloader.ready { opacity: 0; z-index: -99 }
.pw { display: flex; align-items: center; justify-content: center; }
.pw svg { width: 70px; height: auto; position: absolute; }
.loader { border: 2px solid #f3f3f3; border-top: 2px solid var(--color_1); border-top: 2px solid #000; 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;}
.ainfo > div:after {content: '';width: 100%;left: 0;top: 11px;position: absolute;height: 2px;background-color: #ffffff57;}
.ainfo .left p{line-height: unset;padding:0;margin:0;}
.contact.static .left p, .contact.static .left a, .contact.static .left .ainfo span {padding-bottom: 0;background-color: var(--color_1);position: relative;z-index: 3;padding: 10px;}
.contact.static .ainfo p{line-height: unset;}
.contact.static .left>p{padding:0}
.about .hr{background-color: #fff;}
.contact.static .ainfo > div>p{padding:10px 20px 10px 0!important;}

span.iphone:after, span.iaddress:after, span.iemail:after {content: '';background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMGwtNiAyMi04LjEyOS03LjIzOSA3LjgwMi04LjIzNC0xMC40NTggNy4yMjctNy4yMTUtMS43NTQgMjQtMTJ6bS0xNSAxNi42Njh2Ny4zMzJsMy4yNTgtNC40MzEtMy4yNTgtMi45MDF6Ii8+PC9zdmc+);width: 20px;height: 20px;display: inline-block;filter: invert(1);margin-right: 20px;background-size: contain;top: 5px;position: relative;}
span.iaddress:after{background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNC4xOTggMC04IDMuNDAzLTggNy42MDIgMCA0LjE5OCAzLjQ2OSA5LjIxIDggMTYuMzk4IDQuNTMxLTcuMTg4IDgtMTIuMiA4LTE2LjM5OCAwLTQuMTk5LTMuODAxLTcuNjAyLTgtNy42MDJ6bTAgMTFjLTEuNjU3IDAtMy0xLjM0My0zLTNzMS4zNDMtMyAzLTMgMyAxLjM0MyAzIDMtMS4zNDMgMy0zIDN6Ii8+PC9zdmc+)}
span.iphone:after{background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptMy40NDUgMTcuODI3Yy0zLjY4NCAxLjY4NC05LjQwMS05LjQzLTUuOC0xMS4zMDhsMS4wNTMtLjUxOSAxLjc0NiAzLjQwOS0xLjA0Mi41MTNjLTEuMDk1LjU4NyAxLjE4NSA1LjA0IDIuMzA1IDQuNDk3bDEuMDMyLS41MDUgMS43NiAzLjM5Ny0xLjA1NC41MTZ6Ii8+PC9zdmc+)}
.contact span.iphone:after,.contact span.iaddress:after,.contact span.iemail:after{top:0}
.contact .ainfo > div:after {top: 19px;}
body section:has(.about) header{background:red}
[scrolled="1"] header{background:#0000005c}
@media screen and (max-width:1024px) {
  section { height: unset; padding: 100px 0; }
  .hero { height: 100vh; }
  .about { padding-top: 0; }
  .about.light .inner { width: 100%; }
  .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;line-height: 130px;}
  }
@media screen and (max-width:768px) {
  body { overflow-x: hidden }
  nav { display: none }
  .logo_menu_mo { display: block }
  .logo_menu_mo svg { width: 200px; height: auto; padding: 20px; }
  .logo_menu_mo li>p { font-family: arial; text-transform: unset; font-size: 12px; }
  .services .inner { flex-direction: column }
  .sm li { float: left; line-height: inherit; 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 }
  #tabs .inner,
    .m { display: block }
  nav { position: absolute; left: 100%; transition: all .3s ease; width: 100%; height: 100vh; background: #fff; display: block; top: 0; display: flex; justify-content: center; align-items: baseline; flex-direction: column; }
  nav p.logo_menu_mo { color: #000; padding: 20px; }
  .show nav { left: 0 }
  nav li { color: #000; float: none; opacity: 1; font-family: 'Anton'; text-transform: uppercase; font-size: 22px; font-weight: 100; }
  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 }
  #aa:hover { transform: scale(1) }
  .hp { font-size: 20px }
  h1 { font-size: 50px; line-height: 70px; }
  p { font-size: 14px; line-height: 22px; }
  section { min-height: unset; }
  header .logo svg { width: 170px; }
  footer .wrap { flex-direction: column; }
  footer .wrap>* { width: 100%; }
  footer .wrap>div:nth-child(2),
    footer .wrap>div:nth-child(3) { width: 100%; }
  footer .wrap>div:nth-child(3) { border-top: 1px solid #171717; padding-top: 20px; margin-top: 20px; }
  .ainfo { max-width: unset; width: 100%; }
  .pw {top: -90px;position: relative;}
  .static .inner {transform: translateX(0);opacity: 1;}
  .blocks > .block{margin-bottom:40px}
  .blocks > .block:last-of-type{margin-bottom:0px}
  footer svg {width: 200px;}
  }
@media screen and (max-width:425px) {
  .blocks { flex-direction: column; }
  .blocks>* { width: 100%; }
  h1 {font-size: 40px;line-height: 51px;}  
  }