@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* CSS Document */
.modalSyle {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(200 200 200 / 79%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2 !important;
}

.modal-wallia {
    width: 500px;
    min-height: 100px;
    background: #fff;
    position: relative;
    border-radius: 5px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 28px 0px;
    padding: 20px;
    max-height: 80%;
    overflow: auto;
}

.grupo-cerrar-ventana {
    max-width: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: end;
}

.cerrar-ventana-icon {
    width: 25px;
}

.icon-message-wallia00 {
    width: 65px;
    max-width: 90%;
}

.grupo-mensaje {
    max-width: 100%;
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.grupo-boton {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.mensaje-header {
    max-width: 100%;
    width: 100%;
    margin: 30px auto;
}

.mensaje-header h1 {
    font-size: 22px;
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    font-weight: 500;
    text-align: center;
}

.mensaje-texto {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 20px;
}

.mensaje-texto p {
    font-size: 18px;
    font-weight: 300;
    text-align: center;
}

.mensaje-saludos {
    max-width: 100%;
    width: 100%;
    margin-top: 12px;
}

button.boton-continuar {
    background-color: #2DC5F2 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.1em;
    border: none;
    height: 35px;
    width: 200px;
    max-width: 80%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
}

.waliitex {
    font-size: 22px;
    width: 300px;
    max-width: 90%;
    margin: 0 auto;
    font-weight: 500;
    text-align: center;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-style: normal;
}

:root {
    --swiper-navigation-size: height: 30px !important;
}

.swiper-button-next,
.swiper-button-prev {
    height: var(--swiper-navigation-size)
}

.vacant {
    font-size: 28px;
    color: #4282C3;
    font-weight: 700;
    position: relative;
    top: 4px;
}


.contenido {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.contenido-home {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: rgb(232, 232, 232);
    background: linear-gradient(187deg, rgba(232, 232, 232, 1) 0%, rgba(255, 255, 255, 1) 31%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 68%, rgba(245, 249, 255, 1) 100%);
}

.banner-wallia {
    margin: 0 auto 0;
    width: 100%;
    position: relative;
    background-image: url("images/banner-wallia.jpg");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px;
    display: flex;
}

.caja-banner {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 42px;
    color: #fff;
    margin: 0 auto 30px;
    width: 90%;
    font-weight: 400;
}

.azul {
    color: #2DC5F2;
}

h3 {
    font-size: 21px;
    color: #fff;
    margin: 0 auto 50px;
    width: 450px;
    font-weight: 300;
}

.btn-contactanos {
    background-color: #2DC5F2;
    width: 190px;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    height: 43px;
    justify-content: center;
    align-items: center;
    display: flex;
}


.contenido-icon-home {
    width: 100%;
    margin: 0;
    display: block;
    position: relative;
    top: 0;
    text-align: center;
}

.cajas-icon {
    margin: 60px auto;
    width: 1024px;
    max-width: 90%;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-box {
    width: 150px;
    max-width: 90%;
    height: 135px;
    display: flex;
    margin: 0 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-home {
    width: 120px;
    margin: 0px 0 10px;
}

.icon-text {
    color: #525252;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.4em;
}


.contenido-transform {
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    text-align: center;
    padding-bottom: 30px
}

.cajas-transform {
    width: 1204px;
    max-width: 100%;
    margin: 110px auto 0;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.transform-box1 {
    text-align: left;
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.caja-interior-transform {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    max-width: 90%;
    padding-left: 50px;
}

.transform-box2 {
    text-align: left;
    width: 100%;
    margin: 0 auto;
}

#image-trans {
    width: 100%;
    float: right;
}

.title-transform {
    color: #303030;
    font-size: 29px;
    margin: 0 auto;
    font-weight: 500;
    text-align: left;
    width: 100%;
}

.text-transform {
    color: #303030;
    font-size: 18px;
    margin: 20px auto 30px;
    font-weight: 300;
    line-height: 1.4em;
}

.btn-informacion {
    background-color: #2DC5F2;
    width: 180px;
    margin: 0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    height: 43px;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: left;
}


.contenido-clientes {
    width: 100%;
    margin: 50px auto;
    text-align: center;
}

h2 {
    color: #303030;
    font-size: 29px;
    margin: 0 auto 30px;
    font-weight: 500;
    text-align: left;
    width: 100%;
    text-align: center;
    max-width: 90% !important;
}

.clientes {
    width: 1024px;
    margin: 0 auto;
    max-width: 95%;
}

.cliente-logo {
    width: 170px;
    max-width: 90%;
    margin: 20px;
    vertical-align: middle;
}



.contenido-proceso {
    width: 100%;
    margin: 80px auto;
    text-align: center;
}

.text-do {
    color: #3B55A1;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin: 0 auto 10px;
    width: 100% !important;
}

.caja-proceso {
    width: 800px;
    margin: 80px auto;
    display: flex;
    flex-direction: row;
    max-width: 90%;
}

.paso {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

.paso-numero {
    width: 30%;
    margin: 0 auto;
}

.img-num {
    width: 90px;
    margin: 0 auto;
}

.paso-descripcion {
    width: 70%;
    margin: 0;
    text-align: left
}

.img-paso {
    width: 65px;
    margin: 10px 0 20px;
}

.paso-title {
    font-size: 18px;
    color: #303030;
    margin: 0 auto;
    text-align: left;
    font-weight: 500;
}

.paso-texto {
    font-size: 16px;
    color: #303030;
    margin: 10px auto;
    text-align: left;
    font-weight: 300;
    line-height: 1.4em;
}



.contenido-portfolio {
    margin: 80px auto;
    width: 100%;
}

.text-contamos {
    color: #3B55A1;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    margin: 20px auto 10px;
    width: 500px;
    max-width: 90%;
}

.titulo-portafolio {
    color: #303030;
    font-size: 29px;
    margin: 0 auto 30px;
    font-weight: 500;
    text-align: left;
    width: 500px;
    max-width: 80%;
}

.caja-portafolio {
    width: 1204px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.caja-portafolio-descrip {
    width: 50%;
    margin: 0 auto;
}

.caja-portafolio-image {
    width: 50%;
    margin: 0 auto;
}

.servcios-image {
    width: 100%;
    margin: 0 auto;
}

.servicios-portafolio {
    width: 100%;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
}

.portafolio-servicio {
    width: 500px;
    max-width: 80%;
    margin: 0 auto;
    padding: 30px 0;
    border-bottom: 1px solid #E2E2E2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.paloma-azul {
    width: 25px;
    margin: 0 20px 0 0;
}

.texto-portafolio {
    font-size: 18px;
    color: #303030;
    margin: 0 10px;
    text-align: left;
    line-height: 1.4em;
    font-weight: 300;
    width: 70%;
}

.flecha-azul {
    width: 23px;
    margin: 0;
    text-align: right;
    display: flex;
}



.contenido-foot {
    width: 100%;
    margin: 0 auto;
    background-color: #243A6D;
    padding: 40px 0 20px;
}

.cajas-foot {
    width: 1024px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}

.caja-uno-foot {
    width: 80%;
    margin: 0 5px 0 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}

.logo-white-foot {
    width: 90px;
    margin: 0;
}

.texto-foot-derechos {
    color: #fff;
    margin: 10px auto;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4em;
}

.list-foot {
    margin: 0 auto
}

.list-foot a {
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    margin: 0px auto;
}

.subtitle-foot {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 20px;
    text-align: left;
    width: 90%;
}

.caja-social-icon-foot {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.icon-social-foot {
    width: 30px;
    margin: 0 20px 0 0;
}

.page-foot {
    margin: 0 auto;
    display: block;
}


.info-img {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto 20px;
    display: flex;
    position: relative;
    top: 30px;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.informacion-header {
    width: 80%;
}

.imagen-h {
    width: 90%;
    display: contents;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.header-titulo {
    font-size: 38px;
    color: #303030;
    margin: 0 auto 30px;
    width: 90%;
    font-weight: 500;
}

.subtitulo-header {
    font-size: 20px;
    color: #4282C3;
    margin: 0 auto 10px;
    width: 90%;
    font-weight: 400;
}

.texto-header {
    font-size: 16px;
    color: #303030;
    margin: 0 auto 30px;
    width: 90%;
    font-weight: 300;
}

.image-head {
    width: 65%;
    margin: 0;
}

.image-head-appmobile {
    width: 65%;
    margin: 0;
}


/*
--------------------page clientes*/
.banner-section {
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: 30px;
}

.title-cliente {
    color: #303030;
    font-size: 22px;
    margin: 0 auto;
    font-weight: 400;
}

.text-cliente {
    color: #303030;
    font-size: 18px;
    margin: 20px auto 30px;
    font-weight: 300;
    width: 760px;
    line-height: 1.4em;
    max-width: 90%;
}


.tab-cliente {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
    text-align: center;
}

.title-marca {
    color: #fff;
    font-size: 20px;
    margin: 0px auto 30px;
    font-weight: 500;
    width: 90%;
    text-align: center;
}

.tabs-clientes {
    width: 1024px;
    max-width: 90%;
    background-color: #F7F7F7;
    margin: 0 auto;
}

.barra-marca {
    width: 100%;
    margin: 0;
    -webkit-box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.1);
    height: 70px;
    background-color: #fff;
    display: flex;
    flex-direction: colum;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: relative;
}

.flecha-cliente-left {
    width: 14px;
    margin: 0 10px;
    position: absolute;
    left: 5px;
    top: 25px;
}

.flecha-cliente-right {
    width: 14px;
    margin: 0 10px;
    position: absolute;
    right: 5px;
    top: 25px;
}

.marca-tab1 {
    width: 17.5%;
    margin: 0 6px;
    height: 63px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
marca-tab1:hover {
    cursor: pointer;
}

.marca-tab2 {
    width: 17.5%;
    margin: 0 6px;
    height: 63px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.marca-tab2:hover {
    cursor: pointer;
}

.marca-tab3 {
    width: 17.5%;
    margin: 0 6px;
    height: 63px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.marca-tab3:hover {
    cursor: pointer;
}

.marca-tab4 {
    width: 17.5%;
    margin: 0 6px;
    height: 63px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.marca-tab4:hover {
    cursor: pointer;
}

.marca-tab5 {
    width: 17.5%;
    margin: 0 6px;
    height: 63px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.marca-tab5:hover {
    cursor: pointer;
}

.active-tab {
    border-bottom: 4px solid #3A53A4;
    margin: 0;
    position: relative;
    top: 6px !important;
}

.mark-tab {
    width: 130px;
    position: relative;
    top: 0px;
    margin: 0;
    text-align: center;
}

.info-marca {
    width: 90%;
    margin: 60px 0;
    display: inline-block;
}

.box-tab-marca {
    width: 30%;
    margin-left: 30px;
    float: left;
}

.box-tab-marca1 {
    width: 60%;
    margin: 0 auto;
    float: left;
    text-align: left;
    padding: 0 20px;
}

.image-petco {
    width: 100%;
    margin: 0;
}

.image-clientes {
    width: 100%;
    margin: 0;
}

.title-marca-gray {
    font-size: 20px;
    color: #303030;
    text-align: left;
    margin: 0 auto 20px;
    font-weight: 500;
}

.app {
    font-size: 18px;
    color: #3b55a1;
    text-align: left;
    font-weight: 600;
    margin: 0 auto;
}


.app-system {
    font-size: 16px;
    color: #303030;
    text-align: left;
    font-weight: 400;
    margin: 0 auto;
}

.text-descripcion {
    width: 100%;
    margin: 20px auto;
    font-size: 15px;
    color: #303030;
    text-align: left;
    font-weight: 300;
    line-height: 1.3em;
}

.bullet-descrip {
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
    color: #303030;
    text-align: left;
    font-weight: 300;
    line-height: 1.3em;
}

.icon-check {
    width: 20px;
    margin: 0 6px 0 0;
    position: relative;
    top: 5px;
}


.detalle-cliente {
    margin: 20px auto 0;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.box-detalle {
    width: 24%;
    height: 80px;
    margin: 10px;
    background-color: #fff;
    border-radius: 9px;
    display: inline-block;
    padding: 10px 10px 15px;
    vertical-align: middle;
}

.icon-detalle {
    width: 50px;
    margin: 0;
}

.text-detalle {
    font-size: 12px;
    margin: 5px auto;
    color: #303030;
}


.contenido-cliente-product {
    width: 100%;
    margin: 20px auto 30px;
}

.title-green {
    font-size: 24px;
    color: #303030;
    margin: 0 auto 10px;
    width: 400px;
    font-weight: 600;
    text-align: center;
}

.box-product-cliente {
    width: 1024px;
    margin: 0 auto;
    max-width: 90%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.box-product-client {
    width: 90%;
    margin: 20px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
}

.icon-prod {
    width: 70px;
    margin: 0;
}

.product-title-icon {
    font-size: 16px;
    color: #303030;
    font-weight: 500;
    text-align: left;
    margin: 10px 0;
}

.product-text-icon {
    font-size: 15px;
    color: #303030;
    font-weight: 300;
    text-align: left;
    margin: 5px 0 15px;
    line-height: 1.4em;
}



.contact-section {
    width: 100%;
    margin: 40px auto 100px;
    display: inline-block;
}

.form-contact {
    display: flex;
    width: 1204px;
    max-width: 90%;
    margin: 30px auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.campo {
    display: inline-block;
    margin: 0 10px;
    position: relative;
    vertical-align: middle;
}
.errorMessage {
    color: red;
    font-size: 12px;
    position: absolute;
    margin: 0;
}

.label-contact {
    font-size: 16px;
    margin: 0 auto;
}

.campo-contact {
    background-color: #E9E9E9;
    border: none;
    border-radius: 4px;
    height: 35px;
    margin: 7px auto;
    width: 160px;
    color: #777770;
    padding: 0 10px;
}

#contact {
    background-color: #E9E9E9;
    border: none;
    height: 35px;
    padding: 0 0px 0 10px;
    margin: 7px auto;
    width: 180px;
    color: #777770;
    border-radius: 4px;
}

.enviar {
    background-color: #2DC5F2 !important;
    display: inline-block;
    border: none;
    height: 35px;
    width: 130px;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    position: relative;
    top: 8px;
    text-align: center;
}

/* Loader específico para el botón de contacto - solo para deshabilitar */
.wallia-contact-btn-loading {
    position: relative !important;
    pointer-events: none !important;
    background-color: #2DC5F2 !important;
}

@keyframes wallia-contact-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner loading con elemento interno */
.spinner-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wallia-contact-spin 1s linear infinite;
}

/* Loader específico para el botón de team */
.wallia-team-btn-loading {
    position: relative;
    pointer-events: none !important;
}

.wallia-team-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: wallia-team-spin 1s linear infinite;
}

@keyframes wallia-team-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*--------------------page clientes*/




/*--------------------page equipo*/

.team {
    width: 100%;
    margin: 40px auto;
    background-color: #F0F0F0;
    padding: 40px 0;
}

h4 {
    width: 90%;
    color: #4282C3;
    margin: 0 auto;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
}

.integrantes {
    width: 90%;
    margin: 50px auto 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.a-team {
    width: 30px;
    margin: 0 10px;
    vertical-align: middle;
}

.inte {

    width: 22%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 80px;
    vertical-align: top;
}

.img-inte {
    width: 150px;
    margin: 0 20px 0 0;
    vertical-align: middle;
}

.name-inte {
    font-size: 16px;
    color: #123F5A;
    margin: 10px auto 0;
    font-weight: 500;
    width: 100%;
}

.info-inte {
    display: inline-block;
    vertical-align: middle;
}

.cargo-inte {
    margin: 7px auto;
}

.pos-inte {
    margin: 7px auto;
    font-size: 14px;
}


.contenido-vacantes {
    width: 1024px;
    max-width: 90%;
    background-color: #F7F7F7;
    margin: 0 auto 30px;
    padding: 0 0 20px 0;
}

.btn-vacantes {
    width: 100% !important;
    margin: 0;
    display: flex;
}

.vacant-opcion {
    width: 50%;
    margin: 0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    padding: 0 10px;
    background-color: #F1F1F1;
    display: flex;
}

.text-vacante {
    font-size: 13px;
    color: #7F8F9A;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    font-weight: 400
}

.vacant-activo {
    background-color: #3b55a1;
}

.text-vacan-activo {
    font-weight: 500 !important;
    color: #fff !important;
}

.vacante-descrip {
    width: 90%;
    margin: 40px auto 0;
}

.title-vacant-des {
    font-size: 18px;
    color: #3b55a1 ;
    font-weight: 500;
    margin: 0;
}

.icon-vacant {
    width: 50px;
    margin: 0 15px 0 0px;
    position: relative;
    top: 18px;
}

.texto-vacant-descrip {
    font-size: 14px;
    line-height: 1.5em;
    margin: 10px auto 30px;
    font-weight: 400;
    color: #303030;
    width: 95%;
    text-align: justify;
    display: inline-block;
}

.subtitle-vacante {
    font-size: 16px;
    line-height: 1.5em;
    margin: 0px auto;
    font-weight: 500;
    color: #303030;
    width: 95%;
}


/*--------------------page contacto*/
.contacto-datos {
    width: 100%;
    margin: 70px auto 60px;
}

.cajas-contacto {
    margin: 0 auto;
    text-align: center;
    width: 1024px;
    max-width: 90%;
}

.box-contact-datos {
    width: 45%;
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
}

.subtitle-contact {
    font-size: 16px;
    color: #303030;
    font-weight: 600;
    margin: 0px auto;
    text-align: left;
    padding-top: 20px;
}

.text-contact-datos {
    font-size: 14px;
    line-height: 1.5em;
    margin: 20px auto;
    font-weight: 400;
    color: #123F5A;
    width: 100%;
    text-align: left;
}

.datos {
    font-size: 16px;
    line-height: 1.5em;
    margin: 20px auto;
    font-weight: 400;
    color: #303030;
    width: 100%;
    text-align: left;
}

.icon-datos {
    width: 35px;
    margin: 0 10px 0 0;
    position: relative;
    top: 10px;
}

.map {
    width: 400px;
    margin: 30px 0;
    max-width: 90%;
}


.form-fondo {
    background-color: #F7F7F7;
    padding: 20px 30px 80px;
    width: 500px;
    max-width: 95%;
    border-radius: 8px;
}

.form-contact-datos {
    width: 500px;
    max-width: 95%;
    margin: 0;
    text-align: left;
}

.campo-datos {
    width: 100%;
    margin: 20px auto;
}

.label-contact-datos {
    font-size: 16px;
    margin: 0 auto;
    width: 100%;
    text-align: left;
}


.campo-contact-datos {
    background-color: #E9E9E9;
    border: none;
    height: 40px;
    margin: 5px auto;
    display: inline-block;
    width: 100%;
    color: #303030;
    padding: 0 0px 0 10px;
    box-sizing: border-box;
}

.campo-contact-datos-mensaje {
    background-color: #E9E9E9;
    border: none;
    height: 90px;
    margin: 7px auto;
    display: inline-block;
    width: 100%;
    color: #303030;
    padding: 0 0px;
}

#contact-datos {
    background-color: #E9E9E9;
    border: none;
    height: 40px;
    margin: 5px auto;
    width: 100%;
    color: #303030;
    padding: 0 0px 0 10px;
    border-radius: 0 !important;
}

.enviar-datos {
    background-color: #2DC5F2 !important;
    border: none;
    height: 30px;
    width: 130px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    position: relative;
    text-align: center;
    top: 8px;
    float: right;
    margin: 0 auto;
    cursor: pointer;
}



/*---------------------servicios*/

.contenido-services {
    width: 800px;
    max-width: 90%;
    margin: 0 auto 60px;
    padding: 0 0 20px 0;
}

.caja-servicios1 {
    display: flex;
    width: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.servicios-contenido {
    border-radius: 10px;
    background-color: #fff;
    margin: 20px;
    text-align: center;
    padding: 30px 20px;
    width: 200px;
    -webkit-box-shadow: 0px 0px 11px -7px rgb(0 0 0 / 50%);
    box-shadow: 0px 0px 11px -7px rgb(0 0 0 / 50%);
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.icono-servicio {
    width: 60px;
    margin: 0;
}

.icono-servicio1 {
    width: 65px;
    margin: 0;
}

.texto-servicio-caja {
    width: 190px;
    margin: 10px auto;
    height: 40px;
}

.mas-info-servicio {
    background-color: #3a53a4;
    border: none;
    margin: 7px auto;
    padding: 10px 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    width: 180px;
    max-width: 95%;
}


.subtitulo-serivcio-int {
    font-size: 20px;
    color: #123F5A;
    margin: 0 auto 5px;
    width: 90%;
    font-weight: 300;
}

.contenedor-btn {
    width: 90%;
    margin: 0 auto;
}

.btn-servicio-contact {
    background-color: #2DC5F2;
    width: 190px;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    height: 43px;
    border: none;
}

.btn-service-mas {
    display: contents;
    margin: 0 auto;
    text-decoration: none;
}

.texto-que-es {
    width: 750px;
    max-width: 90%;
    margin: -20px auto 90px;
    text-align: center;
    font-weight: 300;
    color: #303030;
    line-height: 1.4em;
}

.steps-services {
    width: 800px;
    max-width: 90%;
    margin: 0 auto 100px;
    padding: 0 0 20px 0;
}

.pasos-servicio {
    width: 100%;
    margin: 30px 0;
    display: flex;
}

.step-box {
    margin: 0 auto 20px;
    width: 50%;
    display: flex;
    vertical-align: top;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
}

.number-step {
    background-color: #3A53A4;
    border-radius: 100%;
    padding: 15px 15px;
    height: 10px;
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    line-height: 0.50em;
}

.titulo-step {
    font-size: 18px;
    color: #3A53A4;
    font-weight: 600;
    margin: 10px 10px;
}

.texto-step {
    font-size: 16px;
    color: #303030;
    font-weight: 400;
    margin: 15px 10px;
    width: 200px;
}


.mas-info-servicio:hover {
    background-color: #2F416D;
    cursor: pointer;
}


.contenido-ventajas {
    width: 100%;
    margin: 0;
    background-color: #F1F1F1;
}

.contenido-interior-ventaja {
    display: flex;
    width: 1204px;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto 60px;
}

.imagen-ventaja {
    width: 50%;
    margin: 0;
    position: relative;
}

#img-ventaja {
    width: 400px;
    margin: 0;
    position: absolute;
    left: 25%;
    top: -220px;
}

.contenido-info-ventaja {
    width: 80%;
    margin: 0 auto;
    padding: 50px 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.iconos-ventaja {
    display: flex;
    width: 100%;
    margin: 0;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.caja-ventaja {
    background-color: #fff;
    width: 135px;
    margin: 0 10px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 25px -7px rgb(225 225 225 / 50%);
    box-shadow: 0px 0px 25px -7px rgb(225 225 225 / 50%);
}

.texto-ventaja {
    width: 90%;
    margin: 20px auto 0;
    text-align: center;
}

.icon-ventaja {
    width: 80px;
}





@media screen and (max-width: 1180px) {

    #img-ventaja {
        width: 350px;
        margin: 0;
        position: absolute;
        left: 20%;
        top: -190px;
    }

}


@media screen and (max-width: 1024px) {

    #img-ventaja {
        width: 350px;
        margin: 0;
        position: absolute;
        left: 0%;
        top: -190px;
    }


}

@media screen and (max-width: 900px) {

    .contenido-interior-ventaja {
        display: flex;
        margin: 0 0 30px;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .imagen-ventaja {
        width: 90%;
        margin: 0 auto;
        position: relative;
        text-align: center;
    }

    #img-ventaja {
        width: 400px;
        margin: 0;
        position: relative;
        left: 0;
        top: -45px;
    }

    .contenido-info-ventaja {
        width: 80%;
        margin: -40px auto 0;
        padding: 0px 10px 50px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }


}



@media screen and (max-width: 845px) {
    .box-tab-marca1 {
        width: 60%;
        margin: 0 auto;
        float: left;
        text-align: left;
        padding: 0 10px;
    }

    .title-transform {
        font-size: 25px;
        margin: 0 auto;
    }

    .text-transform {
        font-size: 16px;
        margin: 20px auto 30px;
        line-height: 1.2em;
    }


    .header-titulo {
        font-size: 34px;
        margin: 0 auto 20px;
        width: 90%;
    }

    .marca-tab1 {
        width: 21%;
    }

    .marca-tab2 {
        width: 21%;
    }

    .marca-tab3 {
        width: 21%;
    }

    .marca-tab4 {
        width: 21%;
    }

    .marca-tab5 {
        display: none;
    }

}

@media screen and (max-width: 800px) {

    .box-tab-marca1 {
        width: 60%;
        margin: 0 auto;
        float: left;
        text-align: left;
        padding: 0 10px;
    }

    .icon-box {
        width: 150px;
        height: 135px;
        display: flex;
        margin: 0 40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .icon-home {
        width: 100px;
        margin: 0px 0 0px;
    }

    .icon-text {
        color: #525252;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.4em;
    }


    h1 {
        font-size: 32px;
        margin: 0 auto 30px;
    }

    h3 {
        font-size: 18px;
        margin: 0 auto 50px;
        width: 55%;
        font-weight: 300;
    }

    .banner-wallia {
        margin: 0;
        background-position: top right;
        background-size: cover;
        background-repeat: no-repeat;
        height: 500px;
    }




    .informacion-header {
        width: 90%;
    }

    .imagen-h {
        width: 90%;
    }

    .header-titulo {
        font-size: 28px;
        margin: 0 auto 20px;
        width: 90%;
    }

    .subtitulo-header {
        font-size: 18px;
        color: #4282C3;
        margin: 0 auto 10px;
        width: 90%;
        font-weight: 400;
    }

    .texto-header {
        font-size: 14px;
        color: #303030;
        margin: 0 auto 30px;
        width: 90%;
        font-weight: 300;
    }

    .btn-servicio-contact {
        width: 180px;
        margin: 0 auto;
        border-radius: 5px;
        font-size: 18px;
        height: 40px;
    }


    .form-contact {
        display: flex;
        width: 1024px;
        max-width: 100%;
        margin: 30px auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    #contact {
        padding: 0 0px 0 10px;
        margin: 7px auto;
        width: 130px;
    }

    .campo-contact {
        background-color: #E9E9E9;
        border: none;
        height: 35px;
        margin: 7px auto;
        width: 130px;
        color: #777770;
        padding: 0 10px;
    }


    .contenido-portfolio {
        margin: 70px auto;
        width: 100%;
    }

    .text-contamos {
        color: #3B55A1;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        margin: 20px auto 10px;
        width: 90%;
    }

    .titulo-portafolio {
        color: #303030;
        font-size: 26px;
        margin: 0 auto 30px;
        font-weight: 500;
        text-align: center;
        width: 90% !important;
    }

    .caja-portafolio {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .caja-portafolio-descrip {
        width: 90%;
        margin: 0 auto;
    }

    .caja-portafolio-image {
        width: 90%;
        margin: 0 auto;
    }

    .servcios-image {
        width: 100%;
        margin: 0 auto;
    }

    .servicios-portafolio {
        width: 100%;
        margin: 30px auto;
        display: flex;
        flex-direction: column;
    }

    .portafolio-servicio {
        width: 500px;
        max-width: 90%;
        margin: 0 auto;
        padding: 30px 0;
        border-bottom: 1px solid #E2E2E2;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .paloma-azul {
        width: 25px;
        margin: 0 20px 0 0;
    }

    .texto-portafolio {
        font-size: 18px;
        color: #303030;
        margin: 0 10px;
        text-align: left;
        line-height: 1.4em;
        font-weight: 300;
        width: 70%;
    }

    .flecha-azul {
        width: 23px;
        margin: 0;
        text-align: right;
        display: flex;
    }


}


@media screen and (max-width: 740px) {


    .cajas-transform {
        width: 1204px;
        max-width: 100%;
        margin: 110px auto 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .transform-box1 {
        text-align: center;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .caja-interior-transform {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        width: 90%;
        max-width: 90%;
        padding-left: 0px;
    }

    .transform-box2 {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    #image-trans {
        width: 90%;
        float: none;
        margin: 30px auto 0;
    }

    .title-transform {
        color: #303030;
        font-size: 26px;
        margin: 0 auto;
        font-weight: 500;
        text-align: center;
        width: 90%;
    }

    .text-transform {
        color: #303030;
        font-size: 16px;
        margin: 20px auto 30px;
        font-weight: 300;
        line-height: 1.4em;
    }

    .btn-informacion {
        background-color: #2DC5F2;
        width: 180px;
        margin: 0 auto 20px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        height: 43px;
        justify-content: center;
        align-items: center;
        display: flex;
        text-align: left;
    }


    .caja-proceso {
        width: 800px;
        margin: 60px auto;
        display: flex;
        flex-direction: row;
        max-width: 90%;
    }

    .img-num {
        width: 60px;
        margin: 0 auto;
    }

    .img-paso {
        width: 50px;
        margin: 10px 0 20px;
    }


    .box-product-cliente {
        width: 90%;
        margin: 0 auto;
        max-width: 90%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    .box-product-client {
        width: 90%;
        margin: 20px auto 20px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .icon-prod {
        width: 70px;
        margin: 0 auto;
    }

    .product-title-icon {
        font-size: 16px;
        color: #303030;
        font-weight: 500;
        text-align: center;
        margin: 10px 0;
    }

    .product-text-icon {
        font-size: 15px;
        color: #303030;
        font-weight: 300;
        text-align: center;
        margin: 5px 0 15px;
        line-height: 1.4em;
    }



}




@media screen and (max-width : 712px) {

    .info-marca {
        width: 90%;
        margin: 30px 0 20px;
    }

    .marca-tab1 {
        width: 26%;
        margin: 0 15px;
    }

    .marca-tab2 {
        width: 26%;
        margin: 0 15px;
    }

    .marca-tab3 {
        width: 26%;
        margin: 0 15px;
    }

    .marca-tab4 {
        display: none
    }

    .marca-tab5 {
        display: none
    }

    .box-tab-marca {
        width: 50%;
        margin: 0 auto;
        float: none;
    }

    .box-tab-marca1 {
        width: 90%;
        margin: 30px auto;
        float: left;
        text-align: center;
        padding: 0 20px;
    }

    .image-petco {
        width: 151px;
        margin: 0;
    }

    .title-marca-gray {
        font-size: 20px;
        text-align: center;
    }

    .app {
        font-size: 16px;
        text-align: center;
    }

    .app-system {
        font-size: 14px;
        text-align: center;
        margin: 0 auto;
    }

    .text-descripcion {
        width: 100%;
        margin: 20px auto;
        font-size: 14px;
        color: #303030;
        text-align: center;
    }

    .bullets-marca {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: inline-grid;
        justify-content: center;
    }

    .bullet-descrip {
        width: 100%;
        margin: 8px 0;
        font-size: 14px;
        color: #303030;
        text-align: left;
        font-weight: 300;
        line-height: 1.3em;
    }

    .icon-check {
        width: 20px;
        margin: 0 6px 0 0;
        position: relative;
        top: 5px;
    }


    .detalle-cliente {
        margin: 20px auto 0;
        text-align: center;
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .box-detalle {
        width: 90%;
        height: 80px;
        margin: 10px auto;
        border-radius: 9px;
        display: inline-block;
        padding: 20px 10px 15px;
        vertical-align: middle;
    }

    .icon-detalle {
        width: 50px;
        margin: 0;
    }

    .text-detalle {
        font-size: 12px;
        margin: 5px auto;
    }


    .contacto-datos {
        width: 100%;
    }

    .box-contact-datos {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .subtitle-contact {
        margin: 0px auto;
        text-align: center;
        padding-top: 20px;
    }

    .text-contact-datos {
        font-size: 14px;
        margin: 20px auto;
        width: 90%;
        text-align: center;
    }

    .datos {
        font-size: 16px;
        margin: 20px auto;
        color: #303030;
        width: 210px;
        text-align: left;
        display: block;
    }

    .map {
        width: 400px;
        margin: 30px 0 50px;
        max-width: 90%;
    }


    .form-fondo {
        margin: 0 auto;
        text-align: center;
        padding: 20px 0px 85px;
        width: 100%;
    }

    .form-contact-datos {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }



    .campo-datos {
        width: 100%;
        margin: 20px auto;
    }

    .label-contact-datos {
        font-size: 16px;
        margin: 0 auto;
        width: 100%;
        text-align: left;
    }

    .campo-contact-datos {
        background-color: #E9E9E9;
        border: none;
        height: 30px;
        margin: 7px auto;
        display: inline-block;
        width: 100%;
        color: #303030;
        padding: 0 0px;
    }

    .campo-contact-datos-mensaje {
        background-color: #E9E9E9;
        border: none;
        height: 90px;
        margin: 7px auto;
        display: inline-block;
        width: 100%;
        color: #303030;
        padding: 0 0px;
    }

    #contact-datos {
        background-color: #E9E9E9;
        border: none;
        height: 30px;
        padding: 0 0px 0 10px;
        margin: 7px auto;
        width: 100%;
        color: #303030;
    }

    .enviar-datos {
        background-color: #2DC5F2 !important;
        border: none;
        height: 40px;
        width: 150px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        border-radius: 5px;
        position: relative !important;
        text-align: center;
        top: 8px;
        float: right;
        margin: 0 auto;
    }


    .inte {
        width: 24%;
        display: block;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 0px 40px;
    }

    .info-inte {
        display: inline-block;
        vertical-align: middle;
        width: 150px;
        margin: 0 autp;
        text-align: center;
    }

    .a-team {
        width: 20px;
        margin: 0 10px;
        vertical-align: middle;
    }

    .img-inte {
        width: 130px;
        margin: 0 10px 0 0;
        vertical-align: middle;
    }


    .cajas-foot {
        width: 1024px;
        max-width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .caja-uno-foot {
        width: 90%;
        margin: 0 auto 25px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .logo-white-foot {
        width: 90px;
        margin: 0 auto;
    }

    .texto-foot-derechos {
        color: #fff;
        margin: 10px auto 0;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.4em;
        text-align: center;
    }

    .list-foot {
        text-align: center;
    }

    .list-foot a {
        text-decoration: none;
        color: #fff;
        font-size: 17px;
        font-weight: 400;
        margin: 0px auto;
    }

    .subtitle-foot {
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        text-align: center;
    }

    .caja-social-icon-foot {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .icon-social-foot {
        width: 30px;
        margin: 0 20px;
    }

    .page-foot {
        margin: 0 auto;
        display: block;
    }


}


@media screen and (max-width: 670px) {

    h2 {
        color: #303030;
        font-size: 26px;
        margin: 0 auto 30px;
        font-weight: 500;
        text-align: left;
        width: 100%;
        text-align: center;
        max-width: 90% !important;
    }

    .cliente-logo {
        width: 130px;
        max-width: 90%;
        margin: 20px;
        vertical-align: middle;
    }




    .title-transform {
        font-size: 22px;
        margin: 0 auto;
    }

    .text-transform {
        font-size: 14px;
        margin: 20px auto 30px;
        line-height: 1.2em;
        width: 100%;
    }



    .texto-que-es {
        width: 80%;
        margin: -20px auto 60px;
        text-align: center;
        font-weight: 300;
        color: #303030;
        line-height: 1.4em;
    }


}


@media screen and (max-width : 655px) {



    .title-cliente {
        font-size: 20px;
    }

    .text-cliente {
        width: 80%;
    }


    .do-one {
        width: 100%;
        margin: 0;
        padding: 40px 0;
        height: auto;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left;
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        flex-direction: column;
        align-content: center;
        flex-wrap: nowrap;
    }

    .do-dos {
        width: 100%;
        margin: 0;
        background-color: #4282C3;
        height: auto;
        display: inline-block;
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 30px 0;
    }





}

@media screen and (max-width: 650px) {


    h2 {
        font-size: 24px;
        margin: 0 auto 30px;
        width: 90%;
        max-width: 90% !important;
    }

    .cliente4 {
        display: none;
    }

    .cliente5 {
        display: none;
    }

    .cliente6 {
        display: none;
    }

    .cliente1 {
        width: 25%;
    }

    .cliente2 {
        width: 25%;
    }

    .cliente3 {
        width: 25%;
    }



    .text-do {
        color: #3B55A1;
        font-size: 18px;
    }

    .caja-proceso {
        width: 800px;
        margin: 0px auto 0;
        display: flex;
        flex-direction: column;
        max-width: 90%;
    }

    .paso {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .paso-numero {
        width: 90%;
        margin: 0 auto;
    }

    .img-num {
        width: 80px;
        margin: 0 auto;
    }

    .paso-descripcion {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .img-paso {
        width: 70px;
        margin: 10px auto 20px;
    }

    .paso-title {
        font-size: 18px;
        color: #303030;
        margin: 0 auto;
        text-align: center;
        font-weight: 500;
    }

    .paso-texto {
        font-size: 16px;
        color: #303030;
        margin: 10px auto;
        text-align: center;
        font-weight: 300;
        line-height: 1.4em;
    }


    .title-green {
        font-size: 24px;
        margin: 0 auto 10px;
    }



}



@media screen and (max-width: 768px) {


    .info-img {
        width: 90%;
        margin: 0 auto;
        display: flex;
        padding: 20px 0;
        position: relative;
        top: 25px;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    .informacion-header {
        width: 90%;
    }

    .imagen-h {
        width: 90%;
    }


    .header-titulo {
        font-size: 32px;
        margin: 0 auto 20px;
        width: 90%;
        text-align: center;
    }

    .subtitulo-header {
        font-size: 18px;
        color: #4282C3;
        margin: 0 auto 10px;
        width: 90%;
        font-weight: 400;
        text-align: center;
    }

    .texto-header {
        font-size: 14px;
        color: #303030;
        margin: 0 auto 30px;
        width: 90%;
        font-weight: 300;
        text-align: center;
        line-height: 1.3em;
    }

    .image-head {
        width: 90%;
        margin: 15px auto 0;
        text-align: center;
    }

    .image-head-appmobile {
        width: 90%;
        margin: 0 0 10px;
    }


    .caja-servicios1 {
        display: flex;
        width: 100%;
        margin: 0;
        align-items: center;
        justify-content: center;
    }

    .servicios-contenido {
        margin: 20px;
        padding: 30px 20px;
        width: 150px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .texto-servicio-caja {
        width: 95%;
        margin: 20px auto 0;
        height: 40px;
        font-size: 13px;
    }



    .subtitulo-serivcio-int {
        font-size: 20px;
        color: #123F5A;
        margin: 0 auto 5px;
        width: 90%;
        font-weight: 300;
        text-align: center;
    }

    .contenedor-btn {
        width: 90%;
        margin: 0 auto 35px;
        text-align: center;
    }

    .pasos-servicio {
        width: 100%;
        margin: 0px 0;
        display: flex;
        flex-direction: column;
    }

    .step-box {
        margin: 0 auto;
        width: 90%;
        display: flex;
        vertical-align: top;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }

    .number-step {
        font-size: 19px;
        font-weight: 500;
        line-height: 0.50em;
        margin: 10px auto
    }

    .titulo-step {
        font-size: 18px;
        margin: 10px 10px;
        text-align: center;
    }

    .texto-step {
        font-size: 16px;
        margin: 15px 10px 30px;
        width: 90%;
        text-align: center
    }


    #img-ventaja {
        width: 80%;
        margin: 0;
        position: relative;
        left: 0;
        top: -45px;
    }

    .iconos-ventaja {
        display: flex;
        width: 100%;
        margin: 0;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .caja-ventaja {
        background-color: #fff;
        width: 200px;
        margin: 10px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0px 0px 25px -7px rgb(225 225 225 / 50%);
        box-shadow: 0px 0px 25px -7px rgb(225 225 225 / 50%);
    }

    .texto-ventaja {
        width: 90%;
        margin: 20px auto 0;
        text-align: center;
    }

    .icon-ventaja1 {
        width: 45px;
    }

    .icon-ventaja2 {
        width: 63px;
    }

    .icon-ventaja3 {
        width: 55px;
    }


    .marca-tab1 {
        margin: 0 10px;
        width: 40%;
    }

    .marca-tab2 {
        margin: 0 10px;
        width: 40%;
    }

    .flecha-cliente-left {
        width: 12px;
        margin: 0 10px;
        position: absolute;
        left: 5px;
        top: 25px;
    }

    .flecha-cliente-right {
        width: 12px;
        margin: 0 10px;
        position: absolute;
        right: 5px;
        top: 25px;
    }

    .marca-tab3 {
        display: none
    }

}




@media screen and (max-width: 560px) {

    .cajas-icon {
        margin: 20px auto;
        width: 1024px;
        max-width: 90%;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .icon-box {
        width: 150px;
        height: 135px;
        display: flex;
        margin: 20px 40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .icon-home {
        width: 100px;
        margin: 0px 0 0px;
    }

    .icon-text {
        color: #525252;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.4em;
    }


    .cajas-transform {
        width: 1204px;
        max-width: 100%;
        margin: 60px auto 30px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .title-transform {
        font-size: 22px;
        margin: 0 auto;
        text-align: center;
    }

    .text-transform {
        font-size: 14px;
        margin: 20px auto 30px;
        line-height: 1.2em;
        width: 100%;
    }

    .btn-informacion {
        background-color: #2DC5F2;
        width: 180px;
        margin: 0 auto;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        height: 40px;
        justify-content: center;
        align-items: center;
        display: flex;
        text-align: center;
    }




    .form-contact {
        display: flex;
        margin: 30px auto 70px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .campo {
        display: inline-block;
        margin: 5px 10px;
        vertical-align: middle;
    }

    .campo-contact {
        background-color: #E9E9E9;
        border: none;
        height: 35px;
        margin: 7px auto;
        width: 280px;
        color: #777770;
        padding: 0 10px;
    }

    #contact {
        padding: 0 10px;
        margin: 7px auto;
        width: 300px;
    }

    .enviar {
        height: 43px;
        width: 300px;
        font-size: 16px;
        font-weight: 600;

    }


    .title-vacant-des {
        font-size: 16px;
        font-weight: 500;
        float: left;
        display: flex;
        align-items: center;
    }

    .icon-vacant {
        width: 50px;
        margin: 0 15px 0 0px;
        position: relative;
        top: 0px;
    }




}


@media screen and (max-width: 500px) {
    .active-tab {
        border-bottom: 6px solid #3A53A4;
        margin: 0 30px 0 13px;
        position: relative;
        top: 5px !important;
    }


    .title-cliente {
        font-size: 16px;
    }

    .text-cliente {
        font-size: 14px;
        width: 80%;
    }

    .cliente-logo {
        width: 110px;
        max-width: 90%;
        margin: 10px;
        vertical-align: middle;
    }


    .title-green {
        font-size: 20px;
        margin: 0 auto 0px;
        width: 80%;
    }


    .a-team {
        width: 14px;
        margin: 0px 0px;
        vertical-align: middle;
    }

    .img-inte {
        width: 85px;
        margin: 0 10px 0 0;
        vertical-align: middle;
    }

    .info-inte {
        width: 85px;
        margin: 0 autp;
        text-align: center;
    }

    .name-inte {
        font-size: 15px;
        margin: 10px auto 0;
    }

    .pos-inte {
        margin: 7px auto;
        font-size: 12px;
    }

    .cargo-inte {
        margin: 7px auto;
        font-size: 12px;
    }

    .inte {
        width: 27%;
        display: block;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 0px 26px;
       /* vertical-align: top;*/
    }


    .caja-servicios1 {
        display: flex;
        width: 100%;
        margin: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .servicios-contenido {
        margin: 20px;
        padding: 30px 20px;
        width: 210px;
        max-width: 90%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }





    .paloma-azul {
        width: 20px;
        margin: 0 10px 0 0;
    }

    .texto-portafolio {
        font-size: 15px;
        color: #303030;
        margin: 0 10px;
        text-align: left;
        line-height: 1.4em;
        font-weight: 300;
        width: 50%;
    }

    .flecha-azul {
        width: 23px;
        margin: 0;
        text-align: right;
        display: flex;
    }


}



@media screen and (max-width: 420px) {

    .caja-banner {
        margin: 60px auto 20px;
    }

    h1 {
        font-size: 28px;
        margin: 0 auto 30px;
    }

    h3 {
        font-size: 16px;
        margin: 0 auto 50px;
        width: 85%;
        font-weight: 300;
    }

    .marca-tab1 {
        margin: 0 20px;
        width: 80%;
    }

    .marca-tab2 {
        display: none;
    }


    .title-green {
        font-size: 24px;
        margin: 0 auto 10px;
        width: 90%;
    }

}

@media screen and (max-width: 400px) {

    .modal-wallia {
        width: 450px;
        max-width: 90%;
        margin: 0 auto;
        padding: 15px 20px 25px;
    }

    .cerrar-ventana-icon {
        width: 20px;
    }

    .icon-message-wallia00 {
        width: 55px;
        max-width: 90%;
    }

    .mensaje-header h1 {
        font-size: 18px;
    }

    .waliitex {
        font-size: 18px;
    }

    .mensaje-texto p {
        font-size: 14px;
    }



}


@media screen and (max-width: 350px) {
    .caja-banner {
        margin: 60px auto 20px;
    }

    h1 {
        font-size: 24px;
        margin: 0 auto 30px;
    }

    h3 {
        font-size: 15px;
        margin: 0 auto 50px;
        width: 85%;
        font-weight: 300;
    }

    .campo-contact {
        background-color: #E9E9E9;
        border: none;
        height: 35px;
        margin: 7px auto;
        width: 260px;
        color: #777770;
        padding: 0 10px;
    }

    #contact {
        padding: 0 10px;
        margin: 7px auto;
        width: 280px;
    }

    .enviar {
        height: 43px;
        width: 280px;
        font-size: 16px;
        font-weight: 600;
    }


    #img-ventaja {
        width: 270px;
        margin: 0;
        position: relative;
        left: 0;
        top: -45px;
    }

}