body {
    background-image: url("/assets/img/fondo.png");
    background-repeat: no-repeat;
    background-size: cover
    }

h1 {
    background: linear-gradient(90deg, #AD5CFE 18%, #40B3F3 26%, #FCFCFC 53%, #40B3F3 73%, #AD5CFE 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     font-size: 4em !important;
      
}

@media (max-width: 540px) {
  h1 {
    font-size: 3em !important;
  }
}

.name {

        background: linear-gradient(90deg, #AD5CFE 18%, #40B3F3 26%, #FCFCFC 53%, #40B3F3 73%, #AD5CFE 85%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
         font-size: 2em !important; 
}

.name-small {
    font-size: 1.65em !important; 
}
h2 {
    color: white !important;
}
h4 {
    color: white !important;
}
/* .pic {
    width: 400px;
    max-width: 200px !important;
} */
.card-pic {
    width: 200px !important;
   
}

/* Asegúrate de que el contenedor de la imagen sea relativo para posicionar el contenido dentro */
.card-style {
    position: relative;
    background-color: #ffffff00 !important;
}

/* Ocultar el contenido por defecto */
.overlay-content {
    display: none; /* Estará oculto inicialmente */
    background: rgba(0, 0, 0, 0.804); /* Fondo semitransparente */
    padding: 20px;
    border-radius: 10px;
    color: white;
}

/* Agregar transición para el contenido */
.overlay-content h2,
.overlay-content i {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Cuando se hace hover en la imagen, mostrar el contenido */
.card-style:hover .overlay-content {
    display: block;
}

/* Puedes agregar más efectos si lo deseas */
.overlay-content h2,
.overlay-content i {
    opacity: 1;
}

.card-style {
    position: relative;
    width: 100%; /* Mantiene un diseño responsivo */
    max-width: 200px; /* Ajusta este valor según sea necesario */
    text-align: center;
    border: none !important;
  }
  
  .pic {
    width: 100%;
    border-radius: 20px; /* Ajusta las esquinas de la imagen */
    transition: transform 0.3s ease, opacity 0.3s ease;
    
  }
  
  .overlay-content {
    display: none; /* Oculto inicialmente */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0); /* Fondo semitransparente */
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    width: 80%; /* Ajusta el tamaño del overlay */
    text-align: center;
  }
  
  .name {
    font-size: 16px;
    font-weight: bold;
  }
  
  .linkedin-icon {
    width: 24px;
    height: 24px;
    margin-top: 5px;
    transition: transform 0.3s ease;
  }
  
  .card-style:hover .pic {
    /* transform: scale(1.1); Amplía la imagen al pasar el mouse */
    opacity: 0.3; /* Oscurece un poco la imagen */
  
  }

  .contenedor-card:hover {
    transform: scale(1.1);
    background-color: black !important;
  }
  
  .card-style:hover .overlay-content {
    display: block; /* Muestra el contenido superpuesto */
  }
  
  .card-style:hover .linkedin-icon {
    transform: scale(1.2); /* Agranda ligeramente el ícono al pasar el mouse */
  }