/* Estilos para el banner */
 .carousel-item img,
 .carousel-item video {
   height: 600px; /* Tamaño uniforme */
   object-fit: cover; /* Asegura que el contenido cubra el espacio sin distorsión */
   width: 100%; /* Ocupa todo el ancho */
 }

 /* Estilos para el menú */
 .navbar-custom {
background: linear-gradient(45deg, #000000, #8B5CF6); /* Gradiente moderno */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.navbar-custom .nav-link {
color: white;
font-size: 1.1rem; /* Tamaño más legible */
font-weight: 500; /* Negrita ligera */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.navbar-custom .nav-link:hover {
color: #ffc107; /* Amarillo para destacar */
transform: scale(1.1); /* Efecto de zoom */
}

.navbar-custom .navbar-brand img {
border-radius: 50%; /* Logo redondeado */
border: 1px solid white; /* Opcional: borde blanco */
}

.navbar-toggler {
background-color: white; /* Contraste para el icono */
}

.navbar-scrolled {
background: #522293; /* Fondo más oscuro al hacer scroll */
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* Sombra más marcada */
transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn-warning {
color: #522293; /* Texto oscuro */
font-weight: bold;
border-radius: 25px; /* Forma redondeada */
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); /* Sombra */
transition: all 0.3s ease-in-out;
}

.btn-warning:hover {
background-color: #e8b51a; /* Color más intenso al pasar el ratón */
transform: scale(1.1); /* Efecto de zoom */
}

.nav-link, .dropdown-item {
transition: all 0.3s ease-in-out;
}

.nav-link:hover, .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.2); /* Fondo suave */
border-radius: 5px;
}

/* Estilo general del submenú */
.dropdown-menu {
background-color: #522293; /* Fondo blanco */
border: 0px solid #ddd; /* Borde tenue */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra elegante */
transition: transform 0.2s ease, opacity 0.2s ease; /* Transición suave */
transform: scale(0.95); /* Tamaño inicial más pequeño */
opacity: 0; /* Oculto inicialmente */
visibility: hidden; /* Oculta del flujo */
}

/* Mostrar submenú al pasar el mouse */
.nav-item.dropdown:hover .dropdown-menu {
transform: scale(1); /* Escala normal */
opacity: 1; /* Visible */
visibility: visible; /* Mostrado en el flujo */
}

/* Estilo de los enlaces del submenú */
.dropdown-item {
color: #ffffff; /* Color del texto */
font-weight: bold;
border-radius: 25px; /* Forma redondeada */
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); /* Sombra */
transition: all 0.3s ease-in-out;
padding: 10px 20px; /* Espaciado */
transition: background-color 0.3s ease, color 0.3s ease; /* Transición de colores */
}

.dropdown-item:hover {
background-color: #f4f4f4; /* Fondo al pasar el mouse */
color: #622BA3; /* Color destacado */
border-radius: 4px; /* Opcional: bordes redondeados al resaltar */
}

/* Añadir flecha al lado de los elementos con submenú */
.dropdown-toggle::after {
margin-left: 8px; /* Espaciado con el texto */
vertical-align: middle;
}

/* Adaptación para dispositivos móviles */
@media (max-width: 768px) {
.dropdown-menu {
 position: static; /* Asegura que sea navegable en pantallas pequeñas */
 transform: none; /* Sin escala */
 opacity: 1; /* Siempre visible */
 visibility: visible;
}
}

 body {
 padding-top: 56px; /* Ajusta según la altura de tu menú */
}
   /* Imágenes redondas y del mismo tamaño */
.team-photo {
 width: 150px; /* Ajusta el tamaño deseado */
 height: 150px; /* Ajusta el tamaño deseado */
 object-fit: cover; /* Asegura que la imagen encaje sin deformarse */
 border-radius: 50%; /* Hace la imagen redonda */
 border: 0px solid #007bff; /* Opcional: añade un borde decorativo */
 margin: 0 auto; /* Centra la imagen dentro de su contenedor */
}
.justified-text {
 text-align: justify;
}

.hover-zoom:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}

.text-justify {
text-align: justify;
}
h1.text-white {
font-weight: bold;
}
footer {
  background-color: #622BA3;
  color: white;
  padding: 20px;
  text-align: center;
}

.parallax {
position: relative;
height: 500px; /* Ajusta la altura según tu diseño */
background-attachment: fixed; /* Clave para el efecto parallax */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}

.parallax .overlay {
background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para texto */
padding: 20px;
border-radius: 10px;
}