.flexQuienesSomosInicio{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap:15px;

    padding:70px 0px;
}

.containerImgQI{
    width:54%;
    height:auto;
}


.contentQI{
    width:43%;
    height:auto;
}

.containerImgQI img{
    width:100%;
}

.contentQI h4{
    color:var(--black);
    font-size:35px;
}

.contentQI h4 span{
    color: var(--principal);
}

.contentQI p{
    font-size:15px;
    text-align: justify;
    padding:10px 0px;
}


.contentQI .flexValores{
    display:flex;
    justify-content:left;
    align-items:left;
    flex-wrap:wrap;
    gap:20px;
    padding:20px 0px;
}

.flexValores .flexItemValor{
    display:flex;
    justify-content:left;
    align-items: center;
    gap:15px;
    padding:10px 20px;
    min-width:241px;
    border-radius:10px;
    transition:all ease .3s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.flexValores .flexItemValor .imgValor{
    width:30px;
    height:30px;
}

.flexValores .flexItemValor .imgValor img{
    width:100%;
    height:100%;
}

.flexValores .flexItemValor:hover{
    background-color:var(--principal);
}


/*------ BOLETÍN INFORMATIVO -----------*/
.boletin{
background-color:var(--black);
width:100%;
height:auto;
}

.flexImgInfoBoletin{
    display:flex;
    justify-content:space-between;
    width:100%;
    height:400px;
    gap:2%;
}

.containerImgB{
    width:100%;
    height:350px;
}

.containerImgB img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.borderderBottom{
    width:100%;
    height:50px;
    background-color:var(--principal);
    border-bottom-right-radius:25px;
}



.imgIzquierda,.containerInfoBoletin{
    width:48%;
}



.containerInfoBoletin{
    width:48%;
    display:flex;
    justify-content:start;
}

.containerInfoB{
    width:560px;
    display: flex;
    align-content:center;
    flex-wrap:wrap;
    color:var(--white);
}

.titleSuscribe{
    font-size:35px;
    font-weight:bold;
    line-height:40px;
}

.textSuscribe{
    font-size:14px;
    line-height:20px;
    padding:15px 0px;
}

.containerInfoB form{
    display:flex;
}

.InputControl input,.ButtonControl button{
    outline:none;
    padding:15px;
    color:var(--white);
    font-size:16px;
    background-color:transparent;
    border:2px solid var(--principal);
}

.InputControl input{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    min-width:370px;
}

.ButtonControl button{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color:var(--principal);
    padding:15px 25px;
    color:var(--black);
    font-weight:bold;
}



/*------ Fin de boletín informativo --------*/



/*-----   MARCAS   ------*/
.flexBarrasTitle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.barraUMarca{
    width:34%;
    height:50px;
    background-color:transparent;
    display:flex;
    justify-content:center;
    align-items: center;
}

.barraMarca{
    width:100%;
    height:8px;
    background-color:var(--black);
}

.titleMarca{
    width:30%;
    text-align:center;
}

.marcasss{
    font-size:30px;
    font-style:italic;
    font-weight:500;
    color:var(--black);
    padding:0px;
    margin:0px;
}

.hemoss{
    font-size:30px;
    font-weight:700;
    color:var(--principal);
    margin-top:-10px;
}


.iconControlEquipo{
    position: absolute;
    margin-top:-50px;
    margin-left:-50px;
}


/*--== NUESTROS VALORES ==--*/
.containerTitleValore{
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
}

.titleValore{
    padding:8px 50px;
    background-color:var(--black);
    color:var(--white);
    font-size:30px;
    border-radius:10px;
    font-weight:700;
}


.bg-PrincipalValores{
    width:100%;
    max-height:160px;
    background-color:var(--principal);
    display:flex;
    justify-content:center;
    margin-top:-30px;
    margin-bottom:80px;
}

.flexValoresNosotros{
    width:100%;
    padding:0px 15px;
    display:flex;
    justify-content:center;
    gap:40px;
    margin-top:80px;
}

.itemValorNo{
    width:150px;
    height:150px;
    background-color:var(--white);
    border-radius:8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    display:flex;
    justify-content:center;
    align-content: center;
    flex-wrap:wrap;
    gap:20px;
    padding:5px;
}

.itemValorNo p{
    width:100%;
    text-align:center;
    font-size:13px;
    font-weight:600;
}

.containerImgValorNo{
    width:45px;
    height:45px;
    display: flex;
    justify-content:center;
    align-items: center;
}

.containerImgValorNo img{
    width:100%;
    height: 100%;
}


.bannerUp{
    width:100%;
    height:450px;
    margin-top:-40px;
}

.fondoBanner{
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center;
}

.overlayBanner{
    width:100%;
    height:100%;
    background: rgb(20, 19, 18);
    background: -moz-linear-gradient(90deg, rgb(22, 20, 20) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgb(22, 20, 20) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgb(22, 20, 20) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#34302e",endColorstr="#ffffff",GradientType=1);

    display:flex;
    justify-content:left;
    align-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.cuadroBordeBanner{
    width:100px;
    height:100px;
    display: flex;
    align-items:center;
}

.cuadroBordeBannerrr{
    width:100px;
    height:5px;
    background-color:transparent;

}

.overlayBanner h1{
    width:100%;
    color:var(--principal);
    font-size:40px;
}


.overlayBanner p{
    color:var(--white);
}
.overlayBanner p a{
    color:var(--white);
    transition: all ease .3s;
}

.overlayBanner p a:hover{
    color:var(--principal);
}


/*--- SERVICIOS ----*/

.titleRehusable{
    text-align:center;
    font-size:35px;
    padding:40px 0px;
    color:var(--black);
}

.flexServiciosRd{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:40px;
    padding-bottom:50px;
}

.servicioRd{
    width:350px;
    height:auto;
    transition: all ease .3s;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
}

.containImgServRd{
    width:100%;
    height:250px;
    overflow: hidden;
}

.containImgServRd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all ease .3s;
}

.contenidoServRd{
    width:100%;
    height:auto;
    padding:20px;
}


.contenidoServRd h3{
    font-size:20px;
}

.contenidoServRd p{
    font-size:13px;
    padding:10px 0px;
}


.contenidoServRd a button{
    padding:10px 20px;
    background-color:var(--principal);
    color:var(--black);
    border-radius:7px;
    border:none;
    font-size:12px;
    font-weight:800;
    outline:none;
    cursor: pointer;
    transition:all ease .3s;
    margin-top:10px;
}

.contenidoServRd:hover a button{
    background-color:var(--black);
    color:var(--white);
}

.btnGeneral{
    padding:10px 20px;
    background-color:var(--principal);
    color:var(--black);
    border-radius:7px;
    border:none;
    font-size:12px;
    font-weight:800;
    outline:none;
    cursor: pointer;
    transition:all ease .3s;
    margin-top:10px;
}

.btnGeneral:hover{
    background-color:var(--black);
    color:var(--white);
}


/*--- FIN DE LOS SERVICIOS ----*/


/*--- DETALLE SERVICIOS -----*/
.flexServDetalle{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap:15px;
    padding:0px 0px;
    padding-bottom:50px;
}


.containerValoresExtra{
    width:20%;
    height:auto;
}

.polygonVal{
    width:100%;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
    height:350px;
    background-color:var(--principal);
    z-index:1;
    position: relative;
    padding:20px;
}

.polygonValAtras{
    width:100%;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
    height:370px;
    margin-top:-350px;
    margin-left:15px;
    background-color:#f5f5f5;
}

.flexValServ{
    width:100%;
    height:80%;
    display:flex;
    justify-content:center;
    align-content:center;
    flex-wrap:wrap;
    gap:20px;
}
.flexOkVal{
    display:flex;
    justify-content:left;
    align-items:center;
    gap:10px;
    width:100%;
}

.iconImg{
    width:50px;
    height:50px;
    background-color:var(--white);
    border-radius:50%;
    display: flex;
    justify-content:center;
    align-items:center;
}
.flexOkVal p{
    font-size:13px;
}


.contentQITwo{
    width:70%;
    height:auto;
}


.contentQITwo h4{
    color:var(--black);
    font-size:35px;
}

.contentQITwo h4 span{
    color: var(--principal);
}

.contentQITwo p{
    font-size:15px;
    text-align: justify;
    padding:10px 0px;
}




.onBanner{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:-80px;
}

.iconOnU{
    width:250px;
    height:150px;
    background-color:var(--black);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-content:center;
}

.containerImgIcosn{
    width:80px;
    padding:10px;
}

.containerImgIcosn img{
    width:100%;
    height:auto;
}

.bgPrincipal{
    background-color:var(--principal);
}

.iconOnU p{
    font-size:15px;
    margin-top:-5px;
    width:100%;
    text-align:center;
}






/*------- estilos para porque nosotros --------*/
.bgDg{ 
    width:100%;height:auto;
    background: rgb(52,48,46);
    background: -moz-linear-gradient(90deg, rgba(52,48,46,1) 37%, rgba(247,176,0,1) 37%);
    background: -webkit-linear-gradient(90deg, rgba(52,48,46,1) 37%, rgba(247,176,0,1) 37%);
    background: linear-gradient(90deg, rgba(52,48,46,1) 37%, rgba(247,176,0,1) 37%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#34302e",endColorstr="#f7b000",GradientType=1);
}

.containerPorNosotros {
    display: flex;
    flex-wrap: wrap;
    padding-top:30px;
  }
  
  .left-side {
    flex: 1;
    background-color: var(--white);
    padding: 20px;
    color: var(--white);
    transition:all ease .3s;
    color:var(--black);
  }
  
  
  .left-side h3{
    font-size:45px;
    line-height:50px;
  }
  
  .left-side img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
  
  .right-side {
    flex: 1;
    background-color: var(--white);
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
  }
  
  .box {
    flex: 1 0 calc(50% - 20px);
    margin: 10px;
    height: 230px;
    padding: 15px;
    background-color:var(--white);
    border-radius:10px;
    color:var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    transition:all ease .3s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  
  
  .box:hover{
    background-color:var(--black);
    transform: scale(1.05);
  }
  
  .blue-box h4 {
    color: var(--black);
    font-size:20px;
    line-height:25px;
    padding-bottom:10px;
  }

  .box:hover h4, .box:hover p{
    color:var(--white);
  }
  
  .blue-box p {
    color: var(--black);
    line-height:20px;
  }
  
  .icon-circle {
    width: 100px;
    height: 100px;
    border-radius:5px;
    background-color: var(--white);
    padding:10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .icon-circle img{
    width:100%;
    height:100%;
  }
  

.containerFrameMap{
    width: 100%;
    height:300px;
    background-color:var(--white);
    padding:15px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin:15px 0px;
    overflow:hidden;
}
.containerFrameMap iframe{
    border-radius:10px;
    overflow:hidden;
}

/* Formulario de contacto */

.flexNaranajSilver{
    display:flex;
    justify-content:space-between;
    align-items: start;
    width:100%;
    height:100%;
    background-color:var(--principal);
}

.naranja{
    display:flex;
    padding-top:50px;
    justify-content:right;
    padding:15px;
    padding-right:50px;
    width:100%;
    height:100%;
    background-color:var(--principal);
}

.contenidoNaranja{
    width:520px;
}


.silver{
    display:flex;
    justify-content:left;
    padding:15px;
    padding-top:50px;
    padding-left:50px;
    width:100%;
    height:100vh;
    background-color:var(--black);
}


.contenidoSilver{
    width:520px;
}

.contenidoNaranja h2{
    font-size:30px;
    color:var(--black);
    padding:10px 0px;
    padding-top:40px;
}

.contenidoSilver h2{
    font-size:30px;
    color:var(--white);
    padding:10px 0px;
    padding-top:10px;
}


.itemConteSilver{
    padding:20px 0px;
    color:var(--white);
}

.titleContSilver{
    font-size:15px;
    font-weight:600;
    color:var(--principal);
    padding-bottom:10px;
}

.contenteTIel{
    color:var(--white);
    cursor: pointer;
    font-size:14px;
}

.contenteTIel:hover{
    color:var(--principal);
}

.contenteTIela{
    color:var(--white);
    font-size:14px;
}

.rdsContact h2{
    font-size:20px;
    color:var(--white);
    padding-top:10px;
}







@media(max-width:1225px){
    .containerImgQI{
        width:50%;
    }
    .contentQI{
        width:47%
    }


    .contenidoNaranja,.contenidoSilver {
        width:400px;
    }
}





@media(max-width:1150px){
    .imgIzquierda{
        width:37%;
    }

    .containerInfoBoletin{
        width:60%;
    }

    .barraUMarca{
        width:25%;
    }
    .titleMarca{
        width:45%;
    }

    .flexServiciosRd{
        gap:30px;
    }


    .bg-PrincipalValores{
        height: auto;
        max-height:none;
        min-height:auto;
        margin-bottom: 0px;
        padding:50px 0px;
    }

    .flexValoresNosotros{
        flex-wrap:wrap;
        margin-top:0px;
    }
}



@media (max-width: 1111px) {
    .left-side,.right-side {
      flex: none;
      width:100%;
      padding:0px;
      text-align:center;
    } 
    .blue-box h4{font-size:17px;}
    .left-side h3{font-size:40px;line-height:40px;padding-bottom:10px;}
    #imagenAmpliada{width:70%;}
    .box{margin:5px;}
  }
  
  

@media(max-width:1100px){
    .flexValores .flexItemValor{
        min-width:200px;
    }
    .contentQI p{
        font-size:14px;
    }

.onBanner{
    margin-top:-60px;
}

.iconOnU{
    width:230px;
    height:120px;
}

.containerImgIcosn{
    width:70px;
}


}


@media(max-width:950px){
    .flexQuienesSomosInicio{flex-wrap:wrap-reverse;}

    .containerImgQI{
        width:100%;
    }
    .contentQI{
        width:100%
    }

    
    .barraUMarca{
        width:15%;
    }
    .titleMarca{
        width:75%;
    }


    .onBanner{
        margin:15px;
    }

    .iconOnU{
        width:200px;
        height:150px;
    }

    .containerImgIcosn{
        width:70px;
    }

    .iconOnU p{
        font-size:12px;
    }



    .contenidoNaranja,.contenidoSilver {
        width:350px;
    }

    .contenidoSilver h2{
        font-size:25px;
        line-height:28px;
    }
    
    
    .iconControlEquipo{display:none;}

}



@media(max-width:900px){
    .flexImgInfoBoletin{flex-wrap:wrap;height:auto;gap:40px;}
    .borderderBottom{border-bottom-right-radius:0px;}
    .imgIzquierda{
        width:100%;
    }

    .containerInfoBoletin{
        width:100%;
        padding:15px;
    }

    .containerInfoB{
        width:100%;
    }

    .cuadroBordeBanner{
        width:50px;
    }


    .titleValore{
        font-size:23px;
    }
    .itemValorNo{
        width:130px;
        height:130px;
    }
    .itemValorNo p{font-size:12px;}
    .flexValoresNosotros{
        gap:20px;
    }




    .onBanner{
        flex-wrap:wrap;
    }


    .flexNaranajSilver{
        flex-wrap:wrap;
    }

    .naranja{
        padding-right:15px;
    }

    .silver{
        padding-left:15px;
    }

    .contenidoNaranja,.contenidoSilver {
        width:100%;
    }

    .rdsContact{
        display:none;
    }

}




@media(max-width:550px){
    .InputControl input{
        min-width:300px
    }

    .marcasss,.hemoss{
        font-size:20px;
        line-height:23px;
    }

    .hemoss{
        margin-top:0px;
    }

    .barraMarca{
        height:4px;
    }



    .onBanner{
        margin:15px;
    }
    
    .iconOnU{
        width:170px;
        height:140px;
    }
    
    .containerImgIcosn{
        width:70px;
    }
    
    .iconOnU p{
        font-size:10px;
    }
}


@media(max-width:535px){
    .contentQI h4{text-align:center;font-size:22px;}
    .contentQI p{font-size:12px;}
    .contentQI .flexValores{justify-content:center;}
    .contentQI .flexValores{gap:10px;}
    .flexValores .flexItemValor{
        min-width:auto;padding:5px 10px;gap:5px;
    }
    .flexValores .flexItemValor .imgValor{
        width:25px;height:25px;
    }
    
    .titleSuscribe{
        font-size:25px;
        line-height:30px;
    }
    .textSuscribe{
        font-size:12px;
    }

    .overlayBanner h1{
        font-size:25px;
    }

    .bannerUp{
        height:350px;
    }


    .servicioRd{
        width:320px;
    }
    
    .containImgServRd{
        height:220px;
    }

}



@media(max-width:475px){
    .InputControl input{
        min-width:280px
    }
}


@media(max-width:460px){
    .InputControl input{
        min-width:250px
    }
}

@media(max-width:425px){
    .InputControl input{
        min-width:220px
    }
    .ButtonControl button{
        padding:15px;
    }
    .flexBarrasTitle{gap:10px;}
    .barraUMarca{width:10%;}
    .titleMarca{width:85%;}

    .marcasss,.hemoss{
        font-size:16px;
        line-height:20px;
    }


    .cuadroBordeBanner{
        display:none;
    }

    .overlayBanner{
        padding-left:15px;
    }


    .servicioRd{
        width:300px;
    }
    
    .containImgServRd{
        height:200px;
    }

}

@media(max-width:380px){
    .InputControl input{
        max-width:130px
    }

    .onBanner{
        margin:10px;
    }
    
    .iconOnU{
        width:150px;
        height:130px;
    }
    
    .containerImgIcosn{
        width:70px;
    }
    
    .iconOnU p{
        font-size:9px;
    }
}

@media(max-width:370px){
    .InputControl input{
        max-width:190px;
        min-width:190px;
    }
}