/* Navbar Styles */
.navbar {
  
  transition: background-color 0.3s ease-in-out; /* Transición suave para el cambio de color */
}

.navbar-brand img {
  transition: transform 0.3s ease-in-out; /* Animación de transformación para el logo */
}

.navbar-brand img:hover {
  transform: scale(1.1); /* Agrandar el logo cuando pasa el ratón */
}

.nav-link {
  color: #ffffff !important; /* Color blanco para los enlaces */
  font-size: 16px;
  padding: 10px 15px;
  transition: color 0.3s ease, padding-left 0.3s ease; /* Transiciones para los colores y el padding */
}

.nav-link:hover {
  color: #ffbe33 !important; /* Color de texto cuando pasa el ratón (naranja) */
  padding-left: 20px; /* Desplazamiento hacia la izquierda cuando pasa el ratón */
}

.navbar-toggler {
  border-color: #ffffff !important; /* Cambia el color del borde del icono de la hamburguesa */
}

.navbar-toggler-icon {
  background-color: #ffffff !important; /* Cambia el color del icono de la hamburguesa */
}



/* Estilos para los enlaces en el menú desplegable */
.dropdown-item {
  color: #333333; /* Color gris oscuro para los enlaces del dropdown */
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #f3a920; /* Fondo de color naranja al pasar el ratón */
  color: #ffffff; /* Cambiar el color del texto al pasar el ratón */
}

/* Estilos del fondo de la navbar al hacer scroll */
.navbar.scrolled {
  background-color: #2c2f33 !important; /* Fondo más oscuro cuando el usuario hace scroll */
}

/* Animación de fondo de la barra de navegación */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.navbar {
  animation: fadeIn 1s ease-in-out; /* Aplicar la animación de desvanecimiento */
}