@media (max-width: 768px) {


    .mainbox{
        width: 100%;
    }


/* ///////////////Slider/////////////// */

@keyframes slide-animation {
    100% { transform: translateY(100%); opacity: 0; } /* Fuera de la pantalla */
    50% { transform: translateY(100%); opacity: 0; } /* Sale hacia la izquierda */
    30% { transform: translateY(0); opacity: 1; }  /* Pausa en el centro durante 3 segundos */
    20% { transform: translateY(0); opacity: 1; }  /* Se posiciona en el centro */
    0% { transform: translateY(-100%); opacity: 0; } /* Comienza fuera, entrando desde la derecha */
}

    .text-slider-wrapper {
        display: flex;
    }

    .text-slider {
        display: flex; /* Flexbox para organizar los textos */
        flex-direction: row; /* Textos en una fila horizontal */
        white-space: wrap; /* Evita que los textos se envuelvan */
        margin: 0; /* Sin márgenes */
        padding: 0; /* Sin relleno */
        z-index: 3;
    }
    
    .slide {
        display: inline-block; /* Textos en línea */
        animation: slide-animation 12s ease-in-out infinite; /* Animación continua */
        font-size: 2rem;
    }


/* ///////////////Banner/////////////// */

    .banner {
        height: 750px;
    }

.h1banner{
    width: 90%;
    .logobanner{
        width: 80%
    }
    h1 {
        font-size: 2rem;
        text-align: center;
    }
}


/* ///////////////Section Nosotros/////////////// */


    .us{
        /* background-color: red; */
        margin-top: 60px;
        margin-bottom: 100px;
        width: 100%;
    
        p{
            width: 90%;
            font-family: "Roboto", sans-serif;
            font-size: 1.8rem;
            font-weight: 300;
            text-align: center;
            color: rgb(0, 0, 0);
            justify-content: center;
        }
    
    }
    
    .carroussel-wrapper {
        width: 100%; /* Ajusta al ancho completo del contenedor */
    }
    
    .carroussel img {
        width: 250px;
        height: 250px;
    }

/* ///////////////Section Servicios/////////////// */

.services::before,
.services::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    filter: brightness(0.6); /* Aplica el filtro de brillo solo al fondo */
}

.services::before {
    background-image: url('../assets/images/services/nsfondo2.png'); /* Imagen superior */
    animation: paneoAnimation 80s infinite linear; /* Animación de 10 segundos, continua y fluida */
}

.services::after {
    background-image: url('../assets/images/services/nsfondo1.png'); /* Imagen inferior */
    z-index: -2; /* Debajo de la imagen superior */
}

/* Animación para paneos de revelación de izquierda a derecha */
@keyframes paneoAnimation {
    0% {
        clip-path: inset(0  0 100% 0); /* Imagen superior completamente oculta en la parte derecha */
    }
    50% {
        clip-path: inset(0 0 0 0); /* Imagen superior se muestra completamente al desplazarse hacia la izquierda */
    }
    100% {
        clip-path: inset(0  0 100% 0); /* Imagen superior se oculta completamente nuevamente deslizándose hacia la derecha */
    }
}
.services::before {
    animation-timing-function: ease-in-out;
}

.services h2 {
    margin-top: 100px;
    margin-bottom: 50px;
    color: rgb(255, 255, 255);
    font-family: "Poppins", serif;
    font-size: 3rem;
    text-align: center;
}

.services p {
    width: 90%;
    text-shadow: 4px 6px 6px rgba(0, 0, 0, 0.5);
}

.services .serviceitemcontainer {
    width: 90%;
}

/* ///////////////Section beneficios/////////////// */

.flipboxcontainer {
    width: 100%;
    gap: 10px;
}
    
.flipbox {
    width: 360px; /* Ajusta según sea necesario */
    height: 220px; /* Ajusta según sea necesario */
    
}

.flipbox-front,
.flipbox-back {
    border-radius: 5px;
}

.touchicon{
    display: block;
  }

/* ///////////////Section ventajas/////////////// */


.advantages {
    position: relative; /* Necesario para posicionar la capa */
    width: 100%;
    height: auto;    
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-around;
    background-size: cover;
    background-position: top ;
    background-attachment: fixed;
    z-index: 1;
    overflow: hidden; /* Evita que el overlay salga del contenedor */
}

.advcontainer {
    flex-direction: column;
}




/* ///////////////Section Equipos/////////////// */

.equipment {
    width: 100%;
    margin-top: 70px;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.equipmentinfo {
    /* background-color: red; */
    width: 90%;
    padding-bottom: 70px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.equipmentleft {

    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    
}

.equipmentmainimg {
    display: none;
    width: 100%;
    height: auto;
    /* background-color: blue; */
}

.equipmentmainquery {
    display: block;
    width: 100%;
    height: auto;
    /* background-color: blue; */
}

.equipmentsliderimg {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.equipmentright {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;

    
}

.equipmentitem{
    width: 80%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
}

h3{
    color:rgb(0, 0, 0);
    font-family: "Poppins", serif;
    font-size: 2rem;
    text-align: center;
}
p{
    width: 80%;
    font-family: "Roboto", sans-serif;
    font-size: 1.7rem;
    text-align: center;
    color: rgb(0, 0, 0);
    justify-content: center;
    font-weight: 300;
}

.equipmentinfo {
    display: flex;
    flex-direction: column;
  }

  .equipmentleft {
    display: flex;
    flex-direction: column;
    order: 2; /* Asegura que la sección izquierda esté después de la derecha */
  }

  .equipmentright {
    order: 1; /* La sección derecha será la primera */
  }

  .equipmentmainimg {
    order: 2; /* El primer img (t50) será el segundo */
  }

  .equipmentslider-container {
    order: 3; /* El slider será el tercer elemento */
        position: relative;
        width: 100%; /* Ajusta el ancho según lo necesario */
        padding: 30px;
        overflow: hidden; /* Asegúrate de ocultar el contenido que desborda */
        display: flex;
        align-items: center;
  }

  .equipmentslider {
    order: 4; /* Las imágenes dentro del slider aparecerán después */
  }

  .equipmentitem {
    order: 5; /* Los items con las imágenes se colocan después */
  }

  .equipmentitem img {
    width: 30px;
    height: 30px;
  }

  .equipmentitem p {
    order: 6; /* Los textos debajo de cada imagen */
  }





.contact-footer {
    height: 800px;
}

.contact-content {
    width: 300px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
  }

}