@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
body {
  font-family: "Poppins", sans-serif;
  color: #0c0c0c;
  background-color: #ffffff;
  overflow-x: hidden;
}

/*header*/
.btn-idioma{
  background-color: #0363ca;
  color: white;
  box-shadow: 0px 0px 20px black;
 }

 .btn-contacto:hover{
  background-color: #60a2e9;
  color: white;
 }

 .nav-item .dropdown .dropdown-menu .dropdown-item:hover{
    background-color: #0376f1;
}  


@media (min-width:768px) {
  .nav-item.dropdown:hover .dropdown-menu {
    transition: all 1s ease;
    display: block;
  }  

  .dropdown-toggle::after {   /*ocultar la flecha haciaabajo del drop down*/
      opacity: 0;
  }
}

nav .nav-item:hover{
  background-color: #3331a5;
  border-radius: 10px;
}

.dropdown-item:hover{
  background-color: #026ffd;
  color:white
}

 /*index.php*/
@media (max-width:518px) {
  .encabezado{
    font-size: 20px;  
    padding-top: 0%;
  }
}


#boton-index-politica{
  background-color:rgb(12, 118, 189); 
}

#boton-index-politica:hover{
  background-color: rgb(28, 28, 150);
  border-color:  rgb(28, 28, 150);
}

header{
  background-image: url('./img/imagenes/head.jpg');
  background-size: auto;
  background-position: left center;
  width:100%; 
  height:300px;
  background-repeat: no-repeat; 
}


.sticky-top{
    background-color: rgb(28, 28, 150);
    color: white;
    text-align: center;
  transition: opacity 2s ease;
}

.carousel{
    width: 100%;
    max-height: 550px;
    overflow: hidden;
  }

/*.carousel-inner{
    width: 100%;
    height:350px;
  }
*/


.carousel-indicators li {
  background-color: #b1b8be; 
}

/* Cambiar color de los indicadores activos */
.carousel-indicators .active {
  background-color: #020c97;
}


.list-group-item{
    background-color: rgba(0, 0, 0, 0);
    border: 0px;
    padding: 5px;
  }

  .fot{
    background-color: rgb(197, 166, 13);
  }

  .contacto{
    max-width: 500px;
  }



.fondo{
    background-image: url('./img/imagenes/above-header.jpg');
    background-size: 100% auto; /* Ajusta el tamaño de la imagen * se puede poner 100% 100% para que se ajuste a su contenedor*/  
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-color: #cccccc;
  }  


  .text{
    background-color:  rgba(0, 0, 0, 0.4);
    height: 100%;
}

.politica_encabezado{
  background-color:  rgba(0, 0, 0, 0.1);
  height: 100%;
}


.card-body{
  overflow: hidden;
}

.card-index-noticia .card{
  transition: all 0.4s ease;
}

.card-index-noticia .card:hover{
  background-color: #0454ff;
  box-shadow: 5px 5px 5px rgb(0, 0, 0);  /*rgb(2, 17, 180);*/
  color: white
}


/*estilos clientes*/

.proyecto{
 position: relative;
 width: 100%;
}

.proyecto img{
  width: 250px;
  height: 150px;
 }


.proyecto:hover img{
opacity: 0.2;
}

.proyecto:hover .overlay{
  opacity: 1;
  }

.proyecto:hover .overlay{
 opacity: 1;
}

.overlay .iconos-contenedor{
 display: flex;
font-size: 50px;
}

.overlay{
  transition: all 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.overlay p{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 0;
}

  /*estilos noticia*/

  .card-noticia .row .card:hover{
		background-color: #e2e2e2; /* Color de fondo al pasar el cursor */
		box-shadow: 0px 15px 20px rgb(4, 12, 105);  /*rgb(2, 17, 180);*/
    transform: translateY(-20px);
  }

  /*estilo noticias*/

  .enlace-noticias:hover{
    background-color: #0773bb;
   color: #e2e2e2;
  }

  footer .iconos-footer{
    font-size: 70px;
  }

  /*estilos producto*/
.imagen-producto img{
  max-width: 100%;
  max-height: 150px;
}


.contenedor-productos .btn{
  background-color: #ffffff;
 box-shadow: 0px 0px 20px rgb(0, 0, 0);
 border: #d1d1d1 solid 1px;

}

.contenedor-productos .btn:hover{
 background-color: #66abf5;
 border:#66abf5 solid 1px;  
}

.contenedor-producto{ 
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 0%;
}

.productos {
  background-image: url('./img/imagenes/4.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 200px; /* Establece una altura para el contenedor */
}

.productos-foot {
   background-image: url('./img/imagenes/4.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: bottom bottom; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 400px; /* Establece una altura para el contenedor */
}

.contenedor-productos-moldes img{
   height: 100px;
   width: 100px
}

/*estilo nosotros*/

.quienes-somos {
  background-image: url('./img/imagenes/4.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: auto; /* Establece una altura para el contenedor */
}

.filosofia{
  background: linear-gradient(to right, rgb(0, 0, 0,0.5), rgb(0, 0, 0)),	url('./img/nosotros/1.jpg'); 
  background-size: cover;  
  background-position: center center;
  color: #ffffff;
  box-shadow: 0px 0px 20px rgb(0, 0, 0);
}

.img-filosofia{
 border-radius:10%;

}

.instalaciones{
    box-shadow: 0px 0px 20px rgb(0, 0, 0);
    background-color: #faf1f1;
    height: 100%;
    width:70%;
}

.imagen-instalacion img{
 
  height: 300px;
}

.mis-vis{
  background-color: #097efb;
  color: #ffffff;
  box-shadow: 0px 0px 20px rgb(0, 0, 0);
}




/*estilos politica*/


/*
.reconocimiento-jatco{
  background-color: #ffffff;
  box-shadow: 0px 0px 20px rgb(255, 255, 255);
  color:black;
}*/
.titulo-politica{
  width:100%;
  background: linear-gradient(to left, rgb(0, 0, 0,0.5), rgba(0, 0, 0, 0.5)),	url('img/calidad/title.jpg'); 
  background-size: cover;  
  background-position: center center; 
}

.titulo-politica h3{
  background-color: rgba(245, 245, 245, 0.473);
  box-shadow: 0px 0px 20px rgb(0, 0, 0); 
  color: black;
  width:50%
}


.iatf{ 
  background: linear-gradient(to left, rgb(0, 0, 0,0.5), rgba(0, 0, 0, 0.5)),	url('img/calidad/slider-4.jpg'); 
  background-size: cover;  
  background-position: center center; 
}

.iso{
  background: linear-gradient(to right, rgba(57, 106, 252, 1), rgba(41, 72, 255, 0.2)),	url('./img/calidad/corp.png'); 
  background-size: cover;  
  background-position: center center;
}



.gif{
  background-image: url('./img/imagenes/gif.gif');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 100%; /* Establece una altura para el contenedor */
  color:white
}

.img-politica{
  border-radius:10%;
}

.btn-politica{
  background-color: #0363ca;
  color: white;
 }

 
.btn-politica:hover{
  background-color: #60a2e9;
  color: white;
 }

 /*
 .politica-de-calidad{
  background-color: #faf1f1;
  box-shadow: 0px 0px 20px rgb(0, 0, 0);
}
*/


.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
object-fit: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}


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

.container-banner-calidad{
width: 100%;
height: 400px;
}


 /*estilo boton contactanos*/

 .contactanos{
	font-size: 12px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 10%; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #0339cf; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	right: 20px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
 /*	z-index: 99;*/
  display: none;
      
}


.contactanos:hover {
	background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
  color:withe;
}

@media only screen and (max-width: 400px) {
 	.contactanos {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
} 



/*estilo procesos*/

.activo {
  color: rgb(253, 253, 253); /* Cambia a tu color deseado */
  background-color: #0376f1;
  box-shadow: 0px 0px 10px rgb(0, 0, 0);
  padding: 10px;
  margin: 0px;
 border-radius: 5%;
 text-decoration: none;
 width:100%;
 height: 100% ;
}

.activo:hover {
 text-decoration: none;
 color: white;
}

.barra li a{
  text-decoration: none;
}

.procesoauto{
  width:50%;
  font-size: 19px;
}

@media (max-width:900px) {
  .procesoauto{
    width:100%;
  }
}

.proce{
  background-image: url('./img/equipos/4.jpg');  
  background-size: cover;  
  background-position: center center;
}

/*Estilo card procesos*/

.imgcardpro{
  position: relative;
  width: 100%;
  height: 500px;
  background-size: cover; 
}

.texto-1{
  transition: all 0.5s ease;
  width:100%;
  height:100%;
  font-size: 14px;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
  text-align: center;
  color:white
}

.texto-2{
  transition: all 0.5s ease;
  width:100%;
  height:100%;
  font-weight: bold;
  font-size: 24px;
  opacity: 1;
  position: absolute;
  background-color:  rgba(0, 0, 0, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color:white
}


.imgcardpro:hover .texto-1{
   opacity: 1;
  background-color:  rgba(0, 0, 0, 0.8);
}

.imgcardpro:hover .texto-2{
   opacity: 0;
}


/*estilo texto productos qcd*/
.materiales{
  background-image: url('./img/procesos_automotrices(1).jpg');  
  background-size: cover;  
  background-position: center center;
}

.barra{
  position:relative;
}



  @media (max-width:900px) {
      .barra{
         opacity:0;
      }
}


/*estilo proceso de ensamblaje*/

.flecha {
  width: 0px;
  height: 0px;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 50px solid rgb(28, 28, 150);
}

.texto-flecha{
  background-color: rgb(28, 28, 150); 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  color:white;
}


#cabecera-procesos{
  height: 100%; /* Establece una altura para el contenedor */
  color:rgb(0, 0, 0)
}

#titulo-automotrices{
  background-image: url('./img/imagenes/photo01.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 300px; /* Establece una altura para el contenedor */
  color:rgb(0, 0, 0);
  width: 100%;
}

#titulo-moldes{
  background-image: url('./img/imagenes/fondo-moldes.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 300px; /* Establece una altura para el contenedor */
  color:rgb(255, 255, 255);
  width: 100%;
}

#titulo-equipos{
  background-image: url('./img/imagenes/titulo-equipo.jpg');
  background-size: cover; /* Ajusta el tamaño de las imágenes */
  background-position: center center; /* Centra las imágenes */
  background-repeat: no-repeat; /* Evita que las imágenes se repitan */
  height: 300px; /* Establece una altura para el contenedor */
  color:rgb(255, 255, 255);
  width: 100%;
}



/*estilo proceso de moles*/
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image:linear-gradient(rgba(0, 0,0, 0.5), rgba(0, 0, 0, 0.5)), url("img/proceso_moldes/procesos_automotrices(1).jpg");
  min-height: 400px;
}

.bgimg-2 {
  background-image:linear-gradient(rgba(0, 0,0, 0.5), rgba(0, 0, 0, 0.5)), url("img/proceso_moldes/5.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image:linear-gradient(rgba(0, 0,0, 0.5), rgba(0, 0, 0, 0.5)), url("img/proceso_moldes/4.jpeg");
  min-height: 400px;
}

.bgimg-4 {
  background-image:linear-gradient(rgba(0, 0,0, 0.5), rgba(0, 0, 0, 0.5)), url("img/proceso_moldes/2.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}



/*estilo proceso equipos*/

#equipo:hover{
  background-color: #e2e2e2;
  box-shadow: 0px 15px 20px rgb(0, 0, 0); 
  transform: translateY(-40px);
}



.pros-fot{
  background-color: #000a57;
  color: #ffffff;
  box-shadow: 0px 0px 20px rgb(0, 0, 0);
}


/*Empleos */
.titulo-empleo{
  background-image: url('./img/vacantes/empleo.png');
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat;
  
}

.porque-beyonz{
  height: auto; 
  background-color:#cacff2;
}

.empleo{
  border-radius: 20px;
  border-color:  rgba(0, 0, 0, 0);
  color: white;
  background: linear-gradient(to right,#d2d7fd, #d2d7fd);
 /* background-color: rgba(28, 28, 150, 0.849);*/
  height:230px;
}

.empleo:hover .card-body{
 opacity: 0;
}

.empleo:hover .img-empleo{
 opacity: 1;
}

.contenedor-empleo{
   background-color: #ffffff;
}


@media (max-width:1119px) {
.empleo{
           height:auto;
      }
}

.link-vacante{
  display: block; 
  width: 100%; 
  height: 100%;
  text-decoration:none;
  color: black;
}

.img-empleo{
  transition: all 0.7s ease;
  position: absolute; 
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;  object-fit: cover;
  border-radius: 20px;
  border-color:  rgba(0, 0, 0, 0);
}

.layout_padding {
  padding: 90px 0;
}

.layout_margin {
  margin: 30px 0;
  margin-bottom: 50px;
}

.about_section {
  background-color: #00098a;
/* background-image: url('./img/corp.png');
  background-size: cover;*/
  color: #ffffff;
  border-radius: 100px 30px 250px 30px;
}