@charset "UTF-8";
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Unbounded:wght@200..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:wght@100&family=Unbounded:wght@200..900&display=swap";

*,
:before,
:after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb
}

:before,
:after {
  --tw-content: ""
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent
}

body {
  margin: 0;
  line-height: inherit
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

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

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

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}

button,
select {
  text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none
}

:-moz-focusring {
  outline: auto
}

:-moz-ui-invalid {
  box-shadow: none
}

progress {
  vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0
}

fieldset {
  margin: 0;
  padding: 0
}

legend {
  padding: 0
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0
}

dialog {
  padding: 0
}

textarea {
  resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af
}

button,
[role=button] {
  cursor: pointer
}

:disabled {
  cursor: default
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle
}

img,
video {
  max-width: 100%;
  height: auto
}

[hidden] {
  display: none
}

*,
:before,
:after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia:
}

.container {
  width: 100%
}

@media (min-width: 640px) {
  .container {
    max-width: 640px
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px
  }
}

@media (min-width: 834px) {
  .container {
    max-width: 834px
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1920px
  }
}

@media (min-width: 2880px) {
  .container {
    max-width: 2880px
  }
}

.mb-10 {
  margin-bottom: 2.5rem
}

.mb-3 {
  margin-bottom: .75rem
}

.mb-4 {
  margin-bottom: 1rem
}

.mt-2 {
  margin-top: .5rem
}

.hidden {
  display: none
}

header {
  padding: 20px 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #12131c;
  position: relative
}

header .logo {
  background: url(../img/logo_1920.svg) no-repeat center;
  height: 32px;
  width: 283px
}

@media (max-width: 1770px) {
  header .logo {
    height: 28px;
    width: 248px;
    background: url(../img/logo_1366.svg) no-repeat center
  }
}

@media (max-width: 768px) {
  header .logo {
    background: url(../img/logo_768.svg) no-repeat center
  }
}

@media (max-width: 480px) {
  header .logo {
    height: 20px;
    width: 166px;
    background: url(../img/logo_375.svg) no-repeat center
  }
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center
}

header nav.desktop ul li {
  display: inline-block;
  padding: 8px 16px
}

header nav.desktop a {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  text-decoration: none;
  transition: color .3s ease
}

header nav.desktop a:hover {
  color: #5e8fff
}

header nav.desktop a.active {
  color: #0085ff
}

header nav.mobile {
  display: none
}

@media (max-width: 768px) {
  header nav.desktop {
    display: none
  }

  header nav.mobile {
    display: block;
    position: realative;
    left: 0;
    top: 0
  }

  header nav.mobile .icons-menu {
    cursor: pointer;
    position: absolute;
    z-index: 20;
    top: 20px;
    right: 44px
  }

  header nav.mobile .back-nav {
    width: 100vw;
    height: 100vh;
    background-color: #12131c80;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
  }

  header nav.mobile .back-nav ul {
    position: absolute;
    background: #12131c;
    height: 100vh;
    min-width: 272px;
    top: 0;
    right: 0;
    padding: 56px 44px 36px
  }

  header nav.mobile .back-nav ul li {
    padding: 8px
  }

  header nav.mobile .back-nav ul li a {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%
  }
}

@media (max-width: 576px) {
  header nav.mobile .icons-menu {
    top: 10px;
    right: 16px
  }
}

@media (max-width: 1770px) {
  header {
    padding: 18px 71px
  }
}

@media (max-width: 1024px) {
  header {
    padding: 16px 32px
  }
}

@media (max-width: 768px) {
  header {
    padding: 20px 32px
  }
}

@media (max-width: 576px) {
  header {
    padding: 16px
  }
}

.video-container {
  margin-top: -40px;
  z-index: -1;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  background-color: #12131c
}

@media (max-width: 576px) {
  .video-container {
    margin-top: 0;
    height: 350px
  }
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media (max-width: 576px) {
  .video-container video {
    bottom: 0;
    top: auto;
    height: auto
  }
}

.video-container .main-title {
  color: #f5f5f5;
  font-family: Unbounded;
  font-size: 72px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%
}

@media (max-width: 1770px) {
  .video-container .main-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase
  }
}

@media (max-width: 1366px) {
  .video-container .main-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase
  }
}

@media (max-width: 576px) {
  .video-container .main-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase;
    top: 25%
  }
}

#about-us {
  background-color: #12131c;
  padding: 0 160px 84px;
  margin-top: 0;
  display: flex;
  align-items: center;
  flex-direction: column
}

@media (max-width: 768px) {
  #about-us {
    width: 100%;
    padding: 0 32px 80px
  }
}

@media (max-width: 576px) {
  #about-us {
    padding: 0 16px 80px
  }
}

#about-us h2.title {
  margin-bottom: 16px
}

p.text {
  max-width: 1328px
}

@media (max-width: 1770px) {
  p.text {
    max-width: 1015px
  }
}

#services {
  padding: 100px 160px
}

#services .cards-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px
}

@media (max-width: 1770px) {
  #services .cards-wrap {
    gap: 24px;
    margin-top: 28px
  }
}

@media (max-width: 1220px) {
  #services .cards-wrap {
    display: none
  }
}

@media (max-width: 1770px) {
  #services {
    padding: 80px 71px
  }
}

@media (max-width: 768px) {
  #services {
    padding: 60px 32px 20px
  }
}

@media (max-width: 576px) {
  #services {
    padding: 28px 16px
  }
}

#services-slider {
  padding: 0 160px;
  display: none
}

@media (max-width: 1220px) {
  #services-slider {
    padding: 0 0 0 71px;
    display: block
  }

  #services-slider img {
    max-height: 250px
  }
}

@media (max-width: 768px) {
  #services-slider {
    padding: 0 0 0 32px
  }
}

@media (max-width: 576px) {
  #services-slider {
    padding: 28px 16px
  }
}

.card {
  background-color: #1e2358;
  border-radius: 6px;
  padding: 16px 40px;
  display: flex;
  gap: 120px;
  align-items: center
}

.card-title {
  color: #f5f5f5;
  font-family: Unbounded;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: .56px
}

.card-text {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  -webkit-hyphens: none;
  hyphens: none
}

@media (max-width: 1770px) {
  .card {
    padding: 16px 28px;
    gap: 16px
  }

  .card-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%
  }

  .card-text {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }

  .card-icon {
    width: 45%;
    height: 240px
  }
}

@media (max-width: 1024px) {
  .card {
    padding: 16px 24px;
    gap: 40px
  }

  .card-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%
  }
}

@media (max-width: 576px) {
  .card {
    padding: 16px 24px 20px;
    gap: 16px;
    flex-direction: column
  }

  .card-title {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%
  }

  .card-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }

  .card-icon {
    width: 240px;
    order: 1
  }

  .card-content {
    order: 2
  }
}

.swiper {
  display: none !important;
  padding-bottom: 40px !important
}

@media (max-width: 1220px) {
  .swiper {
    display: block !important
  }
}

@media (max-width: 425px) {
  .swiper {
    margin-bottom: 40px !important
  }
}

.swiper-slide {
  border-radius: 6px
}

@media (max-width: 576px) {
  .swiper-slide {
    width: calc(100% - 32px) !important;
    margin: 0 16px
  }
}

.swiper-button-next,
.swiper-button-prev {
  top: auto !important;
  bottom: -15px;
  z-index: 50 !important;
  left: auto !important;
  right: auto !important;
  width: 40px !important;
  height: 40px !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: none !important
}

.swiper-button-next {
  background-image: url(../img/icons/arrow_r.svg);
  right: 71px !important
}

@media (max-width: 768px) {
  .swiper-button-next {
    right: 32px !important
  }
}

.swiper-button-prev {
  background-image: url(../img/icons/arrow_l.svg);
  right: 124px !important
}

@media (max-width: 768px) {
  .swiper-button-prev {
    right: 88px !important
  }
}

.swiper .card {
  border-radius: 6px
}

@media (max-width: 768px) {
  .swiper .card {
    gap: 80px
  }

  .swiper .card img {
    height: 270px
  }
}

@media (max-width: 576px) {
  .swiper .card {
    gap: 16px;
    flex-direction: column;
    min-height: 440px
  }

  .swiper .card img {
    height: 240px
  }
}

#jobs {
  padding: 80px 160px 120px
}

@media (max-width: 1770px) {
  #jobs {
    padding: 64px 71px 100px
  }
}

@media (max-width: 768px) {
  #jobs {
    padding: 60px 32px 80px
  }
}

@media (max-width: 600px) {
  #jobs {
    padding: 28px 16px 60px
  }
}

#jobs .cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 40px auto 0;
  max-width: 1328px
}

@media (max-width: 1770px) {
  #jobs .cards-wrap {
    margin-top: 28px
  }
}

#jobs .card {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 36px 52px 32px
}

@media (max-width: 1770px) {
  #jobs .card {
    padding: 24px 40px
  }
}

@media (max-width: 600px) {
  #jobs .card {
    padding: 16px;
    flex-direction: row
  }
}

#jobs .card>svg {
  fill: #f5f5f5
}

@media (max-width: 1770px) {
  #jobs .card>svg {
    width: 52px;
    height: 52px
  }
}

@media (max-width: 600px) {
  #jobs .card>svg {
    width: 38px;
    height: 38px
  }
}

#jobs .card:hover {
  cursor: pointer
}

#jobs .card:hover .card-title {
  color: #5e8fff
}

#jobs .card:hover svg {
  fill: #5e8fff
}

#jobs .card:active {
  cursor: pointer
}

#jobs .card:active .card-title {
  color: #0085ff
}

#jobs .card:active svg {
  fill: #0085ff
}

#jobs .card-content {
  background-color: #1e2358;
  border-radius: 6px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out
}

#jobs .card-content_wrap {
  padding: 34px 52px 40px
}

@media (max-width: 600px) {
  #jobs .card-content_wrap {
    padding: 24px 16px
  }
}

#jobs .card-title {
  color: #f5f5f5;
  font-family: Unbounded;
  font-size: 28px;
  font-style: normal;
  line-height: 120%;
  letter-spacing: .56px;
  font-weight: 400
}

@media (max-width: 1770px) {
  #jobs .card-title {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%
  }
}

@media (max-width: 600px) {
  #jobs .card-title {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    font-family: Unbounded
  }
}

#jobs .card-title,
#jobs svg {
  transition: color .3s ease, fill .3s ease
}

#jobs svg {
  transform: rotate(180deg)
}

#jobs h4.title {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%
}

@media (max-width: 600px) {
  #jobs h4.title {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }
}

#jobs .sep {
  border-bottom: 1px solid rgba(228, 228, 228, .24);
  margin: 24px 0
}

#jobs ul {
  display: flex;
  flex-direction: column;
  gap: 8px
}

#jobs ul li {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  display: flex;
  gap: 12px
}

@media (max-width: 576px) {
  #jobs ul li {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }
}

#jobs ul li .icon {
  background: url(../img/li_ico.svg) no-repeat center;
  width: 10px;
  height: 10px;
  margin-top: 6px
}

#jobs .toggle {
  display: none
}

#jobs .toggle+.card+.card-content {
  max-height: 0
}

#jobs .toggle:checked+.card+.card-content {
  max-height: 1000px
}

#jobs .toggle:checked~.card .card-title {
  color: #0085ff
}

#jobs .toggle:checked~.card svg {
  fill: #0085ff;
  transform: rotate(0)
}

#contacts {
  background-color: #12131c;
  padding: 120px 160px 84px;
  min-height: 10vh;
  display: flex;
  gap: 40px;
  flex-direction: column
}

#contacts .map {
  width: 100%;
  height: 575px;
  border-radius: 6px;
  background: url(../img/map.png) no-repeat center center;
  background-size: cover
}

#contacts .contact {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  text-align: center
}

@media (max-width: 1770px) {
  #contacts {
    padding: 100px 71px 64px
  }

  #contacts .map {
    height: 400px
  }

  #contacts .contact {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%
  }
}

@media (max-width: 768px) {
  #contacts {
    padding: 80px 32px 60px
  }

  #contacts .map {
    height: 364px
  }
}

@media (max-width: 576px) {
  #contacts {
    padding: 60px 16px 48px
  }

  #contacts .map {
    height: 364px
  }

  #contacts .contact {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }
}

footer {
  background-color: #12131c;
  padding: 84px 160px
}

@media (max-width: 1770px) {
  footer {
    padding: 80px 71px
  }
}

@media (max-width: 768px) {
  footer {
    padding: 56px 32px
  }
}

@media (max-width: 425px) {
  footer {
    padding: 40px 16px
  }
}

footer .footer__wrapper {
  display: grid;
  grid-template-columns: auto 940px
}

@media (max-width: 1366px) {
  footer .footer__wrapper {
    grid-template-columns: 2fr 5fr;
    -moz-column-gap: 16px;
    column-gap: 16px
  }
}

@media (max-width: 1100px) {
  footer .footer__wrapper {
    grid-template-columns: 3fr 5fr;
    display: flex;
    flex-direction: column;
    row-gap: 20px
  }
}

footer .footer__logo {
  background: url(../img/logo_1366.svg) no-repeat left;
  height: 28px
}

@media (max-width: 425px) {
  footer .footer__logo {
    height: 20px;
    background-size: contain
  }
}

footer .footer__privacy_policy {
  color: #e4e4e4b3;
  font-family: Open Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  grid-area: 2/1;
  align-self: end;
  justify-self: start
}

@media (max-width: 1100px) {
  footer .footer__privacy_policy {
    align-self: start;
    order: 3
  }
}

footer .cell {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  display: grid;
  grid-template-columns: 50px auto;
  -moz-column-gap: 16px;
  column-gap: 16px
}

footer .cell:nth-child(2),
footer .cell:nth-child(4) {
  grid-template-columns: 165px auto
}

@media (max-width: 1100px) {

  footer .cell:nth-child(2),
  footer .cell:nth-child(4) {
    grid-template-columns: 50px auto
  }
}

@media (max-width: 768px) {

  footer .cell:nth-child(2),
  footer .cell:nth-child(4) {
    grid-template-columns: 40px auto
  }
}

@media (max-width: 1100px) {
  footer .cell:nth-child(4) {
    grid-template-columns: minmax(auto, 170px) auto
  }
}

@media (max-width: 768px) {
  footer .cell:nth-child(4) {
    grid-template-columns: minmax(auto, 150px) auto
  }
}

footer .cell:last-child {
  grid-template-columns: 190px auto;
  grid-area: 3/1/4/3
}

@media (max-width: 1360px) {
  footer .cell:last-child {
    display: flex;
    flex-direction: column;
    row-gap: 6px
  }
}

@media (max-width: 1100px) {
  footer .cell:last-child {
    flex-direction: row;
    row-gap: 16px
  }
}

@media (max-width: 900px) {
  footer .cell:last-child {
    flex-direction: column
  }
}

@media (max-width: 1024px) {
  footer .cell {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }
}

@media (max-width: 768px) {
  footer .cell {
    grid-template-columns: 40px auto
  }
}

footer .cell__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 16px;
  -moz-column-gap: 7.2916666667vw;
  column-gap: 7.2916666667vw;
  grid-area: 1/2/3/3
}

@media (max-width: 1100px) {
  footer .cell__wrapper {
    display: flex;
    flex-direction: column
  }
}

footer .cell__title {
  color: #e4e4e4b3
}

.sep {
  background-color: #12131c;
  border-bottom: 1px solid rgba(228, 228, 228, .24)
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box
}

body {
  color: #f5f5f5;
  background-color: #e8eeff
}

h2.title {
  color: #0085ff;
  font-family: Unbounded;
  font-size: 44px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-align: center
}

@media (max-width: 1366px) {
  h2.title {
    color: #0085ff;
    font-family: Unbounded;
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%
  }
}

@media (max-width: 576px) {
  h2.title {
    color: #0085ff;
    font-family: Unbounded;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%
  }
}

p.text {
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  text-align: center
}

@media (max-width: 1770px) {
  p.text {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%
  }
}

@media (max-width: 576px) {
  p.text {
    color: #f5f5f5;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%
  }
}

#privacy-policy {
  background-color: #12131c;
  padding: 84px 160px
}

@media (max-width: 1366px) {
  #privacy-policy {
    padding: 80px 71px
  }
}

@media (max-width: 768px) {
  #privacy-policy {
    padding: 68px 32px
  }
}

@media (max-width: 375px) {
  #privacy-policy {
    padding: 40px 16px
  }
}

#privacy-policy h1 {
  color: #f5f5f5;
  font-family: Unbounded;
  font-size: 72px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-transform: uppercase
}

@media (max-width: 1366px) {
  #privacy-policy h1 {
    color: #f5f5f5;
    font-family: Unbounded;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase;
    font-size: 56px
  }
}

@media (max-width: 768px) {
  #privacy-policy h1 {
    color: #f5f5f5;
    font-family: Unbounded;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase
  }
}

@media (max-width: 576px) {
  #privacy-policy h1 {
    color: #f5f5f5;
    font-family: Unbounded;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    font-size: 22px
  }
}

#privacy-policy .separator {
  margin-top: 40px
}

#privacy-policy h2,
#privacy-policy>ol>li:before {
  display: inline;
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 135%
}

@media (max-width: 768px) {

  #privacy-policy h2,
  #privacy-policy>ol>li:before {
    font-family: Open Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%
  }
}

@media (max-width: 576px) {

  #privacy-policy h2,
  #privacy-policy>ol>li:before {
    font-size: 20px
  }
}

#privacy-policy li {
  margin-top: 12px;
  color: #f5f5f5;
  font-family: Open Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%
}

#privacy-policy ol {
  counter-reset: item;
  list-style-type: none
}

#privacy-policy ol>li {
  counter-increment: item
}

#privacy-policy ol>li:before {
  content: counters(item, ".") ". "
}

#privacy-policy ul {
  list-style-type: none;
  list-style-image: url(../img/li_ico.svg)
}

#privacy-policy ul li {
  position: relative;
  left: .5em;
  margin-left: 1.5em
}