@media (max-width: 1024px) {
    .container-1 {
        width: 100%;
        position: relative;
        height: 30vh;
        overflow: hidden;
        padding: 0px 0px 0px;
    }

    .container-1 .container-1-- {
        padding: 0px 30px 0px 30px;
    }

    .container-1 .container-1-- .element-text-container h1 {
        font-size: 2em;
        margin: 0;
    }

    .container-1 .container-1-- .element-text-container h2 {
        font-size: 1em;
        margin: 10px 0;
    }

    .container-2 {
        padding: 30px 30px 10px 30px;
    }

    .container-2 .element-text-container h1 {
        font-size: 30px;
    }

    .container-2 .element-text-container p {
        font-size: 18px;
        text-align: justify;
    }

    .container-2 .element-image-container .element-img-1 {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .container-3 {
        padding: 30px 30px 10px 30px;
    }

    .container-3 .container-3-- {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .container-3 .container-3-- .element-content {
        flex: 1;
        width: 100%;
        text-align: center;
        padding: 0 20px;
    }

    .container-3 .element-content .element-icon {
        width: 250px;
        height: auto;
        margin-bottom: 20px;
    }

    .container-4 {
        padding: 30px 30px 10px 30px;
    }

    .container-4 .container-4-- {
        display: flex;
        flex-direction: column;
    }

    .container-4 .container-4-- .element-image-container {
        order: 2;
        padding-right: 0px;
    }

    .container-4 .container-4-- .element-text-container {
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    .container-4 .container-4-- .element-text-container h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .container-4 .container-4-- .element-text-container .content-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: justify;
        padding: 0px 20px 0px 0px;
    }

    .container-4 .container-4-- .element-text-container .content-section .element-h2-1 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .container-4 .container-4-- .element-text-container .content-section .element-p-1 {
        font-size: 14px;
        text-align: justify;
    }

    .container-5 {
        padding: 30px 30px 10px 30px;
        overflow-x: hidden; /* Evita el desplazamiento inesperado */
    }

    .container-5 .element-h2-1 {
        font-size: 30px;
        margin-bottom: 10px;
    }
    
    .container-5 .container-5-- {
        overflow-x: auto; /* Permite el desplazamiento horizontal */
        scroll-snap-type: x mandatory; /* Activar el snap en el eje x */
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /* Cambiado a flex-start para alinear correctamente */
        flex-wrap: nowrap;
        gap: 0px;
        padding-left: 12px; /* Asegura que el contenido no se desplace fuera de la pantalla */
    }
    
    .container-5 .container-5-- .element-content {
        flex: 0 0 100%; /* Asegura que cada item ocupe el 100% del contenedor */
        padding: 20px;
        background-color: var(--color-white);
        scroll-snap-align: start; /* Alinea el inicio del item al hacer scroll */
        box-sizing: border-box;
    }

    .container-6 {
        padding: 30px 30px 10px 30px;
    }

    .container-6 .element-h2-1 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .container-6 .container-6-- {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 20px;
    }

    .container-cotizacion {
        padding: 30px 30px 10px 30px;
    }
}

/* Estilos para pantallas moviles */

/* Mostrar la imagen de computadora en pantallas grandes */
@media (min-width: 728px) {
    .container-1 .mobile {
        display: none;
    }
    .container-1 .desktop {
        display: block;
    }
}

/* Mostrar la imagen móvil en pantallas pequeñas */
@media (max-width: 727px) {
    .container-1 .desktop {
        display: none;
    }
    .container-1 .mobile {
        display: block;
    }
}

@media (max-width: 728px) {
    .container-1 {
        width: 100%;
        position: relative;
        height: 60vh;
        overflow: hidden;
        padding: 0px 0px 0px;
    }

    .container-1 .container-1-- {
        padding: 0px 12px 0px 12px;
    }

    .container-1 .container-1-- .element-text-container h1 {
        font-size: 2em;
        margin: 0;
    }

    .container-1 .container-1-- .element-text-container h2 {
        font-size: 0.8em;
        margin: 10px 0;
    }

    .container-1 .container-1-- .element-text-container button {
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.8em;
    }

    .container-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 30px 12px 30px 12px;
    }

    .container-2 .container-2-- {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .container-2 .container-2-- .element-text-container {
        width: 100%;
        padding-right: 0px;
    }

    .container-2 .container-2-- .element-text-container h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .container-2 .container-2-- .element-text-container p {
        font-size: 14px;
        text-align: justify;
    }

    .container-2 .container-2-- .element-text-container button {
        margin: 0px 0px 20px 0px;
    }

    .container-2 .container-2-- .element-image-container {
        flex: 1;
        width: 100%;
        text-align: right;
    }

    .container-3 {
        display: flex;
        flex-direction: column;
        padding: 50px 12px 0px 12px;
    }

    .container-3 .container-3-- {
        display: flex;
        flex-direction: column;
    }

    .container-3 .container-3-- .element-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 20px 0px 0px 0px;
    }

    .container-3 .container-3-- .element-content .element-icon {
        width: 200px;
        height: auto;
        margin-bottom: 20px;
    }

    .container-3 .container-3-- .element-content .element-title {
        font-size: 24px;
        line-height: 32px;
    }

    .container-3 .container-3-- .element-content .element-description {
        font-size: 14px;
        text-align: justify;
    }

    .container-4 {
        padding: 30px 12px 0px 12px;
    }

    .container-4 .container-4-- {
        display: flex;
        flex-direction: column;
    }

    .container-4 .container-4-- .element-image-container {
        order: 2;
        padding-right: 0px;
    }

    .container-4 .container-4-- .element-text-container {
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    .container-4 .container-4-- .element-text-container h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .container-4 .container-4-- .element-text-container .content-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: justify;
        padding: 0px 20px 0px 0px;
    }

    .container-4 .container-4-- .element-text-container .content-section .element-h2-1 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .container-4 .container-4-- .element-text-container .content-section .element-p-1 {
        font-size: 14px;
        text-align: justify;
    }

    .container-5 {
        padding: 20px 12px;
        overflow-x: hidden; /* Evita el desplazamiento inesperado */
    }

    .container-5 .element-h2-1 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .container-5 .container-5-- {
        overflow-x: auto; /* Permite el desplazamiento horizontal */
        scroll-snap-type: x mandatory; /* Activar el snap en el eje x */
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /* Cambiado a flex-start para alinear correctamente */
        flex-wrap: nowrap;
        gap: 0px;
        padding-left: 12px; /* Asegura que el contenido no se desplace fuera de la pantalla */
    }
    
    .container-5 .container-5-- .element-content {
        flex: 0 0 100%; /* Asegura que cada item ocupe el 100% del contenedor */
        padding: 20px;
        background-color: var(--color-white);
        scroll-snap-align: start; /* Alinea el inicio del item al hacer scroll */
        box-sizing: border-box;
    }

    .container-6 {
        padding: 20px 12px;
        overflow-x: hidden; /* Evita el desplazamiento inesperado */
    }

    .container-6 .element-h2-1 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .container-cotizacion {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 30px 12px 20px;
    }

    .container-cotizacion .element-form-1 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .container-cotizacion .element-form-group {
        width: 100%;
        margin-bottom: 20px;
    }
    

}