.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  img {
    cursor: pointer;
  }
}

.tooltip-content {
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: flex-start !important;
  gap: 0.1rem !important;
  left: 3vw;
  width: 25vw;
  background-color: var(--color-black);
  border: 0.46px solid rgba(231, 108, 33, 0.8);
  border-radius: 1rem;
  padding: 1em 1.2rem 1rem 1.2rem;
  z-index: 1;
  right: 100%;
  margin-right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;

  hr {
    width: 100%;
    background-color: var(--color-gray) !important;
    height: 0.5px;
    border: none;
    opacity: 0.5;
  }
  p {
    font-size: 0.9rem;
    color: var(--color-cream);
    font-weight: 300;
  }
  a,
  p:nth-of-type(2) {
    font-size: 0.8rem;
    color: var(--color-gray);
    font-weight: 300;
  }
  a {
    cursor: pointer;
  }
  .arrow-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1.2vw;
    filter: drop-shadow(-1px 0px 0px rgba(231, 108, 33, 0.8))
      drop-shadow(0px 1px 0px rgba(231, 108, 33, 0.8))
      drop-shadow(0px -1px 0px rgba(231, 108, 33, 0.8));

    border-right-color: var(--color-black) !important;
  }
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0s;
}