:root{
    --firstcolor: rgba(43, 91, 176, 1);
    --secondcolor: rgba(20, 44, 82, 1);
    --colorbutton: rgba(0, 255, 55, 1);
    --colortextgray: #848484;
    --colortextdarkgray: rgb(80, 80, 80);
    --colortextwhite: rgba(255, 255, 255, 1);
    --lightbluegradient: #2B5BB0;
    --darkbluegradient: #142C52;
}
body{
    font-family: "Encode Sans", sans-serif !important;
}
img{
    width: 100%;
}
h2{
    font-family: "Encode Sans", sans-serif !important;
    font-weight: 500  !important;
    font-size: 3rem !important;
    margin-bottom: 4% !important;
}
a.nav-link{
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--colortextgray);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link:hover{
    color: var(--firstcolor) !important;
    text-decoration: underline;
    text-decoration-thickness: 7%;
    text-underline-offset: 25%;
}

/*-------------------------NAV---------------------------*/
.navbar > .container-fluid{
    align-items: stretch !important;
}
/*.navbar-expand-lg .navbar-nav {*/
.navbar-nav {
    flex-direction: row;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
}
.container-logo{
    width: fit-content;
    padding: 0% 5%;
}
.container-cotiza{
    background: var(--firstcolor);
    padding: 2% 2%;
    width: 18%;
    color: white;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}
.container-cotiza a{
    color: white;
    padding-right: 2%;
    font-weight: 900;
}
.container-cotiza a:hover{
    color: var(--colortextgray);
}


/*------------START-------------------*/
#start{
    height: 600px;
    background-image: url("../img/slider.jpg");
    background-size: cover;
    background-position-x: right;
    background-repeat: no-repeat;
    padding: 6.5% 5.5%;
}
#start h1{
    color: white;
    font-size: 3.6rem;
    padding-bottom: 2%;
    letter-spacing: -2%;
}
#start span.markerblue{
    background: var(--firstcolor);
    color: white;
    font-weight: 700;
    font-size: 1.4rem;
    padding: .3% 2%;
    text-transform: uppercase;
}
/*---------------QUIENES SOMOS------------------*/
#quienes-somos{
    padding: 2% 5%;
}
#quienes-somos h2{
    color: var(--firstcolor);
}
.containerabout{
    /*padding: 5% 3% !important;
    padding: 5% 3%;*/
    padding-right: 10% !important;
    padding-top: 7% !important;
}
.cont-about{
    display:flex;
    align-items: flex-end;
}
.containerabout h2{
    color: var(--firstcolor);
    
    margin-bottom: 4%;
}
.cont-about a{
    color: var(--firstcolor);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: underline;
    text-decoration-thickness: 7%;
    text-underline-offset: 25%;
}
.containerabout p, .unidades .containerunidright ul, .unidades p{
    color: var(--colortextgray);
    font-size: 1.2rem;
}
.unidades .containerunid ul{
    color: var(--colortextgray);
    font-size: 1.5rem;
    font-weight: 600;
}
/*.containerunidright p, .containerunidright ul{
    width: 80%;
}*/
#quienes-somos .containerabout img{
    width: 60%;
}
#quienes-somos img{
    width:100%;
}
/*-----------SERVICIOS---------------*/
#servicios{
    background: var(--secondcolor);
    color:white;
    padding: 0% 5%;
    height: fit-content;
}
#servicios .containerservices{
    padding-top: 4%;
    padding-left: 5%;
    padding-right: 2%;
}
#servicios p{
    font-size: 1.5rem;
    font-weight: 600;
    width: 91%;
    margin-top: 5%;
}
.img-servicios{
    width:30%;
}
.serviciosad img{
    width: 57%;
    text-align: center;
    padding-bottom: 10%;
    padding-top: 15%;
}
#servicios .serviciosad p{
    font-size: 1rem;
}
#servicios .serviciosad .col-6{
    text-align: center;
}
/*----------Unidades---------------*/
.unidades{
    padding: 0% 0%;
}
.containerunid{
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
}
.unidades h2{
     color: var(--firstcolor);
}
.unid-log{
    width: 37%;
}
.blueletter{
    color: var(--lightbluegradient);
    font-weight: 500;
}
.unidades .containerunid.text-container{
    padding-left: 11%;
    padding-right: 4%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
}
.unidades .text-container{
    padding: 4% 8%;
}
/*-----------Recursos Humanos-----------*/
#recursos-humanos{
    /*background-color: black;*/
    color:white;
    /*text-align: center;
    padding: 5% 2%;*/
}
/*-----------------CONTRATANOS-----------------*/
.contratanos{
    background: black;
    color: white;
    text-align: center;
    padding: 3% 4%;
}
.contratanos .col-12{
    padding: 0%;
}
.contratanos img{
    width: 35%;
    padding-bottom: 10%;
}
.contratanos p strong{
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
}
.contratanos p {
   font-size: 1rem;
}
/*-----------------CLIENTES-----------------*/
.clientes h2{
    color: var(--lightbluegradient);
    text-align: center;
}
.clientes{
   background: linear-gradient(var(--lightbluegradient), var(--darkbluegradient));
   padding-top: 3%;
}
.clientes .cont-text{
    background: var(--colortextwhite);
    padding: 7% 5%;
    padding-bottom: 4%;
}
.clientes img{
    width: 80%;
}
.clientes .cont-img{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*------------------CONTACTO-----------------*/
#contacto{
    padding: 3% 5%;
}
#contacto a{
    text-decoration: none;
}
#contacto h2{
    color: var(--firstcolor);
}
form label{
    color: var(--colortextdarkgray);
    font-weight: 400;
}
.form-control{
    background-color: var(--colortextgray) !important;
    color: white !important;
}
#green-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#green-button button{
    color: white;
    font-weight: 700;
    background: var(--colorbutton) !important;
    padding: 1% 5%;
    border-radius: 10px;
    border:none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/*-------------Whatsapp--------*/
.conteiner-whatsapp{
    width: 0px;
    height: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.whatsapp-button{
    position: fixed;
    width: fit-content;
    right: 2%;
    bottom: 2%;
    z-index: 200;
    padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;
    /*background: #008000;*/
    background: #008000;
    border-radius: 50% 50%;
}
.arrow{
    position: fixed;
    right: 4%;
    bottom: 15%;
    z-index: 200;
    /*padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;*/
}
.arrow a{
    color: var(--second-darkgray)
}
.whatsapp-button svg{
    width: 100%;
}
/*----------------FOOTER----------------------*/
footer{
    background: var(--darkbluegradient);
    color: white;
    padding: 5% 0%;
}
footer a, footer p{
    text-decoration: none;
    color: white;
    /*font-weight: 900 ;*/
    font-size: 1.5rem;
}
footer .logo{
    background: white;
    width: 70%;
}
a.icon-what{
    background: #008000;
    border-radius: 50% 50%;
    padding-right: 10%;
    text-align: center;
    padding-bottom: 10%;
    padding-top: 0%;
    padding-left: 10%;
}