.bg-letter
{
  color:black;
}
.bandera1
{
    background-color:  #0d6efd !important;
}
.titulo
{
  color: #0d6efd !important;
  
}
.futuristic-image-wrapper {
	width: 500px;
	height: 500px;
	border-radius: 50%;
	overflow: hidden;
	
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.5s ease;
}


.futuristic-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(1.1) contrast(1.1) saturate(1.2);
	transition: filter 0.3s ease;
}

.futuristic-image:hover {
	filter: brightness(1.2) contrast(1.3) saturate(1.5);
}




section.section.section-background-half-primary-half-secondary {
    background: linear-gradient(to right, #0d6efd 50%, #605756 50%) !important;
}


.machine-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.machine-image {
  width: 100%;  /* Ajusta el tamaño de la imagen de la máquina */
  height: 450px;  /* Ajusta el tamaño para que sea cuadrada */
  object-fit: cover;
}




.cascading-images-wrapper {
	display: inline-block;
	    padding: 24% 19%;
}

.cascading-images-wrapper .cascading-images {
	transform: translate3d(0, -35%, 0);
}

.cascading-images-wrapper .cascading-images img {
	max-width: 100%;
}


.map-section {
	position: relative;
	width: 100%;
	height: 400px;
}

.map-container {
	position: relative;
	width: 100%;
	height: 100%;
}
#map {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1; /* mapa atrás */
}

.map-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	pointer-events: none;
	padding: 0 0 0 2rem;
	box-sizing: border-box;
}


.owl-carousel .img-fluid {
	width: 100%;
	height: 510px; /* Ajusta la altura según lo que necesites */
	object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
	border-radius: 0px; /* Opcional: bordes redondeados */
}
@media (min-width: 768px) {
  .titulo {
    font-size: 2rem;
  }
}

/* Asegura que todo se acomode verticalmente en móviles */
@media (max-width: 991px) {
  .mission-vision-content {
    position: relative !important;
    padding: 1rem;
  }

  .mission-vision-content h2,
  .mission-vision-content p {
    text-align: left;
    word-break: break-word;
  }

  .mission-vision-content .row {
    flex-wrap: wrap;
  }

  .cascading-images img {
    max-width: 100%;
    height: auto;
  }

  .map-wrapper img {
    max-width: 100%;
    height: auto;
  }

  .position-absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
}



.card {
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 300px; /* Ajusta según el tamaño que prefieras */
}

.card {
    background-size: cover;          /* Hace que la imagen ocupe todo el espacio */
    background-position: center;     /* Centra la imagen en el card */
    background-repeat: no-repeat;    /* Evita que la imagen se repita */
    position: relative;              /* Necesario para que el contenido se posicione sobre la imagen */
    min-height: 300px;               /* Altura mínima para cada card */
    border-radius: 0px;              /* Bordes redondeados si los prefieres */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); /* Sombra difusa que cubre todo el card */
    transition: box-shadow 0.3s ease-in-out; /* Efecto suave al cambiar la sombra */
    overflow: hidden;                /* Asegura que la sombra no se desborde del borde redondeado */
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75); /* Sombra más grande al pasar el ratón */
}

.card-body {
    position: absolute;              /* Permite que el contenido se posicione encima de la imagen */
    top: 0;                          /* Empuja el contenido hacia arriba */
    left: 0;
    right: 0;
    bottom: 0;                       /* Hace que el contenido cubra toda la tarjeta */
    padding: 20px;
    z-index: 1;                      /* Asegura que el contenido esté sobre la imagen */
    background: rgba(0, 0, 0, 0.5); /* Oscurece el fondo para que el texto sea legible */
    border-radius:0px;              /* Bordes redondeados para que coincidan con los del card */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;       /* Empuja el contenido hacia abajo */
}

.card h4, .card p {
    color: white;                    /* Hace el texto blanco para mejor contraste */
}

.card a {
    color: white !important;         /* Asegura que el enlace también sea blanco */
}

/* Asegurarse de que los valores no se desborden */
.mission-vision-content {
  overflow: hidden;
}

/* Ajustes para los valores (badges) en pantallas pequeñas */
.valores-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.valores-wrapper span {
  flex: 1 1 45%;  /* Los badges ocuparán un 45% del ancho en pantallas pequeñas */
  margin: 0.5rem 0;
  text-align: center;
}

.valores-wrapper img {
  max-width: 100%;
  height: auto;
}

/* Asegurar que el mapa no se superponga con el contenido de valores */
.map-wrapper {
  margin-top: 2rem;  /* Un poco de margen arriba en pantallas pequeñas */
}

/* Estilos responsivos para pantallas menores a 768px */
@media (max-width: 768px) {
  /* Controlar el margen entre el slider y la siguiente sección */
  #nosotros {
    margin-top: 20px; /* Espacio entre el slider y la sección Nosotros */
  }

  /* Ajuste del contenedor para los valores */
  .valores-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .valores-wrapper span {
    flex: 1 1 45%;  /* Los badges ocuparán un 45% del ancho en pantallas pequeñas */
    margin: 0.5rem 0;
    text-align: center;
  }

  /* Ajuste del tamaño de las imágenes del slider */
  .cascading-images-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cascading-images img {
    width: 100%;
  }

  /* Asegurar que las imágenes del slider no se superpongan */
  .cascading-images .img-fluid {
    max-width: 100%;
    height: auto;
  }
}


#nosotros {
  padding-right: 15px;  /* Ajuste de margen en el lado derecho para todo el contenedor */
}

.mission-vision-content {
  padding-right: 15px;  /* Ajuste de padding en el contenedor de texto */
}

.mission-vision-content .row {
  margin-right: 0;  /* Eliminar márgenes innecesarios en la fila */
}

.mission-vision-content p {
  margin-right: 0;  /* Asegurar que los párrafos no tengan márgenes adicionales */
  padding-right: 15px;  /* Agregar padding al final para darle un buen espaciado */
}

/* Ajuste para los valores (badges) */
.valores-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.valores-wrapper span {
  flex: 1 1 45%;  /* Los badges ocuparán un 45% del ancho en pantallas pequeñas */
  margin: 0.5rem 0;
  text-align: center;
}

/* Asegurarse de que en pantallas grandes las columnas tengan un margen derecho uniforme */
@media (min-width: 768px) {
  .col-lg-8, .col-sm-8 {
    padding-right: 15px;  /* Ajuste de padding en las columnas */
  }
}


.valores-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width:100%;
  gap: 0.5rem;
}

.valor-item {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.5rem;
  text-align: center;
  white-space: nowrap;
}

/* Asegurar que las imágenes no desajusten el layout */
.valor-item img {
  flex-shrink: 0;
  width: 24px;
  height: auto;
}


 .valores-wrapper .valor-item {
    flex: 0 0 48%; /* Cada valor ocupa aproximadamente la mitad del ancho */
    margin: 6px;
    text-align: center;
  }

  @media (min-width: 768px) {
    .valores-wrapper .valor-item {
      flex: unset; /* Quitar el 48% en pantallas más grandes */
    }
  }
#nosotros .titulo {
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  #nosotros .titulo {
    font-size: 2rem;
  }
}