:root {
  --color-neutral-400: #8d95b0;
  --color-neutral-900: #292e3d;
  --color-primary-500: #243e8f;
  --color-secondary-500: #2ba64a;

  --desktop-breakpoint: 1200px;

  --huge-spacing: 80px;
  --default-spacing: 40px;
  --small-spacing: 20px;
  --xsmall-spacing: 10px;

  --font-Roboto: Roboto, ui-sans-serif, system-ui;
  --font-NeueMachina: NeueMachina, ui-mono, system-ui;

  --font-size-xxxl: 64px;
  --font-size-xxl: 56px;
  --font-size-xl: 36px;
  --font-size-l: 24px;
  --font-size-default: 18px;
  --font-size-s: 16px;
  --font-size-xs: 14px;

  --border-radius: 8px;
}

body,
html {
  font-family: var(--font-Roboto);
  font-weight: 300;
  margin: 0;
  padding: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-default);
  line-height: 1.4;
}

.wrap {
  max-width: var(--desktop-breakpoint);
  margin: 0 auto;
}

.black-pattern {
  height: 300px;
  background: url(./images/black-pattern.webp) 0 / auto 100%,
    radial-gradient(
        60.66% 140.64% at 10.24% 14.01%,
        #454b58 1.13%,
        #282e3e 100%
      )
      0 0 repeat-x;
  background-blend-mode: multiply, normal, normal;
}

.green-background {
  background: linear-gradient(
      0deg,
      rgba(43, 166, 74, 0.2),
      rgba(43, 166, 74, 0.2)
    ),
    url(./images/background-noise.webp);
  background-size: auto, 414px 842px;
  padding: var(--default-spacing);
}

@media (max-width: 768px) {
  .black-pattern {
    height: 200px;
  }
}

@media (max-width: 500px) {
  .green-background {
    padding: var(--default-spacing) var(--small-spacing);
  }
}

/***********************************/
/* BUTTON */
/***********************************/

.button {
  text-transform: uppercase;
  text-decoration: none;
  background-color: white;
  border-radius: var(--border-radius);
  padding: 0 var(--small-spacing);
  color: var(--color-neutral-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button span {
  font-family: var(--font-NeueMachina);
  font-size: var(--font-size-s);
  line-height: var(--font-size-default);
  font-weight: 300;
  display: inline-block;
  padding: calc(var(--xsmall-spacing) + 6px) 0 calc(var(--xsmall-spacing) + 4px)
    0;
}

.button__line {
  width: 1px;
  background-color: var(--color-neutral-900);
  height: var(--font-size-l);
  margin: 0 var(--small-spacing);
}

.button__arrow {
  fill: var(--color-neutral-900);
}

.button:hover svg path {
  animation: animateArrow 0.4s forwards;
}

@keyframes animateArrow {
  49% {
    transform: translate(100%);
  }

  50% {
    transform: translate(-100%);
  }
}

/***********************************/
/* HEADINGS & TEXT */
/***********************************/

h1,
h2 {
  font-family: var(--font-NeueMachina);
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 20px 0;
  text-align: center;
}

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xl);
}

p.exposed {
  font-size: var(--font-size-l);
}

@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-xxl);
  }

  h2 {
    font-size: var(--font-size-l);
  }

  p.exposed {
    font-size: var(--font-size-default);
  }
}

/***********************************/
/* HEADER */
/***********************************/

.header {
  background: linear-gradient(
      270deg,
      rgba(36, 63, 141, 0.15) 10.41%,
      hsla(0, 0%, 85%, 0.15) 49.4%,
      rgba(168, 255, 190, 0.15) 87.54%
    ),
    linear-gradient(90deg, #fff, #fff);
  padding: var(--default-spacing);
  position: relative;
}

.header::before {
  content: '';
  background: url(./images/background-noise.webp) 50% repeat;
  background-size: 414px 842px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.header .wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.header h1,
.header p {
  position: relative;
  z-index: 3;
}

.logo {
  position: relative;
  width: 300px;
  display: block;
  z-index: 3;
}

.video__container {
  position: relative;
}

.video {
  position: relative;
  max-width: 800px;
  height: 450px;
  z-index: 1;
}

@media (max-width: 768px) {
  .logo {
    width: 240px;
  }

  .video {
    max-width: 500px;
    height: 300px;
  }
}

@media (max-width: 500px) {
  .header {
    padding: var(--default-spacing) var(--small-spacing);
  }
}

/***********************************/
/* FACTS */
/***********************************/

.facts {
  background: linear-gradient(
      270deg,
      rgba(36, 63, 141, 0.15) 10.41%,
      hsla(0, 0%, 85%, 0.15) 49.4%,
      rgba(168, 255, 190, 0.15) 87.54%
    ),
    url(./images/background-noise.webp), linear-gradient(90deg, #fff, #fff);
  background-size: auto, 414px 842px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--default-spacing);
  flex-wrap: wrap;
}

.facts__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: url(./images/fact-large.webp) center center no-repeat;
  background-size: contain;
  font-family: var(--font-NeueMachina);
  padding: 50px;
  width: 250px;
  text-align: center;
  margin: 0 var(--small-spacing);
  font-size: var(--font-size-l);
}

.facts__logo {
  display: block;
  margin-top: var(--small-spacing);
  max-width: 200px;
}

.facts__item strong {
  font-weight: 800;
  font-size: var(--font-size-xxxl);
  line-height: var(--font-size-xxxl);
  display: block;
  margin-top: var(--xsmall-spacing);
}

@media (max-width: 991px) {
  .facts__item {
    width: 200px;
    font-size: var(--font-size-default);
  }

  .facts__logo {
    max-width: 160px;
  }

  .facts__item strong {
    font-size: var(--font-size-xxl);
    line-height: var(--font-size-xxl);
  }
}

@media (max-width: 500px) {
  .facts {
    padding: var(--default-spacing) var(--small-spacing);
  }

  .facts__item {
    width: 100%;
    height: 150px;
    padding: 20px 40px;
    margin: var(--small-spacing) 0;
  }
}

/***********************************/
/* FIRST IN THE WORLD */
/***********************************/

.first-in-the-world {
  position: relative;
  font-family: var(--font-NeueMachina);
  text-transform: uppercase;
  font-size: var(--font-size-xxl);
  line-height: 1.2;
  margin: calc(var(--default-spacing) * 3) 0;
}

.first-in-the-world strong {
  position: relative;
  display: inline-block;
  color: white;
  font-weight: 300;
}

.first-in-the-world strong::after {
  background: var(--color-neutral-900);
  content: '';
  top: -5px;
  right: -5px;
  bottom: 5px;
  left: -5px;
  position: absolute;
  transform: skew(-10deg);
  z-index: 2;
}

.first-in-the-world strong span {
  position: relative;
  z-index: 3;
}

.first-in-the-world__image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .first-in-the-world {
    font-size: var(--font-size-xl);
    line-height: 1.2;
    margin: var(--default-spacing) 0;
  }

  .first-in-the-world__image {
    width: 500px;
  }

  .first-in-the-world__image {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/***********************************/
/* COMPLIANCE */
/***********************************/

.compliance {
  padding: var(--default-spacing);
  background: linear-gradient(
      270deg,
      rgba(36, 63, 141, 0.15) 10.41%,
      hsla(0, 0%, 85%, 0.15) 49.4%,
      rgba(168, 255, 190, 0.15) 87.54%
    ),
    url(./images/background-noise.webp), linear-gradient(90deg, #fff, #fff);
  background-size: auto, 414px 842px;
}

.compliance .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.compliance__item {
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--border-radius);
  padding: var(--small-spacing);
  margin: var(--small-spacing);
}

.compliance__logo {
  width: 100%;
  min-width: 80px;
  max-width: 150px;
}

@media (max-width: 768px) {
  .compliance {
    padding: var(--default-spacing) var(--small-spacing);
  }
}

/***********************************/
/* ABOUT COMPANY */
/***********************************/

.about-company {
  background: url(./images/background-noise.webp),
    radial-gradient(
      60.66% 140.64% at 10.24% 14.01%,
      #454b58 1.13%,
      #282e3e 100%
    );
  background-size: 414px 842px, auto;
  padding: var(--default-spacing);
  color: white;
}

.about-company .wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.about-company__details {
  border: 1px solid white;
  border-radius: var(--border-radius);
  padding: var(--default-spacing);
  width: calc((50% - var(--default-spacing) * 3));
  list-style: none;
}

.about-company__details li {
  color: var(--color-neutral-400);
  font-size: var(--font-size-xs);
  margin-bottom: var(--xsmall-spacing);
}

.about-company__details li hr {
  height: 1px;
  border: none;
  margin: var(--default-spacing) 0;
  background-color: white;
}

.about-company__details li.details__title {
  color: white;
  font-size: var(--font-size-xl);
  font-family: var(--font-NeueMachina);
}

.about-company__details li strong {
  color: white;
  display: block;
  font-size: var(--font-size-default);
  font-weight: 300;
}

.about-company__details li strong a {
  color: white;
  text-decoration: none;
}

.about-company__details li strong a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .about-company .wrap {
    flex-direction: column;
  }

  .about-company__details {
    width: calc((100% - var(--default-spacing) * 2));
  }
}

@media (max-width: 500px) {
  .about-company {
    padding: var(--default-spacing) var(--small-spacing);
  }
}

/***********************************/
/* FOOTER */
/***********************************/

.footer {
  background: url(./images/background-noise.webp),
    radial-gradient(
      60.66% 140.64% at 10.24% 14.01%,
      #454b58 1.13%,
      #282e3e 100%
    );
  background-size: 414px 842px, auto;
  padding: var(--default-spacing);
  color: white;
}

.footer .wrap {
  display: flex;
  align-items: center;
}

.footer__content {
  margin-right: var(--huge-spacing);
}

.footer__content h2 {
  text-align: left;
}

.footer__content p.exposed {
  margin-bottom: var(--default-spacing);
}

.footer__image {
  width: 400px;
  height: 400px;
}

@media (max-width: 991px) {
  .footer .wrap {
    flex-direction: column;
  }

  .footer__content {
    order: 2;
  }

  .footer__image {
    order: 1;
    margin-bottom: var(--default-spacing);
  }
}

@media (max-width: 768px) {
  .footer__image {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 500px) {
  .footer {
    padding: var(--default-spacing) var(--small-spacing);
  }

  .footer__image {
    width: 200px;
    height: 200px;
  }
}