.contact-btn-services {
  all: unset;
  position: relative;
  border: 1px solid var(--color-grey);
  border-radius: 50px;
  padding: 1rem 5rem;
  font-size: 16px;
  background-color: rgba(36, 36, 36, 0.5);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  mask-image: radial-gradient(#fff, #000);
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  color: #dcdadb;
  transition: color 0.3s ease, border-color 0.3s ease;
    opacity: 0;
  transform: translateY(10px);
  animation: fadeInHeroButton 0.6s ease-out 0.3s forwards;
}

.contact-btn-services.bright {
    background-color: var(--color-grey);
    color: var(--color-dark);
    border: none;
  border: 1px solid var(--color-grey);
    padding: 1rem 4rem;


}

.contact-btn-services.bright:hover {
    background-color: rgba(36, 36, 36, 0.5);
    color: var(--color-grey);
}

@keyframes fadeInHeroButton {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.contact-btn-services:hover {
  color: rgb(255, 255, 255);
  border-color: #717171;
}

.contact-btn-services::after {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 5em;
  height: 5em;
  background-image: conic-gradient(#00f, #0ff, #0f0, #ff0, #f00, #f0f, #00f);
  filter: blur(14px);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}