/* Estilos generales */
.servicios {
  background-image: url('/img/playstation1.jpeg');
  /* background-size: cover;
  background-repeat: no-repeat; */
  background-attachment: fixed;
}

.servicio__animation {
  border-radius: 2rem;
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  width: 100%;
  position: relative; /* Agregamos posición relativa para que funcione la superposición */
  overflow: hidden; /* Ocultar el contenido que desborda */
  opacity: 0;
  transform: translateY(50px);
  transition: transform 1s ease-out, opacity 1s ease;
  /* background-color: var(--white-supbyte); */
}

.servicio__animation--entry {
  opacity: 1;
  transform: translateY(0);
}

.banner {
  
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  height: 11rem;
  display: flex;
  justify-content: center;
  position: absolute; /* Posición absoluta para superponer la imagen */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.3s; /* Agregamos una transición de opacidad */
  align-items: center;
}

.banner img {
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  height: 8rem;
  transform: translateY(50%);
  transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  width: 8rem;
  align-items: center;
  justify-content: center;
  position: absolute;
}


/* Contenido de la tarjeta */
.card h2.titulo {
  margin: 15px ;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  color: var(--black-supbyte);
}

.card .desc {
  line-height: 150%;
  padding: 0 2rem 2.5rem;
  text-align: center;
  font-size: 15px;
  transition: opacity 0.3s;
  font-family: 'Sora', sans-serif;
  color: var(--black-supbyte);
}

.servicio__tittle {
  text-align: center;
  color: white;
  padding-top: 20px;
  text-shadow: 
    4px 4px 4px rgb(10, 10, 36),
    4px 4px 4px rgb(10, 10, 36),
    4px 4px 4px rgb(10, 10, 36),
    4px 4px 4px rgb(10, 10, 36);
}

.servicio__tittle h2 {
  position: relative;
  display: inline-block;
}

.servicio__tittle h2::after {
  content: "";
  background-color: #07dd58;
  border-radius: 20px;
  position: absolute;
  width: 100%;
  height: 5px;
  left: 0;
  top: 100%;
}

@media (max-width: 768px) {

  /* .col-md-4 {
    margin: 20px ;
  } */

  .servicio__animation {
    width: 90%; /* Cambiamos el ancho para que se adapte mejor a pantallas más pequeñas */
    margin: 0 auto; /* Centramos la tarjeta horizontalmente */
  }
  
  .banner {
    height: 8rem; /* Ajustamos la altura de la imagen de banner */
  }
  
  .banner img {
    height: 6rem; /* Ajustamos el tamaño de la imagen de perfil */
    width: 6rem; 
    /* margin-top: px; */
  }
  
  .card .desc {
    font-size: 14px; /* Reducimos el tamaño de fuente para pantallas más pequeñas */
  }
}
.card h2.titulo {
  margin: 40px 0 15px 0;

  text-align: center;
  font-size: 20px;
}