.menu-wrapper {
  margin: 0 auto;
  position: relative;
  background: #fff;
}

.main-menu {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu > li {
  width: 25%;
  text-align: center;
  border-right: 1px solid #ddd;
}

.main-menu > li:last-child { border-right: 0; }

.menu-button {
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: #fff;
  color: #222;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: opacity .3s ease;
}

.menu-button.menu-dimmed { opacity: .4; }

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #fff;
}

.mega-menu.active {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-column { padding: 20px; }
.mega-column h4 { margin-bottom: 0px; font-size: 15px; color: #111; text-transform: uppercase; }
.mega-column ul { margin: 0; list-style: none; }
/* .mega-column li { margin-bottom: 10px; } */
.mega-column a { color: #555; font-size: 13px; text-decoration: none; }
.mega-column a:hover { color: #000; text-decoration: underline; }

.freccia-menu {
  width: 15px;
  transform: rotate(90deg);
  transition: transform .3s ease;
}
.menu-button.active .freccia-menu { transform: rotate(180deg); }

.item-1 { background-color: #009ee2; }
.item-2 { background-color: #e84e0f; }
.item-3 { background-color: #1d70b7; }
.item-4 { background-color: #d60b51; }

.cf-bg { background-color: #009ee2; }
.bg-blu-scuro { background-color: #036189; }
.icon { height: 30px; width: auto; max-width: none;}
.icon-freccia { height: 20px; width: auto; }
.border-cf { border: 1px solid #009ee2; }
.border-bottom-cf { border-bottom: 1px solid #009ee2; }
.border-bottom-cf-formazione { border-bottom: 1px solid #e84e0f; }
.border-bottom-cf-promo { border-bottom: 1px solid #1d70b7; }
.border-bottom-cf-clienti { border-bottom: 1px solid #d60b51; }

.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) { background-color: #009ee2; box-shadow: none; }
.accordion-button::after {
  width: 35px;
  height: 35px;
  background-image: url("assets/images/freccia-bianca-giu-cf.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-blu-scuro.d-flex { flex-wrap: wrap; }
/* .bg-blu-scuro.d-flex > a { display: flex; min-height: 72px; } */

@media (max-width: 991.98px) {
  .mega-menu.active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-blu-scuro.d-flex > a { flex: 1 1 20%; justify-content: center; }
  .bg-blu-scuro.d-flex > a > div { margin-inline: 1.5rem !important; }
  .main-menu { flex-direction: column; width: 100%; }
  .main-menu > li { width: 100%; border-right: 0; border-bottom: 1px solid #ddd; }
}

@media (max-width: 767.98px) {
  .mega-menu { position: static; }
  .mega-menu.active { grid-template-columns: 1fr; }
}

#menu .menu-level-3 {
    /* margin-bottom: 10px; */
    list-style: none;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

#menu .menu-level-3-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 13px;
    text-align: left;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        padding 0.25s ease;
}

#menu .menu-level-3-toggle:hover {
    color: #000;
}

#menu .menu-level-3.is-open {
    /* background-color: #009ee2; */
    padding: 0px !important;
}

#menu .menu-level-3 .menu-level-3-toggle {
    padding: 0;
}

#menu .menu-level-3 .menu-level-3-toggle.is-open {
	background-color: transparent;
	padding: 15px 10px 0 10px !important;
}

#menu .menu-level-3.is-open > .menu-level-3-toggle {
    padding: 10px !important;
}

#menu .menu-level-3-arrow {
    display: block;
    width: auto;
    height: 20px;
    max-width: none;
    flex: 0 0 auto;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

#menu .menu-level-3 .menu-level-3-arrow {
    transform: rotate(90deg);
    margin-right: 5px;
}

#menu .menu-level-3.is-open .menu-level-3-arrow {
	transform: rotate(90deg);
}

#menu .menu-level-4 {
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style: none;
}

#menu .menu-level-4[hidden] {
    display: none;
}

#menu .menu-level-4 > li {
    margin: 0;
}

#menu .menu-level-4 > li:last-child {
    border-bottom: 0;
}

#menu .menu-level-4 a {
    display: block;
    width: 100%;
    padding: 10px 12px;

    color: #555;
    font-size: 13px;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#menu { z-index: 999; }

#menu .menu-level-3-1 {
	background-color: rgba(0, 158, 226, 0.2);
}

#menu .menu-level-3-2 {
	background-color: rgba(232, 78, 15, 0.2);
}

#menu .menu-level-3-3 {
	background-color: rgba(29, 112, 183, 0.2);
}

#menu .menu-level-3-4 {
	background-color: rgba(214, 11, 81, 0.2);
}

.menu-level-3-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	color: #fff;
	text-align: left;
}

#menu .freccia-1 {
	filter: brightness(0) saturate(100%)
		invert(48%) sepia(99%) saturate(1990%)
		hue-rotate(162deg) brightness(94%) contrast(101%);
}

#menu .freccia-2 {
	filter: brightness(0) saturate(100%)
		invert(37%) sepia(97%) saturate(2250%)
		hue-rotate(354deg) brightness(95%) contrast(92%);
}

#menu .freccia-3 {
	filter: brightness(0) saturate(100%)
		invert(37%) sepia(50%) saturate(1785%)
		hue-rotate(169deg) brightness(91%) contrast(92%);
}

#menu .freccia-4 {
	filter: brightness(0) saturate(100%)
		invert(16%) sepia(98%) saturate(4950%)
		hue-rotate(330deg) brightness(88%) contrast(98%);
}

#menu .border-menu-1 {
	border: 1px solid #009ee2;
}

#menu .border-menu-2 {
	border: 1px solid #e84e0f;
}

#menu .border-menu-3 {
	border: 1px solid #1d70b7;
}

#menu .border-menu-4 {
	border: 1px solid #d60b51;
}