/* THIRDEYE SOLUTIONZ — separated stylesheet */

/* =========================================================
   LENDING SECTION
========================================================= */

.lending-section {
  background: #f5f2eb;

  padding: 120px 0 90px;

  overflow: hidden;
}

.lending-intro {
  display: grid;

  grid-template-columns:
    1fr 420px;

  gap: 80px;

  align-items: end;

  margin-bottom: 85px;
}

.lending-intro-copy {
  padding-bottom: 5px;
}

.lending-intro-copy p {
  color: var(--muted);

  line-height: 1.75;

  margin: 0 0 18px;
}

.network-note {
  color: #a98231;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .08em;
}

.lender-group {
  margin-bottom: 80px;
}

.lender-group-title {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 30px;

  margin-bottom: 25px;
}

.lender-group-title > div {
  display: flex;

  align-items: center;

  gap: 20px;
}

.lender-group-title p {
  text-align: right;
}

/* =========================================================
   LENDER HORIZONTAL LOOP
========================================================= */

.lender-marquee {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 10px 0 25px;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
}

.lender-track {
  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  align-items: stretch;

  width: max-content !important;

  max-width: none !important;

  gap: 20px;

  animation:
    lender-horizontal-loop
    34s linear infinite;

  will-change: transform;
}

.lender-marquee.reverse .lender-track {
  animation-direction: reverse;
}

.lender-marquee:hover .lender-track {
  animation-play-state: paused;
}

/* =========================================================
   LENDER CARD
========================================================= */

.lender-card {
  flex:
    0 0 280px !important;

  width: 280px !important;

  min-width: 280px !important;

  max-width: 280px !important;

  height: 145px;

  box-sizing: border-box;

  background: #fff;

  border: 1px solid #ddd9cf;

  padding: 18px 20px;

  display: flex !important;

  flex-direction: column !important;

  flex-wrap: nowrap !important;

  justify-content: space-between;

  overflow: hidden;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.lender-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(169,130,49,.55);

  box-shadow:
    0 16px 40px
    rgba(7,21,28,.10);
}

.lender-logo-holder {
  width: 100%;

  height: 88px;

  flex-shrink: 0;

  display: flex !important;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  padding: 5px 10px;
}

.lender-logo-holder img {
  display: block;

  width: auto;

  height: auto;

  max-width: 190px;

  max-height: 62px;

  object-fit: contain;
}

.lender-text-logo {
  display: block;

  width: 100%;

  text-align: center;

  color: #17383b;

  font-size: 18px;

  font-weight: 800;

  letter-spacing: -.02em;

  white-space: nowrap;
}

.lender-name {
  display: block;

  width: 100%;

  flex-shrink: 0;

  padding-top: 11px;

  border-top: 1px solid #ebe7de;

  color: #687474;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .08em;

  line-height: 1.2;

  text-transform: uppercase;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/* =========================================================
   LENDER ANIMATION
========================================================= */

@keyframes lender-horizontal-loop {

  0% {
    transform:
      translate3d(0,0,0);
  }

  100% {
    transform:
      translate3d(
        calc(-50% - 10px),
        0,
        0
      );
  }
}

/* =========================================================
   LENDING DISCLAIMER
========================================================= */

.lending-disclaimer {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top: 25px;

  border-top:
    1px solid var(--line);
}

.lending-disclaimer span {
  color: #a98231;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .12em;
}

.lending-disclaimer p {
  max-width: 650px;

  margin: 0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.6;
}