body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f4;
     text-align: center;
 }
 
 .title {
     margin: 20px 0;
     color: #062f51;
     font-size: 24px;
     font-weight: bold;
     text-transform: uppercase;
 }
 
 .card-maestro {
     background: white;
     padding: 15px;
     margin: 10px;
     border-radius: 10px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     text-align: center;
 }
 
 .card-maestro img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     border: 5px solid #062f51;
     object-fit: cover;
 }
 
 .card-maestro h4 {
     margin-top: 10px;
     font-size: 18px;
     font-weight: bold;
     color: #042b4c;
 }
 
 .card-maestro p {
     font-size: 14px;
     color: #333;
 }

 
 /* Estilos generales para el Mega Menú */
.mega-dropdown-menu {
     position: absolute;
     top: 100%; /* Justo debajo del navbar */
     left: 50%; /* Centrado horizontalmente */
     transform: translateX(-50%);
     width: 80%; /* Ancho del mega menú */
     max-width: 1200px;
     padding: 20px;
     display: none; /* Ocultado por defecto */
     background-color: white;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     z-index: 1000;
     border-radius: 8px;
     opacity: 0;
     transition: opacity 0.3s ease; /* Para una transición suave */
 }
 
 /* Mostrar mega menú en pantallas grandes al pasar el cursor */
 .nav-item.mega-dropdown:hover .mega-dropdown-menu {
     display: block;
     opacity: 1; /* Asegurar que se vea */
 }
 
 /* Responsivo: en pantallas pequeñas, asegurarse de que el mega menú no se muestre */
 @media (max-width: 768px) {
     .mega-dropdown-menu {
         display: none !important; /* Asegurarse de que se oculte en pantallas pequeñas */
         opacity: 0;
     }
 }