.service-details-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 11;
  color: hsl(from var(--white) h s l / 0.85);
  padding: 5svw;

  pointer-events: none;
  /* display: none; */
  opacity: 0;
  transition: opacity 0.5s ease;

  &.open {
    pointer-events: auto; /* Allow pointer events when open */
    /* display: block; */
    opacity: 1;
    position: fixed;
  }
}

.service-details-overlay .close {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  color: var(--black);
  cursor: pointer;

  svg {
    width: 3rem;
    height: 3rem;
    stroke-width: 1;
  }
}

.service-details-overlay .service-title {
  position: relative;
  font-size: clamp(1.5rem, 9vw, 12rem);
  top: -0.2em;
  opacity: 0;
  position: relative;
  font-size: clamp(1.5rem, 9vw, 12rem);
  font-weight: 700;
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(
    45deg,
    hsl(from var(--accent-color) h s 32),
    hsl(from var(--accent-color) h s 50)
  );

  transition-property: opacity, top;
  transition-duration: 0.5s;
  transition-delay: 0.5s;

  .open & {
    top: 0;
    opacity: 1;
  }
}

.service-details-overlay .short {
  position: relative;
  font-size: clamp(1.5rem, 2vw, 3rem);
  max-width: 60%;
  line-height: 1.618;
  font-weight: normal;
  margin-block: var(--spacing-xxl);

  top: -0.2em;
  opacity: 0;
  transition-property: opacity, top;
  transition-duration: 0.5s;
  transition-delay: 0.7s;

  @media screen and (max-width: 768px) {
    /* font-size: clamp(1.2rem, 4vw, 2rem); */
    max-width: 100%;  
  }

  .open & {
    top: 0;
    opacity: 1;
  }
}

.service-details-overlay .icon {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(32%, 32%);

  svg {
    width: 75svw;
    height: 75svw;
    stroke: var(--accent-color);
    stroke-width: 0.25;
    transition: transform 0.3s ease;
    z-index: 9;
    filter: drop-shadow(0 0 2rem hsl(from var(--accent-color) h s l / 0.5));
    opacity: 0.15;
  }
}

.service-details-overlay .details {
  position: relative;
  font-size: clamp(1rem, 2vw, 1.5rem);
  /* max-width: 60%; */
  margin-top: var(--spacing-md);
  /* margin-top: var(--spacing-sm); */

  top: -0.2em;
  opacity: 0;
  transition-property: opacity, top;
  transition-duration: 0.5s;
  transition-delay: 0.9s;

  .open & {
    top: 0;
    opacity: 1;
  }

  li {
    display: flex;
    align-items: center;
    /* border: 1px solid red; */
    line-height: 1.318;

    &:not(:last-child) {
      margin-bottom: var(--spacing-sm);
    }

    svg {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      margin-right: var(--spacing-md);
      color: var(--accent-color);
      fill: var(--accent-color);
    }
  }
}