:root {
  --Orange-950: #FA6425;
  --Orange-900: rgba(250, 100, 37, 0.88);
  --Orange-800: rgba(250, 100, 37, 0.76);
  --Orange-700: rgba(250, 100, 37, 0.64);
  --Orange-600: rgba(250, 100, 37, 0.52);
  --Orange-500: rgba(250, 100, 37, 0.40);
  --Orange-400: rgba(250, 100, 37, 0.32);
  --Orange-300: rgba(250, 100, 37, 0.24);
  --Orange-200: rgba(250, 100, 37, 0.16);
  --Orange-100: rgba(250, 100, 37, 0.08);
  --Orange-50: rgba(250, 100, 37, 0.02);
  --Neutral-1000: #1C1C1C;
  --Neutral-950: #222;
  --Neutral-900: #3D3D3;
  --Neutral-800: #4F4F4F;
  --Neutral-700: #4F4F4F;
  --Neutral-600: #5D5D5D;
  --Neutral-500: #6D6D6D;
  --Neutral-400: #888;
  --Neutral-300: #B0B0B0;
  --Neutral-200: #D1D1D1;
  --Neutral-100: #E7E7E7;
  --Cream-950: #F0EFE9;
  --Cream-800: rgba(240, 239, 233, 0.72);
  --Cream-200: rgba(240, 239, 233, 0.16);
  --Cream-100: rgba(240, 239, 233, 0.06);
  --Sand-950: #CABEB6;
  --Sand-800: rgba(202, 190, 182, 0.90);
  --Sand-400: rgba(202, 190, 182, 0.32);
  --Green-950: #1E291F;
  --Black: #000000;
  --White: #FFFFFF;
}

.ecosystem {
  background: var(--Neutral-1000);
  width: 100%;
  overflow: hidden;
}
.ecosystem__title {
  color: #809F83;
}
.ecosystem__box {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ecosystem__caption {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ecosystem__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
}
.ecosystem__name:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--Orange-950);
}
.ecosystem__status {
  color: var(--Orange-950);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}
.ecosystem__items {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .ecosystem__items {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
}
.ecosystem__bg {
  width: 100%;
  height: auto;
  max-width: 616px;
  margin: 100px 100px 0 100px;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .ecosystem__bg {
    margin: 0;
    position: absolute;
    inset: 0;
    opacity: 0.5;
  }
}
.ecosystem__item {
  --tx: 0px;
  --ty: 0px;
  width: 212px;
  min-height: 135px;
  display: flex;
  padding: 16px 28px 24px 28px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid var(--Cream-200);
  background: var(--Neutral-950);
  margin: 5px;
  position: absolute;
  left: calc(50% - 106px);
  z-index: 2;
  transform: translate(var(--tx), var(--ty));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@media (max-width: 767.98px) {
  .ecosystem__item {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin: 0;
    animation: none !important;
    transform: none;
    position: relative;
    left: auto;
  }
}
.ecosystem__item:nth-child(1) {
  --tx: -180px;
  --ty: -220px;
  animation-name: float1;
  animation-duration: 32.4s;
  animation-delay: -1.2s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(1) {
    --tx: -150px;
    --ty: -190px;
  }
}
.ecosystem__item:nth-child(2) {
  --tx: 110px;
  --ty: -250px;
  animation-name: float2;
  animation-duration: 34.8s;
  animation-delay: -3.6s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(2) {
    --tx: 80px;
    --ty: -220px;
  }
}
@media (max-width: 991.98px) {
  .ecosystem__item:nth-child(2) {
    --tx: 120px;
    --ty: -210px;
  }
}
.ecosystem__item:nth-child(3) {
  --tx: 350px;
  --ty: -30px;
  animation-name: float3;
  animation-duration: 30.6s;
  animation-delay: -0.4s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(3) {
    --tx: 330px;
    --ty: 0px;
  }
}
@media (max-width: 991.98px) {
  .ecosystem__item:nth-child(3) {
    --tx: 230px;
    --ty: 0px;
  }
}
.ecosystem__item:nth-child(4) {
  --tx: 280px;
  --ty: 240px;
  animation-name: float4;
  animation-duration: 36.4s;
  animation-delay: -2.8s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(4) {
    --tx: 250px;
    --ty: 210px;
  }
}
@media (max-width: 991.98px) {
  .ecosystem__item:nth-child(4) {
    --tx: 240px;
    --ty: 180px;
  }
}
.ecosystem__item:nth-child(5) {
  --tx: -20px;
  --ty: 380px;
  animation-name: float5;
  animation-duration: 32.9s;
  animation-delay: -4.1s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(5) {
    --tx: 10px;
    --ty: 300px;
  }
}
.ecosystem__item:nth-child(6) {
  --tx: -280px;
  --ty: 240px;
  animation-name: float6;
  animation-duration: 34.2s;
  animation-delay: -1.9s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(6) {
    --tx: -250px;
    --ty: 210px;
  }
}
.ecosystem__item:nth-child(7) {
  --tx: -350px;
  --ty: -30px;
  animation-name: float7;
  animation-duration: 30.9s;
  animation-delay: -3.3s;
}
@media (max-width: 1023.98px) {
  .ecosystem__item:nth-child(7) {
    --tx: -330px;
    --ty: 0px;
  }
}
@media (max-width: 991.98px) {
  .ecosystem__item:nth-child(7) {
    --tx: -230px;
    --ty: 0px;
  }
}
.ecosystem__item .border-top-left,
.ecosystem__item .border-top-right,
.ecosystem__item .border-bottom-right,
.ecosystem__item .border-bottom-left {
  width: 10px;
  height: 11px;
  border: 1px solid var(--Orange-950);
  position: absolute;
}
.ecosystem__item .border-top-left {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}
.ecosystem__item .border-top-right {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}
.ecosystem__item .border-bottom-right {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}
.ecosystem__item .border-bottom-left {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}
.ecosystem__item-number {
  color: var(--Orange-950);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .ecosystem__item-number {
    font-size: 32px;
    font-weight: 700;
  }
}
.ecosystem__item-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--Sand-950);
}

@keyframes float1 {
  0% {
    transform: translate(calc(var(--tx) - 14px), calc(var(--ty) + 22px));
  }
  30% {
    transform: translate(calc(var(--tx) + 18px), calc(var(--ty) - 10px));
  }
  55% {
    transform: translate(calc(var(--tx) - 24px), calc(var(--ty) - 20px));
  }
  80% {
    transform: translate(calc(var(--tx) + 12px), calc(var(--ty) + 14px));
  }
  100% {
    transform: translate(calc(var(--tx) - 18px), calc(var(--ty) + 8px));
  }
}
@keyframes float2 {
  0% {
    transform: translate(calc(var(--tx) + 20px), calc(var(--ty) - 18px));
  }
  25% {
    transform: translate(calc(var(--tx) - 12px), calc(var(--ty) + 14px));
  }
  50% {
    transform: translate(calc(var(--tx) + 10px), calc(var(--ty) + 16px));
  }
  75% {
    transform: translate(calc(var(--tx) - 16px), calc(var(--ty) - 16px));
  }
  100% {
    transform: translate(calc(var(--tx) + 14px), calc(var(--ty) + 6px));
  }
}
@keyframes float3 {
  0% {
    transform: translate(calc(var(--tx) - 20px), calc(var(--ty) - 12px));
  }
  35% {
    transform: translate(calc(var(--tx) + 16px), calc(var(--ty) + 18px));
  }
  60% {
    transform: translate(calc(var(--tx) + 14px), calc(var(--ty) - 20px));
  }
  85% {
    transform: translate(calc(var(--tx) - 10px), calc(var(--ty) + 14px));
  }
  100% {
    transform: translate(calc(var(--tx) + 6px), calc(var(--ty) - 20px));
  }
}
@keyframes float4 {
  0% {
    transform: translate(calc(var(--tx) + 18px), calc(var(--ty) + 20px));
  }
  30% {
    transform: translate(calc(var(--tx) - 16px), calc(var(--ty) - 16px));
  }
  55% {
    transform: translate(calc(var(--tx) + 12px), calc(var(--ty) + 10px));
  }
  80% {
    transform: translate(calc(var(--tx) - 18px), calc(var(--ty) - 14px));
  }
  100% {
    transform: translate(calc(var(--tx) + 8px), calc(var(--ty) + 19px));
  }
}
@keyframes float5 {
  0% {
    transform: translate(calc(var(--tx) + 12px), calc(var(--ty) + 16px));
  }
  28% {
    transform: translate(calc(var(--tx) + 20px), calc(var(--ty) - 14px));
  }
  52% {
    transform: translate(calc(var(--tx) - 14px), calc(var(--ty) - 16px));
  }
  78% {
    transform: translate(calc(var(--tx) + 20px), calc(var(--ty) + 12px));
  }
  100% {
    transform: translate(calc(var(--tx) - 11px), calc(var(--ty) + 4px));
  }
}
@keyframes float6 {
  0% {
    transform: translate(calc(var(--tx) + 16px), calc(var(--ty) - 14px));
  }
  32% {
    transform: translate(calc(var(--tx) - 18px), calc(var(--ty) + 12px));
  }
  58% {
    transform: translate(calc(var(--tx) + 14px), calc(var(--ty) - 18px));
  }
  82% {
    transform: translate(calc(var(--tx) - 14px), calc(var(--ty) + 6px));
  }
  100% {
    transform: translate(calc(var(--tx) + 10px), calc(var(--ty) + 10px));
  }
}
@keyframes float7 {
  0% {
    transform: translate(calc(var(--tx) - 16px), calc(var(--ty) - 20px));
  }
  26% {
    transform: translate(calc(var(--tx) + 14px), calc(var(--ty) + 18px));
  }
  54% {
    transform: translate(calc(var(--tx) - 19px), calc(var(--ty) + 10px));
  }
  76% {
    transform: translate(calc(var(--tx) + 14px), calc(var(--ty) - 12px));
  }
  100% {
    transform: translate(calc(var(--tx) - 8px), calc(var(--ty) + 18px));
  }
}
@media (max-width: 1023.98px) {
  @keyframes float1 {
    0% {
      transform: translate(calc(var(--tx) - 9px), calc(var(--ty) + 17px));
    }
    30% {
      transform: translate(calc(var(--tx) + 13px), calc(var(--ty) - 5px));
    }
    55% {
      transform: translate(calc(var(--tx) - 19px), calc(var(--ty) - 15px));
    }
    80% {
      transform: translate(calc(var(--tx) + 7px), calc(var(--ty) + 9px));
    }
    100% {
      transform: translate(calc(var(--tx) - 13px), calc(var(--ty) + 3px));
    }
  }
  @keyframes float2 {
    0% {
      transform: translate(calc(var(--tx) + 12px), calc(var(--ty) - 10px));
    }
    25% {
      transform: translate(calc(var(--tx) - 7px), calc(var(--ty) + 9px));
    }
    50% {
      transform: translate(calc(var(--tx) + 5px), calc(var(--ty) + 11px));
    }
    75% {
      transform: translate(calc(var(--tx) - 11px), calc(var(--ty) - 11px));
    }
    100% {
      transform: translate(calc(var(--tx) + 9px), calc(var(--ty) + 1px));
    }
  }
  @keyframes float3 {
    0% {
      transform: translate(calc(var(--tx) - 7px), calc(var(--ty) - 7px));
    }
    35% {
      transform: translate(calc(var(--tx) + 11px), calc(var(--ty) + 10px));
    }
    60% {
      transform: translate(calc(var(--tx) + 6px), calc(var(--ty) - 12px));
    }
    85% {
      transform: translate(calc(var(--tx) - 5px), calc(var(--ty) + 8px));
    }
    100% {
      transform: translate(calc(var(--tx) + 1px), calc(var(--ty) - 12px));
    }
  }
  @keyframes float4 {
    0% {
      transform: translate(calc(var(--tx) + 10px), calc(var(--ty) + 12px));
    }
    30% {
      transform: translate(calc(var(--tx) - 8px), calc(var(--ty) - 11px));
    }
    55% {
      transform: translate(calc(var(--tx) + 7px), calc(var(--ty) + 8px));
    }
    80% {
      transform: translate(calc(var(--tx) - 10px), calc(var(--ty) - 9px));
    }
    100% {
      transform: translate(calc(var(--tx) + 3px), calc(var(--ty) + 11px));
    }
  }
  @keyframes float5 {
    0% {
      transform: translate(calc(var(--tx) + 8px), calc(var(--ty) + 8px));
    }
    28% {
      transform: translate(calc(var(--tx) + 12px), calc(var(--ty) - 9px));
    }
    52% {
      transform: translate(calc(var(--tx) - 10px), calc(var(--ty) - 8px));
    }
    78% {
      transform: translate(calc(var(--tx) + 12px), calc(var(--ty) + 7px));
    }
    100% {
      transform: translate(calc(var(--tx) - 11px), calc(var(--ty) + 1px));
    }
  }
  @keyframes float6 {
    0% {
      transform: translate(calc(var(--tx) + 8px), calc(var(--ty) - 11px));
    }
    32% {
      transform: translate(calc(var(--tx) - 10px), calc(var(--ty) + 10px));
    }
    58% {
      transform: translate(calc(var(--tx) + 9px), calc(var(--ty) - 13px));
    }
    82% {
      transform: translate(calc(var(--tx) - 9px), calc(var(--ty) + 6px));
    }
    100% {
      transform: translate(calc(var(--tx) + 6px), calc(var(--ty) + 6px));
    }
  }
  @keyframes float7 {
    0% {
      transform: translate(calc(var(--tx) - 8px), calc(var(--ty) - 12px));
    }
    26% {
      transform: translate(calc(var(--tx) + 9px), calc(var(--ty) + 10px));
    }
    54% {
      transform: translate(calc(var(--tx) - 10px), calc(var(--ty) + 8px));
    }
    76% {
      transform: translate(calc(var(--tx) + 9px), calc(var(--ty) - 9px));
    }
    100% {
      transform: translate(calc(var(--tx) - 2px), calc(var(--ty) + 10px));
    }
  }
}

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