/* Animaciones para los elementos de texto */
.hero-title, .hero-sub-title, .hero-info, .hero-link {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.hero-title.show {
    opacity: 1;
    transform: translateX(0);
}

.hero-sub-title.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.hero-info.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.hero-link.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* Animación para la imagen */
.hero-img-img {
    opacity: 0;
    transform: translateX(100px) translateY(-100px) rotate(-25deg);
    transition: opacity 0.3s ease-out, transform 0.4s ease-out;
    transition-delay: 0.4s;
}

.hero-img-img.show {
    opacity: 1;
    transform: translateX(0) rotate(0);
}


/* Animaciones para los elementos de info-text */
.info-text-title, .info-text-more-info {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.info-text-title.show {
    opacity: 1;
    transform: translateY(0);
}

.info-text-more-info.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* Animaciones para los elementos del about */
.about-img img, .about-title, .about-sub-title, .about-info, .about-link {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.about-img img.show {
    opacity: 1;
    transform: translateX(0);
}

.about-title.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.about-sub-title.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

.about-info.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

.about-link.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;
}
/* Animaciones para los elementos de services-container */
.services-title, .service {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.services-title.show {
    opacity: 1;
    transform: translateX(0);
}

.service:nth-child(1).show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.service:nth-child(2).show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.service:nth-child(3).show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* Animación para la imagen */
.services-img img {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.4s;
}

.services-img img.show {
    opacity: 1;
    transform: translateX(0);
}



/* Animaciones para los elementos de info-text-2 */
.contact-modal-sub-title, .contact-modal-title, #contact-modal-btn {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.contact-modal-sub-title {
    transform: translateY(100px);
}

.contact-modal-title {
    transform: translateY(100px);
}

#contact-modal-btn {
    transform: translateY(100px);
}

/* Aplicar animaciones cuando los elementos tienen la clase show */
.contact-modal-sub-title.show {
    opacity: 1;
    transform: translateY(0);
}

.contact-modal-title.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

#contact-modal-btn.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}


/* Animaciones para los elementos de qualities */
.qualities-title,
.qualities-container-imgs img,
.qualitie {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Título */
.qualities-title {
    transform: translateY(-100px);
}

/* Imagen 1 */
.qualities-container-imgs .qualities-container-imgs-1 {
    transform: translateX(-100px);
}

/* Qualities items */
.qualitie {
    transform: translateX(-100px);
}

/* Imagen 2 */
.qualities-container-imgs .qualities-container-imgs-2 {
    transform: translateX(-100px);
}

/* Capacitación y desarrollo */
.qualitie-4 {
    transform: translateX(-100px);
}

/* Aplicar animaciones cuando los elementos tienen la clase show */
.qualities-title.show {
    opacity: 1;
    transform: translateY(0);
}

.qualities-container-imgs .qualities-container-imgs-1.show {
    opacity: 1;
    transform: translateX(0);
}

.qualitie.show {
    opacity: 1 !important;
    transform: translateX(0);
}

.qualities-container-imgs .qualities-container-imgs-2.show {
    opacity: 1;
    transform: translateX(0);
}

.qualitie-4.show {
    opacity: 1;
    transform: translateX(0);
}

/* Añadir retrasos para las animaciones en el orden deseado */
.qualitie.show:nth-of-type(1) {
    transition-delay: 0.1s;
}

.qualitie.show:nth-of-type(2) {
    transition-delay: 0.2s;
}

.qualitie.show:nth-of-type(3) {
    transition-delay: 0.3s;
}

.qualitie.show:nth-of-type(4) {
    transition-delay: 0.4s;
}

.qualities-container-imgs .qualities-container-imgs-2.show {
    transition-delay: 0.5s;
}



/* Animaciones para el contenedor de contacto */
.contact {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.contact-form-title,
.contact-form-img,
.contact-form-description,
.contact-form-description-2 {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Animación de izquierda a derecha */
.contact-form-title {
    transform: translateX(-100px);
}

.contact-form-img {
    transform: translateX(-100px);
}

.contact-form-description {
    transform: translateX(-100px);
}

.contact-form-description-2 {
    transform: translateX(-100px);
}

/* Animaciones simultáneas */
.form,
.contact-form-nombre,
.contact-form-email,
.contact-form-telefono,
.contact-form-mensaje,
.contact-form-btn {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Aplicar animaciones cuando los elementos tienen la clase show */
.contact.show {
    opacity: 1;
}

.contact-form-title.show {
    opacity: 1;
    transform: translateX(0);
}

.contact-form-img.show {
    opacity: 1;
    transform: translateX(0);
}

.contact-form-description.show {
    opacity: 1;
    transform: translateX(0);
}

.contact-form-description-2.show {
    opacity: 1;
    transform: translateX(0);
}

/* Elementos del formulario */
.form.show,
.contact-form-nombre.show,
.contact-form-email.show,
.contact-form-telefono.show,
.contact-form-mensaje.show,
.contact-form-btn.show {
    opacity: 1;
    transform: translateX(0);
}


/* Animaciones para el texto de incentivo */

.info-text-3-sub-title,
.info-text-3-title,
.info-text-3-link {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Animación de abajo hacia arriba */
.info-text-3-sub-title {
    transition-delay: 0.1s;
}

.info-text-3-title {
    transition-delay: 0.2s;
}

.info-text-3-link {
    transition-delay: 0.3s;
}

/* Aplicar animaciones cuando los elementos tienen la clase show */
.info-text-3.show {
    opacity: 1;
}

.info-text-3-sub-title.show,
.info-text-3-title.show,
.info-text-3-link.show {
    opacity: 1;
    transform: translateY(0);
}



/* Aplicar animaciones cuando los elementos tienen la clase show */

.news-ads-img {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.1s;
}

/* Título */
.news-ads-title {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.1s;
}

/* Subtítulo */
.news-ads-sub-title {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.2s;
}

/* Información */
.news-ads-info {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.3;
}

/* Botón */
.news-ads-link {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.4s;
}

/* Aplicar animaciones cuando el contenedor tiene la clase show */
.news-ads-img.show,
.news-ads-title.show,
.news-ads-sub-title.show,
.news-ads-info.show,
.news-ads-link.show {
    opacity: 1;
    transform: translateX(0);
}



/* frequent questions */

.fq-header{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.1s;
}

.fq-ul{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.2s;
}


.fq-img{
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.3s;
}


.fq-header.show,
.fq-ul.show,
.fq-img.show{
    opacity: 1;
    transform: translateX(0px);
}


/* about page */

.mv-container .mv .item,
.about-history{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    transition-delay: 0.1s;
}

.mv-container .mv .item.show,
.about-history.show{
    opacity: 1;
    transform: translateX(0px);
}