body {
  background-color: #08080a;
  color: #f2f2f4;
  width: 100%;
  overflow-x: hidden;
  font-family: "Space Grotesk", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.app-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
}

.h1 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  color: #f2f2f4;
}

.h2 {
  font-size: 24px;
  font-weight: bold;
  color: #f2f2f4;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .h1 {
    font-size: 25px;
    font-weight: bold;

    br {
      display: none;
    }
  }

  .banner {
    .global__subtitle {
      font-size: 18px;
      margin-top: 20px;
    }

    .banner__desc {
      top: 313px;
      font-size: 16px;
    }
  }

  .h2 {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;

    br {
      display: none;
    }
  }
}

@media (max-width: 400px) {
  .h1 {
    font-size: 20px;
    font-weight: bold;

    br {
      display: none;
    }
  }

  .banner {
    .global__subtitle {
      font-size: 16px;
      margin-top: 20px;
    }

    .banner__desc {
      top: 313px;
      font-size: 13px;
    }
  }

  .h2 {
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;

    br {
      display: none;
    }
  }
}

.container {
  max-width: 1126px;
  width: 100%;
  margin: 0 auto;
}

.container-bigger {
  max-width: 1375px;
  width: 100%;
  margin: 0 auto;
}

.blue-button {
  display: inline-block;
  padding: 12.5px 36.5px;
  background-color: #1b1bff;
  font-size: 12px;
  font-weight: 500;
  color: white;
  border-radius: 1000px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.blue-button:hover {
  background-color: blueviolet;
}

.arrow-button {
  border-radius: 50%;
  background-color: #f2f2f4;
  height: 13px;
  width: 13px;
  padding: 13.25px;
  transition: background-color 0.3s;

  .arrow-button__arrow {
    display: block;
  }
}

.arrow-button:hover {
  background-color: gray;
}

@media (max-width: 600px) {
  .blueButton {
    font-size: 15px;
    padding: 15px 0;
    width: 185px;
  }

  .global__buttons__button {
    padding: 15px 36px;
    text-align: center;
  }

  .global__buttons__button.arrow-button {
    padding: 15px;
  }

  .hiring {
    .global__buttons__button {
      padding: 15px 36px;
    }

    .global__buttons__button.arrow-button {
      padding: 15px;
    }

    .global__buttons__button.hiring__gmail-btn {
      padding: 15px 0;
      width: 240px;
    }
  }
}

@media (max-width: 370px) {
  .blue-button {
    font-size: 12px;
  }

  .global__buttons__button {
    padding: 15px 25px;
    text-align: center;
  }

  .global__buttons__button.arrow-button {
    padding: 15px;
  }

  .hiring {
    .global__buttons__button {
      padding: 15px 20px;
    }

    .global__buttons__button.hiring__gmail-btn {
      padding: 15px 0;
      width: 210px;
      margin-top: 0;
    }
  }
}

.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: all 0.8s ease-out;
  visibility: hidden;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.reveal-item {
  opacity: 0;
  transform: translateY(50px) scale(0.9) rotateX(-10deg);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* Плавний "виліт" */
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
}

.reveal.active .reveal-item {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
}

.reveal.active .reveal-item:nth-child(1) {
  transition-delay: 0.1s;
}
.reveal.active .reveal-item:nth-child(2) {
  transition-delay: 0.3s;
}
.reveal.active .reveal-item:nth-child(3) {
  transition-delay: 0.5s;
}

/* Клас для самого зображення */
.neonDeco {
  /* transform: scale(1.5); */
  animation: waveAnimation 2.5s ease-in-out infinite;
  transform-origin: center;
}

/* Додатково для нижнього фону, якщо хочете різну швидкість */
.neonDecoDown {
  /* transform: scale(1.5); */

  animation: waveAnimation 5s ease-in-out infinite reverse;
}

@keyframes waveAnimation {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-2%, 15px) scale(1.02); /* Рух вбік і трохи вниз */
  }
  66% {
    transform: translate(2%, -10px) scale(0.98); /* Рух в інший бік і вгору */
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes waveAnimation {
  0%,
  100% {
    transform: translateY(0) skewX(0deg);
  }
  50% {
    transform: translateY(-20px) skewX(2deg); /* Підйом та легкий нахил */
  }
}

.whyUs__decor img {
  /* Повільна анімація, щоб не заважати читати картки */
  animation: float3D 3s ease-in-out infinite;
  filter: drop-shadow(
    0 0 20px rgba(0, 163, 255, 0.2)
  ); /* Легке блакитне сяйво */
}

@keyframes float3D {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(15px, -20px) rotate(2deg);
  }
  66% {
    transform: translate(-10sx, 10px) rotate(-1deg);
  }
}

/* 1. Налаштування лінії для малювання */
.blur-line-wrap svg path {
  /* Створюємо довжину пунктиру рівною довжині лінії */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.5s ease-out; /* Швидкість появи лінії */
}

/* 2. Клас, який активує малювання (додається через JS або за замовчуванням) */
.blur-line-wrap.reveal.active svg path {
  stroke-dashoffset: 0;
}

/* 3. Анімація градієнта (поблискування) */
/* Вона почнеться сама після появи лінії */
.blur-line-wrap svg linearGradient {
  transition: all 0.5s ease;
}

/* Створюємо ефект руху світла всередині градієнта */
.blur-line-wrap.reveal.active svg linearGradient {
  animation: gradientMove 5s linear infinite 2.5s; /* Починається після завершення малювання */
}

@keyframes gradientMove {
  0% {
    x1: -100%;
    x2: 0%;
  }
  100% {
    x1: 100%;
    x2: 200%;
  }
}

/* 4. Додаткова пульсація світіння (blurSvg) */
.blurSvg path {
  animation: pulseGlow 6s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from {
    filter: url(#glow) brightness(1);
    stroke-width: 4;
  }
  to {
    filter: url(#glow) brightness(1.5);
    stroke-width: 5;
  }
}

.global__subtitle {
  font-size: 16px;
  font-weight: 500;
  margin-top: 13px;
  color: #DADADD;
}

.global__buttons__button {
  margin-top: 46px;
}

.global__buttons {
  display: flex;
  align-items: center;
  text-decoration: none;
}