.primary-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  font-size: 2.25rem;
  font-weight: 600;
  line-height: 3.125rem;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.secondary-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  font-size: 2.25rem;
  font-weight: 600;
  line-height: 2.25rem;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.tertiary-heading {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.625rem;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.primary-button {
  background: linear-gradient(270deg, #6b4eff 0%, #5533ff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.secondary-button {
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.112) 0%,
    rgba(255, 255, 255, 0.024) 100%
  );

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.secondary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
      106.37% 282.8% at -3.82% -3.12%,
      rgba(21, 21, 21, 0.6) 0%,
      rgba(21, 21, 21, 0) 100%
    ),
    radial-gradient(
      131.07% 260.49% at 0% 0%,
      #6b4eff 0%,
      rgba(107, 78, 255, 0) 100%
    ),
    radial-gradient(
      98.54% 262.92% at 1.46% 0%,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.user-card {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );

  border-radius: 14px;
  position: relative;
}

.primary-card-section {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );

  position: relative;
}

.big-card-outline {
  position: relative;
}

.big-card-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  opacity: 0.6;

  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.71) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.user-card-over-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 64px;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(17, 13, 35, 0) -8.04%,
    #040018 112.5%
  );
}

.user-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dark-background-content {
  background: #07051c;
}

.purple-gradient-text {
  background: linear-gradient(90deg, #8972ff 37.44%, #d1c8ff 61.42%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.purple-gradient {
  position: relative;
}

.purple-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.6) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.seperator {
  height: 0px;
  width: 100%;
  opacity: 0.8;
  position: relative;
}

.seperator::before {
  content: '';
  position: absolute;
  inset: 0;
  padding-top: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.6) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.gradient-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 27px;
  font-size: 13px;
  line-height: 13px;
  border-radius: 24px;
  font-weight: 400;
  padding: 0 16px;
  color: #e8e7ec;
  width: fit-content;
  background: radial-gradient(
      89.36% 183.33% at 37.06% -14.58%,
      rgba(255, 255, 255, 0.084) 0%,
      rgba(255, 255, 255, 0.018) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.gradient-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.6) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.light-gradient-outline {
  position: relative;
}

.light-gradient-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dark-card {
  background: radial-gradient(
    89.36% 183.33% at 37.06% -14.58%,
    rgba(255, 255, 255, 0.0504) 0%,
    rgba(255, 255, 255, 0.0108) 100%
  );

  position: relative;
}

.dark-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.6;
  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.71) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.white-gradient-text {
  background: linear-gradient(
    181.83deg,
    #ffffff 1.55%,
    rgba(255, 255, 255, 0.75) 98.45%
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.filter-card {
  background: linear-gradient(
    200.5deg,
    rgba(55, 52, 69, 0.085) 40.38%,
    rgba(55, 52, 69, 0.23) 108.62%
  );
  position: relative;
}

.filter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.filter-search {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );
}

.filter-list {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );
  position: relative;
}

.filter-list::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  padding-bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    164.98deg,
    #373445 -10.78%,
    rgba(55, 52, 69, 0) 130.84%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.filter-options {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );
}

.filter-selected-option {
  background: linear-gradient(
    14.78deg,
    rgba(55, 52, 69, 0.17) 3.84%,
    rgba(55, 52, 69, 0.46) 103.86%
  );
}

.small-card {
  background: radial-gradient(
      89.36% 183.33% at 37.06% -14.58%,
      rgba(255, 255, 255, 0.084) 0%,
      rgba(255, 255, 255, 0.018) 100%
    )
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  position: relative;
}

.small-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
        106.37% 282.8% at -3.82% -3.12%,
        rgba(21, 21, 21, 0.6) 0%,
        rgba(21, 21, 21, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        131.07% 260.49% at 0% 0%,
        #6b4eff 0%,
        rgba(107, 78, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
        98.54% 262.92% at 1.46% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.related-company {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-companies-overlap {
  position: absolute;
  top: 50%;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 144px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(4, 0, 24, 0.77) 3.4%,
    #040018 22.14%,
    #040018 47.81%,
    #040018 76.02%,
    rgba(4, 0, 24, 0.77) 100%
  );
}

@media screen and (min-width: 640px) {
  .primary-heading {
    font-size: 3rem;
    line-height: 4rem;
  }

  .secondary-heading {
    font-size: 2.75rem;
    line-height: 2.75rem;
  }

  .tertiary-heading {
    font-size: 2rem;
    line-height: 3.125rem;
  }

  .related-companies-overlap {
    max-width: 422px;
    height: 121px;
  }
}

@media screen and (min-width: 768px) {
  .secondary-heading {
    font-size: 3rem;
    line-height: 3rem;
  }

  .related-companies-overlap {
    max-width: 518px;
    height: 121px;
  }
}

@media screen and (min-width: 1024px) {
  .related-companies-overlap {
    max-width: 709px;
    height: 100px;
  }
}
