* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    font-family: 'Poppins', sans-serif;
}

:root {

    --unnamed-color-ffffff: #FFFFFF;
    ---01022e-darkblue: #01022E;
    ---4800ff-purple: #4800FF;
    ---5584eb-lightblue: #5584EB;
    ---12d57d-green: #12D57D;
    ---ffbb00-yellow: #FFBB00;
    ---ff649e-pink: #FF649E;

    --unnamed-font-family-poppins: Poppins;
--unnamed-font-style-normal: normal;
--unnamed-font-weight-bold: bold;
--unnamed-font-weight-medium: medium;
--unnamed-font-size-35: 35px;
--unnamed-font-size-72: 72px;
--unnamed-character-spacing-0: 0px;
--unnamed-line-spacing-53: 53px;
--unnamed-line-spacing-98: 98px;

}

.unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-35);
    line-height: var(--unnamed-line-spacing-53);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
    }
    .unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-72);
    line-height: var(--unnamed-line-spacing-98);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(---12d57d-green);
    }
    .unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-poppins);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-72);
    line-height: var(--unnamed-line-spacing-98);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
    }

/*header*/

.lenguage {
    background-color: #5584EB;
    height: 56px;
    width: 100%;
    padding: 0 4%;
    margin: 0;
    display: flex;
    justify-content: right;
    align-items: center;
}

.container-lenguage {
    background-color: #01022E;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3px 15px;
    border-radius: 26px;
    margin-right: 30px;
}

.text-lenguage {
    font-size: .9em;
    font-weight: bold;
    color: white;
    padding: 0;
    margin: 0;

}

.lenguage-arrow {
    margin-left: 15px;
}

.icon-arrow {
    height: .5rem;
}


.lenguage-options {
margin-left: 15px;
}

.icon-lenguage {
    height: 1em;
}

.menu {
    background: transparent linear-gradient(180deg, var(---01022e-darkblue) 0%, #000000 100%) 0% 0% no-repeat padding-box;
    height: 76px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.logo {
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
}

.logo-img {
    height: 38px;
}




.menu-options {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-navbar-options {
    display: flex;
    align-items: right;
    justify-content: space-between;
    width: 100%;
}


.menu_items {
    display: flex;
    list-style: none;
    margin-right: 0px;
}

.menu_items .list-nav {
    margin: 0 5px;
}

/* list nav --------------------------*/

.menu_items .list-nav .title-menu{
    padding: 7px 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1em;
    color: white;
}


.menu_items .list-nav-resources .title-menu{
    padding: 7px 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1em;
    color: white;
}

.menu_items .list-nav-solutions .title-menu{
    padding: 7px 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.3em;
    color: white;
}


/* second menu nav bar */
.menu-navbar-login {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 20%;
    padding-left: 40%;
}



.menu_items-second {
    display: flex;
    list-style: none;
    margin-right: 6rem;
    
}

.menu_items-second .list-nav{
    margin: 10px 15px 10px 15px;
    display: flex;
    text-align: center;
}

.menu_items-second .list-nav .title-menu{
    /* padding: 7px 25px; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1em;
    padding: 0;
    color: white;
}

.freetrial {
    /* background-color: #FF649E; */
    width: 100px;
    color: white;
    text-decoration: none;
    text-align: center;
}


.trial {
    background-color: #4800FF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7em;
    border-radius: 8px;
    padding: .4em .6em;
    cursor: pointer;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    margin-left: 20%;
}







.menu-bar {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 40px;
    cursor: pointer;

}
.icon-navbar {
    width: 2em;    
    border: 2px solid #FFFFFF;
    margin: 3px;
   
}

.menu-navbar-options {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-menu {
    align-items: center;

}

ul.show {
    top: 65px;

}

/* nav bar menu drop  ----------------------------- */

.menu-bar-drop {
    box-shadow: 10px 10px 60px #00000029;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: none;
    position: relative
}

.list-menu-bar-drop {
background-color: white;
padding: 5%;
}

.bar-drop {
    list-style: none;

}

.title-bar-drop {
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
}

/* nav menu drop  ----------------------------- */

.drop-solutions-list {
    display: none;
    position: absolute;
    /* background-color: turquoise; */
    background-color: white;
    width: 300px;
    top: 130px;
    /* min-width: 160px; */
    box-shadow: 10px 10px 60px #00000029;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
     z-index: 1; 
    list-style: none;
    padding: 15px;
    transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
}




.drop-resources-list {
    display: none;
    position: absolute;
    background-color: white;
    top: 130px;
    /* min-width: 160px; */
    box-shadow: 10px 10px 60px #00000029;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
     z-index: 1; 
    list-style: none;
    padding: 15px;
    transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -ms-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;

}


/* lists menu ---------------*/

 .list-nav-resources:hover .drop-resources-list {
    display: block;
    text-decoration: none;
}




.list-nav-solutions:hover .drop-solutions-list{
    display: block;
    text-decoration: none;
}  



.arrow-drop-menu {
    /* background-color: #5584EB; */
    padding: 5px 5px 5px 5px;
    width: 20px;
    height: 20px;
    margin-top: 10px;
}

.item-drop {
    color: black;
    padding: 10px;
    font-size: 1rem;
    text-decoration: none;
}



.list-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-nav-solutions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-nav-resources {
    display: flex;
    align-items: center;
    justify-content: center;
}


.contaner-menu-item-solutions {
    display: flex;
    align-items: center;
}


.list-menu-drop-resource  {
    text-decoration: none;
    list-style: none;
}

.list-menu-drop-solutions {
    text-decoration: none;
    list-style: none;
    
}


.list-nav-solutions{
    list-style: none;
    color: white;
    font-size: .8rem;
    letter-spacing: .2px;
    font: normal normal normal Poppins;
    border-left: 1px solid black;
    padding-left: 20px;
    text-align: left;
}



/*main*/

.onboarding {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0%;
}

.text-onboarding {
 display: flex;
 align-items: flex-start;
 justify-content: left;
 flex-direction: column;
 margin: 7% 0% 0% 0%;
 padding-left: 7%;
}



h1 {
    font-weight: bolder;
    color: black;
    text-align: left;
    margin: 0% 0% 3% 0%;
    width: 90%;
    font-size: 2.6rem;
    line-height : 55px;
}

h3 {
    text-align: left;
    margin: 0%;
    width: 60%;
    color: black;
    font-weight: 600;
    letter-spacing: var(--unnamed-character-spacing-0);
    font-size: 1.2rem;
}

.buttom-whatsapp {
    border-radius: 15px;
    background-color: #12D57D;
    color: white;
    font: var(--unnamed-font-style-normal) normal 600 21px/69px var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    padding: 0% 6%;
    font: normal normal 600 21px/69px Poppins;
    margin: 5% 0%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.4rem;
}

.buttom-whatsapp:hover {
    background-color: #5584EB;
}

.icon-whatsapp {
margin-left: 20px;
color: #FFFFFF;
font-size: 2.5rem;
}

.banner {
    background-image: url("../img/Banner\ principal\ Imagen.png") ;
	width: 40rem;
    height: 30rem;
    display: flex;
    align-items: center;
    justify-content: end;
    background-position: left 20%;
    background-repeat: no-repeat;
    background-size: 40em;
    margin: 4% 0 0 0 ;
    
}

.banner-central{
    width: 750px;
    height: 350px;
}

/* brands */

.clients {
    background-color: #F0F0F0;
    height: 5%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.client-text {
    color: black;
    font: var(--unnamed-font-style-normal) normal normal 14px/20px var(--unnamed-font-family-poppins);
    padding: 5% 10% 0% 10%;
    text-align: center;
   /* responsive descktop font-size: 1.5rem;*/
    font-size: 1.5rem;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10% 0% 0% 0%;
    background-image: url("../svg/logos\ empresas.svg") ;
    background-repeat: no-repeat;
    background-size: 70em;
    margin: 3% 0% 0% 20%;
    
}

/* benefits */

.benefits {
    width: 100%;
    height: 40%;
    background-color: white;
}

h3.text-benefits {
    margin: 4% 0%;
    width: 100%;
    padding: 0;
    text-align: center;
}

span {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold)  var(--unnamed-font-family-poppins);
    color: #12D57D;
    font: 1rem;
    font-weight: bold;
}

.list-benefits {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 50px 3%;

}

.item-benefits {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 3%;
    /* flex-direction: column; */
    height: 350px;
    /* flex-direction: column; */
    width: 100%;
    background-color: white;
}

.container-benefits {
    background-color: white;
    box-shadow: 10px 10px 60px #00000029;
    -webkit-border-radius: 20px 0px 20px 20px;
    -moz-border-radius: 20px 0px 20px 20px;
    border-radius: 20px 0px 20px 20px;
    height: 300px;
}

.container-benefits::before{
    content: '';
    transform: skew(45deg);
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
}

.triangle {
    border-top:20px solid white;
    border-right:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid white;
    height:0;
    width:0;
    
  }



.container-coments-icon-central{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: -70px;

}






.benefits-texts-container {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.4rem;
    text-align: center; 
    padding: 0% 7%;

}

.benefits-texts-container-one{
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.4rem;
    text-align: center;
    padding: 0% 7%;


}

.benefits-texts-container-two {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.2rem;
    text-align: center;
    padding: 0% 7%;
}

.icon-item-benefits-one{
    background-image: url("../svg/Icon_1.svg");
    width: 10rem;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6em;
    padding: 0;
    margin: 0;
}

.icon-item-benefits-two {
    background-image: url("../svg/Icon_2.svg") ;
    width: 10rem;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6em;
    padding: 0;
    margin: 0;
}

.icon-item-benefits-three {
    background-image: url("../svg/Icon_3.svg") ;
	width: 10rem;
    height: 10rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6em;
    padding: 0;
    margin: 0;
}

/*  cta benefits */
.cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   

}


.buttom-whatsapp-cta {
    border-radius: 15px;
    background-color: #12D57D;
    color: white;
    font: var(--unnamed-font-style-normal) normal 600 21px/69px var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    padding: 0% 5%;
    font: normal normal 600 21px/69px Poppins;
    margin:  0% 0% 10% 0%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.4rem;
}

.buttom-whatsapp-cta:hover {
    background-color: #5584EB;
}

.icon-whatsapp {
margin-left: 20px;
color: #FFFFFF;
font-size: 2.5rem;
}


/* metrics */
.metrics {
     width: 100%;
     height: 30%;
     display: flex;
    align-items: center;
    justify-content: center;
    background: transparent linear-gradient(180deg, #01022E 0%, #000000 100%) 0% 0% no-repeat padding-box;
    padding: 0%;
    
}

.metrics-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5% 7%;
    font-size: 2.5rem;
}

.metric-text {
    font-size: 1.5rem;
    color: white;
    font: normal normal bold 25px/35px Poppins;
}



/*   comments   -------------------------------- */

.comments {
 background-color: white;
 width: 100%;
}

.title-comments {
    text-align: center;
    margin: 5% 0 4%  0;
    padding: 0 25%;
    width: 100%;
    font-size: 1.5rem;
}

.list-comments {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 5%;
}

.container-text-comments {
    width: 40%;
    padding: 0;
    margin: 0;
}

.container-comments {
    background-image: url("../svg/Chat-verde.svg") ;
    background-repeat: no-repeat;
    background-position: center ;
    background-size: 18em;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: column;
    width: 100%;
    background-color: white;
    margin: 0%;
}

.photo-client {
    width: 10rem;
    height: 7rem;
    background-image: url("../svg/Imagen-perfil.svg") ;
    background-repeat: no-repeat;
    background-size: 6em;
    padding: 0;
    margin: 0;
    
}

.text-client-comment {
 width: 50%;
}

.text-comment {
    text-align: left;
    font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-family-poppins);
    font-size: 1rem;
    margin-left: 8%;
}


.endeavor-comment {
    
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.icon-linkedin{
    width: 3rem;
    height: 3rem;
    background-image: url("../svg/Icon-Linkedin.svg") ;
    background-repeat: no-repeat;
    background-size: 2.5em;
    padding: 0;
    margin: 0 0 0 10%;
}

.name-client {
    text-align: left;
    font: normal normal bold  Poppins;
    font-size: .8rem;
}

.job-client {
    text-align: left;
    font: normal normal normal  Poppins;
    font-size: .8rem;
}

.person-coment {
    margin-left: 10px;
}

/* banner end */

.title-banner-end {
    font-weight: bolder;
    color: black;
    text-align: left;
    margin: 5%;
    font-size: 3rem;
    width: 70%;
}

.subtitle-banner-end {
    padding: 0%;
    text-align: left;
    margin: 0 5% 5% 5%;
    color: black;
    font-weight: 600;
    letter-spacing: var(--unnamed-character-spacing-0);
    font-size: 1.2rem;
    width: 67%;
}


.buttom-whatsapp-cta-end {
    border-radius: 15px;
    background-color: #12D57D;
    color: white;
    font: var(--unnamed-font-style-normal) normal 600 21px/69px var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    padding: 0% 7%;
    font: normal normal 600 21px/69px Poppins;
    margin: 5% 5%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.4rem;
}

.buttom-whatsapp-cta-end:hover {
    background-color: #5584EB;
}


.banner-end {
    background-image: url("../img/Imagenes\ usurios.png") ;
    width: 40rem;
    height: 30rem;
    display: flex;
    align-items: center;
    justify-content: end;
    background-position: left 20%;
    background-repeat: no-repeat;
    background-size: 32em;
    margin: 4% 0 0 0 ;
}


/* drawflow */

.drawflow-container {
    height: 520px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0% 5% 10% 5%;
    box-shadow: 10px 10px 60px #00000029;
    -webkit-border-radius: 20px 0px 20px 20px;
    -moz-border-radius: 20px 0px 20px 20px;
    border-radius: 20px 0px 20px 20px;
    border-radius: 20px;
    -ms-border-radius: 20px 0px 20px 20px;
    -o-border-radius: 20px 0px 20px 20px;
}

.title-flow {
    background-color: #4800FF;
    width: 100%;
    height: 23%;
    border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    -moz-border-radius: 20px 20px 0px 0px;
    -ms-border-radius: 20px 20px 0px 0px;
    -o-border-radius: 20px 20px 0px 0px;
}

.title-drawflow-container {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold)  var(--unnamed-font-family-poppins);
    color: white;
    font-size: 1.7rem;
    text-align: center;
    padding: 40px 0;
}

.panel-drawflow {
    /* background-color: #5584EB; */
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.menu-flow {
    width: 13%;
    background-color: white;
    height: 400px;
    -webkit-border-radius: 0px 0px 0px 20px;
    -moz-border-radius: 0px 0px 0px 20px;
    border-radius: 0px 0px 0px 20px;
    -ms-border-radius: 0px 0px 0px 20px;
    -o-border-radius: 0px 0px 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menu-flow-icon {
    background-color: #FFBB00;
    width: 50px;
    height: 60px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.menu-flow-icon:hover {
    background-color: #5584EB;
    
}

.space-flow {
    width: 87%;
    background-color: #F0F0F0;
    height: 400px;
    -webkit-border-radius: 0px 0px 20px 0px;
    -moz-border-radius: 0px 0px 20px 0px;
    border-radius: 0px 0px 20px 0px;
    -ms-border-radius: 0px 0px 20px 0px;
    -o-border-radius: 0px 0px 20px 0px;
}

.icon-drawflow {
    height: 25px;
    fill: var(--unnamed-color-ffffff);
}

/* footer */

footer {
    background: transparent linear-gradient(180deg, #01022E 0%, #000000 100%) 0% 0% no-repeat padding-box;
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    
}

.container-footer {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 5% 0 5% 5%;
}

.container-one-footer { 
    width: 35%;
}

.container-two-footer {
    width: 35%;
}

.container-list-solutions-footer{
    display: flex;
    align-items: flex-start;
    
}

.container-three-footer {
    width: 15%;   
}

.container-four-footer {
    width: 15%;
    margin: 0 5%;
}

.footer-link-end {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.list-resources-footer-container{
    list-style: none;
    color: white;
    font-size: .9rem;
    letter-spacing: .2px;
    font: normal normal normal Poppins;
    
}

.list-resources-footer-container-solutions{
    list-style: none;
    color: white;
    font-size: .7rem;
    letter-spacing: .2px;
    font: normal normal normal Poppins;
    border-left: 1px solid white;
    padding-left: 20px;
}



.list-resources {
   list-style: none;
   text-align: center;
   letter-spacing: 1rem;
}

.list-resources-logo {
    list-style: none;
   text-align: left;
}

.container-one-footer-options {
    margin-top: 20px;
    color: #FFBB00;
    font-size: .8rem;
}

.container-one-footer-options-final {
    display: none;
    margin-top: 20px;
    color: #FFBB00;
    font-size: .8rem;
}


.subtitle-footer {
    color: white;
    text-align: left;
    margin: 0;
    padding: 0;
}

.footer-socialmedia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    padding: 0% 5%;
}


.footer-socialmedia-responsive {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    padding: 0%;
    margin: 22% 0 5% 0;
}


.list-footer-solutions {
    padding-right: 10%;
   
    
}

.final-footer {
    width: 100%; 
    text-align: center;
    color: white;
    margin: 3%;
    font-size: .7rem;
}

/* lengauge footer */
.lenguage-footer {
    
    height: 56px;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: right;
    align-items: center;
}

.container-lenguage-footer{
    background-color: #5584EB;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3px 20px;
    border-radius: 26px;
    margin-right: 30px;
}

.text-lenguage {
    font-size: .9em;
    font-weight: bold;
    color: white;
    padding: 0;
    margin: 0;

}

.lenguage-arrow {
    margin-left: 15px;
}

.icon-arrow {
    height: .5rem;
}


.lenguage-options {
margin-left: 15px;
}

.icon-lenguage-footer {
    height: 1em;
}



/* drawflow *******************************/


:root {
    --dfBackgroundColor: rgba(255, 255, 255, 1);
    --dfBackgroundSize: 13px;
    --dfBackgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
  
    --dfNodeType: flex;
    --dfNodeTypeFloat: none;
    --dfNodeBackgroundColor: #ffffff;
    --dfNodeTextColor: rgba(255, 255, 255, 1);
    --dfNodeBorderSize: 2px;
    --dfNodeBorderColor: rgba(224, 224, 224, 1);
    --dfNodeBorderRadius: 26px;
    --dfNodeMinHeight: 131px;
    --dfNodeMinWidth: 181px;
    --dfNodePaddingTop: 15px;
    --dfNodePaddingBottom: 15px;
    --dfNodeBoxShadowHL: 0px;
    --dfNodeBoxShadowVL: 2px;
    --dfNodeBoxShadowBR: 15px;
    --dfNodeBoxShadowS: 2px;
    --dfNodeBoxShadowColor: rgba(211, 211, 211, 1);
  
    --dfNodeHoverBackgroundColor: #ffffff;
    --dfNodeHoverTextColor: rgba(0, 0, 0, 1);
    --dfNodeHoverBorderSize: 2px;
    --dfNodeHoverBorderColor: #000000;
    --dfNodeHoverBorderRadius: 4px;
  
    --dfNodeHoverBoxShadowHL: 0px;
    --dfNodeHoverBoxShadowVL: 2px;
    --dfNodeHoverBoxShadowBR: 15px;
    --dfNodeHoverBoxShadowS: 2px;
    --dfNodeHoverBoxShadowColor: #4ea9ff;
  
    --dfNodeSelectedBackgroundColor: rgba(225, 225, 225, 1);
    --dfNodeSelectedTextColor: #ffffff;
    --dfNodeSelectedBorderSize: 2px;
    --dfNodeSelectedBorderColor: #000000;
    --dfNodeSelectedBorderRadius: 4px;
  
    --dfNodeSelectedBoxShadowHL: 0px;
    --dfNodeSelectedBoxShadowVL: 2px;
    --dfNodeSelectedBoxShadowBR: 15px;
    --dfNodeSelectedBoxShadowS: 2px;
    --dfNodeSelectedBoxShadowColor: #4ea9ff;
  
    --dfInputBackgroundColor: rgba(255, 255, 255, 1);
    --dfInputBorderSize: 2px;
    --dfInputBorderColor: #000000;
    --dfInputBorderRadius: 50px;
    --dfInputLeft: -27px;
    --dfInputHeight: 20px;
    --dfInputWidth: 20px;
  
    --dfInputHoverBackgroundColor: #ffffff;
    --dfInputHoverBorderSize: 2px;
    --dfInputHoverBorderColor: #000000;
    --dfInputHoverBorderRadius: 50px;
  
    --dfOutputBackgroundColor: rgba(66, 158, 191, 1);
    --dfOutputBorderSize: 2px;
    --dfOutputBorderColor: #000000;
    --dfOutputBorderRadius: 50px;
    --dfOutputRight: -3px;
    --dfOutputHeight: 17px;
    --dfOutputWidth: 14px;
  
    --dfOutputHoverBackgroundColor: #ffffff;
    --dfOutputHoverBorderSize: 2px;
    --dfOutputHoverBorderColor: #000000;
    --dfOutputHoverBorderRadius: 50px;
  
    --dfLineWidth: 5px;
    --dfLineColor: rgba(70, 180, 140, 1);
    --dfLineHoverColor: #4682b4;
    --dfLineSelectedColor: rgba(28, 183, 133, 1);
  
    --dfRerouteBorderWidth: 2px;
    --dfRerouteBorderColor: rgba(163, 64, 64, 1);
    --dfRerouteBackgroundColor: #ffffff;
  
    --dfRerouteHoverBorderWidth: 2px;
    --dfRerouteHoverBorderColor: #000000;
    --dfRerouteHoverBackgroundColor: #ffffff;
  
    --dfDeleteDisplay: block;
    --dfDeleteColor: #ffffff;
    --dfDeleteBackgroundColor: #000000;
    --dfDeleteBorderSize: 2px;
    --dfDeleteBorderColor: #ffffff;
    --dfDeleteBorderRadius: 50px;
    --dfDeleteTop: -15px;
  
    --dfDeleteHoverColor: #000000;
    --dfDeleteHoverBackgroundColor: #ffffff;
    --dfDeleteHoverBorderSize: 2px;
    --dfDeleteHoverBorderColor: #000000;
    --dfDeleteHoverBorderRadius: 50px;
  
  }
  
  #drawflow {
    background: var(--dfBackgroundColor);
    background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
    background-image: var(--dfBackgroundImage);
  }
  
  .drawflow .drawflow-node {
    display: var(--dfNodeType);
    background: var(--dfNodeBackgroundColor);
    color: var(--dfNodeTextColor);
    border: var(--dfNodeBorderSize)  solid var(--dfNodeBorderColor);
    border-radius: var(--dfNodeBorderRadius);
    min-height: var(--dfNodeMinHeight);
    width: auto;
    min-width: var(--dfNodeMinWidth);
    padding-top: var(--dfNodePaddingTop);
    padding-bottom: var(--dfNodePaddingBottom);
    -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
    box-shadow:  var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
  }
  
  .drawflow .drawflow-node:hover {
    background: var(--dfNodeHoverBackgroundColor);
    color: var(--dfNodeHoverTextColor);
    border: var(--dfNodeHoverBorderSize)  solid var(--dfNodeHoverBorderColor);
    border-radius: var(--dfNodeHoverBorderRadius);
    -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
    box-shadow:  var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
  }
  
  .drawflow .drawflow-node.selected {
    background: var(--dfNodeSelectedBackgroundColor);
    color: var(--dfNodeSelectedTextColor);
    border: var(--dfNodeSelectedBorderSize)  solid var(--dfNodeSelectedBorderColor);
    border-radius: var(--dfNodeSelectedBorderRadius);
    -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
    box-shadow:  var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
  }
  
  .drawflow .drawflow-node .input {
    left: var(--dfInputLeft);
    background: var(--dfInputBackgroundColor);
    border: var(--dfInputBorderSize)  solid var(--dfInputBorderColor);
    border-radius: var(--dfInputBorderRadius);
    height: var(--dfInputHeight);
    width: var(--dfInputWidth);
  }
  
  .drawflow .drawflow-node .input:hover {
    background: var(--dfInputHoverBackgroundColor);
    border: var(--dfInputHoverBorderSize)  solid var(--dfInputHoverBorderColor);
    border-radius: var(--dfInputHoverBorderRadius);
  }
  
  .drawflow .drawflow-node .outputs {
    float: var(--dfNodeTypeFloat);
  }
  
  .drawflow .drawflow-node .output {
    right: var(--dfOutputRight);
    background: var(--dfOutputBackgroundColor);
    border: var(--dfOutputBorderSize)  solid var(--dfOutputBorderColor);
    border-radius: var(--dfOutputBorderRadius);
    height: var(--dfOutputHeight);
    width: var(--dfOutputWidth);
  }
  
  .drawflow .drawflow-node .output:hover {
    background: var(--dfOutputHoverBackgroundColor);
    border: var(--dfOutputHoverBorderSize)  solid var(--dfOutputHoverBorderColor);
    border-radius: var(--dfOutputHoverBorderRadius);
  }
  
  .drawflow .connection .main-path {
    stroke-width: var(--dfLineWidth);
    stroke: var(--dfLineColor);
  }
  
  .drawflow .connection .main-path:hover {
    stroke: var(--dfLineHoverColor);
  }
  
  .drawflow .connection .main-path.selected {
    stroke: var(--dfLineSelectedColor);
  }
  
  .drawflow .connection .point {
    stroke: var(--dfRerouteBorderColor);
    stroke-width: var(--dfRerouteBorderWidth);
    fill: var(--dfRerouteBackgroundColor);
  }
  
  .drawflow .connection .point:hover {
    stroke: var(--dfRerouteHoverBorderColor);
    stroke-width: var(--dfRerouteHoverBorderWidth);
    fill: var(--dfRerouteHoverBackgroundColor);
  }
  
  .drawflow-delete {
    display: var(--dfDeleteDisplay);
    color: var(--dfDeleteColor);
    background: var(--dfDeleteBackgroundColor);
    border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
    border-radius: var(--dfDeleteBorderRadius);
  }
  
  .parent-node .drawflow-delete {
    top: var(--dfDeleteTop);
  }
  
  .drawflow-delete:hover {
    color: var(--dfDeleteHoverColor);
    background: var(--dfDeleteHoverBackgroundColor);
    border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
    border-radius: var(--dfDeleteHoverBorderRadius);
  }






















/* responsive /////////////////////////////////////////////*/


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


 /* nav ------------------------------------------------*/


.menu {
    background: transparent linear-gradient(180deg, var(---01022e-darkblue) 0%, #000000 100%) 0% 0% no-repeat padding-box;
    height: 76px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 0 5%;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
}

.logo-img {
    height: 40px;
    margin-left: 2em;
}




.menu-options {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20%;
}

.menu_items {
    display: none;
}



ul.show {
    top: 130px;
    
}


/* bar drop  --------------------------*/


.menu-bar-drop {
    position: fixed;
    box-shadow: 10px 10px 60px #00000029;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: block;
    width: 100vw;
    top: -200vh;
    /* text-align: center; */
    transition: all .4s;
    background-color: white;
    margin-right: 0px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    
}

.list-menu-bar-drop {

    padding: 8%;
    position: fixed;
    box-shadow: 10px 10px 60px #00000029;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: block;
    width: 90vw;
    top: -200vh;
    text-align: center;
    transition: all .4s;
    background-color: white;
    margin-right: 0px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

.bar-drop {
    list-style: none;
    margin-top: 10px;

}

a.title-bar-drop {
    font-size: 1.8rem;
    text-align: center;
    text-decoration: none;
    color: black;
    font-weight: bold;
    
}



/* second menu nav bar */

.menu_items-second {
    display: none;
    
}




.menu-bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 40px;
}
.icon-navbar {
    width: 2em;    
    border: 2px solid #FFFFFF;
    margin: 3px;
   
}

.menu-navbar-options {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-menu {
    align-items: center;

}



    /* Main ------------------------------------------- */

.onboarding {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.text-onboarding {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 margin: 0% 0% 0% 0%;
padding-left: 0%;
}
    


h1 {
    font-weight: bolder;
    color: black;
    text-align: center;
    padding: 5%;
    font-size: 2.2rem;
    width: 100%;
}

h3 {
    text-align: center;
    margin: 0 2% 5% 2%;
    color: black;
    font-weight: 600;
    letter-spacing: var(--unnamed-character-spacing-0);
    font-size: 1.2rem;
    padding:  0 15%;
    width: 100%;
    
}



.buttom-whatsapp {
    border-radius: 15px;
    background-color: #12D57D;
    color: white;
    font: var(--unnamed-font-style-normal) normal 600 21px/69px var(--unnamed-font-family-poppins);
    letter-spacing: var(--unnamed-character-spacing-0);
    padding: 0% 10%;
    font: normal normal 600 21px/69px Poppins;
    margin: 2% 15%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.4rem;
}

.buttom-whatsapp:hover {
    background-color: #5584EB;
}

.icon-whatsapp {
margin-left: 20px;
color: #FFFFFF;
font-size: 2.5rem;
}

.banner {
    background-image: url("../img/Banner\ principal\ Imagen.png") ;
	width: 25rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: end;
    background-position: left 20%;
    background-repeat: no-repeat;
    background-size: 24em;
    margin: 0% 0% 0% 20%;
}

.banner-central{
    width: 350px;
    height: 350px;
}



/* brands -------------------------------------------------*/

.clients {
    background-color: #F0F0F0;
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.client-text {
    color: black;
    font: var(--unnamed-font-style-normal) normal normal 14px/20px var(--unnamed-font-family-poppins);
    padding: 5% 10% 0% 10%;
    text-align: center;
   /* responsive descktop font-size: 1.5rem;*/
    font-size: 1rem;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    padding: 10% 0% 0% 0%;
    background-image: url("../svg/logos\ empresas.svg") ;
	background-position: left 20%;
    background-repeat: no-repeat;
    background-size: 40em;
    margin: 5% 0% 5% 20%;
    
}

 /* metrics ------------------------------------------ */
            
           
 .metrics {
    width: 100%;
    height: 40%;
    display: flex;
   align-items: center;
   justify-content: center;
   background: transparent linear-gradient(180deg, #01022E 0%, #000000 100%) 0% 0% no-repeat padding-box;
   padding: 8% 5% 8% 5%;
   
}

.metrics-item {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin: 5%;
}

.metric-text {
   font-size: .9rem;
   color: white;
}

.metric-number {
   font-size: 2rem;
}


/*   coments   -------------------------------- */

.coments {
    background-color: white;
    width: 100%;
    
   }
   
   .title-coments {
       text-align: center;
       margin: 10% 0;
       padding: 0 25%;
   }
   
   .list-coments {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       width: 100%;
       
   }
   
   .container-text-coments {
       width: 50%;
       padding: 0;
       margin: 0;
   }
   
   .container-coments {
       background-image: url("../svg/Chat-verde.svg") ;
       background-repeat: no-repeat;
       background-position: center ;
       background-size: 20em;
       height: 400px;
       display: flex;
       align-items: center;
       justify-content: left;
       flex-direction: column;
       width: 100%;
       background-color: white;
       margin: 5%;
   }
   
   .photo-client {
       width: 10rem;
       height: 7rem;
       background-image: url("../svg/Imagen-perfil.svg") ;
       background-repeat: no-repeat;
       background-size: 5em;
       padding: 0;
       margin: 0;
       
   }
   
   .text-client-coment {
    width: 60%;
   }
   
   .text-coment {
       text-align: left;
       font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-family-poppins);
       font-size: 1.2rem;
       margin-left: 10%;
   }
   
   .container-active {
       display: none;
   }
   
   .endeavor-coment {
       
       width: 80%;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 5%;
   }
   
   .icon-linkedin{
       width: 3rem;
       height: 3rem;
       background-image: url("../svg/Icon-Linkedin.svg") ;
       background-repeat: no-repeat;
       background-size: 2.5em;
       padding: 0;
       margin: 0 0 0 10%;
   }
   
   .name-client {
       text-align: left;
       font: normal normal bold  Poppins;
       font-size: .8rem;
   }
   
   .job-client {
       text-align: left;
       font: normal normal normal  Poppins;
       font-size: .8rem;
   }
   
   .person-coment {
       margin-left: 10px;
   }
   











    /* footer ----------------------------------------- */
    
    

.container-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 0%;
}


.footer-socialmedia-responsive {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 50px;
    width: 100%;
    padding: 0%;
    margin: 15% 0 10% 0;
}

.logo-img-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    padding: 50px 0 10px 0;
}

.socialmedia-icons-footer {
   margin: 20px 0;
}

.container-one-footer>img { 
    width: 100%;
    height: 6.5rem;
    
}


.container-one-footer { 
    width: 100%;
    
}


.container-two-footer {
    width: 100%;
}

.container-list-solutions-footer{
    display: flex;
    text-align: center;
    align-items: flex-start;
    width: 100%;
    
}

.container-three-footer {
    width: 100%;  
    text-align: center;
}

.container-four-footer {
    width: 100%;
    margin: 0 5%;
    text-align: center;
}

.footer-link-end {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.list-resources-footer-container{
    list-style: none;
    color: white;
    font-size: .9rem;
    letter-spacing: .2px;
    font: normal normal normal Poppins;
    
}

.list-resources-footer-container-solutions{
    list-style: none;
    color: white;
    font-size: .8rem;
    letter-spacing: .2px;
    font: normal normal normal Poppins;
    border-left: 1px solid white;
    padding-left: 20px;
    text-align: left;
}



.list-resources {
   list-style: none;
   text-align: center;
   letter-spacing: 1rem;
}

.list-resources-logo {
    list-style: none;
   text-align: left;
}

.container-one-footer-options {
    display: none;
}

.subtitle-footer {
    color: white;
    text-align: center;
    font-size: 2rem;
    margin-top: 40px;
}

.footer-socialmedia {
    display: none;
}

.list-footer-solutions {
    padding-top: 0%;
    text-align: left;
    width: 50%;
    padding-left: 15%;
    display: flex;
    align-items: flex-start;
}

.container-one-footer-options-final {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 35px 0 5% 0;
    color: #FFBB00;
    font-size: .8rem;
    
}

.list-resources-logo-final {
    text-align: center;
    list-style: none;
}
.final-footer {
    width: 100%; 
    text-align: center;
    color: white;
    margin: 5%;
    font-size: .7rem;
}

.lenguage-footer {
    height: 56px;
    width: 100%;
    padding: 0;
    margin: 15% 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-lenguage-footer{
    margin-right: 0px;
}

.logo {
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img-foofer {
    height: 38px;
    background-color: chocolate;
    width: 100%;
}

    

/* benefits ------------------------------------*/

.benefits {
    width: 100%;
    height: 40%;
   

}

h3.text-benefits {
    margin: 10% 0%;
    padding: 0 5em;
}

span {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold)  var(--unnamed-font-family-poppins);
    color: #12D57D;
    font: 1rem;
    font-weight: bold;
}

.list-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 50px;
}

.item-benefits {
    display: flex;
    justify-content: center;
    padding:  10% 10% 10% 15%;
    
}

.container-benefits {
   
    box-shadow: 10px 10px 60px #00000029;
    padding: 20% 7% 13% 7%;
    
   
}

.benefits-texts-container {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.4rem;
    text-align: center;
    margin-top: 90px;
}

.benefits-texts-container-one{
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.2rem;
    text-align: center;
    padding: 0% 2%;
    margin-top: 110px;
}

.benefits-texts-container-two {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-medium)  var(--unnamed-font-family-poppins);
    font-size: 1.3rem;
    text-align: center;
    padding: 0% 2%;
    margin-top: 90px;
}

.icon-item-benefits-one{
    background-image: url("../svg/Icon_1.svg");
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: 5.5em;
    border-radius: 50%;
    position:absolute;
    height:5.5rem;
    width: 5.5rem;
    margin: 20%;
    bottom: -420px;
    left: 80px;
}

.icon-item-benefits-two {
    background-image: url("../svg/Icon_2.svg") ;
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: 5.5em;
    border-radius: 50%;
    position:absolute;
    height:5.5rem;
    width: 5.5rem;
    margin: 20%;
    bottom: -800px;
    left: 80px;
    
}

.icon-item-benefits-three {
    background-image: url("../svg/Icon_3.svg") ;
	background-position: center 50%;
    background-repeat: no-repeat;
    background-size: 5.5em;
    border-radius: 50%;
    position:absolute;
    height:5.5rem;
    width: 5.5rem;
    margin: 20%;
    bottom: -1170px;
    left: 80px;
}


/*  banner end  ---------------------------*/ 

.title-banner-end {
    font-weight: bolder;
    color: black;
    text-align: center;
    margin: 5%;
    font-size: 2rem;
}

.subtitle-banner-end {
    padding: 0 7%;
    text-align: center;
    margin: 0 5% 5% 5%;
    color: black;
    font-weight: 600;
    letter-spacing: var(--unnamed-character-spacing-0);
    font-size: 1.2rem;
}

.banner-end {
    background-image: url("../img/Imagenes\ usurios.png") ;
	width: 25rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: end;
    background-position: left 0%;
    background-repeat: no-repeat;
    background-size: 24em;
    margin: 10% 0% 0% 20%;
}



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