*, *::before, *::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: inherit; }

ul, ol, li {
  list-style: none;
  color: inherit; }

img {
  display: block; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-family: "Jura", sans-serif, sans-serif;
  font-weight: 400;
  font-style: normal; }

textarea, button, input {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  font-family: inherit; }

button {
  cursor: pointer;
  background-color: inherit; }

html, body {
  height: 100%;
  line-height: 1; }

html {
  font-size: 10px; }

body {
  font: 1.6rem/1.375em 'Mulish', sans-serif;
  color: #222;
  background-color: #fff;
  overflow-x: hidden;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none; }

h1 {
  font-size: 7.2rem;
  line-height: 1.2em;
  margin: 0.5em 0;
  text-transform: uppercase; }

h3 {
  font: 700 2.4rem/1.2em 'Mulish', sans-serif;
  margin: 1em 0; }

.button {
  color: inherit;
  display: inline-block;
  font: 700 1.6rem/1.8em Mulish, sans-serif;
  text-transform: uppercase;
  white-space: nowrap; }
  .button:hover:not(:disabled) {
    background: linear-gradient(90deg, #BEB9FF 0%, #6FDEDE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .button-arrowed::after {
    content: "";
    display: inline-block;
    margin-left: 1rem;
    width: 2.1rem;
    height: 1.2rem;
    background: url("../img/css/arrow.svg") center right no-repeat;
    background-size: cover; }

.section {
  position: relative;
  overflow: hidden; }

.bg-rect,
.bg-circle {
  position: absolute;
  width: 29.1rem;
  height: 29.1rem;
  background: url("../img/css/bg-rectangle-small.svg") center center no-repeat;
  background-size: contain; }

.bg-rect-big,
.bg-rect-big-dark {
  width: 47.4rem;
  height: 47.4rem;
  background-image: url("../img/css/bg-rectangle-big.svg"); }

.bg-rect-big-dark {
  background-image: url("../img/css/bg-rectangle-big-dark.svg"); }

.bg-circle {
  width: 120rem;
  height: 120rem;
  background-image: url("../img/css/bg-circle.svg"); }

.section-container {
  max-width: 104.0rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  padding: 10rem 0;
  z-index: 1; }
  .section-container .section-title {
    font-size: 2rem;
    color: inherit;
    text-transform: uppercase; }
  .section-container .section-content {
    margin: auto 0;
    padding: 5rem 0 0; }
    .section-container .section-content p {
      font: 2rem/1.3em 'Mulish', sans-serif;
      margin-bottom: 1em;
      color: inherit; }
      .section-container .section-content p a {
        color: inherit;
        text-decoration: underline; }
      .section-container .section-content p.slogan-text {
        font: 3.6rem/1.3em "Jura", sans-serif; }
        .section-container .section-content p.slogan-text strong {
          font-weight: 400;
          background: linear-gradient(90deg, #6FDEDE 0%, #BEB9FF 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent; }
    .section-container .section-content a:hover {
      background: linear-gradient(90deg, #BEB9FF 0%, #6FDEDE 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }

ul.pretty-list li {
  padding-left: 3.4rem;
  margin-bottom: 0.8em;
  background: url(../img/css/dot.svg) 0 0.4em no-repeat;
  background-size: 1.4rem 1.4rem;
  font: 2rem/1.3em 'Mulish', sans-serif; }
  ul.pretty-list li a {
    color: inherit;
    text-decoration: none; }
  ul.pretty-list li ul {
    padding: 0.8em 0 0; }
    ul.pretty-list li ul li {
      background-size: 0.8rem 0.8rem;
      background-position: .5em .5em; }

ul.pretty-list-big li {
  padding-top: 5.3rem;
  background: url(../img/css/dot-big.svg) 0 0 no-repeat;
  background-size: 3.3rem 3.3rem;
  font: 3.2rem/1.3em 'Mulish', sans-serif;
  margin-bottom: 1.2em; }
  ul.pretty-list-big li a {
    color: inherit;
    text-decoration: underline; }

ul.benefits li {
  padding-left: 7rem;
  background: url(../img/css/benefits-icon.svg) 0 -0.4rem no-repeat;
  background-size: 5rem 5rem;
  font: 3.2rem/1.3em 'Mulish', sans-serif; }
  ul.benefits li strong {
    font-weight: 700;
    font-size: 3.6rem; }

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 4rem; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem; }

header {
  color: #ffffff;
  position: fixed;
  top: 5rem;
  left: 0;
  width: 100vw;
  padding: 0 8rem;
  transition: .3s all;
  z-index: 10; }
  header .header-content {
    height: 5.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }
  header .logo {
    margin-right: auto;
    z-index: 11; }
    header .logo img {
      width: 12.8rem;
      opacity: 1; }
  header .logo img,
  header .button-arrowed::after,
  header .menu-wrap {
    transition: .3s all; }

body:not(.menu-open):not(.popup-open) .header-dark-mode {
  color: #000; }
  body:not(.menu-open):not(.popup-open) .header-dark-mode .logo {
    background: url(../img/css/xdev-logo-dark.png) center center no-repeat;
    background-size: contain; }
    body:not(.menu-open):not(.popup-open) .header-dark-mode .logo img {
      opacity: 0; }
  body:not(.menu-open):not(.popup-open) .header-dark-mode .button-arrowed::after {
    filter: brightness(0); }
  body:not(.menu-open):not(.popup-open) .header-dark-mode .menu-wrap {
    filter: brightness(0); }

.menu-wrap {
  margin-left: 4rem;
  z-index: 11; }

.menu-btn,
.close-popup-btn {
  display: block;
  width: 3.8rem;
  cursor: pointer;
  transform: translateX(0);
  transition: transform .5s;
  pointer-events: visiblePainted; }
  .menu-btn div,
  .close-popup-btn div {
    position: relative;
    overflow: hidden;
    height: 2px;
    width: 3.8rem;
    margin-bottom: 1.1rem;
    transform-origin: 100% 50%;
    transform: scaleX(1);
    transition: none; }
    .menu-btn div::before, .menu-btn div::after,
    .close-popup-btn div::before,
    .close-popup-btn div::after {
      animation-duration: .5s; }
  .menu-btn div:first-child::before,
  .menu-btn div:first-child::after,
  .close-popup-btn div:first-child::before,
  .close-popup-btn div:first-child::after {
    animation-delay: 0s; }
  .menu-btn div:nth-child(2)::before,
  .menu-btn div:nth-child(2)::after,
  .close-popup-btn div:nth-child(2)::before,
  .close-popup-btn div:nth-child(2)::after {
    animation-delay: 75ms; }
  .menu-btn div:nth-child(3)::before,
  .menu-btn div:nth-child(3)::after,
  .close-popup-btn div:nth-child(3)::before,
  .close-popup-btn div:nth-child(3)::after {
    animation-delay: 0.15s; }
  .menu-btn div:nth-child(3),
  .close-popup-btn div:nth-child(3) {
    margin-bottom: 0;
    transition: .5s all; }
  .menu-btn div::before,
  .menu-btn div::after,
  .close-popup-btn div::before,
  .close-popup-btn div::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; }
  .menu-btn div::after,
  .close-popup-btn div::after {
    transform: translateX(1.5rem); }
  .menu-btn:hover div::before,
  .close-popup-btn:hover div::before {
    animation-name: a; }
  .menu-btn:hover div::after,
  .close-popup-btn:hover div::after {
    animation-name: b; }

.menu-open .menu-wrap:after {
  animation-name: bottom-line; }

.menu-open .menu-btn,
.close-popup-btn {
  transform: translateX(0.3rem);
  transition-delay: .5s; }
  .menu-open .menu-btn div:first-child,
  .close-popup-btn div:first-child {
    transform-origin: 50% 50%;
    animation-name: c;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
  .menu-open .menu-btn div:nth-child(2),
  .close-popup-btn div:nth-child(2) {
    transform-origin: 50% 50%;
    animation-name: e;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
  .menu-open .menu-btn div:nth-child(3),
  .close-popup-btn div:nth-child(3) {
    transform: scaleX(0); }
  .menu-open .menu-btn div::before,
  .menu-open .menu-btn div::after,
  .close-popup-btn div::before,
  .close-popup-btn div::after {
    background-color: #fff !important;
    transition: background-color 0.35s ease-out 0.5s; }

.close-popup-btn {
  display: none;
  cursor: pointer;
  padding: 2rem 1rem 1rem;
  box-sizing: content-box;
  z-index: 11; }
  .close-popup-btn div {
    animation-duration: 0s !important; }

.menu-closing .menu-btn div:first-child {
  transform-origin: 50% 50%;
  animation-name: d;
  animation-duration: 1s;
  animation-fill-mode: forwards; }
.menu-closing .menu-btn div:nth-child(2) {
  transform-origin: 50% 50%;
  animation-name: f;
  animation-duration: 1s;
  animation-fill-mode: forwards; }
.menu-closing .menu-btn div:nth-child(3) {
  transform: scaleX(1); }
.menu-closing .menu-btn div::before,
.menu-closing .menu-btn div::after {
  transition: background-color 0.35s ease-out 0.35s; }

.theme {
  padding: 0;
  color: #fff;
  background: linear-gradient(180deg, #000 0%, #16082C 100%); }
  .theme .section-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh; }
  .theme .theme-title-container {
    margin: auto 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center; }
  .theme .theme-title-content {
    width: 66.6666%; }
  .theme .theme-title-figure {
    position: relative;
    width: 33.3333%;
    height: 37.2rem;
    opacity: .6; }
    .theme .theme-title-figure > div > div {
      position: absolute;
      border-radius: 50%; }
    .theme .theme-title-figure .figure-1 {
      top: 1rem;
      left: 7.6rem;
      width: 33.8rem;
      height: 33.8rem;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #504C91 100%);
      animation: 6s infinite forwards alternate tf1 ease-in-out; }
    .theme .theme-title-figure .figure-2 {
      top: 8.3rem;
      left: 3rem;
      width: 28.8rem;
      height: 28.8rem;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #504C91 100%);
      animation: 6s infinite forwards alternate tf2 ease-in-out; }
    .theme .theme-title-figure .figure-3 {
      top: 0;
      left: 0;
      width: 26rem;
      height: 26rem;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #36A2A2 100%);
      animation: 6s infinite forwards alternate tf3 ease-in-out; }
  .theme h1 {
    color: #fff; }
  .theme h3 {
    color: #fff; }
  .theme .what-we-do {
    display: flex;
    flex-direction: row;
    margin: 4rem -1.9em -4rem; }
    .theme .what-we-do li a {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 3rem;
      font: 2.4rem/1.1em 'Jura', sans-serif;
      transition: .3s all;
      padding: 0 1.6em; }
      .theme .what-we-do li a span {
        transition: .3s all; }
      .theme .what-we-do li a .icon img {
        width: 5rem; }
      .theme .what-we-do li a:hover span {
        transform: translateY(-1.5rem);
        transform-origin: bottom center; }
        .theme .what-we-do li a:hover span.icon {
          transform: scale(1.5) translateY(-2rem); }
    .theme .what-we-do li:hover + li a span, .theme .what-we-do li.prev a span {
      transform: translateY(-0.5rem); }
      .theme .what-we-do li:hover + li a span.icon, .theme .what-we-do li.prev a span.icon {
        transform: scale(1.25) translateY(-1rem); }
  .theme .scroll-down {
    position: absolute;
    left: -14rem;
    bottom: 0;
    width: 1rem;
    height: 9.5rem;
    cursor: pointer;
    background-color: transparent;
    pointer-events: visiblePainted;
    transform-origin: 0 0;
    transform: translate3d(-50%, 0, 0) scaleY(1);
    transition: transform 1s; }
    .theme .scroll-down div {
      position: absolute;
      left: 50%;
      top: 0;
      width: 1px;
      height: 100%;
      transform: translateX(-50%); }
    .theme .scroll-down div:after,
    .theme .scroll-down div:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      animation: 3s infinite forwards cubic-bezier(0.25, 0, 0.25, 1); }
    .theme .scroll-down div:before {
      transform-origin: 0 100%;
      animation-name: scroll-down-before; }
    .theme .scroll-down div:after {
      transform-origin: 0 0;
      animation-name: scroll-down-after; }

.about-us {
  color: #000000; }
  .about-us .bg-rect-big {
    right: -10.8rem;
    top: 29%; }
  .about-us .bg-rect-sm-1 {
    right: 14.4rem;
    top: 57%; }
  .about-us .bg-rect-sm-2 {
    right: 26.6rem;
    top: 37%; }
  .about-us .project400 {
    position: absolute;
    bottom: 6%;
    right: 0;
    width: 85%;
    height: 19.1rem;
    background: url("../img/css/projects400.png") center center no-repeat;
    background-size: contain; }
  .about-us .section-content p {
    font-size: 2.4rem;
    line-height: 1.5em;
    padding-bottom: 0;
    margin-bottom: 0; }
  .about-us .section-content ul.pretty-list {
    margin-top: 2.3em; }
    .about-us .section-content ul.pretty-list li {
      font-size: 2.4rem; }
      .about-us .section-content ul.pretty-list li .button-arrowed {
        white-space: nowrap;
        font-weight: 700; }
        .about-us .section-content ul.pretty-list li .button-arrowed:after {
          filter: invert(1);
          margin-left: .5rem; }

.our-clients {
  color: #000000; }
  .our-clients .bg-rect-big {
    left: -13rem;
    bottom: -19rem; }
  .our-clients .bg-rect-sm-1 {
    left: 4rem;
    bottom: 0; }
  .our-clients .bg-rect-sm-2 {
    left: -8.5rem;
    bottom: 22rem; }
  .our-clients .splide {
    overflow-x: hidden;
    padding-bottom: 50px; }
  .our-clients .splide__track {
    margin: 0 -1px; }
  .our-clients .clients-list {
    cursor: grab; }
    .our-clients .clients-list li {
      overflow: hidden; }
      .our-clients .clients-list li > div {
        height: 16rem;
        display: flex;
        justify-content: center;
        align-items: center; }
        .our-clients .clients-list li > div img {
          display: block;
          filter: grayscale(1);
          transition: .3s filter;
          max-width: 55%;
          max-height: 55%; }
        .our-clients .clients-list li > div:hover img {
          filter: grayscale(0); }
    .our-clients .clients-list > li:not(:first-child) {
      border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .our-clients .clients-list .splide__slide__row:not(:nth-child(4)) .splide__slide--col {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.splide__arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }
  .splide__arrows .splide__arrow--prev {
    transform: rotate(180deg); }
  .splide__arrows button {
    transition: all .2s;
    border-radius: 50%;
    opacity: 0.6; }
    .splide__arrows button:hover:not(:disabled) {
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.03); }
    .splide__arrows button:disabled {
      opacity: 0.1;
      cursor: default; }
    .splide__arrows button svg {
      display: block; }

.create-and-find {
  color: #ffffff;
  background: linear-gradient(0deg, #16082C 0%, #000 100%); }
  .create-and-find .bg-rect-big-dark {
    left: -9rem;
    top: -7rem; }

.why-us {
  color: #000000; }
  .why-us .bg-rect-big {
    right: 10rem;
    top: -20rem; }
  .why-us .bg-rect-sm-1 {
    right: -19.6rem;
    top: 10rem; }
  .why-us .bg-rect-sm-2 {
    right: -1.5rem;
    top: -7.4rem; }
  .why-us .section-content h3 {
    margin: 0.4em 0 0.8em; }
  .why-us .icon img {
    width: 5rem; }

.our-services {
  color: #ffffff;
  background: linear-gradient(180deg, #16082C 0%, #000 100%); }
  .our-services .bg-circle {
    left: 50%;
    margin-left: -60rem;
    top: 38%; }

.our-stack {
  color: #000000; }
  .our-stack .bg-rect-big {
    left: -17.7rem;
    bottom: 15.4rem; }
  .our-stack .bg-rect-sm-1 {
    left: 0;
    bottom: 10.5rem; }
  .our-stack .bg-rect-sm-2 {
    left: 25.6rem;
    bottom: -1rem; }
  .our-stack .section-content h3 {
    margin: 0 0 0.4em;
    font-size: 3.2rem;
    text-transform: uppercase; }

.get-in-touch {
  color: #ffffff;
  background: linear-gradient(180deg, #16082C 0%, #000 100%); }
  .get-in-touch .section-content p.slogan-text {
    font-size: 4.8rem; }
    .get-in-touch .section-content p.slogan-text strong {
      background: linear-gradient(90deg, #6FDEDE 0%, #BEB9FF 100%);
      background-clip: text;
      -webkit-background-clip: text; }
  .get-in-touch .section-content .actions {
    width: 50%;
    border-bottom: 1px solid #ffffff;
    padding: 1em 0;
    grid-gap: 0; }
  .get-in-touch .section-content .contacts-container {
    display: flex;
    margin-top: 4em;
    align-items: flex-start;
    gap: 4rem; }
  .get-in-touch .section-content .contacts {
    width: 68%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 2rem; }
    .get-in-touch .section-content .contacts .email {
      font-size: 2rem; }
    .get-in-touch .section-content .contacts .phone {
      font-size: 2.4rem;
      font-weight: 700; }
    .get-in-touch .section-content .contacts .address {
      font-size: 1.6rem; }
  .get-in-touch .section-content .social-links {
    width: 32%;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 4rem;
    grid-row-gap: 2rem; }

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: -100%;
  visibility: hidden;
  transition: .5s transform;
  color: #ffffff;
  z-index: 9; }
  .popup .popup-container {
    background: url("../img/css/bg-rectangle-popup.svg") no-repeat, linear-gradient(180deg, #000 0%, #16082C 100%);
    background-size: 48.1rem 48.1rem, cover;
    height: 100dvh;
    overflow-y: hidden; }
  .popup .popup-content {
    max-width: 104rem;
    margin: 0 auto;
    padding: 13rem 0 9rem; }
  .popup h2 {
    font-size: 4.8rem;
    margin-bottom: 1.3em;
    line-height: 1.2em;
    text-transform: uppercase; }
    .popup h2 img {
      display: inline-block; }
  .popup h3 {
    font: 3.2rem/1.3em 'Mulish', sans-serif;
    font-weight: 700;
    margin-bottom: 1.25em;
    color: inherit; }
  .popup p {
    font: 2rem/1.3em 'Mulish', sans-serif;
    margin-bottom: 1em;
    color: inherit; }
  .popup ul.benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4rem;
    padding: 1.8em 0; }
  .popup [data-animated] {
    animation: 1s forwards;
    opacity: 0; }

.popups .it-enterprise .popup-container {
  background-position: right -10rem top -3rem, 0 0; }
.popups .it-enterprise h2 img {
  width: 35.9rem;
  margin-left: .3em;
  vertical-align: text-bottom; }
.popups .creatio .popup-container {
  background-position: right -10.5rem center, 0 0; }
.popups .creatio h2 img {
  width: 18.1rem;
  margin-left: .3em; }
.popups .bots-farm .popup-container {
  background-position: right -4rem bottom -20rem, 0 0; }
.popups .bots-farm h2 img {
  width: 30rem; }
.popups .software-development .popup-container {
  background-position: left -5rem bottom -15rem, 0 0; }
.popups .software-development p {
  margin-bottom: 1.5em; }
.popups .it-consulting .popup-container {
  background-position: left -1rem center, 0 0; }
.popups .get-in-touch-popup .popup-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-position: left -9rem bottom -15rem, 0 0; }
.popups .get-in-touch-popup .popup-content {
  display: grid;
  padding: 10rem 0;
  grid-gap: 4rem;
  grid-template-columns: 2fr 1fr; }
.popups .get-in-touch-popup h2 {
  text-transform: none;
  margin-bottom: 1.8em; }
.popups .get-in-touch-popup a:hover {
  background: linear-gradient(90deg, #BEB9FF 0%, #6FDEDE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.popups .get-in-touch-popup .contacts-container {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2.5rem 2rem; }
  .popups .get-in-touch-popup .contacts-container .contacts {
    display: flex;
    flex-direction: column;
    gap: 4rem; }
    .popups .get-in-touch-popup .contacts-container .contacts p {
      margin: .5rem 0 0; }
      .popups .get-in-touch-popup .contacts-container .contacts p:first-child {
        margin-top: 0; }
    .popups .get-in-touch-popup .contacts-container .contacts .phones p {
      font-size: 2.4rem;
      font-weight: 700; }
    .popups .get-in-touch-popup .contacts-container .contacts .emails p {
      font-size: 2rem; }
    .popups .get-in-touch-popup .contacts-container .contacts .addresses p {
      font-size: 1.6rem; }
    .popups .get-in-touch-popup .contacts-container .contacts .social-links p {
      margin: 1rem 0 0; }
      .popups .get-in-touch-popup .contacts-container .contacts .social-links p:first-child {
        margin-top: 0; }
.popups .get-in-touch-popup .send-request {
  padding: 2.5rem 0; }
.popups .get-in-touch-popup form > div {
  position: relative;
  margin: 0 0 5rem; }
.popups .get-in-touch-popup .text-input {
  display: block;
  width: 100%;
  padding: 0 0 0.4em;
  margin: 0;
  font: 2rem/1.5em 'Mulish', sans-serif;
  color: #ffffff;
  border-color: #ffffff;
  border-style: solid;
  border-width: 0 0 1px 0;
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 0; }
.popups .get-in-touch-popup label.error {
  font: 1.6rem/1.25em 'Mulish', sans-serif;
  color: #8F89F3;
  position: absolute;
  top: .7rem;
  right: 0; }
.popups .get-in-touch-popup .text-input:hover {
  border-color: #8F89F3; }
.popups .get-in-touch-popup .text-input.error {
  border-color: #8F89F3;
  padding-right: 19rem; }
.popups .get-in-touch-popup .text-input:focus {
  outline: none;
  border-color: #8F89F3; }
.popups .get-in-touch-popup textarea.text-input {
  resize: none;
  height: 2em;
  max-height: 6.4em;
  -ms-overflow-style: none;
  scrollbar-width: none; }
.popups .get-in-touch-popup textarea.text-input::-webkit-scrollbar {
  display: none; }
.popups .get-in-touch-popup .text-input:-webkit-autofill,
.popups .get-in-touch-popup .text-input:-webkit-autofill:hover,
.popups .get-in-touch-popup .text-input:-webkit-autofill:focus,
.popups .get-in-touch-popup .text-input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #09041212; }
.popups .get-in-touch-popup .actions {
  margin: -1.5rem 0 0;
  display: flex;
  justify-content: flex-end; }
.popups .get-in-touch-popup button:disabled {
  opacity: .5;
  cursor: default; }
.popups .get-in-touch-popup #thanks {
  display: none;
  font-size: 2.4rem; }

.popup.menu {
  z-index: 10; }
  .popup.menu .popup-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #000 0%, #16082C 100%);
    overflow-y: hidden; }
  .popup.menu .popup-content {
    width: 100%;
    height: 100%;
    padding: 0; }
  .popup.menu .two-col {
    align-items: center;
    height: 100%; }
  .popup.menu .menu-figure {
    position: relative;
    width: 30.1rem;
    height: 20.1rem;
    animation: 1s forwards;
    opacity: 0; }
    .popup.menu .menu-figure > div {
      position: absolute;
      top: 0;
      width: 20.1rem;
      height: 20.1rem;
      border-radius: 50%;
      animation: 6s infinite forwards alternate ease-in-out; }
    .popup.menu .menu-figure .figure-1 {
      right: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #36A2A2 100%);
      animation-name: mf1; }
    .popup.menu .menu-figure .figure-2 {
      left: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0, #8F89F3 100%);
      animation-name: mf2; }
  .popup.menu .popup-content {
    height: 100%; }
  .popup.menu .menu-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center; }
  .popup.menu ul {
    padding: 15rem 0 7rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .popup.menu ul li {
      font: 4.8rem/1.2em "Jura", sans-serif;
      text-transform: uppercase;
      padding-bottom: .5em;
      animation: 1s forwards;
      opacity: 0; }
      .popup.menu ul li a:hover {
        background: linear-gradient(90deg, #BEB9FF 0%, #6FDEDE 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
  .popup.menu .social-links {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    padding: 0 0 8rem; }
    .popup.menu .social-links div {
      animation: 1s forwards;
      opacity: 0; }
    .popup.menu .social-links a {
      font: 2.4rem/1.2em "Jura", sans-serif; }
    .popup.menu .social-links .button-arrowed::after {
      margin-left: 1.5rem;
      width: 2.7rem;
      height: 1.4rem;
      vertical-align: .2rem; }

.menu-open .popup.menu {
  visibility: visible;
  transform: translateY(100%); }
  .menu-open .popup.menu .menu-figure {
    animation-name: fade; }
  .menu-open .popup.menu ul li {
    animation-name: fade-left; }
  .menu-open .popup.menu .social-links div {
    animation-name: fade-up; }

.menu-closing .popup.menu {
  visibility: visible; }
  .menu-closing .popup.menu .menu-figure {
    opacity: 1; }
  .menu-closing .popup.menu ul li,
  .menu-closing .popup.menu .social-links div {
    opacity: 1;
    transform: translateX(0) translateY(0); }

.popup-open .close-popup-btn {
  display: block; }
.popup-open .menu-wrap, .popup-open #getintouch-btn {
  display: none; }
.popup-open .popup.active-popup {
  visibility: visible;
  transform: translateY(100%); }
  .popup-open .popup.active-popup h2[data-animated],
  .popup-open .popup.active-popup .contacts [data-animated] {
    animation-name: fade-left; }
  .popup-open .popup.active-popup .send-request h2[data-animated],
  .popup-open .popup.active-popup div[data-animated],
  .popup-open .popup.active-popup p[data-animated],
  .popup-open .popup.active-popup h3[data-animated],
  .popup-open .popup.active-popup ul[data-animated],
  .popup-open .popup.active-popup li[data-animated] {
    animation-name: fade-up; }

.popup-closing .popup {
  visibility: visible; }
  .popup-closing .popup [data-animated] {
    opacity: 1;
    transform: translateX(0) translateY(0); }

#scroll-to-top,
#call-us-button {
  position: fixed;
  bottom: 4rem;
  right: 4rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #fff;
  transform: rotate(-90deg);
  opacity: .7;
  transition: .2s all;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center; }
  #scroll-to-top img,
  #call-us-button img {
    width: 2.1rem;
    filter: brightness(1); }
  #scroll-to-top:hover,
  #call-us-button:hover {
    opacity: 1;
    cursor: pointer; }
  #scroll-to-top.dark-mode,
  #call-us-button.dark-mode {
    border-color: #333;
    background-color: white; }
    #scroll-to-top.dark-mode img,
    #call-us-button.dark-mode img {
      filter: brightness(0); }
  #scroll-to-top.hidden,
  #call-us-button.hidden {
    visibility: hidden;
    opacity: 0; }

#call-us-button {
  transform: none;
  bottom: 4rem;
  display: none; }
  #call-us-button img {
    width: 2rem; }

@media (max-width: 1729px) {
  html {
    font-size: 9px; } }
@media (max-width: 1441px) {
  html {
    font-size: 8px; } }
@media (max-width: 1281px) {
  html {
    font-size: 7px; }

  .section-container {
    padding-top: 15rem; } }
@media (max-width: 1100px) {
  html {
    font-size: 6.5px; }

  .section-container,
  .popup .popup-content {
    max-width: 115rem; }

  .theme .scroll-down {
    left: -7rem; } }
@media (max-width: 905px) {
  h1 {
    font-size: 6.7rem; }

  .section-container,
  .popup .popup-content {
    max-width: 100%;
    margin-left: 8rem;
    margin-right: 8rem; }

  .our-services .bg-circle {
    width: 88vw;
    height: 88vw;
    margin-left: -44vw; } }
@media (max-width: 760px) {
  h1 {
    font-size: 5.7rem; }

  .theme .what-we-do li a {
    padding: 0 1em; }

  .popups .it-enterprise h2 img {
    margin-left: 0; }

  .popups .creatio h2 img {
    margin-left: 0;
    width: 13rem; }

  .popups .bots-farm h2 img {
    width: 19rem; }

  .popups .get-in-touch-popup .popup-content {
    grid-template-columns: 3fr 2fr; } }
@media (max-width: 600px) {
  ul.benefits {
    grid-gap: 3rem; }
    ul.benefits li {
      font-size: 2.8rem;
      background-size: 4rem 4rem;
      padding-left: 5.5rem; }
      ul.benefits li strong {
        font-size: 3.2rem; }

  header {
    padding: 4rem 6rem;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8); }
    header.header-dark-mode {
      background-color: rgba(255, 255, 255, 0.85); }

  .section-container,
  .popup .popup-content {
    margin-left: 6rem;
    margin-right: 6rem; }

  .three-col {
    grid-template-columns: 1fr 1fr; }

  .theme .theme-title-container {
    flex-direction: column-reverse; }
  .theme .theme-title-content {
    width: 100%;
    padding: 40px 0; }
  .theme .theme-title-figure {
    width: 60%;
    position: absolute;
    z-index: -1; }
  .theme .what-we-do {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    margin: 0; }
    .theme .what-we-do li a {
      flex-direction: row;
      text-align: left;
      padding: 0; }
      .theme .what-we-do li a br {
        display: none; }
      .theme .what-we-do li a:hover span {
        transform: none; }
        .theme .what-we-do li a:hover span.icon {
          transform: scale(1.15); }
    .theme .what-we-do li:hover + li a span, .theme .what-we-do li.prev a span {
      transform: none; }
      .theme .what-we-do li:hover + li a span.icon, .theme .what-we-do li.prev a span.icon {
        transform: none; }

  .get-in-touch .section-content .contacts-container {
    flex-direction: column; }
  .get-in-touch .section-content .actions {
    width: 100%; }
  .get-in-touch .section-content .contacts {
    width: 100%; }
  .get-in-touch .section-content .social-links {
    width: 100%;
    grid-template-columns: 1fr 1fr; }

  .popup h2 {
    font-size: 3.8rem; }

  .popups .it-enterprise h2 img {
    width: 28.9rem;
    margin-left: 0; }
  .popups .get-in-touch-popup .popup-content {
    grid-template-columns: 1fr; }
  .popups .get-in-touch-popup .contacts-container {
    display: none; }

  .popup.menu .popup-container {
    align-items: flex-start; }
  .popup.menu .popup-content {
    width: 100%; }
  .popup.menu .menu-figure {
    display: none; }
  .popup.menu .two-col {
    grid-template-columns: 1fr; }
  .popup.menu ul {
    justify-content: flex-start;
    padding-top: 20rem; }

  #scroll-to-top {
    bottom: 10.5rem; }

  #call-us-button {
    display: flex; } }
@media (max-width: 481px) {
  html {
    font-size: 10px; }

  .mobile-hide {
    display: none; }

  h1 {
    font-size: 3.2rem; }

  ul.pretty-list li {
    font-size: 1.6rem;
    background-position: 0 0.2em;
    margin-bottom: 0.5em; }

  ul.pretty-list-big {
    grid-gap: 5rem; }
    ul.pretty-list-big li {
      font-size: 2rem;
      padding: .3rem 0 0 4rem;
      min-height: 3.3rem;
      margin-bottom: 0;
      background-position: 0 center;
      background-size: 2rem 2rem; }

  ul.benefits {
    grid-gap: 3rem; }
    ul.benefits li {
      padding-left: 4.5rem;
      font-size: 2rem;
      background-size: 3.5rem 3.5rem;
      background-position: 0 -.5rem; }
      ul.benefits li strong {
        font-size: 2.6rem; }

  .section-container,
  .popup .popup-content {
    margin-left: 2.4rem;
    margin-right: 2.4rem;
    padding: 10rem 0; }
    .section-container .section-content,
    .popup .popup-content .section-content {
      padding-top: 7.5rem; }
      .section-container .section-content p.slogan-text,
      .popup .popup-content .section-content p.slogan-text {
        font-size: 2.4rem; }

  .three-col,
  .two-col {
    grid-template-columns: 1fr;
    grid-gap: 3rem; }

  header {
    padding: 2rem 2.4rem; }
    header .header-content {
      height: 3.6rem; }
    header .logo img {
      width: 7.2rem; }

  .bg-rect,
  .bg-circle {
    width: 12rem;
    height: 12rem; }

  .bg-rect-big,
  .bg-rect-big-dark {
    width: 24.3rem;
    height: 24.3rem; }

  .menu-wrap {
    margin-left: 3rem; }

  .menu-btn, .close-popup-btn {
    width: 3.9rem; }
    .menu-btn div, .close-popup-btn div {
      width: 3.9rem;
      margin-bottom: .9rem; }

  .menu-open .menu-btn div:first-child, .menu-open .close-popup-btn div:first-child, .popup-open .menu-btn div:first-child, .popup-open .close-popup-btn div:first-child {
    animation-name: c-mob; }
  .menu-open .menu-btn div:nth-child(2), .menu-open .close-popup-btn div:nth-child(2), .popup-open .menu-btn div:nth-child(2), .popup-open .close-popup-btn div:nth-child(2) {
    animation-name: e-mob; }
  .menu-open .close-popup-btn div, .popup-open .close-popup-btn div {
    width: 3.2rem; }

  .menu-closing .menu-btn div:first-child, .menu-closing .close-popup-btn div:first-child, .popup-closing .menu-btn div:first-child, .popup-closing .close-popup-btn div:first-child {
    animation-name: d-mob; }
  .menu-closing .menu-btn div:nth-child(2), .menu-closing .close-popup-btn div:nth-child(2), .popup-closing .menu-btn div:nth-child(2), .popup-closing .close-popup-btn div:nth-child(2) {
    animation-name: f-mob; }

  .close-popup-btn {
    padding: .9rem 0 0; }

  .theme .section-container {
    padding: 8rem 0 15rem; }
  .theme h3 {
    font-size: 1.6rem; }
  .theme .theme-title-content {
    padding: 3rem 0; }
  .theme .theme-title-figure {
    width: 26.3rem;
    height: 23.7rem; }
    .theme .theme-title-figure > div {
      transform: scale(0.65);
      transform-origin: left center; }
  .theme .what-we-do {
    gap: 1.8rem; }
    .theme .what-we-do li a {
      font-size: 2rem; }
      .theme .what-we-do li a .icon img {
        width: 3rem; }
  .theme .scroll-down {
    display: none; }

  .about-us .bg-rect-sm-1, .about-us .bg-rect-sm-2 {
    display: none; }
  .about-us .bg-rect-big {
    right: -8rem;
    top: -8rem; }
  .about-us .project400 {
    bottom: 6rem;
    right: auto;
    left: 2.4rem;
    width: 60%;
    height: 5.5rem;
    background-position-x: left; }
  .about-us .section-content {
    padding-top: 4.5rem;
    padding-bottom: 3rem; }
    .about-us .section-content p {
      font-size: 2rem;
      line-height: 1.3em; }
    .about-us .section-content ul.pretty-list li {
      background-position: 0 0.3em;
      font-size: 2rem; }
      .about-us .section-content ul.pretty-list li .button-arrowed::after {
        height: .8rem;
        width: 1.3rem; }

  .our-clients .bg-rect-sm-1 {
    right: 19rem;
    bottom: -4rem;
    left: auto; }
  .our-clients .bg-rect-sm-2 {
    right: 13.5rem;
    bottom: -13rem;
    left: auto; }
  .our-clients .bg-rect-big {
    right: -2rem;
    bottom: -12rem;
    left: auto; }
  .our-clients .splide__track {
    margin: 0; }
  .our-clients .splide__arrows {
    justify-content: space-evenly;
    display: none; }
  .our-clients .clients-list {
    margin: 0; }
    .our-clients .clients-list li > div {
      height: 11rem;
      border: none; }
      .our-clients .clients-list li > div img {
        max-width: 60%;
        max-height: 60%; }

  .create-and-find .bg-rect-big-dark {
    right: -4rem;
    bottom: -7rem;
    left: auto;
    top: auto; }

  .why-us .bg-rect-sm-1 {
    left: 5.5rem;
    bottom: -2rem;
    right: auto;
    top: auto; }
  .why-us .bg-rect-sm-2 {
    left: 13rem;
    bottom: -9rem;
    right: auto;
    top: auto; }
  .why-us .bg-rect-big {
    left: -9rem;
    bottom: -8rem;
    right: auto;
    top: auto; }

  .our-stack .bg-rect-sm-1 {
    right: 18rem;
    bottom: -1.9rem;
    left: auto;
    top: auto; }
  .our-stack .bg-rect-sm-2 {
    right: 14.2rem;
    bottom: -1.9rem;
    left: auto;
    top: auto; }
  .our-stack .bg-rect-big {
    right: -2rem;
    bottom: -8rem;
    left: auto;
    top: auto; }
  .our-stack .section-content h3 {
    font-size: 2.2rem;
    margin-bottom: .6em; }

  .get-in-touch .section-content .actions {
    grid-template-columns: 1fr;
    border-bottom: none;
    grid-gap: 1rem; }
  .get-in-touch .section-content .contacts-container {
    margin-top: 2em; }
  .get-in-touch .section-content .contacts {
    grid-template-columns: 1fr;
    grid-row-gap: 1.5rem; }
    .get-in-touch .section-content .contacts .phone {
      margin: 2rem 0; }
    .get-in-touch .section-content .contacts .email {
      padding-left: 3.4rem;
      background: url(../img/css/dot.svg) 0 0.3em no-repeat;
      background-size: 1.4rem 1.4rem; }
  .get-in-touch .section-content .social-links {
    grid-template-columns: 1fr; }

  .popup h2 {
    font-size: 2.4rem;
    margin-bottom: 1.5em; }
  .popup h3 {
    font-size: 2rem; }
  .popup p {
    font-size: 1.6rem; }
  .popup .two-col {
    grid-gap: 0; }
  .popup .popup-container {
    background-size: 25.7rem 25.7rem, cover; }
  .popup ul.benefits {
    grid-template-columns: 1fr; }

  .popups .it-enterprise .popup-container {
    background-position: right -9rem top 14rem, 0 0; }
  .popups .it-enterprise h2 img {
    width: 25rem; }
  .popups .bots-farm .popup-container {
    background-position: right -12rem bottom -19rem, 0 0;
    background-size: 48.1rem 48.1rem, cover; }
  .popups .it-consulting .popup-container {
    background-position: right -5rem center, 0 0; }
  .popups .get-in-touch-popup .popup-container {
    justify-content: flex-start; }
  .popups .get-in-touch-popup h2 {
    text-transform: uppercase;
    margin-bottom: 4em; }
  .popups .get-in-touch-popup .text-input {
    font-size: 1.6rem; }
  .popups .get-in-touch-popup label.error {
    font-size: 1.3rem; }
  .popups .get-in-touch-popup .send-request {
    padding: 0; }

  .popup.menu ul {
    padding-top: 13rem; }
    .popup.menu ul li {
      font-size: 2.4rem;
      padding-bottom: .8em; }
  .popup.menu .social-links {
    gap: 3rem;
    justify-content: space-between;
    padding-bottom: 6rem; }
    .popup.menu .social-links a {
      font-size: 1.8rem; }
    .popup.menu .social-links .button-arrowed::after {
      margin-left: 1.2rem;
      width: 2.1rem;
      height: 1.2rem;
      vertical-align: 0; }

  #scroll-to-top,
  #call-us-button {
    right: 2rem;
    bottom: 10.5rem; }

  #call-us-button {
    bottom: 4rem; } }
@media (max-width: 376px) {
  html {
    font-size: 9px; } }
@media (max-width: 221px) {
  html {
    font-size: 8px; } }
@keyframes scroll-down-before {
  0% {
    transform: translateY(0) scaleY(1); }
  40% {
    transform: translateY(10px) scaleY(0); }
  100% {
    transform: translateY(10px) scaleY(0); } }
@keyframes scroll-down-after {
  0% {
    transform: translateY(-15px) scaleY(0); }
  60% {
    transform: translateY(-15px) scaleY(0); }
  100% {
    transform: translateY(0) scaleY(1); } }
@keyframes tf1 {
  0% {
    transform: translate(0, 0) rotate(0); }
  100% {
    transform: translate(0.6rem, 1.7rem) rotate(45deg); } }
@keyframes tf2 {
  0% {
    transform: translate(0, 0) rotate(0); }
  100% {
    transform: translate(-3.54rem, -3.1rem) rotate(45deg); } }
@keyframes tf3 {
  0% {
    transform: translate(0, 0) rotate(0); }
  100% {
    transform: translate(2.8rem, -0.3rem) rotate(45deg); }
  100% {
    transform: translate(2.8rem, -0.3rem) rotate(45deg); } }
@keyframes mf1 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }
@keyframes mf2 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(50%); } }
@keyframes a {
  0% {
    left: 0; }
  to {
    left: -5.5rem; } }
@keyframes b {
  0% {
    left: 4rem; }
  to {
    left: -1.5rem; } }
@keyframes c {
  0% {
    transform: translate(0) rotate(0deg); }
  30% {
    transform: translate(0) rotate(-10deg); }
  to {
    transform: translateY(0.7rem) rotate(45deg); } }
@keyframes d {
  0% {
    transform: translateY(0.7rem) rotate(45deg); }
  70% {
    transform: translate(0) rotate(-10deg); }
  to {
    transform: translate(0) rotate(0deg); } }
@keyframes e {
  0% {
    transform: translate(0) rotate(0deg); }
  30% {
    transform: translate(0) rotate(10deg); }
  to {
    transform: translateY(-0.7rem) rotate(-45deg); } }
@keyframes f {
  to {
    transform: translate(0) rotate(0deg); }
  70% {
    transform: translate(0) rotate(10deg); }
  0% {
    transform: translateY(-0.7rem) rotate(-45deg); } }
@keyframes c-mob {
  0% {
    transform: translate(0) rotate(0deg); }
  30% {
    transform: translate(0) rotate(-10deg); }
  to {
    transform: translateY(0.55rem) rotate(45deg); } }
@keyframes d-mob {
  0% {
    transform: translateY(0.55rem) rotate(45deg); }
  70% {
    transform: translate(0) rotate(-10deg); }
  to {
    transform: translate(0) rotate(0deg); } }
@keyframes e-mob {
  0% {
    transform: translate(0) rotate(0deg); }
  30% {
    transform: translate(0) rotate(10deg); }
  to {
    transform: translateY(-0.55rem) rotate(-45deg); } }
@keyframes f-mob {
  to {
    transform: translate(0) rotate(0deg); }
  70% {
    transform: translate(0) rotate(10deg); }
  0% {
    transform: translateY(-0.55rem) rotate(-45deg); } }
@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-left {
  0% {
    transform: translateX(100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes fade-right {
  0% {
    transform: translateX(-100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes fade-up {
  0% {
    transform: translateY(100px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */