/* Ajusta o espaçamento entre os itens do menu principal */
#main_menu.nav {
    gap: 16px !important; /* Reduz o espaço entre os itens */
}

/* Ajusta o tamanho do ícone mobile para menor */
#mobile_nav_icon {
    width: 12px !important;
    height: 18px !important;
    display: inline-block !important;
    z-index: 9999 !important; /* Garante que o ícone fica sempre acima */
    position: relative !important;
}
#mobile_nav_icon span span {
    width: 16px !important;
    height: 2px !important;
}

/* Garante que o ícone mobile nunca desaparece em telas pequenas */
@media (max-width: 900px) {
  #mobile_nav_icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media (max-width: 600px) {
  #mobile_nav_icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Estilos para o sub-menu das experiences: abre apenas para baixo, sem qualquer animação lateral */
.mobile_menu_wrapper .mobile_main_nav .sub-menu {
    display: none;
    position: relative !important;
    left: 0 !important; /* Força remoção de deslocamento esquerdo */
    right: auto !important; /* Remove qualquer alinhamento direito */
    transform: none !important; /* Remove translações ou transforms */
    transition: none !important; /* Remove transições gerais para evitar laterais */
    width: 100%;
    padding-left: 20px; /* Indentação opcional para sub-itens */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease !important; /* Animação apenas vertical */
}

.mobile_menu_wrapper .mobile_main_nav .sub-menu.active {
    display: block !important;
    max-height: 500px !important; /* Ajusta conforme o conteúdo; valor alto para acomodar */
    left: 0 !important;
    transform: none !important;
}

/* Remove qualquer efeito lateral na classe arrow ou menu-item-has-children */
.mobile_main_nav .menu-item-has-children.arrow .sub-menu {
    left: 0 !important;
    transform: translateX(0) !important; /* Força sem translação horizontal */
    transition-property: max-height !important; /* Limita transição apenas a altura */
}

/* Seta para o menu experiences */
.mobile_main_nav .menu-item-has-children > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile_main_nav .menu-item-has-children > a::after {
    content: "\f107"; /* Ícone de seta para baixo (Font Awesome) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.mobile_main_nav .menu-item-has-children:has(.sub-menu.active) > a::after {
    transform: rotate(180deg); /* Roda a seta para cima quando aberto */
}