.sa-cta-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 24px;
  margin: 0;
  gap: 12px;
  background: none;
  height: calc(100% - 1.5rem);
  transition: 0.3s all ease;
  will-change: transform;
  overflow: hidden;
  box-shadow: 0px 10px 20px 0px #000b3c26;
  background-color: var(--sa-white, #fff);

  @media (max-width: 768px) {
    padding: 24px;
  }

  &:hover {
    transform: translateY(-3px);
  }

  ul {
    i.fa-check {
      color: var(--sa-green-400);
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .sa-introbox-heading {
    margin: 0;
    font-family: "chevinpro-demibold", "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
  }

  p {
    margin-bottom: 0;
  }

  .sa-cta-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 100px;

    i {
      font-size: 22px;
    }
  }

  .sa-cta-card-header-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    .left {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sa-cta-card-upper-right-corner {
      .sa-cta-card-upper-right-corner-item {
        i {
          font-size: 12px;
          margin-right: 6px;
        }
      }
    }
  }

  .color-coded-items {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;

    .color-coded-item {
      display: flex;
      gap: 6px;
      align-items: center;

      font-size: 14px;
      line-height: 20px;
      color: var(--brand-blue);
      font-family: "proxima_nova_semibold", "Open Sans", sans-serif;

      .color-coded-item-circle {
        width: 12px;
        height: 12px;
        border-radius: 100px;

        &.primary-orange {
          background-color: var(--sa-primary);
        }

        &.primary-300 {
          background-color: var(--sa-primary-300);
        }

        &.primary-200 {
          background-color: var(--sa-primary-200);
        }

        &.primary-100 {
          background-color: var(--sa-primary-100);
        }

        &.primary-50 {
          background-color: var(--sa-primary-50);
        }

        &.primary-25 {
          background-color: var(--sa-primary-25);
        }

        &.neutral-300 {
          background-color: var(--sa-neutral-300);
        }

        &.neutral-200 {
          background-color: var(--sa-neutral-200);
        }

        &.neutral-100 {
          background-color: var(--sa-neutral-100);
        }

        &.neutral-50 {
          background-color: var(--sa-neutral-50);
        }

        &.neutral-25 {
          background-color: var(--sa-neutral-25);
        }

        &.yellow-400 {
          background-color: var(--sa-yellow-400);
        }

        &.yellow-200 {
          background-color: var(--sa-yellow-200);
        }

        &.yellow-100 {
          background-color: var(--sa-yellow-100);
        }

        &.purple-400 {
          background-color: var(--sa-purple-400);
        }

        &.purple-200 {
          background-color: var(--sa-purple-200);
        }

        &.purple-100 {
          background-color: var(--sa-purple-100);
        }

        &.green-400 {
          background-color: var(--sa-green-400);
        }

        &.green-200 {
          background-color: var(--sa-green-200);
        }

        &.green-100 {
          background-color: var(--sa-green-100);
        }

        &.white {
          background-color: var(--sa-white);
          border: 1px solid var(--sa-black);
        }

        &.black {
          background-color: var(--sa-black);
        }

        &.pink {
          background-color: #ff8bc9;
        }
      }
    }
  }

  .sa-cta-card-text {
    display: flex;
    flex-direction: column;
    gap: 12px;

    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;
    max-width: 738px;

    @media (max-width: 768px) {
      font-size: 18px;
      line-height: 27px;
    }

    ul,
    ol {
      margin: 0;
    }

    ul {
      padding-left: 20px;
    }

    ol {
      padding-left: 24px;
    }

    ul.fa-ul,
    ol.fa-ul {
      padding-left: 30px;
    }
  }

  .cta-card-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;

    &.margin-top-auto {
      margin-top: auto;
    }

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }

    div.sa-button-full-width {
      width: 100%;
    }

    &.left {
      justify-content: flex-start;
    }

    &.right {
      justify-content: flex-end;
    }
  }

  .cta-card-circle-graphic {
    border-radius: 100%;
    width: 400px;
    height: 400px;
    position: absolute;
    right: -80px;
    bottom: -121px;
    z-index: -1;

    @media (max-width: 768px) {
      width: 300px;
      height: 300px;
      right: -65px;
      bottom: -124px;
    }
  }

  .highlighted-text {
    display: flex;

    p {
      font-family: "proxima_nova_semibold", "Open Sans", sans-serif;
      font-size: 14px;
      line-height: 14px;
      font-weight: 600;
      padding: 11.5px 12px;
      background-color: var(--sa-green-200);
      color: var(--sa-sub-primary);
      border-radius: 24px;
    }
  }

  &.white {
    .highlighted-text p {
      background-color: var(--sa-white), #fff;
      color: var(--sa-black);
    }

    .sa-cta-card-icon {
      background-color: var(--sa-white);
    }

    ul {
      ::marker {
        color: var(--sa-black);
      }
    }
  }

  &.purple {
    .highlighted-text p {
      background-color: var(--sa-purple-200);
    }

    .sa-cta-card-icon {
      background-color: var(--sa-purple-200);
    }

    ul {
      ::marker {
        color: var(--sa-purple-400);
      }

      i.fa-check {
        color: var(--sa-purple-400);
      }
    }

    .cta-card-circle-graphic {
      background-color: var(--sa-purple-200);
    }
  }

  &.green {
    .highlighted-text p {
      background-color: var(--sa-green-200);
    }

    .sa-cta-card-icon {
      background-color: var(--sa-green-200);
    }

    ul {
      ::marker {
        color: var(--sa-green-400);
      }
    }

    .cta-card-circle-graphic {
      background-color: var(--sa-green-200);
    }
  }

  &.orange {
    .highlighted-text p {
      background-color: var(--sa-primary-200);
    }

    .sa-cta-card-icon {
      background-color: var(--sa-primary-200);
    }

    ul {
      ::marker {
        color: var(--sa-primary);
      }

      i.fa-check {
        color: var(--sa-primary);
      }
    }

    .cta-card-circle-graphic {
      background-color: var(--sa-primary-200);
    }
  }

  &.pink {
    .highlighted-text p {
      background-color: var(--sa-pink-200);
    }

    .sa-cta-card-icon {
      background-color: var(--sa-pink-200);
    }

    ul {
      ::marker {
        color: var(--sa-pink-400);
      }

      i.fa-check {
        color: var(--sa-pink-400);
      }
    }

    .cta-card-circle-graphic {
      background-color: var(--sa-pink-200);
    }
  }
}