.dark\:bg-gray-900:is(.dark *) {
  background-color: rgb(8 14 38);
}

.dark\:bg-gray-900\/10:is(.dark *) {
  background-color: rgb(8 14 38 / 0.1);
}

.dark\:bg-gray-900\/50:is(.dark *) {
  background-color: rgb(8 14 38 / 0.5);
}

.border-left-blue {
  border-left: 6px solid rgba(48, 90, 217, 1);
}

.border-left-green {
  border-left: 6px solid rgba(54, 217, 125, 1);
}

.border-left-purple {
  border-left: 6px solid rgba(182, 99, 223, 1);
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.main-bg {
  background-position: 50% bottom;
  background-repeat: no-repeat;
  opacity: 60%;
  background-size: cover;
}

.bg-img {
  background-position: 10% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dark\:bg-size-unset:is(.dark *) {
  background-size: unset;
}

.bg-gradient-right {
  background: radial-gradient(50% 165% at 0% 70%, #070B0E 0%, #0E1A3E 100%);
}

.bg-gradient-left {
  background: radial-gradient(75% 190% at 78% 55%, #070B0E 0%, #0E1A3E 100%);
}

.dark\:bg-gradient:is(.dark *) {
  background: radial-gradient(20% 50% at 50% 50%, #305AD9 0%, rgba(48, 90, 217, 0) 100%);
}

.pb-45 {
  padding-bottom: 45%;
}

.dark\:bg-l-gradient:is(.dark *) {
  background: linear-gradient(90deg, #080E26 0.5%, rgba(8, 14, 38, 0.754671) 15%, rgba(8, 14, 38, 0) 30%) left, linear-gradient(270deg, #080E26 0.5%, rgba(8, 14, 38, 0.754671) 15%, rgba(8, 14, 38, 0) 30%) right;
}

.font-green {
  color: var(--Base-secondary-500, rgba(54, 217, 125, 1));
}

.top-1\/2 {
  top: 50%;
}

.transform-y {
  transform: translateY(-50%);
}

.opacity-30 {
  opacity: 30%;
}

button {
  background-color: rgba(48, 90, 217, 1);
}

.bg-primary {
  background-color: rgba(48, 90, 217, 1);
}

.blue-svg path {
  fill: rgba(48, 90, 217, 1);
}

.button-border {
  background-color: inherit;
  border: 1px solid white;
}

.justify-end {
  justify-content: end;
}

.logo-invert:not(.dark *) {
  --tw-invert: invert(100%);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

@media (min-width: 768px) {
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:col-span-3-7 {
    grid-column: 3 / 7;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
}

@media (min-width: 1024px) {

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.rad-gradient {
  background: radial-gradient(101.54% 60.98% at 50% 39.02%, #070B0E 0%, #0E1A3E 100%);
}

.dark\:rad-gradient:is(.dark *) {
  background: radial-gradient(101.54% 60.98% at 50% 39.02%, #070B0E 0%, #0E1A3E 100%);
}

.justify-center {
  justify-content: center;
}

.bg-box-shadow {
  -webkit-backdrop-filter: blur(17px);
          backdrop-filter: blur(17px);
  box-shadow: 0px 16px 56px 0px rgba(173, 184, 232, 0.24);
}

/* ===== Fix cropped partner logos ===== */

/* 1) Stop the card wrapper from clipping logos */
div.flex.flex-col.items-center.justify-center.overflow-hidden {
  overflow: visible; /* prevent clipping caused by overflow-hidden */ /* [1](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow) */
}

/* 2) Make the logo image fit inside the box without cropping/distortion */
div.flex.flex-col.items-center.justify-center > img.object-fill {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;     /* show full logo; no cropping */ /* [2](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) */
  -o-object-position: center;
     object-position: center; /* keep centered */               /* [2](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) */
  overflow: visible;       /* in case image itself has overflow-hidden */
  display: block;
}

/* 3) If some logos still touch edges, give them a little breathing room */
div.flex.flex-col.items-center.justify-center > img.logo-invert {
  padding: 6px;
  box-sizing: border-box;
}

