body{ 
    background: #000;
    padding: 0px;
    margin:0px;
    box-sizing: border-box;
    
}

/*-----------BARRA DE NAVEGACION--------------*/

header{
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    transition: 0.6s;
    padding: 10px 100px;
    z-index: 100000;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)); 
    
    
}

header ul {
    margin-left: 20%; 
    position:center;
    display: flex;
    
    
}

header ul li{
    position: center;
    list-style: none;
}
/*----- SI EL CURSOR PASA POR LAS LETRAS O EL LOGO DE ICAP, TIENE UN EFECTO ---------*/

header ul li:hover{
    transform: scale(1,1.2);
    text-decoration: underline; /*Si das clic en el enlace hace un subrrayado*/
}
header li a{
    
    
    margin: 0 30px;
    text-decoration: none;
    color: rgb(232, 131, 77);
    letter-spacing: 2px;
    font-weight: bold;
    font-family: 'Tahoma';
    transition: 0.6s;
    font-size: 20px;
}
header ul li a:hover{
    text-decoration: underline; /*Si das clic en el enlace hace un subrrayado*/
}
.active {
    text-decoration: underline; /*Si das clic en el enlace hace un subrrayado*/
}
.actives{
    border-bottom: 2px solid rgb(232, 131, 77);  /*Si das clic en el enlace hace un subrrayado*/
}

/*----------- BARRA DE NAVEGACION PARA PANTALLAS PEQUEÑAS-------------*/
header button{
    background-color: transparent;
    border-bottom: none;
    border-color: transparent;
    position:fixed;
    right: 5%;
    display: none;
}

header button img{
    width: 25px;
    height: 30px;
}

.dropdown_menu{
    right: 0px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)); 
    overflow: hidden;
    position:fixed;
    margin-top: 149px;
    display: none;
    width: 100%;
    box-shadow: 2px 1px 5px;
    
    
}
.dropdown_menu li{

    display: flex;
    align-items: end;
    justify-content: center;
    
}

.dropdown_menu li a{
    color: rgb(232, 131, 77);
    font-size: 15px;
    margin-top: 6px;
    margin-bottom: 10px;
    
}

.dropdown_menu li a:hover{
    text-decoration: underline;
    
}


header img{
    width: 240px;
    height: 60px;
}

header img:hover{
    transform: scale(1,1.1);
}

header.sticky{
    padding: 2px 100px ;
    
    box-shadow: 1px 1px 5px;
    background-color: #000;
    
}

.dropdown_menu.sticky{
    padding: 2px 100px ;
    
    box-shadow: 1px 1px 5px;
    background-color: #000;

    
}

@media screen and (min-width: 1700px){
    header ul {
        margin-left: 40%; 
    }
}

@media screen and (min-width: 2000px){
    header ul {
        margin-left: 50%; 
    }
}

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

    ul li{
        display: none;
    }
    header
    {
   
        text-align: left; /* Centra el contenido del enlace */
        padding: 5px 50px;
    }
 
    header a img{
        width: 120px;
        height: 30px;
    }

    .opciones{
        
        display: block;
        
    }
    .opciones:focus + .dropdown_menu {
        display: block;
    }
    
}

.banner-dashboard {
    position: center center;
    width: 100%;
    height: 100vh;
    background-image: url(taller.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}


.banner-nosotros{
    position: center center;
    width: 100% ;
    height: 100vh;
    background-image: url(fondo_nosotros.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
}

.container-dashboard-logo,
.container-nosotros-logo,
.container-dashboard-politica-calidad,
.container-nosotros-cientes

{
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 100px;
    margin-bottom: 100px;
}


.container-dashboard-galeria{
    margin-top: 100px;
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
    margin-bottom: 100px;
}

.container-dashboard-logo{
    margin-bottom: 120px;
}


@media (max-width: 1200px) {
    /* Estilos para pantallas más pequeñas, por ejemplo, dispositivos móviles */
    .banner-dashboard,
    .banner-nosotros
    {
        height: 70vh; /* Ajusta la altura como desees para pantallas más pequeñas */
        
    }
    header.sticky{
    background-color: #000;
    }
    
}

@media (max-width: 1000px) {
    /* Estilos para pantallas más pequeñas, por ejemplo, dispositivos móviles */
    .banner-dashboard,
    .banner-nosotros
    {
        height: 50vh; /* Ajusta la altura como desees para pantallas más pequeñas */
        
    }
    header.sticky{
    background-color: #000;
    }
    
}



.title-dashboard-principal,
.title-nosotros-principal,
.title-nosotros-clientes,
.container-title-servicios

{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);
    line-height:inherit;

}



.body-texto-nosotros-clientes
{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 2;
    color: #fff;
}

.body-texto-dashboard-principal,
.body-texto-nosotros-principal{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 2;
    color: #fff;
}

.body-texto-dashboard-politica-valor
{
    text-align: justify;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 2;
    color: #fff;
}

/* Contenedor principal que se divide en 3 */
.contenedor-objetivos {
  display: flex;
  justify-content: space-between; /* Distribuye las 3 cajas dejando espacio entre ellas */
  gap: 20px;                      /* Espacio de separación entre columnas */
  flex-wrap: wrap;                /* Si la pantalla es muy chica (celular), las baja automáticamente */
  padding: 20px;
font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 2;
    color: #fff;
}

/* Estilo para cada una de las 3 columnas/tarjetas */
.tarjeta-objetivo {
  flex: 1;                        /* Hace que las 3 cajas midan exactamente lo mismo */
  min-width: 250px;               /* Evita que se aplasten demasiado en pantallas medianas */
  padding: 25px;
  border-radius: 8px;             /* Bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para dar volumen */
  text-align: center;            
}



.title-dashboard-ingenierias,
.title-nosotros-ingenierias,
.title-dashboard-ingenierias
{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 100px;
    
}


/*contenedor principal*/

.container-dashboard-ingenierias,
.container-nosotros-ingenierias
{
    margin-top: 50px;
    margin-left: 250px;
    margin-right: 250px;
}
/*Contenedor de cada imagen*/

.container{
    background-color: transparent;
    flex-basis: calc(50% - 10px); /* Esto determina el ancho de los contenedores y considera el margen */
    margin: 5px; /* Espaciado entre los contenedores */
    margin-top: 5px;
}

.container-inner-ingenierias{
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    
    width: 100%;
    height: 100%;
}


.card-carrusel-ingenierias figure{
    position: relative;
    height:  100%;
    transition: all 500ms ease-out;
    
}
.card-carrusel-ingenierias img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    
}

.card-carrusel-ingenierias{
    position: relative;
    width: 100%;
    aspect-ratio: 32/40; /* Cambia esto según la relación de aspecto que desees */
    overflow: hidden;
    
}

.capa{
    position: absolute;
    top: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(243, 103, 52, 0.547);
    transition: all 500ms ease-out;
    opacity: 0;
    text-align: center;
    
}



.container figure .capa span{
    color:#fff;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.container figure:hover > .capa{
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
  
    .container-inner-ingenierias{
        flex-direction: column;
    }
    .card-carrusel-ingenierias img{
        height: 100%;        
    }
    .container figure .capa span{

        font-size: 15px;
    }
    .body-texto-dashboard-principal{
        font-size: 20px;
    }
    
    .card-carrusel-ingenierias{
        position: relative;
        width: 100%;
        aspect-ratio: 8/6; /* Cambia esto según la relación de aspecto que desees */
        overflow: hidden;
    }
    

}

    @media (max-width: 1200px) {
        .container-dashboard-ingenierias {
            margin-left: 30px;
            margin-right: 30px;
        }
        .card-carrusel-ingenierias img{
            height: 200%;        
        }
}

/* Estilos para los contenedores */




.container-dashboard-mision-vision {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(62, 62, 62, 0.311);
    margin-top: 50px;
    padding: 20px;
    box-sizing: border-box; /* Evita que el padding afecte el tamaño total */
}



.container-inner {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between;
    width: 100%;
    margin: 10px;
}

.container-dashboard-mision,
.container-dashboard-vision {
    
    flex-basis: calc(40% - 0px); /* Esto determina el ancho de los contenedores y considera el margen */
    margin: 30px; /* Espaciado entre los contenedores */
}

.container-dashboard-mision .title,
.container-dashboard-vision .title {
    font-weight: bold;
   
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);
}

.container-dashboard-mision .body,
.container-dashboard-vision .body {
    text-align: center;
    font-weight: none;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
}

/* Media query para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .container-inner {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
    }
    .container-inner img{
        width: 100px;
    }
    .container-dashboard-mision .body,
    .container-dashboard-vision .body {
    font-size: 20px;
}
}



/*--------------------------*/
.container-nosotros-capacidades {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(62, 62, 62, 0.311);
    margin-top: 50px;
    padding: 20px;
    box-sizing: border-box; /* Evita que el padding afecte el tamaño total */
}



.container-inner-capacidades {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
   
    justify-content: space-between; /* Centra horizontalmente los elementos */
    width: 100%;
    margin: 10px;
    
}

@media screen and (max-width: 1255px) {
    .container-inner-capacidades {
        justify-content: center; /* Centra horizontalmente los elementos */
    }
}

.container-title-locaciones{
    font-weight: bold;
   
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);
}

.card-body-capacidades {
    
    
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
    align-items: center;
    
    
    flex-basis: calc(40% - 20px); /* Esto determina el ancho de los contenedores y considera el espacio entre ellos */
    margin: 30px; /* Espaciado entre los contenedores */
    
}



.container-img-locaciones{
    width: 600px; /* Ancho específico */
    height: 400px; /* Altura específica */
   
    margin: 0 auto; /* Esto centra el contenedor horizontalmente */
    
}

.card-body-capacidades img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto asegura que la imagen cubra completamente el contenedor */
    
    

}
@media screen and (max-width: 768px) {
    .upper-row, .lower-row ,.container-inner-capacidades {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
    }
    .title-capacinades-nosotros{
        line-height: 0px; 
        
        height: 0%;
    }
    .container-nosotros-capacidades{
        margin-right: 0%;
        margin-left: 0%;
    }
    .container-img-locaciones{
        
        padding: 10px; /* Ajustes de espacio para pantallas más pequeñas */
        width: 250px; /* Ancho específico */
        height: 200px; /* Altura específica */
        object-fit: cover; /* Esto asegura que la imagen cubra completamente el contenedor */

       
    
    margin: 0 auto; /* Esto centra el contenedor horizontalmente */
        
    }
    .body-capacidades{
        font-size: 20px;
        object-fit: cover; /* Esto asegura que la imagen cubra completamente el contenedor */

    }
  
    .container-inner-capacidades {
        
        width: 100%;
        
        
        
        
    }
}
/* Estilos para el contenedor principal de servicios */
.container-dashboard-servicios { 
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: white;
    padding: 20px;
    box-sizing: border-box;

}

/* Estilos para el título del contenedor de servicios */
.container-title-servicios p{
    margin: 10px;
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    margin-top: 50px;
}

/* Estilos para el contenedor interno que alberga los servicios */


/* Estilos para cada contenedor de servicio */
.container-servicio {
    background-color: transparent;
    flex-basis: calc(33.33% - 20px); /* Esto determina el ancho de los contenedores y considera el espacio entre ellos */
    box-sizing: border-box;
    position: relative;
    max-width: 500px; /* Limita el ancho máximo de los contenedores de servicios */
    margin-bottom: 20px; /* Espacio inferior entre los contenedores */

    cursor: pointer;
    
}

/* Estilos para el texto dentro de cada contenedor de servicio */
.container-servicio p {
    font-family: 'Segoe UI Emoji',Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: rgb(232, 131, 77);
    margin: 0; /* Elimina el margen predeterminado */
}

/* Estilos para la imagen y la capa de cada contenedor de servicio */


.container-servicio img {
    width: 100%;
    object-fit: cover;
    height: 100%; /* Ajusta la altura de la imagen al 100% del contenedor */
}

.container-servicio .capa {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(243, 103, 52, 0.547);
    transition: all 500ms ease-out;
    opacity: 0;
    object-fit: cover;
    
}

.container-servicio:hover .capa {
    opacity: 1;
    visibility: visible;
}

.container-servicio .capa h3 {
    color: #fff;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-weight: bold;
    font-size: 30px;
    margin-top: 100px;
}

footer {
    background-color:  rgb(201, 90, 46); /* Color de fondo del pie de página */
    color: #fff; /* Color del texto en el pie de página */
    text-align: center;
    padding: 10px 0;
    
}

.contenedor {
    display: flex;
    justify-content: space-between;
    
}

.informacion, .redes-sociales {
    flex-basis: 50%;
    text-align: left;
    text-align: center;
}

.redes-sociales ul {
    list-style: none;
    padding: 0;
}

.redes-sociales ul li {
    display: inline;
    margin-right: 10px;
    margin-left: 10px;
}

.redes-sociales ul li:last-child {
    margin-right: 0;
}

.derechos {
    margin-top: 20px;
}


.redes-sociales a img{
    width: 50px;
    height: 50px;
   
}

.informacion a img{
    width: 50px;
    height: 50px;
   
}

.informacion img{
    margin-top: 5%;
    width: 40%;
    height: auto;
   
}
.informacion a img:hover{
    transform: scale(1.1,1.1);
}

.redes-sociales a img:hover{
    transform: scale(1.1,1.1);
}
.title-footer{
    font-family: 'Segoe UI Emoji',Tahoma;
    
    font-size: 25px;
    color:white;
    text-align: center;
}

.texto-footer{
    font-family: 'Segoe UI Emoji',Tahoma;
    
    font-size: 15px;
    color: #fff;
    text-align: center;
}

.derechos{
    
    font-family: 'Segoe UI Emoji',Tahoma;
    
    font-size: 15px;
    color: #fff;
}
.banner-contacto{
    position: center center;
    width: 100% ;
    height: 10vh;
    
    background-size: cover;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
   
}

.container-contacto
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 5%;
    padding: 20px;
    box-sizing: border-box; /* Evita que el padding afecte el tamaño total */
}

.container-inner-contacto {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    
}



@media screen and (max-width: 1440px) {
    .container-inner-contacto {
        justify-content: center; /* Centra horizontalmente los elementos */
    }
}


.title-contacto{
    flex-basis: calc(40% - 0px); /* Esto determina el ancho de los contenedores y considera el margen */
    margin: 40px; /* Espaciado entre los contenedores */
    align-items: center;
    
    
}

.title-contacto .title{
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);
}

.title-contacto .body{
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 20px;
    color: white;
}

.title-contacto .body-pregunta{
   
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 15px;
    color: white;
}

.title-contacto .body-contacto{
   
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 20px;
    color: rgb(232, 131, 77);
    
}
.container-body-contacto{
   margin-left: 10%;
   margin-right: 8%;
    
    text-align: left;
}
.container-form{
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    flex-basis: calc(50% - 0%); /* Esto determina el ancho de los contenedores y considera el margen */
    margin: 30px; /* Espaciado entre los contenedores */
    max-width: 100%; /* Establece el ancho máximo del contenedor del formulario */
    margin-top: 5%;
}

.body-title-contacto{
    font-size: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    color:#fff;
    text-align:center;
    margin-top: 100px;
}

@media (max-width: 768px) {
    .contenedor {
        flex-direction: column;
        align-items: center;
        margin-right: 30px;
    }

    .informacion, .redes-sociales {
        flex-basis: 100%;
    }

    .redes-sociales{
        margin-left: 30px;
    }

    .derechos {
        margin-top: 5px;
    }

    .title-contacto {
        font-size: 30px;
        margin-top: 30px;
    }
    .informacion{
        margin-left: 10%;
    }
    .container-body-contacto{
        margin-left: 0%;
        margin-right: 0%;
         
         text-align: left;
         
     }
     .title-contacto .body-contacto{
        font-size: 15px;

     }
}

.form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
}

.div-form-button{
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: left;
    grid-column: span 2; /* Hace que abarque las dos columnas */
}

.form button{
    background-color:  rgb(201, 90, 46);
    font-size: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    color:#fff;
    padding: 10px 20px; /* Añadir relleno (padding) para hacer el botón más grande */
    border: none; /* Quitar el borde del botón */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    border-radius: 8px;
}

.div-form-button button:hover {
    background-color: #ff6b32; /* Cambiar el color de fondo al pasar el cursor sobre el botón */
}
 
.div-form{

    padding-right: 40px; /* Ajusta la cantidad de espacio horizontal entre los inputs */
    
    

    
}

.div-form-textarea{

    margin-top: 10px;
    

    
}



.form .div-form input{
    font-size: 20px;
    background-color: transparent;
    color: #fff;
    font-family: 'Segoe UI Emoji', Tahoma;
    width: 100%;
    height: 40px; /* Ajusta esta altura según tus preferencias */
    border-radius: 8px; /* Esto le da esquinas redondeadas */
    border: 1px solid #ccc; /* Añade un borde para un aspecto más definido */
    padding: 5px 10px; /* Añade espacio interno para el texto */
}


.form .div-form select {
    font-size: 20px;
    background-color: transparent;
    color: #fff;
    font-family: 'Segoe UI Emoji', Tahoma;
    width: 105%;
    height: 50px; /* Ajusta esta altura según tus preferencias */
    border-radius: 8px; /* Esto le da esquinas redondeadas */
    border: 1px solid #ccc; /* Añade un borde para un aspecto más definido */
    padding: 5px 10px; /* Añade espacio interno para el texto */
   
}

.form .div-form select option {
    font-size: 20px;
    background-color: black;
    color: #fff;
    font-family: 'Segoe UI Emoji',Tahoma;
    width: 100%;
}

.form .div-form-textarea textarea{
    font-size: 20px;
    background-color: transparent;
    color: #fff;
    font-family: 'Segoe UI Emoji', Tahoma;
    width: 100%;
    height: 120px; /* Ajusta esta altura según tus preferencias */
    border-radius: 8px; /* Esto le da esquinas redondeadas */
    border: 1px solid #ccc; /* Añade un borde para un aspecto más definido */
    padding: 5px 10px; /* Añade espacio interno para el texto */
   
    resize: none;
    width: calc(100% + 95%); /* Ajusta el ancho para compensar el padding */
    grid-column: span 2;
    
}

@media (max-width: 768px) {
    .form {
        grid-template-columns: 1fr;
    }
    .container-form {
        margin-right: 0; /* Elimina el margen derecho */
        max-width: 100%; /* Ocupa todo el ancho disponible */
    }
    .container-inner-contacto{
        justify-content: center; /* Centra los elementos horizontalmente */
        align-items: center; /* Centra los elementos verticalmente */
    }
    .container-form{

        flex-basis: 100%;
        margin-left: 0%;
        
    }
    .div-form{
        font-size: 40px;
        padding-right: 0px; /* Ajusta la cantidad de espacio horizontal entre los inputs */
    }
    .form .div-form input{
        width: 80%;
    }
    .form .div-form textarea{
        width: 80%;
        height: 60px; /* Ajusta la altura según tus preferencias */

    }
    .form .div-form select{
        width: 86%;
        height: 55px;
    }
    .div-form-button{
        text-align: center;
    }
    .banner-contacto{
        height: 1vh;
    }
    .form .div-form-textarea textarea{
        
        width: 80%; /* Ajustar el ancho del textarea al 100% */
      
        
    }
    .div-form-button {
        grid-column: span 1; /* Volver a una sola columna */
        text-align: center; /* Centrar el texto en pantallas pequeñas */
    }
    
}

.container-map{
    margin-top: 100px;
    margin-left: 20%;
    margin-right: 20%;
}

.title-map{
    margin: 10px;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: white;
    text-align: center;
}

/*---------------DISEÑO MECANICO*--------------------*/
.container-mecanico
{
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
}



/*background-attachment: fixed;*/

.container-title-mecanico{
    background-image: url(diseno.jpg);
    width: 100% ;
    height: 80vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-title-mecanico::before {
    content: "";
    position: absolute;
    width: 100% ;
    height: 80vh;
    background-color: rgba(97, 90, 85, 0.707);
}
.content-title-mecanico{
    text-align: center;
    
}

.title-mecanico-principal
{
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color:white;
    line-height:absolute;
    line-height: 1100%;
    text-align: center;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.body-mecanico-principal
{
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 30px;
    color:white;
    line-height:absolute;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.title-mecanico-elemento{
    margin-top: 20px;
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    color: rgb(232, 131, 77);
}

.body-mecanico-elemento{
    margin-top: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 17px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
}
.container-mecanico{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.container-mecanico-principal{
 
    width: 400px; /* Ajusta el ancho como desees */
    margin: 10px;
    padding: 10px;
    text-align: center;
    margin-top: 100px;
    
}

.container-mecanico-principal img{
    height: 35%;
    width: 30%;
}
  
.container-mecanico-principal p {
    margin: 0;
}


/*---------------MANUFACTURA*--------------------*/
.container-manufactura
{
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 70px;
}

.container-title-manufactura{
    background-image: url(Manufactura.jpeg);
    width: 100% ;
    height: 80vh;
    background-size: cover;
    background-repeat: no-repeat;
}


.container-title-manufactura::before {
    content: "";
    position: absolute;
    width: 100% ;
    height: 80vh;
    background-color: rgba(97, 90, 85, 0.707); /* Cambia el color y la opacidad según tus preferencias */
}

.content-title-manufactura{
    text-align: center;
}
.title-manufactura-principal
{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color:white;
    line-height: 900%;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.body-manufactura-principal
{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 30px;
    margin-left: 200px;
    margin-right: 200px;
    color:white;
    line-height:inherit;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.title-manufactura-elemento{
    margin-top: 20px;
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    color: rgb(232, 131, 77);
}

.body-manufactura-elemento{
    margin-top: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 17px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
}
.container-manufactura{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.container-manufactura-principal{
    width: 300px; 
    margin: 10px;
    padding: 30px;
    text-align: center;
    margin-top: 80px;
    
}

.container-manufactura-principal img{
    height: 35%;
    width: 30%;
}
  
.container-manufactura-principal p {
    margin: 0;
}

.container-manufactura-principal .soldadura{
    height: 50%;
    width: 40%;
}

/*---------------NEUMATICO*--------------------*/
.container-neumatico
{
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
}

.container-title-neumatico{
    background-image: url(Neumatico.jpg);
    width: 100% ;
    height: 80vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-title-neumatico::before {
    content: "";
    position: absolute;
    width: 100% ;
    height: 80vh;
    background-color: rgba(97, 90, 85, 0.707); /* Cambia el color y la opacidad según tus preferencias */
}

.content-title-neumatico{
    text-align: center;
}

.title-neumatico-principal
{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color:white;
    line-height: 900%;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.body-neumatico-principal
{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 30px;
    margin-left: 200px;
    margin-right: 200px;
    color:white;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.title-neumatico-elemento{
    margin-top: 20px;
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    color: rgb(232, 131, 77);
}

.body-neumatico-elemento{
    margin-top: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 17px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
}
.container-neumatico{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.container-neumatico-principal{
    width: 300px; /* Ajusta el ancho como desees */
    margin: 20px;
    padding: 30px;
    text-align: center;
    margin-top: 80px;
}

.container-neumatico-principal img{
    height: 35%;
    width: 30%;
}
  
.container-neumatico-principal p {
    margin: 0;
}


/*---------------CONTROL*--------------------*/
.container-control
{
    position: center center;
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 70px;
}

.container-title-control{
    background-image: url(Control-fondo.jpeg);
    width: 100% ;
    height: 80vh;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.container-title-control::before {
    content: "";
    position: absolute;
    width: 100% ;
    height: 80vh;
    background-color: rgba(97, 90, 85, 0.707); /* Cambia el color y la opacidad según tus preferencias */
}

.content-title-neumatico{
    text-align: center;
}

.title-control-principal
{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color:white;
    line-height: 900%;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.body-control-principal
{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 30px;
    margin-left: 200px;
    margin-right: 200px;
    color:white;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.title-control-elemento{
    margin-top: 20px;
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 25px;
    color: rgb(232, 131, 77);
}

.body-control-elemento{
    margin-top: 20px;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 17px;
    line-height: 1.5; /* Espacio entre líneas */
    color: #fff;
}
.container-control{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.container-control-principal{
    width: 300px; 
    margin: 20px;
    padding: 30px;
    text-align: center;
    margin-top: 80px;
    
}

.container-control-principal img{
    height: 30%;
    width: 50%;
}
  
.container-control-principal p {
    margin: 0;
}

@media (max-width: 768px) {
    .body-manufactura-principal,
    .body-neumatico-principal,
    .body-mecanico-principal,
    .body-control-principal
    {
        
       
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
       
        
    }
    .container-neumatico-principal img {
        height: 25%;
        width: 30%;
    }

    .container-control-principal img
    {
        height: 20%;
        width: 35%;
    }
    .title-neumatico-principal{
        line-height: 300%;
    }
    .title-neumatico-principal{
        font-size: 35px;
    }


}

@media (max-width: 768px) {
    .container-mecanico-principal img{
        height: 30%;
        width: 40%;
    }
    .container-neumatico-principal img{
        height: 30%;
        width: 40%;
    }
}


@media (max-width: 1500px) {
    .title-mecanico-principal,
    .title-manufactura-principal,
    .title-neumatico-principal
    {
        line-height: 600%;
    }
    
}

.carousel-container {
    position: relative;
    max-width: 60%;
    margin: 0 auto;
    margin-top: 100px;    
    
}
  
.carousel {
    display: flex;
    overflow: hidden;
}
  
.carousel-item {
    min-width: 100%;
    min-height: 100%;
    
}
  
.carousel img {
    max-width: 100%;
    height: 100%;
}

.carousel-container button img{
    max-width: 20%;
    height: auto;
}
  
.prev-button, .next-button {
    position: absolute;
    top: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.prev-button {
    left: 2%;
}
  
.next-button {
    right: 2%;
}
  
.next-button:hover {
    transform: scale(1.1,1.1);
}

.prev-button:hover{
    transform: scale(1.1,1.1);
}

/* Media query para pantallas más pequeñas */
@media screen and (max-width: 768px) {
    .carousel-container {
        max-width: 100%;
        margin-top: 50px;
    }   
    .prev-button {
        left: 0%;
        width: 30%;
    }
      
    .next-button {
        right: 0%;
        width: 30%;
        
    }
}

.contenedor-clientes {
    
    flex-direction: column;
    margin-top: 60px;
}

.contenedor-clientes .fila-clientes {
    
    justify-content: center;
    gap: 20px; /* Espacio entre las tarjetas */
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.contenedor-clientes {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
}

.fila-clientes {
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tarjeta-clientes {
    
    padding: 20px;
    text-align: center;
    flex: 0 0 200px;
    margin: 10px;
    height: 200px;
    background-color: #ccc;
    display: flex;
    flex-direction: column; /* Establece el contenedor como flexbox */
    position: relative; /* Añade esta propiedad */
}

.contenedor-imagen {
    flex-grow: 1; /* Ocupa todo el espacio disponible verticalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(243, 103, 52, 0.547);
    opacity: 0;
    transition: opacity 0.3s ease;
    
}

.tarjeta-clientes:hover .capa {
    opacity: 1;
}


.contenedor-clientes .fila-clientes .tarjeta-clientes .contenedor-imagen img {
    max-width: 100%; /* Esto asegura que la imagen no exceda el ancho de la tarjeta */
    height: auto; 
    object-fit: cover;
}


.container-promesa-valor{
    
    background-image: url(promesa_valor.jpg);
    width: 100% ;
    height: 70vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-promesa-valor::before {
    content: "";
    position: absolute;
    width: 100% ;
    height: 70vh;
    background-color: rgba(97, 90, 85, 0.707); /* Cambia el color y la opacidad según tus preferencias */
}

.title-promesa-valor
{
    text-align: center;
    font-weight: bold;
    font-family: 'Segoe UI Emoji',Tahoma;
    font-size: 40px;
    color: rgb(232, 131, 77);;
    line-height: 600%;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.body-promesa-valor
{
    text-align: center;
    font-family: 'Segoe UI Emoji',Tahoma;
    line-height: 1.5; /* Espacio entre líneas */
    font-size: 25px;
    margin-left: 200px;
    margin-right: 200px;
    color:white;
    position: relative; /* Asegura que el texto se muestre sobre el fondo */
    z-index: 1;
}

.container-productos-servicios{
    width: 100% ;
    height: 5vh;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
   
    .body-promesa-valor
    {
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .title-promesa-valor{
        font-size: 30px;
    }
    .body-texto-nosotros-principal{
        font-size: 20px;
    }
    .body-texto-nosotros-clientes{
        font-size: 20px;
    }
}

.container-servicios-videos{
    background-color: rgba(62, 62, 62, 0.311);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 5%;
    
}

.card-servicios-videos{
    width: 25%; 
    margin: 2%;
    height: 30vh;
    

}

.card-servicios-videos video{
    width: 100%; 
    height: 100%;
    object-fit: cover; 
} 



@media (max-width: 768px) {
    .card-servicios-videos {
        width: 70%; 
    }   
}