/* .menu-pro {display: flex; justify-content: center; width: 100%;} */
.menu-pro ul {margin: 0;}
.menu-pro .nivel1 {display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;}
.menu-pro a {transition: ease all .5s;}
.menu-pro a:hover {color: var(--primary);}

.menu-pro .submenu {position: absolute; width: 100%; left: 0; top: 100%; padding: 40px; background: #fff; gap: 12px; transform: translateY(10px); transition: ease all .5s; opacity: 0; visibility: hidden; display: flex; box-shadow: rgb(0 0 0 / .08) 0 10px 24px;}
.menu-pro .column-menu {width: auto; padding: 16px; white-space: nowrap;}
.menu-pro .column-menu ul {display: grid; flex-direction: column; gap: 8px; max-height: 40vh; flex-wrap: wrap; width: max-content; column-gap: 70px; grid-template-columns: 1fr 1fr 1fr;}
.menu-pro .nivel1-item h5 a {font-family: var(--font-primary); font-size: 13px; display: flex; align-items: center; gap: 5px; padding: 14px 0; font-weight: 500; text-transform: uppercase;}
.menu-pro .nivel1-item i {font-size: 12px;}
.menu-pro .nivel1-item:hover > .submenu {display: flex; transform: translateY(0); opacity: 1; visibility: visible;}
.menu-pro .nivel1-item:hover > .position-relative .column-menu {display: flex; transform: translateY(0); opacity: 1; visibility: visible;}

.menu-pro .nivel2 {flex: 1; display: grid; gap: 56px; grid-template-columns: repeat(3, 1fr);}
.menu-pro .nivel2 > li {flex: 1; white-space: nowrap;}
.menu-pro .nivel2 > li > a {font-size: 14px; font-weight: 600; text-transform: uppercase; font-family: var(--font-secondary); }
.menu-pro .nivel2 > li > a:first-child {border-bottom: 1px solid #E6E5E5; padding-bottom: 16px; margin-bottom: 16px; display: block;}

.menu-pro .nivel3 {display: flex; flex-direction: column; gap: 16px;}

@media (max-width: 1400px) {
	.menu-pro .nivel2 {gap: 24px;}
}

@media (max-width: 991px) {
	.menu-pro {flex-direction: column;}
	.menu-pro .title-category {font-size: 18px; margin-bottom: 12px; font-weight: 600;}
	.menu-pro .menu-pro-item {font-size: 14px; font-weight: 500; padding: 8px 0; display: flex; align-items: center;}
	.menu-pro .accordion-button::after {width: 14px; height: 14px; background-size: contain;}
	.menu-pro .accordion-button:not(.collapsed) {color: var(--primary);}
	.menu-pro .accordion-body {padding: 8px; background: #eee;}
	.menu-pro .submenu-item h4 {font-size: 14px; font-weight: 600;}
	.menu-pro .submenu-items {display: flex; flex-direction: column; gap: 20px;}
}