/* Estilos para los enlaces de WhatsApp */
.whatsapp-bottom {
    position: fixed; /* Fijar el contenedor en la pantalla */
    bottom: 10px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde la derecha */
    z-index: 1000; /* Coloca el contenedor encima de otros elementos */
    display: flex; /* Usa flexbox para alinear verticalmente los íconos */
    flex-direction: column; /* Los íconos estarán uno encima del otro */
}

.whatsapp-link {
    width: 60px; /* Tamaño del contenedor del ícono */
    height: 60px; /* Tamaño del contenedor del ícono */
    border-radius: 50%; /* Hacer el contenedor del ícono redondo */
    overflow: hidden; /* Ocultar contenido que desborde */
    transition: transform 0.3s ease, filter 0.3s ease; /* Transiciones */
    margin-bottom: 3px; /* Espacio entre los íconos */
    display: flex; /* Usa flexbox para centrar el ícono */
    align-items: center; /* Alinea verticalmente el ícono */
    justify-content: center; /* Centra el ícono horizontalmente */
}

.whatsapp-link:hover {
    transform: scale(1.1); /* Escalar el ícono al pasar el cursor */
    filter: brightness(1.2); /* Aumentar el brillo al pasar el cursor */
}

/* Estilos para los logos de WhatsApp dentro de los enlaces */
.whatsapp-link img {
    width: 60px; /* Tamaño del logo (ajusta según tu preferencia) */
    height: auto; /* Altura automática para mantener la proporción */
    border-radius: 50%; /* Hacer el logo redondo */
}

.whatsapp-link1 {
    width: 70px; /* Tamaño del contenedor del ícono */
    height: 70px; /* Tamaño del contenedor del ícono */
    border-radius: 50%; /* Hacer el contenedor del ícono redondo */
    overflow: hidden; /* Ocultar contenido que desborde */
    transition: transform 0.3s ease, filter 0.3s ease; /* Transiciones */
    margin-bottom: -10px; /* Espacio entre los íconos */
    display: flex; /* Usa flexbox para centrar el ícono */
    align-items: center; /* Alinea verticalmente el ícono */
    justify-content: center; /* Centra el ícono horizontalmente */
}

.whatsapp-link1:hover {
    transform: scale(1.1); /* Escalar el ícono al pasar el cursor */
    filter: brightness(1.2); /* Aumentar el brillo al pasar el cursor */
}

/* Estilos para los logos de WhatsApp dentro de los enlaces */
.whatsapp-link1 img {
    width: 70px; /* Tamaño del logo (ajusta según tu preferencia) */
    height: auto; /* Altura automática para mantener la proporción */
    border-radius: 50%; /* Hacer el logo redondo */
}
  
.logo {
    width: 175px; /* Tamaño del logo */
    margin-right: 10px; /* Espacio entre el logo y el texto */
}
.logo-animation {
    position: fixed;
    left: 10px; /* Espaciado izquierdo de 10px */
    top: -120px; /* Inicialmente, el logo está fuera de la pantalla arriba */
    animation: moveLogoDown 3s ease-in-out forwards; /* Control de animación */
    z-index: 1000; /* Coloca el logo encima del contenido */
    padding: 10px; /* Agregar padding de 10px */
}

/* Animación de desplazamiento desde arriba hasta el centro */
@keyframes moveLogoDown {
    0% {
        top: -120px; /* Fuera de la pantalla arriba */
    }
    100% {
        top: calc(92% - 120px); /* Alineado verticalmente en el centro */
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Puedes ajustar la distancia vertical */
    transition: opacity 0.5s ease, transform 0.5s ease;
}



/* Estilos para la clase fixed-top */
.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    animation: fadeInDown 0.5s;
}

/* Animación fadeInDown */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Media queries para tamaños de pantalla específicos */
@media (max-width: 768px) {
    /* Ajusta los estilos para pantallas más pequeñas aquí */
    .whatsapp-link,
    .whatsapp-link1 {
        width: 12vw;
        height: 12vw;
        margin-bottom: 1.5vw;
    }
    
    .logo {
        width: 12vw;
        margin-right: 1vw;
    }

    .logo-animation {
        left: 5%;
    }
}

.about-heading-img3 {
    opacity: 1; /* Opacidad inicial */
    animation: brilloIntermitente2 7s ; /* Animación de brillo intermitente */
  }
  
  /* Animación para el brillo intermitente */
  @keyframes brilloIntermitente2 {
    0% {
      opacity: 0; /* Opacidad inicial */
    }
    50% {
      opacity: 1; /* Brillo máximo */
    }
    100% {
      opacity: 1; /* Regresar a la opacidad inicial */
    }
  }

  
.masthead-subheading1 {
    overflow: hidden;
    position: relative;
}

.masthead-subheading1 img {
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

.masthead-subheading1.initial-effect img {
    transform: scale(1.3);
}

.masthead-subheading1:not(.initial-effect):hover img {
    transform: scale(1.3);
}




.timeline-panel {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}