/*  Visually hide text within an element
*   Used mostly for accessibility reasonse
*
*   No Params
*
*   Example Usage:
*
*     button {
*       span {
*         @include visuallyhidden;
*       }
*     }
*
*/
/*  PX to REM Conversion
*
*   @param {Pixel} $px - Unitless pixel value to be converted into rems.
*
*   Example Usage:
*
*     margin-bottom: rem(20);
*
*/
/*  Set font-size and optionally leading
*
*   @param {Font Size} $fontSize - Unit-less font size
*   @param {Leading}   $leading  - (default: null) - Optional- Unit-less leading from Photoshop or Sketch
*
*   Example Usage:
*
*     p {
*       @include font-size(12,14);
*     }
*
*/
/*  Unitless line-height
*
*   @param {Font Size} $fontSize - Unit-less font size
*   @param {Leading}   $leading  - Unit-less leading from Photoshop or Sketch
*
*   Example Usage:
*
*     @include line-height(16, 20);
*
*/
/**
 * Returns a percentage width based on the number and total number of columns
 *
 * @param 	int 	$num 	Number of columns (e.g. 4)
 * @param 	int 	$total 	Total number of columns (e.g. 24)
 * @return 	float 			 Total width (%)
 */
/*  Placeholder Mixin
*
*   No Params
*
*   Example Usage:
*
*     input[placeholder] {
*       @include placeholder {
*         color: red;
*       }
*     }
*
*/
/*  Media Query Mixin
*
*   @param {Media Query} $mq - Media query in single quotes: eg. 'screen and (min-width: 480px)'
*
*   Example Usage:
*
*     .selector {
*       property: value;
*
*       @include mq($bp768) {
*         property: value;
*       }
*     }
*
*/
@font-face {
  font-family: 'Poppins-Thin';
  src: url("../fonts/Poppins-Thin.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-ThinItalic';
  src: url("../fonts/Poppins-ThinItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-ExtraLight';
  src: url("../fonts/Poppins-ExtraLight.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-ExtraLightItalic';
  src: url("../fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Light';
  src: url("../fonts/Poppins-Light.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-LightItalic';
  src: url("../fonts/Poppins-LightItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Regular';
  src: url("../fonts/Poppins-Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Italic';
  src: url("../fonts/Poppins-Italic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Medium';
  src: url("../fonts/Poppins-Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-MediumItalic';
  src: url("../fonts/Poppins-MediumItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-SemiBold';
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-SemiBoldItalic';
  src: url("../fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Bold';
  src: url("../fonts/Poppins-Bold.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-BoldItalic';
  src: url("../fonts/Poppins-BoldItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-ExtraBold';
  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-ExtraBoldItalic';
  src: url("../fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-Black';
  src: url("../fonts/Poppins-Black.ttf") format("truetype"); }

@font-face {
  font-family: 'Poppins-BlackItalic';
  src: url("../fonts/Poppins-BlackItalic.ttf") format("truetype"); }

html {
  font-family: 'Poppins-Regular', sans-serif;
  font-style: normal;
  font-weight: 400; }

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
  Base styles: opinionated defaults
  ========================================================================== */
* {
  box-sizing: border-box; }

html {
  color: #BDC1C9;
  font-size: 16px;
  line-height: 1.4;
  scroll-behavior: smooth; }

body.overlayed {
  overflow: hidden; }

/*
  * Remove text-shadow in selection highlight:
  * https://twitter.com/miketaylr/status/12228805301
  *
  * Vendor-prefixed and regular ::selection selectors cannot be combined:
  * https://stackoverflow.com/a/16982510/7133471
  *
  * Customize the background color to match your design.
  */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
  * A better looking default horizontal rule
  */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
  * Remove the gap between audio, canvas, iframes,
  * images, videos and the bottom of their containers:
  * https://github.com/h5bp/html5-boilerplate/issues/440
  */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
  * Remove default fieldset styles.
  */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
  * Allow only vertical resizing of textareas.
  */
textarea {
  resize: vertical; }

/* ==========================================================================
    Author's custom styles
    ========================================================================== */
/* ==========================================================================
    Helper classes
    ========================================================================== */
/*
  * Hide visually and from screen readers
  */
.hidden,
[hidden] {
  display: none !important; }

/*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

/*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto; }

/*
  * Hide visually and from screen readers, but maintain layout
  */
.invisible {
  visibility: hidden; }

/*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
.clearfix::before,
.clearfix::after {
  content: ' ';
  display: table; }

.clearfix::after {
  clear: both; }

/* ==========================================================================
    EXAMPLE Media Queries for Responsive Design.
    These examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }

/* ==========================================================================
    Print styles.
    Inlined to avoid the additional HTTP request:
    https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]::after {
    content: " (" attr(href) ")"; }
  abbr[title]::after {
    content: " (" attr(title) ")"; }
  /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
  a[href^='#']::after,
  a[href^='javascript:']::after {
    content: ''; }
  pre {
    white-space: pre-wrap !important; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  /*
    * Printing Tables:
    * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
    */
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

.field-description ul {
  margin-bottom: 1.5rem;
  margin-left: 0.3125rem;
  padding: 0;
  list-style: none; }
  .field-description ul li {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    display: flex;
    position: relative; }
    .field-description ul li:last-child {
      margin-bottom: 0; }
  .field-description ul > li {
    display: flex;
    align-items: center; }
    .field-description ul > li::before {
      margin-right: 1.25rem;
      margin-left: 1.25rem;
      display: inline-block;
      width: 0.3125rem;
      height: 0.3125rem;
      border-radius: 50%;
      background: #9425CA;
      content: ''; }

.menu-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  z-index: 0; }
  .overlayed .menu-overlay {
    display: block;
    z-index: 50; }

.site-wrapper {
  position: relative;
  overflow: hidden; }

main {
  background-color: #0F0717;
  background-image: url("../img/main-bg.svg"), url("../img/main-bg2.svg");
  background-position: left -25.25rem top 60%, right top 40%;
  background-repeat: no-repeat; }

.section-wrapper {
  max-width: 1800px;
  margin: 0 auto; }

.skip-link {
  padding-top: 0.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.625rem;
  position: fixed;
  top: 2.5rem;
  left: 2.5rem;
  background-color: #ffffff;
  color: #000000;
  z-index: 101; }
  .skip-link:not(:focus) {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
    white-space: nowrap; }

.section-footer {
  background: #03000E;
  position: relative; }
  .section-footer::before {
    display: block;
    position: absolute;
    left: -1.0625rem;
    top: -1.5rem;
    width: 3.625rem;
    height: 3.625rem;
    background: url("../img/footer-bg.svg") no-repeat 0 0;
    content: ''; }
  .section-footer .section-wrapper {
    padding-top: 5rem;
    padding-right: 8.33333%;
    padding-left: 8.33333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden; }
    @media screen and (min-width: 1024px) {
      .section-footer .section-wrapper {
        padding-top: 8rem;
        padding-right: 4.16667%;
        padding-left: 4.16667%; } }
    .section-footer .section-wrapper::after {
      display: block;
      position: absolute;
      right: -2.75rem;
      top: 9.75rem;
      width: 13.625rem;
      height: 11.5625rem;
      background: url("../img/footer-bg2.svg") no-repeat 0 0;
      content: ''; }
  .section-footer .footer-logo {
    margin-bottom: 2.5rem; }
    @media screen and (max-width: 767px) {
      .section-footer .footer-logo {
        max-width: 12.5rem; }
        .section-footer .footer-logo img {
          width: 100%; } }
  .section-footer .footer-nav {
    margin-bottom: 2.5rem; }
    @media screen and (max-width: 767px) {
      .section-footer .footer-nav .footer-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center; }
        .section-footer .footer-nav .footer-menu li:not(:last-child) {
          margin-bottom: 0.3125rem; } }
  .section-footer .footer-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none; }
    .section-footer .footer-menu .menu-item {
      margin-right: 0.875rem;
      margin-left: 0.875rem; }
      .section-footer .footer-menu .menu-item a {
        font-size: 1rem;
        line-height: 1.5;
        color: #ABB2DE;
        letter-spacing: 0.0625rem;
        text-decoration: none; }
        .section-footer .footer-menu .menu-item a:hover {
          text-decoration: underline; }
  .section-footer .copyright {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-top: 0.0625rem solid #1C1926;
    width: 100%;
    color: #BDC1C9; }

header {
  position: relative;
  background: #0F0717;
  z-index: 10; }
  header .top-header {
    background: #03000E;
    border-bottom: 0.0625rem solid #1C1926; }
    header .top-header .wrapper {
      max-width: 1800px;
      margin: 0 auto;
      padding-right: 4.16667%;
      padding-left: 4.16667%;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      header .top-header .wrapper .slogan {
        font-size: 0.75rem;
        line-height: 1.5;
        font-weight: 400;
        color: #BDC1C9; }
  header .section-wrapper {
    padding-right: 4.16667%;
    padding-left: 4.16667%;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 1023px) {
      header .section-wrapper {
        align-items: center; } }
    header .section-wrapper .logo-wrapper {
      margin-top: 1.6875rem;
      margin-bottom: 1.6875rem;
      max-width: 12.5rem; }
      @media screen and (min-width: 768px) {
        header .section-wrapper .logo-wrapper {
          max-width: 100%; } }
      header .section-wrapper .logo-wrapper img {
        width: 100%; }
    header .section-wrapper .hamburger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.875rem;
      height: 1.875rem;
      background: none;
      border: 0;
      padding: 0;
      position: relative;
      z-index: 60; }
      header .section-wrapper .hamburger.is-active .open {
        display: none; }
      header .section-wrapper .hamburger.is-active .close {
        display: block; }
      header .section-wrapper .hamburger .open path {
        fill: #ffffff; }
      header .section-wrapper .hamburger .close {
        display: none; }
        header .section-wrapper .hamburger .close path {
          fill: #ffffff; }
      @media screen and (min-width: 1024px) {
        header .section-wrapper .hamburger {
          display: none; } }
    @media screen and (max-width: 1023px) {
      header .section-wrapper .nav-wrapper {
        position: absolute;
        top: 0;
        right: -80%;
        width: 70%;
        max-width: 15.625rem;
        height: 100vh;
        background: #000;
        transition: right .2s ease;
        z-index: 55; }
        header .section-wrapper .nav-wrapper.is-active {
          right: 0; } }
    @media screen and (min-width: 1024px) {
      header .section-wrapper .nav-wrapper {
        display: flex;
        align-items: center;
        background: none; } }
    header .section-wrapper .main-nav {
      display: flex;
      align-items: center; }
      header .section-wrapper .main-nav .main-menu {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none; }
        @media screen and (max-width: 1023px) {
          header .section-wrapper .main-nav .main-menu {
            padding-top: 7.5rem;
            padding-right: 1.875rem;
            padding-bottom: 3.125rem;
            padding-left: 1.875rem;
            display: flex;
            flex-direction: column; } }
        header .section-wrapper .main-nav .main-menu .menu-item {
          margin-right: 0.875rem;
          margin-left: 0.875rem; }
          @media screen and (max-width: 1023px) {
            header .section-wrapper .main-nav .main-menu .menu-item {
              margin-top: 0.625rem;
              margin-right: 0.875rem;
              margin-bottom: 0.625rem;
              margin-left: 0.875rem; } }
          header .section-wrapper .main-nav .main-menu .menu-item a {
            color: #BDC1C9;
            letter-spacing: 0.0625rem;
            text-decoration: none; }
            header .section-wrapper .main-nav .main-menu .menu-item a:hover {
              text-decoration: underline; }
    header .section-wrapper .contacts-link-wrapper {
      margin-right: 1.875rem;
      margin-left: 1.875rem;
      display: flex;
      align-items: center; }
      @media screen and (min-width: 1024px) {
        header .section-wrapper .contacts-link-wrapper {
          margin-right: 0;
          margin-left: 7.1875rem; } }
      header .section-wrapper .contacts-link-wrapper .contacts-link {
        color: #ffffff;
        font-weight: 600;
        text-decoration: none; }
        header .section-wrapper .contacts-link-wrapper .contacts-link:hover {
          text-decoration: underline; }
        header .section-wrapper .contacts-link-wrapper .contacts-link svg {
          margin-right: 0.9375rem;
          border-radius: 50%;
          box-shadow: 0.3125rem 0.5625rem 1.25rem rgba(255, 255, 255, 0.2); }

.lang-switcher {
  margin-top: 0.3125rem;
  margin-right: 0.125rem;
  margin-bottom: 0.3125rem;
  display: flex;
  position: relative; }
  .lang-switcher svg {
    margin-right: 0.1875rem; }
  .lang-switcher .current-lang {
    font-size: 0.75rem;
    line-height: 1.5;
    padding-top: 0.0625rem;
    padding-right: 0.875rem;
    padding-bottom: 0.0625rem;
    padding-left: 0.25rem;
    width: 2.0625rem;
    color: #BDC1C9;
    text-transform: uppercase;
    cursor: pointer;
    background: #03000E;
    border-radius: 0.1875rem;
    transition: background .2s ease; }
    .lang-switcher .current-lang::after {
      display: inline-block;
      position: absolute;
      top: 0.4375rem;
      right: 0.125rem;
      width: 0.5rem;
      height: 0.375rem;
      content: '';
      background: url("../img/icon-arrow-down.svg") no-repeat 0 0; }
    .lang-switcher .current-lang.active, .lang-switcher .current-lang:hover {
      background: #1E1B29; }
  .lang-switcher .lang-list {
    display: flex;
    position: absolute;
    right: 0;
    top: 1.4375rem;
    width: 2.0625rem;
    flex-direction: column;
    max-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #1E1B29;
    border-radius: 0.1875rem;
    transition: max-height .2s ease; }
    .lang-switcher .lang-list.show {
      max-height: 3.125rem;
      border: 0.0625rem solid #2c273a; }
    .lang-switcher .lang-list li {
      font-size: 0.75rem;
      line-height: 1.5;
      margin-top: 0.0625rem;
      margin-bottom: 0.0625rem;
      color: #BDC1C9;
      text-transform: uppercase;
      text-align: center; }
      .lang-switcher .lang-list li:hover {
        background: #2a2638; }
      .lang-switcher .lang-list li.selected {
        display: none; }

.page-hero {
  margin-bottom: 3.125rem;
  position: relative; }
  @media screen and (min-width: 1024px) {
    .page-hero {
      margin-bottom: 6.25rem; } }
  .page-hero::before {
    display: block;
    position: absolute;
    bottom: -13.0625rem;
    left: -13.125rem;
    width: 19.75rem;
    height: 22.625rem;
    background: url("../img/main-bg.svg") no-repeat 0 0;
    background-size: contain;
    content: '';
    z-index: 2; }
    @media screen and (min-width: 1024px) {
      .page-hero::before {
        left: -18.5rem;
        width: 32.25rem;
        height: 35.125rem; } }
  .page-hero .section-container {
    position: relative;
    overflow: hidden; }
    .page-hero .section-container::before {
      display: block;
      position: absolute;
      top: -4rem;
      right: -11.0625rem;
      width: 39.5rem;
      height: 27.125rem;
      background: url("../img/hero-bg.png") no-repeat 0 0;
      background-size: contain;
      content: '';
      z-index: 1; }
      @media screen and (min-width: 1024px) {
        .page-hero .section-container::before {
          width: 52rem;
          height: 39.625rem; } }
    .page-hero .section-container::after {
      display: block;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000000;
      opacity: .4;
      content: '';
      z-index: 0; }
  .page-hero img {
    width: 100%;
    object-fit: cover; }
    @media screen and (max-width: 767px) {
      .page-hero img {
        aspect-ratio: 9 / 16; } }
    @media screen and (min-width: 1024px) {
      .page-hero img {
        min-height: 44.625rem; } }
  .page-hero .text-wrapper {
    margin-right: 8.33333%;
    margin-left: 8.33333%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9; }
    @media screen and (min-width: 1024px) {
      .page-hero .text-wrapper {
        width: 37.5%;
        right: 4.16667%; } }
    .page-hero .text-wrapper .sub-title {
      padding-left: 0.625rem;
      font-size: 1.5rem;
      font-weight: 500;
      color: #ffffff;
      border-left: 0.1875rem solid #14152E;
      text-transform: uppercase; }
    .page-hero .text-wrapper .title {
      margin-bottom: 0.625rem;
      font-size: 2rem;
      color: #ffffff;
      font-weight: 500; }
      .page-hero .text-wrapper .title span {
        color: #14152E; }
    .page-hero .text-wrapper p {
      margin-top: 0;
      margin-bottom: 1.875rem;
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 400;
      color: #ffffff; }
    .page-hero .text-wrapper .hero-link {
      font-size: 1.125rem;
      display: inline-flex;
      align-items: center;
      font-weight: 600;
      color: #ffffff;
      text-decoration: none; }
      .page-hero .text-wrapper .hero-link:hover {
        text-decoration: underline; }
      .page-hero .text-wrapper .hero-link svg {
        margin-right: 1.5625rem;
        border-radius: 50%;
        box-shadow: 0.3125rem 0.5625rem 1.25rem rgba(249, 83, 255, 0.2); }

.text-with-image .section-wrapper {
  padding-right: 8.33333%;
  padding-left: 8.33333%; }
  @media screen and (min-width: 768px) {
    .text-with-image .section-wrapper {
      padding-right: 4.16667%;
      padding-left: 4.16667%; } }

.text-with-image .text-section {
  margin-bottom: 3.125rem;
  position: relative;
  z-index: 5; }
  @media screen and (min-width: 768px) {
    .text-with-image .text-section {
      display: flex; } }
  @media screen and (min-width: 1024px) {
    .text-with-image .text-section {
      margin-bottom: 6.25rem; } }
  .text-with-image .text-section.image-left {
    flex-direction: row-reverse; }
    .text-with-image .text-section.image-left .image-wrapper {
      margin-right: 0;
      margin-left: 4.54545%; }
      @media screen and (max-width: 767px) {
        .text-with-image .text-section.image-left .image-wrapper {
          margin-right: 0;
          margin-left: 0; } }
  .text-with-image .text-section .image-wrapper {
    margin-bottom: 1.25rem; }
    @media screen and (min-width: 768px) {
      .text-with-image .text-section .image-wrapper {
        margin-right: 4.54545%;
        width: 36.36364%; } }
    .text-with-image .text-section .image-wrapper img {
      border-radius: 0.625rem;
      box-shadow: 0.625rem 2.5rem 5rem rgba(220, 95, 255, 0.08);
      width: 100%; }
  @media screen and (min-width: 768px) {
    .text-with-image .text-section .text-wrapper {
      flex: 1; } }
  .text-with-image .text-section .field-subtitle {
    font-size: 1.5rem;
    line-height: 1.5;
    padding-left: 0.625rem;
    margin-bottom: 1.375rem;
    color: #ffffff;
    text-transform: uppercase;
    border: 0;
    border-left: 0.1875rem solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, #7779FF, #EA57FF); }
  .text-with-image .text-section .field-title {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 1.875rem;
    color: #ffffff; }
  .text-with-image .text-section .field-description {
    margin-bottom: 2.75rem; }
    .text-with-image .text-section .field-description p {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 400; }
  .text-with-image .text-section .field-link a {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none; }
    .text-with-image .text-section .field-link a:hover {
      text-decoration: underline; }
    .text-with-image .text-section .field-link a svg {
      margin-right: 0.9375rem;
      border-radius: 50%;
      box-shadow: 0.3125rem 0.5625rem 1.25rem rgba(249, 83, 255, 0.2); }

.about-us {
  margin-bottom: 6.25rem; }
  .about-us .section-wrapper {
    padding-right: 8.33333%;
    padding-left: 8.33333%; }
    @media screen and (min-width: 768px) {
      .about-us .section-wrapper {
        padding-right: 4.16667%;
        padding-left: 4.16667%; } }
    .about-us .section-wrapper > .field-description {
      margin-bottom: 3.75rem; }
      .about-us .section-wrapper > .field-description p {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 400; }
  .about-us .field-subtitle {
    font-size: 1.5rem;
    line-height: 1.5;
    padding-left: 0.625rem;
    margin-bottom: 1.375rem;
    color: #ffffff;
    text-transform: uppercase;
    border: 0;
    border-left: 0.1875rem solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, #7779FF, #EA57FF); }
  .about-us .field-title {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 0.625rem;
    color: #ffffff; }
    .about-us .field-title span {
      background: -webkit-linear-gradient(#7779FF, #EA57FF);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
  @media screen and (min-width: 768px) {
    .about-us .tabs-wrapper {
      display: flex; } }
  @media screen and (min-width: 768px) {
    .about-us .tabs-wrapper .left-container {
      padding-right: 4.54545%;
      padding-left: 4.54545%;
      width: 31.81818%;
      border-right: 0.0625rem solid rgba(255, 255, 255, 0.2); } }
  .about-us .tabs-wrapper .left-container .swiper-pagination {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right; }
    @media screen and (max-width: 767px) {
      .about-us .tabs-wrapper .left-container .swiper-pagination {
        display: flex;
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
        overflow-x: auto; } }
    .about-us .tabs-wrapper .left-container .swiper-pagination .swiper-pagination-customs-active .tab-link {
      color: #9425CA; }
    .about-us .tabs-wrapper .left-container .swiper-pagination .tab-link {
      font-size: 1.125rem;
      line-height: 1.5;
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
      padding: 0;
      background: none;
      border: 0;
      color: #BDC1C9;
      cursor: pointer;
      text-align: right; }
      @media screen and (max-width: 767px) {
        .about-us .tabs-wrapper .left-container .swiper-pagination .tab-link {
          margin-right: 1.25rem;
          white-space: nowrap;
          text-align: left; } }
  @media screen and (min-width: 768px) {
    .about-us .tabs-wrapper .swiper-container {
      padding-left: 4.54545%;
      width: 68.18182%; } }
  .about-us .tabs-wrapper .swiper-container .swiper-slide .tab-title {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
    white-space: nowrap; }
  .about-us .tabs-wrapper .swiper-container .swiper-slide h4 {
    font-size: 1.375rem;
    line-height: 1.091;
    margin-top: 0.3125rem;
    margin-bottom: 1.875rem;
    color: #ffffff;
    font-weight: 400; }
  .about-us .tabs-wrapper .swiper-container .swiper-slide .field-description p {
    margin-bottom: 1.5rem; }

.happy-clients {
  position: relative;
  background: url("/img/contacts-bg.jpg") no-repeat center;
  background-size: cover; }
  .happy-clients::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    content: ''; }
  .happy-clients .section-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
  .happy-clients .text-wrapper {
    margin-top: 6.0625rem;
    margin-bottom: 6.0625rem;
    padding-right: 4.54545%;
    padding-left: 4.54545%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    max-width: 37.5rem;
    border-radius: 0.625rem;
    background: linear-gradient(rgba(119, 121, 255, 0.7), rgba(234, 87, 255, 0.7)); }
    @media screen and (max-width: 1023px) {
      .happy-clients .text-wrapper {
        margin-right: 8.33333%;
        margin-left: 8.33333%; } }
    .happy-clients .text-wrapper h3 {
      font-size: 1.375rem;
      line-height: 1.5;
      margin-top: 2.5rem;
      margin-bottom: 0.9375rem;
      color: #ffffff;
      text-transform: uppercase; }
    .happy-clients .text-wrapper h2 {
      font-size: 2.25rem;
      line-height: 1.5;
      margin-top: 0;
      margin-bottom: 0.9375rem;
      color: #ffffff;
      text-align: center; }
    .happy-clients .text-wrapper .field-link {
      margin-bottom: 2.5rem; }
      .happy-clients .text-wrapper .field-link a {
        font-size: 1.125rem;
        line-height: 1.5;
        color: #ffffff;
        font-weight: 600;
        text-decoration: none; }
        .happy-clients .text-wrapper .field-link a:hover {
          text-decoration: underline; }
        .happy-clients .text-wrapper .field-link a svg {
          margin-right: 1.5625rem; }

.contacts {
  position: relative;
  z-index: 1; }
  .contacts .section-wrapper {
    padding-top: 1.875rem;
    padding-right: 8.33333%;
    padding-left: 8.33333%; }
    @media screen and (min-width: 768px) {
      .contacts .section-wrapper {
        padding-top: 3.125rem;
        padding-right: 4.16667%;
        padding-left: 4.16667%;
        display: flex; } }
    @media screen and (min-width: 1024px) {
      .contacts .section-wrapper {
        padding-top: 6.25rem; } }
  .contacts .text-wrapper {
    padding-top: 3.125rem;
    padding-bottom: 1.25rem; }
    @media screen and (min-width: 1024px) {
      .contacts .text-wrapper {
        padding-top: 6.25rem;
        padding-right: 9.09091%;
        padding-bottom: 0;
        width: 52.27273%; } }
    .contacts .text-wrapper .field-subtitle {
      font-size: 1.5rem;
      line-height: 1.5;
      padding-left: 0.625rem;
      margin-bottom: 1.375rem;
      color: #ffffff;
      text-transform: uppercase;
      border: 0;
      border-left: 0.1875rem solid;
      border-image-slice: 1;
      border-image-source: linear-gradient(to bottom, #7779FF, #EA57FF); }
    .contacts .text-wrapper .field-title {
      font-size: 2rem;
      line-height: 1.5;
      margin-bottom: 0.625rem;
      color: #ffffff; }
      .contacts .text-wrapper .field-title span {
        background: -webkit-linear-gradient(#7779FF, #EA57FF);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
  .contacts .form-wrapper {
    margin-bottom: -2.9375rem;
    padding-top: 1.875rem;
    padding-right: 8.33333%;
    padding-bottom: 1.875rem;
    padding-left: 8.33333%;
    background: #1D1527;
    border-radius: 0.625rem;
    box-shadow: 0.625rem 2.5rem 5rem rgba(220, 92, 255, 0.08); }
    @media screen and (min-width: 768px) {
      .contacts .form-wrapper {
        padding-top: 1.875rem;
        padding-right: 4.16667%;
        padding-bottom: 1.875rem;
        padding-left: 4.16667%; } }
    @media screen and (min-width: 1024px) {
      .contacts .form-wrapper {
        padding-top: 3.75rem;
        padding-right: 4.54545%;
        padding-bottom: 3.75rem;
        padding-left: 4.54545%;
        width: 47.72727%; } }
    .contacts .form-wrapper input[type='text'],
    .contacts .form-wrapper input[type='email'],
    .contacts .form-wrapper input[type='phone'],
    .contacts .form-wrapper textarea {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 1.6875rem;
      padding-top: 0.3125rem;
      padding-bottom: 0.5625rem;
      color: #ffffff;
      background: none;
      border: 0;
      border-bottom: 0.0625rem solid #7C7881;
      width: 100%; }
      .contacts .form-wrapper input[type='text']::-webkit-input-placeholder,
      .contacts .form-wrapper input[type='email']::-webkit-input-placeholder,
      .contacts .form-wrapper input[type='phone']::-webkit-input-placeholder,
      .contacts .form-wrapper textarea::-webkit-input-placeholder {
        color: #BDC1C9; }
      .contacts .form-wrapper input[type='text']:-ms-input-placeholder,
      .contacts .form-wrapper input[type='email']:-ms-input-placeholder,
      .contacts .form-wrapper input[type='phone']:-ms-input-placeholder,
      .contacts .form-wrapper textarea:-ms-input-placeholder {
        color: #BDC1C9; }
      .contacts .form-wrapper input[type='text']::placeholder,
      .contacts .form-wrapper input[type='email']::placeholder,
      .contacts .form-wrapper input[type='phone']::placeholder,
      .contacts .form-wrapper textarea::placeholder {
        color: #BDC1C9; }
    .contacts .form-wrapper textarea {
      height: 5.3125rem;
      min-height: 5.3125rem; }
    .contacts .form-wrapper .submit-wrapper {
      text-align: center; }
    .contacts .form-wrapper .button-submit {
      font-size: 1.125rem;
      line-height: 1.5;
      margin-bottom: 1.625rem;
      padding: 0;
      border: 0;
      background: none;
      color: #ffffff;
      font-weight: 600; }
      .contacts .form-wrapper .button-submit svg {
        margin-right: 1.5625rem;
        border-radius: 50%;
        box-shadow: 0.3125rem 0.5625rem 1.25rem rgba(249, 83, 255, 0.2); }
    .contacts .form-wrapper .form-text {
      font-size: 0.75rem;
      line-height: 1.5;
      margin: 0;
      color: #BDC1C9; }
      @media screen and (min-width: 1024px) {
        .contacts .form-wrapper .form-text {
          font-size: 1rem;
          line-height: 1.5; } }
      .contacts .form-wrapper .form-text a {
        color: #BDC1C9; }