/* Industry css start here */

/* =========================================================
   INDUSTRY LEADERS
========================================================= */

#industryLeaders {
  position: relative;
}


/* =========================================================
   GRADIENT TEXT
========================================================= */

.industry-gradient-text {

  background:
    linear-gradient(
      135deg,
      #1a8fd1 0%,
      #353a80 35%,
      #7c3aed 65%,
      #6c1d8d 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   CLOUD
========================================================= */

#industryCloud {

  will-change:
    transform,
    opacity,
    filter;

}


#industryCloudInner {

  will-change:
    transform;

}


/* =========================================================
   MARQUEE
========================================================= */

#logoMarquee {

  will-change:
    transform;

  animation:
    industryMarquee
    18s
    linear
    infinite;

}


@keyframes industryMarquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================================
   LOGO ITEM
========================================================= */

.industry-logo {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  flex-shrink: 0;

  cursor: pointer;
}


.industry-logo-box {

  position: relative;

  height: 40px;

  width: 40px;

  border-radius: 12px;

  overflow: hidden;

  background:
    rgba(255,255,255,0.6);

  backdrop-filter:
    blur(8px);

  border:
    1px solid
    rgba(255,255,255,0.7);

}


.industry-logo-box img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 8px;

}


.industry-logo-name {

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;

}


@media (min-width: 640px) {

  .industry-logo {

    gap: 0.75rem;
  }

  .industry-logo-box {

    height: 48px;

    width: 48px;
  }

  .industry-logo-name {

    font-size: 17px;
  }

}


/* =========================================================
   PHONE
========================================================= */

#industryPhone {

  will-change:
    top,
    left;

}


/* =========================================================
   PHONE GLOW
========================================================= */

#phoneGlow1,
#phoneGlow2 {

  will-change:
    transform;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  #logoMarquee {

    animation: none;

  }

  #industryCloudInner {

    animation: none;

  }

}