* {

    box-sizing: border-box;
    font-family: 'Inter';
}

html,
body {
    width: 100%;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background-color: whitesmoke;
    background-color: linear-gradient(180deg, rgba(55, 83, 106, 0) 34.72%, #37536A 101.76%);
    margin: 0;
    padding: 0;
    
}

#general,
#div-mid1 {
    margin-top: 10vw;
    display: flex;

    width: 100%;
}

#texto-general {
    width: 50%;
    display: inline-block;
    margin-left: 9vw;

}

#texto-general-invertido {
    width: 50%;
    display: inline-block;
    margin-right: 9vw;

}

#imagen-general {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

#imagen-general img {
    width: 518px;
    height: 422;
}

#texto-general h1,
#texto-general-invertido h1 {
    /* Global Management & Consulting Firm */


    width: 428px;
    height: auto;

    /* H1 */


    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 60px;
    /* or 120% */


    /* Deep Blue */

    color: #345168;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin-bottom: 10px;
}

#texto-general p,
#texto-general-invertido p {
    /* Lead 1 */

    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    /* or 167% */


    /* Deep Blue */

    color: #345168;
    margin-bottom: 30px;
}

#texto-general button,
#texto-general-invertido button {
    /* Auto layout */

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 10px;
    /* Deep Blue */

    background: #345168;
    /* Drop shadow button */

    box-shadow: 0px 4px 16px rgba(41, 55, 80, 0.25);
    border-radius: 20px;
    color: white;
    width: 220px;
    height: 60px;
    font-size: 18px;
    border: none;
    cursor: pointer;

}

#clients {
    background-color: rgb(255, 255, 255);
    align-items: center;
    text-align: center;
    height: 238px;
    box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
    border-radius: 20px;
    width: 70%;
    margin: auto;
    margin-top: 10vw;
}

#txt-clients h3 {
    /* H3 */

    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 44px;
    /* identical to box height, or 147% */

    text-align: center;

    /* Deep Blue */

    color: #345168;
}

#lista-clientes {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.clientes {
    justify-content: center;
    align-items: center;
}

#txt-aboutus {
    text-align: center;
    margin-top: 15vw;
}

#txt-aboutus h2 {

    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 70px;
    /* identical to box height, or 200% */

    text-align: center;

    /* Deep Blue */

    color: #345168;

}

#txt-aboutus p {

    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    /* or 167% */


    align-items: center;
    text-align: center;
    width: 40%;
    /* Gris */
    margin: auto;
    margin-bottom:5rem;
    color: #747474;
}

#cards-aboutus {
    display: flex;
    margin: auto auto 6rem auto;

    justify-content: space-evenly;

}

.card img {
    margin-top: 0px auto 1rem, auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -36px;
}

.imagen-card {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.card {
    padding-top: 0px;

    width: 316px;
    /* Black & White/White */

    background: #FFFFFF;
    /* Shadow Cards */

    box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
    border-radius: 20px 20px 20px 20px;
    height: 600px;
}

.bottomCard button {
    background: #345168;
    /* Drop shadow button */

    box-shadow: 0px 4px 16px rgba(41, 55, 80, 0.25);
    border-radius: 20px;
    color: white;
    width: 160px;
    height: 50px;
    font-size: 16px;
    border: none;
    cursor: pointer;


}

.bottomCard {
    margin: 10%;
    margin-top: 0;
}

.bottomCard h3 {

    font-style: normal;
    font-weight: 1000;
    font-size: 26px;
    line-height: 140%;
    /* identical to box height, or 28px */


    /* Deep Blue */
    color: #345168;
    margin: -15px 0 1rem 0;
}

.bottomCard p {

    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 26px;
    /* or 173% */


    /* Gris */
    margin-bottom: 15px;
    color: #747474;
}

#internationalization {


    /* Deep Blue */

    background: #345168;
    mix-blend-mode: normal;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#internationalization h2 {
    margin-top: 4rem;


    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 70px;
    /* identical to box height, or 200% */

    text-align: center;

    /* White */

    color: #FFFFFF;
}

#internationalization .internationalization-text {
    /* Lead 1 */


    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    /* identical to box height, or 167% */

    display: flex;
    align-items: center;
    text-align: center;

    /* White */

    color: #FFFFFF;

    margin-bottom: 5rem;

}

.internationalization-cards {
    width: fit-content;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin-left: 20rem;
    margin-right: 2rem;
    margin-bottom: 5rem;
    overflow: hidden;
   


}

#internationalization .internalization-hide {
    width: 100%;
    height: 450px;
    background: linear-gradient(to right, rgba(0,0,0,0) 80%,#345168) , linear-gradient(to left, rgba(0,0,0,0) 80%,#345168);
    position: absolute;
    border-radius: 40px;
    pointer-events: none;
}

#internationalization .card-international-active {
    /* Card */


    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 24px 32px;
    gap: 24px;



    background: #FFFFFF;
    box-shadow: 0px 5px 30px rgba(125, 154, 252, 0.4);
    border-radius: 20px;

    width: 300px;
    height: 400px;

    margin-left: 2rem;
    margin-right: 2rem;
}

#internationalization .card-international-inactive {
    /* Card */


    /* Auto layout */

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 24px;




    /* Black & White/White */

    background: #FFFFFF;
    box-shadow: 0px 10px 20px rgba(125, 154, 252, 0.2);
    border-radius: 20px;


    width: 250px;
    height: 300px;

    margin-left: 2rem;
    margin-right: 2rem;
}

.card-international-invis {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    gap: 24px;



    /* Black & White/White */

    background: transparent;




    width: 250px;
    height: 300px;

    margin-left: 2rem;
    margin-right: 2rem;

}

.card-international-active .icon{
    background: #F4C429;
    opacity: 0.6;
    box-shadow: 0px 10px 20px rgba(14, 25, 75, 0.2);
    border-radius: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-international-inactive .icon {
    margin-top: 32px;
    background: #F4C429;
    opacity: 0.6;
    box-shadow: 0px 10px 20px rgba(14, 25, 75, 0.2);
    border-radius: 30px;
    width: 55px;
    height: 55px;

    min-width: 55px;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-international-inactive .icon img{
    width: 26px;
    height: 26px;
}
   
    




.card-international-active h3,
.card-international-inactive h3 {

    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    /* identical to box height, or 34px */

    text-align: center;

    /* Deep Blue */

    color: #345168;


    /* Inside auto layout */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.card-international-active p,
.card-international-inactive p {
    margin-top:-25px;

    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    /* or 144% */

    text-align: center;

    /* Gris */

    color: #747474;


    /* Inside auto layout */

    flex: none;
    order: 1;
    flex-grow: 0;
}



.internationalization-buttons {
    display: flex;
    align-self: flex-end;
    margin-right: 20rem;
    margin-bottom: 5rem;
    margin-top: 3rem;
}

.internationalization-buttons .previous {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 60px;
    height: 40px;
    width: 40px;

    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.internationalization-buttons .previous:hover {
    background-color: transparent;
    border: 2px solid #F4C429;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    
    cursor: pointer;

}


.internationalization-buttons .next {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
}

.internationalization-buttons .next:hover {
    background-color: transparent;
    border: 2px solid #F4C429;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    color: #F4C429;
    cursor: pointer;
}

.internationalization-buttons .next:hover img {
    content: url("../icons/flecha-adelante-hover.svg");
}

.internationalization-buttons .previous:hover img {
    content: url("../icons/flecha-atras-hover.svg");
}


.import-services {
    background: linear-gradient(0, rgba(148, 183, 212, 0.37) -5.28%, rgba(148, 183, 212, 0) 71.74%);
    mix-blend-mode: normal;

    border-radius: 0px 0px 40px 40px;

}



#div-gave-group {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.frame-gave-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 10px;

}

#div-gave-group p {

    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    /* or 167% */

    display: flex;
    align-items: center;
    text-align: center;

    /* Gris */

    color: #747474;


    /* Inside auto layout */

    flex: none;
    order: 1;
    flex-grow: 0;
}

#div-gave-group h2 {
    /* H2 */


    font-style: normal;
    font-weight: 600;
    font-size: 35px;
    line-height: 70px;
    /* identical to box height, or 200% */

    text-align: center;

    /* Deep Blue */

    color: #345168;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

#cards-gave-group {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 0fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#cards-gave-group .icon {
    background: #F4C429;
    opacity: 0.6;
    box-shadow: 0px 10px 20px rgba(14, 25, 75, 0.2);
    border-radius: 30px;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-gave-group-active {

    box-sizing: border-box;
    margin: 1rem;

    /* Auto layout */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;

    width: 350px;
    height: 325px;

    background: #FFFFFF;
    /* Shadow Cards */

    box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
    border-radius: 20px;
}

.card-gave-group-active:hover p {
    height: 51%;
    transition: 0.5s ease-in;
    display: flex;
    align-items: flex-start;
}

.card-gave-group-active p {
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-out;
    margin: 0;
    padding: 0;
}

#bussiness-development {
    box-sizing: border-box;
    width: 80%;

    padding: 5rem;

    /* Deep Blue */

    background: #345168;
    box-shadow: 0px 20px 40px rgba(14, 25, 75, 0.2);
    border-radius: 40px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10rem;
    margin-bottom: 15%;

    padding: 5%;

}

#bussiness-development h2 {

    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 46px;
    /* identical to box height, or 131% */


    /* White */

    color: #FFFFFF;
    margin-bottom: 8rem;
}

.bus-dev-space {
    transition: 0.5s ease-out;
}

.bus-dev-space:hover {
    transform: scale(1.15);
    transition: 0.5s linear;
}

#icons-bussiness-development {
    display: flex;
    justify-content: space-between;
}

#icons-bussiness-development h4 {
    /* H4 */


    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    /* or 28px */

    text-align: center;

    /* White */

    color: #FFFFFF;
}

#icons-bussiness-development .icon {
    /* Yellow */

    background: #F4C429;
    /* Color Shadow */

    box-shadow: 0px 10px 20px rgba(244, 196, 16, 0.2);
    border-radius: 30px;
    width: 60px;
    height: 60px;

    margin: 0 auto;


    display: flex;
    align-items: center;
    justify-content: center;
}


.frame-diff {
    margin-top: 15%;
    text-align: center;
    gap: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: linear-gradient(0deg, rgba(148, 183, 212, 0.37) -5.28%, rgba(87, 107, 175, 0) 47.99%);
    mix-blend-mode: normal;
    border-radius: 60px;
}

.frame-diff h2 {
    /* H2 */


    font-weight: 600;
    font-size: 35px;
    line-height: 70px;
    /* identical to box height, or 200% */

    text-align: center;

    /* Deep Blue */

    color: #345168;
}

.frame-diff h3 {
    font-weight: 600;
    font-size: 30px;
    line-height: 44px;
    /* or 147% */


    /* Deep Blue */

    color: #345168;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.frame-diff p {
    width: 35%;
    margin: 0 auto;
    margin-bottom: 10%;
}

.frame-diff section {
    display: flex;
    justify-content: center;
    column-gap: 10%;
}

.frame-diff .diff-img {
    height: 60vh;
    width: auto;
}

.frame-diff section .diff-card h3,
.frame-diff section .diff-card p {
    text-align: left;
    width: 60%;
    margin: 0%;
    padding: 0;
}

.frame-diff .diff-btns {
    display: flex;

}

.frame-diff section .diff-card .diff-btns button {
    background-color: transparent;
    border: 2px solid #345168;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
}

#diff-previous,
#diff-next {
    cursor: pointer;
}

.frame-diff section .diff-card .diff-btns button#diff-previous:hover {
    background-color: #345168;


}

.frame-diff section .diff-card .diff-btns button#diff-previous:hover img {
    content: url("../icons/diff-previous-hover.svg");
}

.frame-diff section .diff-card .diff-btns button#diff-next:hover {
    background-color: #345168;


}

.frame-diff section .diff-card .diff-btns button#diff-next:hover img {
    content: url("../icons/diff-next-hover.svg");
}

.frame-services {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    background: #345168;
}

.div-cards-services{
    overflow: hidden;
    display: flex;
    margin-left: 95rem;

}

.frame-services h2 {
    font-weight: 600;
    font-size: 35px;
    line-height: 70px;
    /* identical to box height, or 200% */

    text-align: center;

    /* White */

    color: #FFFFFF;
}
.frame-services .texto{
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    /* identical to box height, or 167% */

    display: flex;
    align-items: center;
    text-align: center;

    /* White */

    color: #FFFFFF;
}

.card-services {
    width: 316px;
    height: 504px;
    margin-left: 2rem;
    margin-right: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 24px 32px;

    /* Black & White/White */

    background: #FFFFFF;
    /* Shadow Cards */

    box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
    border-radius: 20px;

}


.card-services img {
    width: 398px;
    height: 274px;

    border-radius: 30px 0px 30px 0px;

    margin-top: -36px;

    filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.07));
    border-radius: 20px 20px 0px 0px;

    

    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.card-services img.fix {
   margin-left: -71px;
}

.card-services h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    margin-bottom: 0;
    /* identical to box height, or 28px */


    /* Deep Blue */

    color: #345168;
}


.btns-services {
    display: flex;
    align-self: flex-end;
    margin-right: 20rem;
    margin-bottom: 5rem;
    margin-top: 5rem;
    

}

.btns-services .previous {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 60px;
    height: 40px;
    width: 40px;

    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;

}

.btns-services .previous:hover {
    background-color: transparent;
    border: 2px solid #F4C429;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    cursor: pointer;

}


.btns-services .next {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.btns-services .next:hover {
    background-color: transparent;
    border: 2px solid #F4C429;
    border-radius: 60px;
    height: 40px;
    width: 40px;
    color: #F4C429;

    cursor: pointer;
}

.btns-services .next:hover img {
    content: url("../icons/flecha-adelante-hover.svg");
}

.btns-services .previous:hover img {
    content: url("../icons/flecha-atras-hover.svg");
}

.contact {
    background-color: #345168;
    margin-bottom: 32vw;
}

.contact p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    /* or 167% */

    display: flex;
    align-items: center;
    text-align: center;

    /* White */

    color: #FFFFFF;
    width: 50%;
    margin: auto;
}

#reach-form {
    display: flex;
    position: absolute;
    margin: auto;
    height: 580px;
    width: 1165px;
    box-shadow: 0px 30px 50px rgba(18, 17, 39, 0.2);
    border-radius: 40px;
    margin-top: 35vw;
}

#reach {
    width: 40%;
    background-color: #2d3f4e;
    border-radius: 40px 0 0 40px;
}

#form {
    width: 60%;
    background-color: white;
    border-radius:  0 40px 40px 0;

}

#reach-text {
    padding: 10%;
}

#reach-text h1 {
    color: white;
}

#reach-text p {
    color: white;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 25px;

}

.lineaDivisoria {
    height: 1px;
    background-color: white;
    width: 30%;
}

#reach-filasDatos {
    display: inline-block;
}

.filaDato {
    display: flex;
}

.filaDato img {
    margin-right: 10px;
}

#pais2 {
    margin-top: 30px;

}

#linkedin {
    margin-top: 15%;
    width: 2vw;

}

.filaForm {
    display: flex;
    margin: auto;
    margin-top: 5%;
}

.campoForm {
    display: inline-block;
    margin: auto;
}

.campoForm h2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #345168;
    text-align: left;
}


#boxform {
    margin-top: 7%;
}

#campoLargo {
    width: 100%;
    margin-left: 3.4vw;
}

#campoLargo input {
    width: 39vw;
}

.campoForm input {
    outline: 0;
    border-width: 0 0 2px;
    border-color: rgb(163, 163, 167);
    
    width: 16vw;
}

#botonform {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #345168;
    /* Drop shadow button */
    box-shadow: 0px 4px 16px rgba(41, 55, 80, 0.25);
    border-radius: 20px;
    width: 190px;
    height: 60px;
    color: white;

    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    border: none;
    margin-top: 18%;
    margin-left: 65%;
    cursor: pointer;
}

.frame-services .mapa{

    width:100%;
}

/**********FOOTER*********/

footer {
    background-color: #345168;
    width: 100%;
    height: 401px;
    display: flex;

}

footer div {


    width: 50%;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 4rem;
}

footer div.footer-div-2 {
    display: flex;
}

footer div.footer-div-1 {
    margin-left: 4rem;
}

footer div p {
    font-weight: 300;
    font-size: 16px;
    line-height: 25px;
    /* or 156% */


    /* White */

    color: #FFFFFF;
}

footer div div.footer-social-btns button {
    border-radius: 60px;
    width: 40px;
    height: 40px;
    background-color: #3f617c;
    border: 0px solid;


}



footer div div.footer-social-btns button:hover {

    border: 1px solid #FFFFFF;

}

footer div ul {
    list-style: none;
    margin-left: 2rem;
    margin-right: 2rem;
}

footer div ul li {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
}

footer div ul li a {
    text-decoration: none;
    cursor: pointer;
}

footer div ul li.active {
    color: #FFFFFF;
    font-weight: bolder;
    font-size: 14px;
    line-height: 26px;

}