.highlight-text {
  position: relative;
  display: inline-block;
  color: #ffffff;
  /* cor do texto */
  font-weight: bold;
}

.highlight-text::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1em;
  height: 60%;
  /* altura do destaque */
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* cor do highlight */
  z-index: -1;
}

.gradient-header {
  background: linear-gradient(180deg, rgba(238, 34, 135, 0.4) 0%, rgba(12, 10, 30, 0) 100%);
}

body {
    scroll-behavior: smooth;
}

/* Remove o fundo amarelo do hover do card */
#news .card:hover {
    background: none !important;
    transform: translateY(-20px);
}

/* Remove o overlay amarelo sobre a imagem */
#news .card:hover .image-over:before {
    background: none !important;
    opacity: 0 !important;
}

/* Remove efeito de blur e transformação na imagem */
#news .card:hover .image-over img {
    filter: none !important;
    transform: none !important;
}

/* Remove o destaque no texto no hover */
#news .highlight-text:hover {
    color: inherit !important;
}

/* Se necessário, remove qualquer fundo animado */
#news .effect-static-text {
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    background-clip: initial !important;
}

/* REMOVER HIGHLIGHT DA SESSAO DE SERVICOS */
/* Remove o fundo amarelo do hover do card */
#services .card:hover {
    background: none !important;
    transform: translateY(-20px);
}

/* Remove o overlay amarelo sobre a imagem */
#services .card:hover .image-over:before {
    background: none !important;
    opacity: 0 !important;
}

/* Remove efeito de blur e transformação na imagem */
#services .card:hover .image-over img {
    filter: none !important;
    transform: none !important;
}

/* Remove o destaque no texto no hover */
#services .highlight-text:hover {
    color: inherit !important;
}

/* Se necessário, remove qualquer fundo animado */
#services .effect-static-text {
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    background-clip: initial !important;
}

  /* BEGIN - SESSION PROCESS MAPPING */
.services-container {
  position: relative;
  width: 700px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 100px;
  background-color: rgba(22, 19, 44, 0.7);
  border: 1px solid rgba(192, 38, 211, 0.3);
  border-radius: 1rem;
  color: #e5e7eb;
  text-align: center;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.service-node:hover {
  transform: scale(1.05);
  border-color: rgba(236, 72, 153, 0.8);
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}

.service-node .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #f472b6;
  /* Rosa */
}

.central-node {
  width: 200px;
  height: 200px;
  background: linear-gradient(145deg, #1f1d36, #3d3b59);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  z-index: 10;
  border: 2px solid rgba(192, 38, 211, 0.5);
  box-shadow: 0 0 30px rgba(192, 38, 211, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.central-node .icon {
  width: 48px;
  height: 48px;
  color: #f9a8d4;
}

.lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Permite clicar através do SVG */
}

/* Em telas menores, mudamos o layout para uma lista vertical */
@media (max-width: 768px) {
  .services-container {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
  }

  .service-node {
    position: static;
    width: 80%;
    max-width: 350px;
  }

  .lines-container {
    display: none;
    /* Esconde as linhas no mobile */
  }

  .central-node {
    margin-bottom: 2rem;
    /* 32px */
  }
}
/* END - SESSION PROCESS MAPPING */