.navbar-custom {
    height: 20px;
}
.navbar-custom .nav-link {
    color: #ffffff;
    font-weight: 500;
    margin-right: 1rem;
    transition: color 0.3s;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: #ffe600; /* Color amarillo al pasar el cursor o al estar activo */
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    filter: invert(1); /* Invierte colores para que el ícono se vea blanco */
}

.logo {
    max-height: 10vh; /* Ajusta la altura máxima de la imagen */
}


.carousel-item {
    position: relative;
}

.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);  /* Oscurecimiento del 50% */
    z-index: 1;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

.carousel-caption {
    z-index: 2;
}


.dropdown-menu {
    background: #fbfcfd;  /* Fondo azul */
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  /* Estilo mejorado para cada item del dropdown */
  .dropdown-menu .dropdown-item {
    padding: 0.75rem 1.5rem;         /* Espaciado interior */
    margin: 0.25rem 0;               /* Separación entre items */
    border-radius: 0.25rem;          /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: #050505;                  /* Color del texto */
  }
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    
    transform: scale(1.02);                /* Efecto escalado */
    color: #111010;
  }


  #contactanos {
    background: #f8f9fa;
    padding: 4rem 0;
    color: #ff006d;
  }

  #contactanos h1 {
    font-weight: 700;
  }

  #contactanos .btn-primary {
    background-color: #00d4ff;
    border-color: #00d4ff;
  }
  #contactanos .btn-primary:hover {
    background-color: #0564c4;
    border-color: #0564c4;
  }

  .map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* Relación 16:9 */
    position: relative;
    height: 0;
  }
  .map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  #trabaja {
    background-image: url('../assets/gestion_talento_humano.png'); 
    background-size: cover;
    background-position: center;
    position: relative;
    color: #ff006d;
    min-height: 500px; 
  }
  
  #trabaja::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.2); */
    z-index: 1;
  }
 
  #trabaja .content {
    position: relative;
    z-index: 2;
  }

  #trabaja .btn-primary {
    background-color: #00d4ff;
    border-color: #00d4ff;
  }
  #trabaja .btn-primary:hover {
    background-color: #0564c4;
    border-color: #0564c4;
  }

  #herramientas {
    position: relative;
    
    background-size: cover;
    background-position: center;
    min-height: 600px;
    padding: 60px 0;
    color: #ff006d;
  }
  /* Overlay para oscurecer la imagen y resaltar el contenido */
  #herramientas::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #f8f9fa;
    z-index: 1;
  }
  /* El contenido se posiciona por encima del overlay */
  #herramientas .content {
    position: relative;
    z-index: 2;
  }
  /* Opcionales: estilos para el título y botón */
  #herramientas h1 {
    font-weight: 700;
  }
  #herramientas .btn-primary {
    background-color: #00d4ff;
    border-color: #00d4ff;
  }
  #herramientas .btn-primary:hover {
    background-color: #0564c4;
    border-color: #0564c4;
  }

  .footer-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.5px;
    font-weight: 400;
  }

  footer {
    background-color: #222;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
  }
  footer h5 {
    font-weight: 700;
    margin-bottom: 1rem;
  }
  footer p, footer li {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
  }
  footer a:hover {
    color: #ff6b00;
  }
  .footer-bottom {
    border-top: 1px solid #444;
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
  }