@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --color-bg: 255, 255, 255;
  --color-bg-h: 242, 246, 255;
  --color-text: 28, 28, 28;
  --color-primary: 40, 5, 255;
  --color-secondary: 251, 20, 116;
  --circleColor: rgb(241, 243, 246);
  --padding: 1em;
}

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: 400; }

h1 {
  margin-bottom: 0.5em;
  font-family: 'Montserrat';
  text-transform: uppercase;
}
h2 {
  font-size: 2.5em;
  margin-bottom: 1em;
  font-family: 'Montserrat';
  text-align: center;
}
@media only screen and (min-width : 992px) {
  h2 {
    font-size: 3em;
  }
}
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: 700; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: 700; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

p {
  font-size: 1.2em;
  line-height: 1.7;
  color: rgba(var(--color-text), .8);
}
p + p {
  margin-top: var(--padding);
}

.btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: var(--padding);
  color: rgba(var(--color-bg), 1);
  font-size: 1.4em;
  line-height: 44px;
  padding: 0 var(--padding);
  background: rgb(var(--color-primary));
  transition: all .3s;
}
  .btn span {
    position: relative;
    z-index: 1;
  }
.btn:hover {
  color: rgba(var(--color-bg), 1);
  background: rgb(var(--color-secondary));
  transform: scale(1.1);
}


html {
  font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow-x: hidden;
}

body {
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  position: relative;
  overflow-x: hidden;
  font-size: 75%;
}

.wrapper {
  padding-left: 1em;
  padding-right: 1em;
}
@media only screen and (min-width : 992px) {
  .wrapper {
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
  }
}

header {
  position: fixed; z-index: 100;
  left: 0; right: 0; top: 0;
  width: 100vw;
  height: 68px;
  background-color: rgba(var(--color-bg), 0.8);
  backdrop-filter: blur(5px);
  border-bottom: .6px solid rgb(var(--color-bg-h));
}

  header .logo {
    position: absolute;
    left: 1em;
    top: var(--padding);
    z-index: 110;
  }
  @media only screen and (min-width : 992px) {
    header .logo {
      left: 2em;
    }
  }
    header .logo img {
      width: 100%;
      height: 44px;
      min-width: 100%;
      min-height: 44px;
      max-width: 100%;
      max-height: 44px
    }

.nav-item {
  font-size: 1rem;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
}

@media only screen and (max-width : 992px) {
  /* Toggle functionality */
  #toggle {
    position: absolute;
    left: -100%;
    top: -100%;
  }
  .button-toggle i {
    display: block;
    position: absolute; z-index: 101;
    left: 0px; right: 0px; top: 0px; bottom: 0px;
    border-radius: 4em;
    background: rgba(var(--color-bg-h), 1);
    opacity: 0;
    transition: all 0.25s;
    transform: rotate(45deg);
  }

  #toggle:focus ~ .toggle-container .button-toggle {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
  }
  #toggle:checked ~ .toggle-container .button-toggle:before {
    transform: translateY(-50%) rotate(45deg) scale(1);
  }
  #toggle:checked ~ .toggle-container .button-toggle:after {
    transform: translateY(-50%) rotate(-45deg) scale(1);
  }
  #toggle:checked ~ .toggle-container .button-toggle i,
  #toggle:checked ~ .toggle-container .button-toggle:hover i,
  #toggle:checked:focus ~ .toggle-container .button-toggle i,
  #toggle:checked:focus ~ .toggle-container .button-toggle i {
    left: -500px; right: -500px; top: -500px; bottom: -500px;
    opacity: 1;
  }
  #toggle:checked ~ .nav {
    margin: 0;
    pointer-events: auto;
    transform: translate(-100px, 50px);
  }
  #toggle:checked ~ .nav .nav-item {
    color: rgba(var(--color-text), .6);
    letter-spacing: 0;
    height: 44px;
    line-height: 44px;
    margin: 0;
    opacity: 1;
    transform: scaleY(1);
    transition: 0.5s, opacity 0.1s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(1) {
    transition-delay: 0.15s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(1):before {
    transition-delay: 0.15s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(2) {
    transition-delay: 0.1s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(2):before {
    transition-delay: 0.1s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(3) {
    transition-delay: 0.05s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(3):before {
    transition-delay: 0.05s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(4) {
    transition-delay: 0s;
  }
  #toggle:checked ~ .nav .nav-item:nth-child(4):before {
    transition-delay: 0s;
  }
  #toggle:checked ~ .nav .nav-item:before {
    opacity: 0;
  }

  /* Toggle button */
  .button-toggle {
    position: absolute;
    right: var(--padding);
    top: var(--padding);
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 100%;
    transition: 0.6s;
  }
  .button-toggle:hover {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
  }
  .button-toggle:before, .button-toggle:after {
    position: absolute; z-index: 103;
    content: "";
    top: 50%;
    left: 12px;
    width: 20px;
    height: 2px;
    background-color: rgba(var(--color-text), .6);
    border-radius: 5px;
    transition: 0.5s;
  }
  .button-toggle:before {
    transform: translateY(-50%) rotate(45deg) scale(0);
  }
  .button-toggle:after {
    transform: translateY(-50%) rotate(-45deg) scale(0);
  }

  /* Menu */
  .nav {
    position: absolute; z-index: 105;
    right: var(--padding);
    top: var(--padding);
    width: 44px;
    height: 44px;
    padding: 12px;
    display: inline-block;
    pointer-events: none;
    transition: 0.5s;
  }


  .nav-item {
    position: relative;
    float: left;
    clear: both;
    color: transparent;
    letter-spacing: -6.2px;
    height: 7px;
    line-height: 7px;
    transform: scaleY(0.2);
    transition: 0.5s, opacity 1s;
  }
  .nav-item:nth-child(1) {
    transition-delay: 0s;
  }
  .nav-item:nth-child(1):before {
    transition-delay: 0s;
  }
  .nav-item:nth-child(2) {
    transition-delay: 0.05s;
  }
  .nav-item:nth-child(2):before {
    transition-delay: 0.05s;
  }
  .nav-item:nth-child(3) {
    transition-delay: 0.1s;
  }
  .nav-item:nth-child(3):before {
    transition-delay: 0.1s;
  }
  .nav-item:nth-child(4) {
    transition-delay: 0.15s;
  }
  .nav-item:nth-child(4):before {
    transition-delay: 0.15s;
  }
  .nav-item:nth-child(1) {
    /*letter-spacing: -8px;*/
  }
  .nav-item:nth-child(2) {
    /*letter-spacing: -7px;*/
  }
  .nav-item:nth-child(n+4) {
    /*letter-spacing: -8px;*/
    margin-top: -7px;
    opacity: 0;
  }
  .nav-item:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 20px;
    height: 2px;
    background-color: rgba(var(--color-text), .6);
    transform: translateY(-50%) scaleY(5);
    transition: 0.5s;
  }
}

@media only screen and (min-width : 992px) {
  #toggle, .toggle-button {
    display: none;
  }

  .nav {
    display: flex;
    justify-content: flex-end;
    padding: var(--padding);
  }
    .nav-item {
      position: relative;
      flex: none;
      color: rgba(var(--color-text), .6);
      padding: 0 var(--padding);
      height: 44px;
      line-height: 44px;
      transition: all, .5s;
      font-size: .8rem;
    }
    .nav-item::after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      margin: 0 0 0 -1.5px;
      transform: rotate(0deg);
      opacity: 0;
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background: rgb(var(--color-secondary));
      transition: all .3s;
    }
      .nav-item:hover {
        color: rgba(var(--color-text), 1);
      }
      .nav-item.active {
        color: rgba(var(--color-text), 1);
      }
      .nav-item.active::after {
        bottom: 0;
        transform: rotate(45deg);
        opacity: 1;
      }
}




section {
  position: relative;
  z-index: 1;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 100px;
}
@media only screen and (min-width : 992px) {
  section {
    margin-top: 2em;
    margin-bottom: 2em;
  }
}
.hero {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}
@media only screen and (min-width : 992px) {
  .hero {
    flex-wrap: nowrap;
    align-content: space-between;
  }
}
  .hero .text {
    flex: 1 100%;
    text-align: center;
    align-self: center;
  }
  @media only screen and (min-width : 992px) {
    .hero .text {

    }
  }
    .hero .text h1 {
      position: relative;
      z-index: 2;
      text-transform: uppercase;
      margin: 0;
      font-size: 8em;
      line-height: 1.1;
      color: rgb(var(--color-text));
      animation-name: h1m;
      animation-duration: 2s;
      animation-iteration-count: 1;
    }
    @keyframes h1m {
      0% {
        letter-spacing: -.5em;
        opacity: 0;
      }
      100% {
        letter-spacing: 0;
        opacity: 1;
      }
    }
    @media only screen and (min-width : 992px) {
      .hero .text h1 {
        font-size: 16em;
        letter-spacing: .05em;
        line-height: 0.9;
        animation-name: h1d;
        animation-duration: 2s;
        animation-iteration-count: 1;
      }
      @keyframes h1d {
        0% {
          letter-spacing: -.5em;
          opacity: 0;
        }
        100% {
          letter-spacing: .05em;
          opacity: 1;
        }
      }
    }
    .hero .text p {
      position: relative;
      z-index: 2;
      font-size: 1.4em;
      line-height: 1.7;
      margin: 1em 0;
      color: rgba(var(--color-text), .6);
    }
    @media only screen and (min-width : 992px) {
      .hero .text p {
        margin: 2em 0;
      }
    }
  .wave {
    flex: none;
    position: relative;
    margin-top: 4em;
  }
    .circle {
      z-index: -1;
      content: '';
      display: block;
      position: absolute;
      margin: 22px 0 0 50%;
      background-color: transparent;
      border: 10px solid rgb(var(--color-bg-h));
      border-radius: 50%;
      box-shadow: inset 5px 5px 0px rgba(55 84 170 / 0.5),
                        5px 5px 0px rgba(55 84 170 / 0.5),
                  inset -5px -5px 0px rgba(255 255 255 / 1),
                        -5px -5px 0px rgba(255 255 255 / 1);
      filter: blur(10px);

      animation-name: ripple;
      animation-duration: 3s;
      animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1);
      animation-iteration-count: infinite;
    }
    .circle:nth-child(2) {
      animation-delay: -1s;
    }
    .circle:nth-child(3) {
      animation-delay: -2s;
    }
    @keyframes ripple {
      0% {
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        opacity: 1;
      }

      100% {
        top: -250px;
        left: -250px;
        width: 500px;
        height: 500px;
        opacity: 0;
      }
    }
    .wave a {

    }
    .wave a:hover {

    }

  @media only screen and (min-width : 992px) {
    .wave {

    }
  }




.services {

}
  .services h2 {
    text-align: center;
  }
  .services ul {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding: .5px;
    background-color: rgb(var(--color-bg-h));
    margin-top: 2em;
  }
    .services ul li {
      margin: .5px;
      position: relative;
      flex: 1 100%;
      padding: 2em 2em 2em 8em;
      background-color: rgb(var(--color-bg));
      cursor: default;
    }
    @media only screen and (min-width : 992px) {
      .services ul li {
        flex: 1 33%;
      }
    }
    .services ul li:hover {
      background-color: rgb(var(--color-bg-h));
    }
      .services ul li img {
        position: absolute;
        left: 2em; top: 2em;
        width: auto;
        height: 50px;
        min-width: auto;
        min-height: 50px;
        max-width: auto;
        max-height: 50px;
        margin-bottom: var(--padding);
      }
      @media only screen and (min-width : 992px) {
        .services ul li img {

        }
      }
      .services ul li h3 {

      }
      .services ul li p {
        color: rgba(var(--color-text), .6);
      }

.why {

}
  .why h2 {
    text-align: center;
  }
  .why ul {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
  }
    .why ul li {
      position: relative;
      flex: 1;
      padding: 2em;
      cursor: default;
      text-align: center;
      background-color: rgb(var(--color-bg-h));
      margin-bottom: 1em;
      min-width: 100%;
    }

    @media only screen and (min-width : 992px) {
      .why ul li {
        flex: 1;
        min-width: 0;
        max-width: 25%;
      }
      .why ul li + li {
        margin-left: 1em;
      }
    }
    .why ul li:hover {
      background-color: rgb(var(--color-bg-h));
    }
      .why ul li img {

        width: auto;
        height: 50px;
        min-width: auto;
        min-height: 50px;
        max-width: auto;
        max-height: 50px;
        margin-bottom: 2em;
      }
      @media only screen and (min-width : 992px) {
        .why ul li img {

        }
      }
      .why ul li h3 {

      }
      .why ul li p {
        color: rgba(var(--color-text), .6);
      }

.easytostart {

}
  .easytostart h2 {
    text-align: center;
  }
  .easytostart ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
  }
    .easytostart ul li {
      position: relative;
      flex: 1 100%;
      padding: 2em 0 2em 7em;
      cursor: default;
    }

    @media only screen and (min-width : 992px) {
      .easytostart ul li {
        padding: 2em;
        text-align: center;
        flex: 1;
      }
    }
    .easytostart ul li:hover {

    }
      .easytostart ul li span {
        position: relative;
        display: flex;
        flex: none;
        justify-content: center;
        position: absolute;
        left: 0; top: 0;
        width: 70px;
        height: 70px;
        background: rgb(var(--color-bg-h));
        border-radius: 50%;
      }
      @media only screen and (min-width : 992px) {
        .easytostart ul li span {
          position: relative;
          left: auto;
          margin: 0 auto 2em auto;
        }
      }
      .easytostart ul li span:before {
        z-index: -1;
        content: '';
        position: absolute;
        left: 0; top: 2em;
        display: inline-block;
      	margin: 70px 0 0 0;
      	padding: 0;
      	height: 2em;
      	width: 100%;
        transform: rotate(90deg);
      	background-image:url('data:image/svg+xml;charset=UTF-8,<svg width="102" height="17" viewBox="0 0 102 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 16C31 -4 71 -4 101 16" stroke="%23E9E6FF" stroke-width="2" stroke-dasharray="4 4"/></svg>');
        background-size: 100% 100%;
      }
      @media only screen and (min-width : 992px) {
        .easytostart ul li span:before {
          transform: none;
          left: 70px; top: 50%;
          width: 18em;
          height: 4em;
          margin: 0;
          background-image:url('data:image/svg+xml;charset=UTF-8,<svg width="102" height="17" viewBox="0 0 102 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 16C31 -4 71 -4 101 16" stroke="%23E9E6FF" stroke-width="1" stroke-dasharray="4 4"/></svg>');
        }
      }
      .easytostart ul li:nth-child(odd) span:before {
        margin-left: 1em;
      }
      @media only screen and (min-width : 992px) {
        .easytostart ul li:nth-child(odd) span:before {
          margin: -4.5em 0 0 0;
        }
      }
      .easytostart ul li:nth-child(even) span:before {
        margin-left: -1em;
        transform: rotate(-90deg);
      }
      @media only screen and (min-width : 992px) {
        .easytostart ul li:nth-child(even) span:before {
          margin: 1em 0 0 0;
          transform: rotate(180deg);
        }
      }
      .easytostart ul li:nth-child(4) span:before {
        display: none;
      }
      .easytostart ul li img {
        width: auto;
        height: 40px;
        min-width: auto;
        min-height: 40px;
        max-width: auto;
        max-height: 40px;
        margin: auto;
      }

      .easytostart ul li h3 {

      }
      .easytostart ul li p {
        color: rgba(var(--color-text), .6);
      }

.vacancies {
  display: flex;
  flex-wrap: wrap;
}
  .vacancies .content {
    flex: 1;
    margin-bottom: 2em;
  }
  @media only screen and (min-width : 992px) {
    .vacancies .content {
      margin-bottom: 0;
      flex: none;
      width: 500px;
    }
  }
  .vacancies h2 {
    text-align: center;
  }
  @media only screen and (min-width : 992px) {
    .vacancies h2 {
      text-align: left;
    }
  }
  .vacancies .text {
    flex: 1;
  }
    .vacancies .text p {
      margin-bottom: 2em;
      text-align: center;
    }
    @media only screen and (min-width : 992px) {
      .vacancies .text p {
        text-align: left;
      }
    }
  .vacancies .image {
    overflow: hidden;
  }
  @media only screen and (min-width : 992px) {
    .vacancies .image {

    }
  }
    .vacancies .image img {
      width: 100%;
    }
    @media only screen and (min-width : 992px) {
      .vacancies .image img {

      }
    }
  .vacancies ul {
    flex: 1 100%;
  }
  @media only screen and (min-width : 992px) {
    .vacancies ul {
      flex: 1;
      margin: 7em 0 0 4em;
    }
  }
    .vacancies ul li {
      margin: 0 0 .75em 0;
      background: rgb(var(--color-bg-h));
      transition: all .3s;
    }
    .vacancies ul li:hover {
      background: rgb(var(--color-bg-h));
    }
      .vacancies ul li span.expand {
        display: block;
        position: relative;
        font-size: 1.3em;
        padding: 0 var(--padding);
        cursor: pointer;
        transition: all .3s;
        line-height: 58px;
      }
      .vacancies ul li span.expand:before,
      .vacancies ul li span.expand:after {
        transition: all .3s;
      }
      .vacancies ul li span.expand:before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        margin: 0px 28px 0 0;
        display: block;
        width: 12px;
        height: 1px;
        background-color: rgb(var(--color-text));
        transform: rotate(45deg);
      }
      .vacancies ul li span.expand:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        margin: 0px 20px 0 0;
        display: block;
        width: 12px;
        height: 1px;
        background-color: rgb(var(--color-text));
        transform: rotate(-45deg);
      }
      .vacancies ul li span.expand.active:before {
        transform: rotate(-45deg);
      }
      .vacancies ul li span.expand.active:after {
        transform: rotate(45deg);
      }
      .vacancies ul li div {
        display: none;
        padding: var(--padding);
      }
        .vacancies ul li div ul {
          margin: 0 0 2em 0;
        }
          .vacancies ul li div ul h4 {
            color: rgb(var(--color-primary));
            font-weight: 700;
          }
          .vacancies ul li div ul + ul h4 {
            color: rgb(var(--color-secondary));
          }
          .vacancies ul li div ul li {
            border: none;
            color: rgba(var(--color-text), .8);
            position: relative;
            padding-left: 1em;
            font-size: 1.2em;
          }
            .vacancies ul li div ul li:before {
              content: '';
              display: block;
              position: absolute;
              left: 0;
              top: 0.5em;
              width: 6px;
              height: 6px;
              border-radius: 3px;
              background-color: rgb(var(--color-primary));
            }
            .vacancies ul li div ul + ul li:before {
              background-color: rgb(var(--color-secondary));
            }

.contact {

}
  .contact .text {
    padding: 2em 2em 24em 2em;
    overflow: hidden;
    background-color: rgb(var(--color-bg-h));
    background-image: url('img/project.svg');
    background-size: 20em 20em;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  @media only screen and (min-width : 992px) {
    .contact .text {
      padding: 4em 4em 16em 4em;
      background-size: 25em 25em;
    }
  }
  .contact .text h2 {
    text-align: left;
  }
    .contact .text h2 span {
      color: rgb(var(--color-primary));
    }
  .contact .text p {
    margin-bottom: 2em;
  }
  @media only screen and (min-width : 992px) {
    .contact .text p {
      width: 50%;
    }
     .contact .text h2 span {
       display: block;
     }
  }
  .contact a {

  }

footer {
  margin-top: 10em;
  padding-top: 4em;
  display: flex;
  flex-wrap: wrap;
  background: rgb(var(--color-text));
}
footer .wrapper {
  display: flex;
  flex-wrap: wrap;
}
  footer .block {
    flex: 1 100%;
    margin-bottom: 2em;
    align-self: flex-start;
  }
  footer .block:nth-child(2) {
    flex: 1 50%;
  }
  footer .block:nth-child(3) {
    flex: 1 50%;
  }
  @media only screen and (min-width : 992px) {
    footer .block {
      flex: 1 50%;
    }
    footer .block:nth-child(2) {
      flex: 1 25%;
    }
    footer .block:nth-child(3) {
      flex: 1 25%;
    }
    footer .block p {
      max-width: 80%;
      line-height: 2;
    }
  }
      footer .block h3 {
        color: rgb(var(--color-bg));
      }
      footer .block p {
        font-size: 1em;
        color: rgba(var(--color-bg-h), .6);
      }
      footer .block ul {

      }
        footer .block ul li {
          line-height: 2;
          color: rgb(var(--color-bg));
        }
          footer .block ul li a {
            color: rgba(var(--color-bg-h), .6);
            text-decoration: none;
            transition: all .3s;
          }
          footer .block ul li a:hover {
            color: rgb(var(--color-bg));
          }
  footer .copyright {
    flex: 1 100%;
    border-top: .6px solid rgba(var(--color-bg-h), .1);
    text-align: right;
    color: rgba(var(--color-bg-h), .6);
    font-size: 1em;
    padding: var(--padding) 0;
  }