/* Estilos generales */
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            background-color: #f0f2f5;
            color: #fff;
        }

        /* Contenedor principal usando Flexbox */
        .menu-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* Estilos para cada columna del menú */
        .menu-item {
            position: relative;
            flex-grow: 1; /* Ocupa el mismo espacio que los demás */
            flex-basis: 0; /* Asegura que el espacio se distribuya equitativamente */
            padding: 30px;
            box-sizing: border-box;
            text-decoration: none;
            color: #fff;
            transition: all 0.4s ease-in-out;
            overflow: hidden;
            display: flex; /* Para centrar el contenido verticalmente */
            flex-direction: column;
            justify-content: center;
        }

        /* Imagen de fondo para cada item */
        .menu-item-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
            transition: transform 0.4s ease-in-out;
        }

        /* Pseudo-elemento para el overlay oscuro */
        .menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 2;
            transition: background-color 0.4s ease-in-out;
        }

        /* Efecto al pasar el mouse (hover) */
        .menu-item:hover .menu-item-bg {
            transform: scale(1.05); /* Efecto de zoom sutil */
        }

        .menu-item:hover::before {
            background-color: rgba(0, 0, 0, 0.9); /* Oscurece el overlay */
        }

        /* Contenido del texto */
        .menu-content {
            position: relative;
            z-index: 3;
            padding: 20px;
        }

        .menu-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .menu-link {
            display: block;
            margin-bottom: 15px;
            font-size: 1rem;
            text-decoration: none;
            color: #ccc;
            transition: color 0.3s ease;
        }

        .menu-link:hover {
            color: #fff;
        }

        /* Imágenes de ejemplo (puedes cambiarlas) */
        .item-1 .menu-item-bg { background-image: url('/image/seleccion/admision2.png'); }
        .item-2 .menu-item-bg { background-image: url('/image/seleccion/asimilacion2.png'); }
        .item-3 .menu-item-bg { background-image: url('/image/seleccion/MERITOS2.png'); }
        .item-4 .menu-item-bg { background-image: url('/image/seleccion/cas2.png'); }
        .item-5 .menu-item-bg { background-image: url('/image/seleccion/tropa2.png'); }
        .item-6 .menu-item-bg { background-image: url('/image/seleccion/admision.png'); }

        /* Media query para pantallas más pequeñas (opcional, para adaptabilidad) */
        @media (max-width: 768px) {
            .menu-container {
                flex-direction: column; /* Apila las columnas verticalmente */
                height: auto;
            }
            .menu-item {
                height: 20vh; /* Altura fija para cada item en móvil */
            }
        }

        .mnu-items {
            width: 40px;
            background-color: #fff;
            border: none;
            height: 1px;
            margin: 0 0 10px 0.1rem;
            opacity: 25;
        }