.devx-hero-logos {
  position: relative;
  padding-inline: 0;
  overflow: hidden;
  background-color: var(--blue-75);
}
@media (min-width: 1024px) {
  .devx-hero-logos {
    min-height: 100vh;
  }
}
.devx-hero-logos .devx-wrapper {
  position: relative;
  z-index: 3;
}
.devx-hero-logos__line {
  display: block;
  height: 100vh;
  position: absolute;
  left: calc(var(--spacing--112) * -1);
  top: 0;
  opacity: 0.5;
  border-bottom: 1px solid var(--blue-100);
  border-left: 1px solid var(--blue-100);
  border-bottom-left-radius: var(--border-radius--4);
  pointer-events: none;
}
@media (max-width: 1599.98px) {
  .devx-hero-logos__line {
    display: none;
  }
}
.devx-hero-logos__line:before {
  content: "";
  display: block;
  width: 100vw;
  height: 0.25rem;
  border-top: 1px solid var(--blue-100);
  border-right: 1px solid var(--blue-100);
  border-top-right-radius: var(--border-radius--4);
  position: absolute;
  top: -0.25rem;
  right: 100%;
}
.devx-hero-logos__overlay {
  display: inline-flex;
  position: relative;
}
.devx-hero-logos__overlay:before {
  content: "";
  display: block;
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--neutral-50);
  z-index: 2;
  pointer-events: none;
}
.devx-hero-logos__overlay > * {
  position: relative;
  z-index: 3;
}
.devx-hero-logos__main {
  padding-inline: var(--global-inline-padding);
  pointer-events: none;
  z-index: 11;
  position: relative;
}
@media (min-width: 1024px) {
  .devx-hero-logos__main {
    min-height: calc(100vh - 15rem);
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
}
.devx-hero-logos__texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.devx-hero-logos__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  pointer-events: none;
  z-index: 1;
  pointer-events: none;
}
.devx-hero-logos__bg--desktop {
  display: block;
}
@media (max-width: 1023.98px) {
  .devx-hero-logos__bg--desktop {
    display: none !important;
  }
}
.devx-hero-logos__bg--tablet {
  display: none;
}
@media (min-width: 767.98px) and (max-width: 1023.98px) {
  .devx-hero-logos__bg--tablet {
    display: block !important;
  }
}
.devx-hero-logos__bg--mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .devx-hero-logos__bg--mobile {
    display: block !important;
  }
}
.devx-hero-logos__content {
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--24);
  padding-block: var(--spacing--84);
}
.devx-hero-logos__content > * {
  pointer-events: all;
}
@media (max-width: 1599.98px) {
  .devx-hero-logos__content {
    padding-block: var(--spacing--48);
  }
}
@media (max-width: 1023.98px) {
  .devx-hero-logos__content {
    max-width: 100%;
    padding-top: var(--spacing--14);
    padding-bottom: var(--spacing--100);
  }
}
@media (max-width: 767.98px) {
  .devx-hero-logos__content {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--spacing--60);
  }
}
.devx-hero-logos__header, .devx-hero-logos__subheader {
  margin: 0;
}
@media (max-width: 767.98px) {
  .devx-hero-logos__header, .devx-hero-logos__subheader {
    text-align: center;
  }
}
.devx-hero-logos__header {
  color: var(--blue-500);
}
.devx-hero-logos__subheader {
  color: var(--blue-300);
}
@media (max-width: 479.98px) {
  .devx-hero-logos__subheader {
    font-size: var(--font-size--22);
  }
}
.devx-hero-logos__text {
  padding-top: var(--spacing--16);
}
.devx-hero-logos__text p {
  margin: 0;
}
.devx-hero-logos__text p + p {
  margin-top: var(--spacing--16);
}
.devx-hero-logos__call-to-action {
  margin-top: var(--spacing--44);
}
@media (max-width: 1023.98px) {
  .devx-hero-logos__call-to-action {
    margin-top: var(--spacing--60);
  }
}
.devx-hero-logos .devx-logo-carousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.devx-hero-logos .devx-logo-carousel .devx-wrapper {
  position: relative;
  z-index: 3;
  /*&:before {
     content: '';
     display: block;
     position: absolute;
     right: 100%;
     z-index: 2;
     width: rem(200);
     height: 100%;
     background: var(--blue-75);
     background: linear-gradient(90deg, rgba(231, 234, 237, 1) 0%, rgba(231, 234, 237, 0) 100%);
   }

   &:after {
     content: '';
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     transform: translateX(-100%);
     margin-left: rem(-200);
     z-index: 2;
     width: 100vw;
     height: 100%;
     background: var(--blue-75);
   }*/
}
.devx-hero-logos .devx-logo-carousel__logos {
  padding-block: var(--block-spacing-xxs);
  position: relative;
  z-index: 10;
}
.devx-hero-logos .devx-logo-carousel__logos .swiper-wrapper {
  transition-timing-function: linear !important;
  position: relative;
}
.devx-hero-logos .devx-logo-carousel__logos-swiper {
  overflow: visible;
}
.devx-hero-logos .devx-logo-carousel__logos-image {
  background: var(--neutral-50);
}
.devx-hero-logos .devx-logo-carousel__logos-image img {
  height: var(--spacing--56);
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1023.98px) {
  .devx-hero-logos .devx-logo-carousel__logos-image img {
    height: var(--spacing--40);
  }
}
@media (max-width: 767.98px) {
  .devx-hero-logos .devx-logo-carousel__logos-image img {
    height: var(--spacing--36);
  }
}
.devx-hero-logos .devx-logo-carousel {
  z-index: 9;
}
.devx-hero-logos .devx-logo-carousel .devx-wrapper {
  position: relative;
}
.devx-hero-logos .devx-logo-carousel .devx-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  right: 100%;
  z-index: 20;
  width: 12.5rem;
  margin-right: -6.25rem;
  height: 100%;
  background: linear-gradient(90deg, rgb(247, 247, 247) 0%, rgba(247, 247, 247, 0) 100%);
}
.devx-hero-logos .devx-logo-carousel .devx-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  margin-left: -6.25rem;
  z-index: 20;
  width: 100vw;
  height: 100%;
  background: rgb(247, 247, 247);
}
.devx-hero-logos .devx-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.devx-hero-logos .devx-line {
  height: calc(100% + 7rem);
}
.devx-hero-logos #hero_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.devx-hero-logos #hero_bg canvas {
  width: 100% !important;
  height: auto !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.devx-hero-logos .devx-button--cta .devx-button__text {
  font-size: var(--font-size--32);
  color: var(--blue-500);
  font-weight: 500;
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta .devx-button__text {
    font-size: var(--font-size--22);
  }
}
.devx-hero-logos .devx-button--cta .devx-icon--after,
.devx-hero-logos .devx-button--cta .devx-icon--before {
  width: var(--icon-size-32) !important;
  height: var(--icon-size-32) !important;
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta .devx-icon--after,
  .devx-hero-logos .devx-button--cta .devx-icon--before {
    width: var(--icon-size-22) !important;
    height: var(--icon-size-22) !important;
  }
}
.devx-hero-logos .devx-button--cta .devx-icon--before {
  inset: auto auto 0.375rem -2.5rem;
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta .devx-icon--before {
    inset: auto auto 0.25rem -1.875rem;
  }
}
.devx-hero-logos .devx-button--cta:hover .devx-button__text {
  transform: translate3d(2.5rem, 0px, 0px);
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta:hover .devx-button__text {
    transform: translate3d(1.875rem, 0px, 0px);
  }
}
.devx-hero-logos .devx-button--cta:hover .devx-icon--before {
  transform: translate3d(2.5rem, 0px, 0px);
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta:hover .devx-icon--before {
    transform: translate3d(1.875rem, 0px, 0px);
  }
}
.devx-hero-logos .devx-button--cta:hover .devx-icon--after {
  transform: translate3d(2.5rem, 0px, 0px);
}
@media (max-width: 1599.98px) {
  .devx-hero-logos .devx-button--cta:hover .devx-icon--after {
    transform: translate3d(1.875rem, 0px, 0px);
  }
}
.devx-hero-logos__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  z-index: 10;
}

.hero-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}
.hero-line svg {
  height: 100%;
}