.nav_menu_wrapper
    width: 100%
    position: relative
    transition: all 0.4s ease
    padding: 0
    z-index: 1000

    @include phone
        padding: 1rem 15px 1rem 15px
        .main-wrapper
            padding-top: 0 !important

    &.is-fixed
        position: fixed
        top: 0
        left: 0
        z-index: 999
        width: 100%
        background: #FFFFFF82
        box-shadow: 0px 3px 50px #69696929
        backdrop-filter: blur(30px)
        -webkit-backdrop-filter: blur(30px)
        animation: slideDown 0.4s ease forwards
        .main-wrapper
            padding-top: 0 !important

    &.menu-open
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: 9999

        &::before
            content: ''
            position: fixed
            top: 0
            left: 0
            width: 100%
            height: 100%
            background: rgba(0, 0, 0, 0.7)
            z-index: -1
            animation: fadeInOverlay 0.3s ease forwards

        .navbar_menu
            position: relative
            z-index: 9999

    .navbar_new_menu
        display: flex
        align-items: center
        justify-content: space-between
        position: relative
        z-index: 99999999
        @include tablet
            padding: 1rem 0 !important

    .navbar_logo
        width: 20%
        position: relative
        @include desktop
            padding: .5rem 0 !important
            img
                max-width: 65% !important
        @include tablet
            width: 40%
            z-index: 99999
        @include phone
            width: 70%
            z-index: 999999
        img
            display: block
            max-width: 50%
            height: auto
            @include tablet
                max-width: 65%
            @media screen and (min-width: 700px) and (max-width: 768px)
                max-width: 65% !important
                height: auto

    .navbar_menu-button
        display: none
        cursor: pointer
        z-index: 1001

    .navbar_menu
        width: 80%
        display: flex
        justify-content: space-between
        align-items: center
        position: relative

        .navbar_dropdown-list
            .navbar_dropdown-link
                font-size: .9rem
                font-weight: 500
                color: #1C2958
                text-decoration: none
                padding: 12px
                background: transparent
                border-radius: 8px
                @include phone
                    padding: 12px 0
                    font-size: 1.25rem !important
                    width: 100%
                    margin-bottom: 0
                    display: block
                    border-bottom: 1px solid #eee
                    border-radius: 0
                    &:nth-last-child(1)
                        border-bottom: none
                &:hover
                    background: #f4e9f3
                    color: #92278F
                    @include phone
                        background: transparent !important

            .navbar_dropdown-parent.always-visible
                display: block
                opacity: 1 !important
                visibility: visible !important
                height: auto !important
                max-height: none !important
                position: relative !important
                z-index: 1 !important

                @media (min-width: 992px)
                    padding: 12px 16px !important
                    background-color: #f8f9fa
                    border-bottom: 1px solid #dee2e6
                    font-weight: 600
                    color: #8C0054 !important
                    text-decoration: none !important

                    &:hover
                        background-color: #e9ecef
                        color: #7a0048 !important

                @include phone
                    display: flex !important
                    justify-content: space-between
                    align-items: center
                    padding: 15px 16px !important
                    font-weight: 600
                    margin: 0 !important
                    border-radius: 0 !important
                    border-bottom: 1px solid rgba(255,255,255,0.2)

                    .mobile-parent-arrow
                        display: inline-block
                        color: white
                        font-size: 18px

                    &:hover
                        background-color: #7a0048
                        color: white !important

        .navbar_dropdown-column
            .dropdown-column-title
                font-size: 1.03rem
                font-weight: 600
                color: #92288E
                text-decoration: none
                margin-bottom: 1rem
                @include tablet
                    padding: 0
                    margin-bottom: 0
                    font-size: 1.5rem !important
                @include phone
                    padding: 0
                    margin-bottom: 0
                    font-size: 1.5rem !important
            .dropdown-submenu
                display: flex
                flex-direction: column
                margin-top: 1rem
                @include phone
                    margin-top: 0 !important
                .navbar_dropdown-link
                    font-size: .9rem
                    font-weight: 500
                    color: #1C2958
                    text-decoration: none
                    padding: 12px
                    background: transparent
                    border-radius: 8px
                    @include tablet
                        font-size: 1.25rem !important
                        padding: 12px 0
                        margin-bottom: 0
                    @include phone
                        font-size: 1.25rem !important
                        padding: 12px 0
                        margin-bottom: 0
                    &:hover
                        background: #f4e9f3
                        color: #92278F
                        @include tablet
                            background-color: transparent !important
                            color: unset !important
                        @include phone
                            background-color: transparent !important
                            color: unset !important

        .navbar_primary_links
            display: flex
            align-items: center
            justify-content: center
            gap: 18px
            width: 75%
            @include desktop
                width: 70%
            @include phone
                gap: 12px

        .navbar_auth_links
            display: flex
            gap: 6px
            @include phone
                margin-top: 1rem !important
            @include desktop
                width: 28%
                justify-content: flex-end !important
                gap: 6px
            .login_btn
                background-color: #92278F
                border-radius: 10px
                text-decoration: none
                padding: 7px 1.2rem 10px 1.2rem
                font-size: 1.1rem !important
                font-weight: 500
                color: #ffffff
                display: flex
                align-items: center
                justify-content: center
                border: 1px solid #92278F
                transition: .4s ease-in-out
                &:hover
                    color: #92278F
                    background-color: #FFFFFF
                @include phone
                    font-size: 1.5rem !important
                    width: 100%
            .signup_btn
                background-color: #000000
                border-radius: 10px
                text-decoration: none
                padding: 7px 1.2rem 10px 1.2rem
                font-size: 1.1rem !important
                font-weight: 500
                color: #ffffff
                display: flex
                align-items: center
                justify-content: center
                border: 1px solid #000000
                transition: .4s ease-in-out
                &:hover
                    color: #000000
                    background-color: #FFFFFF
                @include phone
                    font-size: 1.5rem !important
                    width: 100%

        .navbar_menu-dropdown
            position: relative
            margin: 0 !important

        .navbar_menu-dropdown:hover
            .navbar_dropdown-list
                opacity: 1 !important
                pointer-events: auto !important
                transform: translateY(0) !important
            .dropdown-icon svg
                transform: rotate(180deg)

        @include phone
            .navbar_dropdown-toggle
                > a
                    pointer-events: none
                    color: inherit
                    text-decoration: none

        .nav_wrap_link
            display: flex
            align-items: center
            gap: 6px
            font-weight: 500
            color: #14141F
            text-decoration: none
            padding: 1.5rem 12px
            font-size: 1.1rem !important
            @include tablet
                justify-content: flex-start !important
            .dropdown-icon
                @include phone
                    justify-content: flex-end !important
                    display: flex !important
                    align-items: center !important
            @include phone
                font-size: 1.5rem !important
                text-align: left
                justify-content: flex-start
                width: 100%
                padding: 12px 0 !important
            span
                font-size: 1.1rem !important
                @include phone
                    font-size: 1.5rem !important
                    width: 100%
                    justify-content: flex-end
            &.is-active
                color: #92278F

        .dropdown-icon svg
            width: 12px
            transition: transform 0.3s ease
            transform: rotate(0deg) !important

        .navbar_menu-dropdown.is-open .dropdown-icon svg,
        .navbar_menu-dropdown:hover .dropdown-icon svg
            transform: rotate(180deg) !important

        .navbar_menu-dropdown:not(.is-mega)
            .navbar_dropdown-list
                position: absolute
                top: 100%
                left: 0
                min-width: 220px
                background: #FFFFFF
                box-shadow: 0px 10px 20px #39393929
                border-radius: 10px
                border-top: 2.5px solid #92278F
                padding: .5rem
                display: flex
                flex-direction: column
                gap: 12px
                opacity: 0
                pointer-events: none
                transform: translateY(10px)
                transition: all 0.3s ease
                z-index: 10000
                @include phone
                    position: static !important
                    top: auto !important
                    left: auto !important
                    transform: none !important
                    display: block !important
                    width: 100% !important
                    max-width: 100% !important
                    box-shadow: none !important
                    border-radius: 0 !important
                    padding: 0 16px !important
                    border-top: 0 !important
                    opacity: 0
                    max-height: 0
                    overflow: hidden
                    -webkit-overflow-scrolling: touch
                    transition: max-height .35s ease, opacity .25s ease !important
                    will-change: max-height, opacity

        .navbar_menu-dropdown.is-mega
            .navbar_dropdown-list
                position: absolute
                top: 100%
                left: -26rem
                transform: translateY(10px)
                width: 100vw
                max-width: 1100px
                background: #FFFFFF
                box-shadow: 0px 10px 20px #39393929
                border-radius: 10px
                border-top: 2.5px solid #92278F
                padding: 1rem .5rem
                display: flex
                gap: 0
                opacity: 0
                pointer-events: none
                transition: all 0.3s ease
                z-index: 10000
                @include desktop
                  left: -17rem !important
                @include phone
                    border-top: 0 !important

                .navbar_dropdown-parent.always-visible
                    @media (min-width: 992px)
                        border-radius: 8px 8px 0 0
                        margin: 0 8px
                        font-size: 1.1rem
                        position: absolute !important

                .main_mega_menu
                    display: grid
                    grid-template-columns: repeat(5, 1fr)
                    @include tablet
                        grid-template-columns: unset !important
                    @include phone
                        grid-template-columns: unset !important
                    @media (min-width: 992px)
                        border-top: 0
                        padding-top: 15px

    @media (max-width: 991px)
        .navbar_primary_links
            height: auto
            overflow: auto
        .navbar_menu-button
            display: block
            z-index: 999999
        .navbar_menu
            width: 100%
            position: fixed
            top: 0
            left: 0
            background: #FFFFFF
            flex-direction: column
            align-items: flex-start
            box-shadow: 0px 10px 20px #39393929
            max-height: 100vh
            overflow-y: auto
            transform: translateX(-100%) !important
            transition: transform 0.4s ease
            z-index: 9999
            padding-top: 80px
            height: 100vh
            padding-bottom: 1rem
            &.is-open
                transform: translateX(0) !important
                justify-content: flex-start !important

            .navbar_primary_links,
            .navbar_auth_links
                width: 100%
                flex-direction: column
                padding: 0 16px
                justify-content: flex-start

            .navbar_menu-dropdown
                width: 100%

                &:hover
                    .navbar_dropdown-list
                        opacity: 0 !important
                        pointer-events: none

                &.is-open
                    .navbar_dropdown-list
                        max-height: 1500px
                        opacity: 1 !important
                        pointer-events: auto
                        position: relative
                        top: 0
                        left: 0
                        display: flex
                        flex-wrap: wrap
                        padding: 0
                        border-top: 0 !important
                        @include phone
                            padding-left: 0 !important
                            border: 0 !important
                            border-radius: 10px !important
                            max-height: 300px !important
                            padding: 0 0 1rem 0 !important
                            .navbar_dropdown-link
                                display: flex
                                padding: 12px 0 !important
                                &:nth-last-child(1)
                                    border-bottom: none
                    .dropdown-icon svg
                        transform: rotate(180deg)

            .navbar_dropdown-list
                position: static
                width: 100%
                max-width: 100%
                box-shadow: none
                border-radius: 0
                padding: 0 16px
                display: block
                max-height: 0
                overflow: hidden
                opacity: 0
                transition: max-height 0.35s ease, opacity 0.25s ease
                grid-template-columns: 1fr

@keyframes slideDown
    from
        transform: translateY(-100%)
        opacity: 0
    to
        transform: translateY(0)
        opacity: 1

@keyframes fadeInOverlay
    0%
        opacity: 0
    100%
        opacity: 1

.navbar_menu-button
    width: 24px
    height: 24px
    display: flex
    align-items: center
    justify-content: center
    cursor: pointer

    .menu-icon
        position: relative
        width: 24px
        height: 18px

        div
            position: absolute
            left: 0
            width: 100%
            height: 2px
            background: #14141F
            transition: all 0.3s ease

        .menu-icon_line-top
            top: 0

        .menu-icon_line-middle
            top: 8px

        .menu-icon_line-bottom
            bottom: 0

    &.is-open
        .menu-icon_line-top
            transform: rotate(45deg)
            top: 8px

        .menu-icon_line-middle
            opacity: 0

        .menu-icon_line-bottom
            transform: rotate(-45deg)
            bottom: 8px

@media (max-width: 991px)
    .navbar_menu-dropdown
        .navbar_dropdown-list
            transform: none !important
            opacity: 0
            max-height: 0
            overflow: hidden
            transition: max-height .35s ease, opacity .25s ease

        &.is-open
            .navbar_dropdown-list
                opacity: 1 !important
                max-height: 1500px
                pointer-events: auto
                overflow: hidden
                transform: none !important

    .navbar_menu-dropdown.is-mega
        .navbar_dropdown-list
            position: static !important
            top: auto !important
            left: auto !important
            transform: none !important
            display: block !important
            width: 100% !important
            max-width: 100% !important
            box-shadow: none !important
            border-radius: 0 !important
            padding: 0 16px !important
            opacity: 0
            max-height: 0
            overflow: hidden
            -webkit-overflow-scrolling: touch
            transition: max-height .35s ease, opacity .25s ease !important
            will-change: max-height, opacity

        &.is-open
            .navbar_dropdown-list
                opacity: 1 !important
                max-height: 60vh !important
                pointer-events: auto !important
                overflow-y: auto

    .navbar_dropdown-column
        width: 100%
        border-bottom: 1px solid #eee
        .navbar_dropdown-link
            padding: 12px 0 !important
            &::after
                display: none
        .dropdown-column-title
            display: flex
            justify-content: space-between
            align-items: center
            cursor: pointer
            padding: 14px 12px
            position: relative
            &::after
                content: "+"
                font-size: 18px
                transition: transform .3s ease

        &.is-open
            .dropdown-column-title::after
                content: "−"

            .dropdown-submenu
                max-height: 1500px
                opacity: 1
                margin-top: 1rem !important

        .dropdown-submenu
            max-height: 0
            overflow: hidden
            opacity: 0
            transition: max-height .4s ease, opacity .25s ease

@media (max-width: 991px)
    .nav_menu_wrapper
        .navbar_menu
            .nav_wrap_link
                width: 100%
    .nav_menu_wrapper
        position: fixed !important
        top: 0 !important
        left: 0 !important
        width: 100% !important
        z-index: 1000 !important
        background: #FFFFFF !important
        box-shadow: 0px 3px 50px #69696929 !important

        &.is-fixed
            animation: none !important
            transform: none !important

        .main-wrapper
            padding-top: 41px !important

    .navbar_menu
        top: 0 !important
        position: fixed !important
        left: 0 !important
        width: 100% !important
        z-index: 9999 !important

    .nav_menu_wrapper
        transition: none !important

@media (max-width: 991px)
    html,
    body
        margin: 0 !important
        padding: 0 !important
        overflow-x: hidden

    .nav_menu_wrapper
        position: fixed !important
        top: 0 !important
        left: 0 !important
        width: 100% !important
        z-index: 1000 !important
        transform: translate3d(0, 0, 0) !important
        will-change: transform
        animation: none !important
        transition: none !important

        &.is-fixed
            transform: translate3d(0, 0, 0) !important
            animation: none !important

        .main-wrapper
            padding-top: 0 !important

body.menu-no-scroll
    overflow: hidden !important
    position: fixed
    width: 100%
    height: 100%

    .nav_menu_wrapper
        overflow-y: scroll
        -webkit-overflow-scrolling: touch


.is-mega,
.w-dropdown-list
  .always-visible
    display: none !important
    @include phone
      display: block !important

@media screen and (min-width: 992px)
  .dropdown-submenu
    opacity: 1 !important
  .mobile-overview-link
    display: none !important
@media screen and (max-width: 991px)
  .dropdown-submenu
    display: none
  .navbar_dropdown-column.is-open .dropdown-submenu
    display: flex !important
  .mobile-overview-link
    display: block !important
    font-weight: bold
.w-nav-overlay
  @include phone
    height: 100% !important


.pointer_event_nav
  @include desktop
    pointer-events: none !important
  @include desktop-ls
    pointer-events: none !important