body {
      margin: 0;
      padding: 0;
      background-color: #ffffff; /* fundo da página */
      color: #fff; /* texto padrão em branco, se precisar */
    }

    #portfolio {
      max-width: 1200px;
      margin: auto;
      padding: 10px 0;
    }

    .swiper-slide {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* slide principal (meio) */
    .swiper-slide-active {
      transform: scale(1.2);
      opacity: 1;
    }

    /* os vizinhos ficam médios */
    .swiper-slide-next,
    .swiper-slide-prev {
      transform: scale(1.05);
      opacity: 1;
    }

    /* os das pontas ficam menores/esmaecidos */
    .swiper-slide {
      opacity: 1;
      transform: scale(0.5);
      transition: opacity 0.3s ease;
    }

.swiper-slide img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: auto;
  border: 12px solid #FECEDE; /* <<< esta é a borda que você quer */
}





    .portfolio-swiper {
      position: relative;
    }

    .portfolio-swiper::before,
    .portfolio-swiper::after {
      content: "";
      position: absolute;
      top: 0;
      width: 120px;   /* largura do fade */
      height: 100%;
      z-index: 2;     /* acima dos slides */
      pointer-events: none;
    }

    .portfolio-swiper::before {
      left: 0;
      background: linear-gradient(to right, #ffffff, transparent);
    }

    .portfolio-swiper::after {
      right: 0;
      background: linear-gradient(to left, #ffffff, transparent);
    }

    /* garante que as setas ficam acima do fade */
    .swiper-button-next,
    .swiper-button-prev {
      z-index: 3;
      color: #EC268F !important;
    }
h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1em; /* Um pouco maior para dar mais presença */
  font-weight: 600; /* Aumenta o peso da fonte para mais destaque */
  color: white; /* Mantém a cor vibrante dos h2 */
  margin: 50px 0 10px;
  text-align: center; /* Centraliza o texto para dar mais impacto */
  letter-spacing: 3px; /* Aumenta o espaçamento entre letras para dar um toque moderno */
  text-transform: uppercase; /* Deixa o texto em maiúsculas para mais ênfase */
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 0, 150, 0.5); /* Sombra forte para destacar */
  padding-bottom: 6px; /* Ajusta o espaçamento entre o título e a linha */
  transition: all 0.3s ease; /* Transição suave para efeitos de hover */
  background-image: linear-gradient(90deg, cyan, magenta, yellow); /* Gradiente de borda */
  background-size: 100% 2px; /* Tamanho da linha igual ao traço */
  background-repeat: no-repeat; /* Evita que o degradê se repita */
  background-position: bottom; /* Posiciona o degradê na parte inferior do título */
}

h4:hover {
  color: #EC268F; /* Muda para branco ao passar o mouse para maior destaque */
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 0, 150, 0.7); /* Intensifica a sombra no hover */
  transform: translateY(-3px); /* Efeito de elevação no hover */
}