/* Navigation css */
.main-menu {
    display: flex;
    align-items: center;
    flex-grow: 1;
    ul {
        @include d-flex;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            position: relative;
            &:not(:last-child) {
                margin-right: 45px;
                @include respond(laptop) {
                    margin-right: 30px;
                }
                @include respond(lg) {
                    margin-right: 28px;
                }
            }
            .submenu li {
                margin-right: 0;
            }
            a {
                display: inline-block;
                text-decoration: none;
                font-size: 17px;
                font-weight: 700;
                color: var(--color-white);
                padding: 27px 0;
                height: 80px;
                position: relative;
                line-height: 22px;
                font-family: var(--font-heading);
            }
            &.menu-item-has-children {
                & > a::after {
                    content: "\f078";
                    transform: translateY(-1px);
                    display: inline-block;
                    padding-left: 4px;
                    font-family: "Font Awesome 5 Pro";
                    font-weight: 900;
                    font-size: 10px;
                }
                &:hover > .submenu {
                    opacity: 1;
                    visibility: visible;
                    @include transform(none !important);
                    pointer-events: all;
                }
            }
            &:hover > a,
            &.active > a {
                color: var(--color-primary);
            }
            .submenu {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                position: absolute;
                min-width: 240px;
                top: 100%;
                opacity: 0;
                visibility: hidden;
                background: var(--color-white);
                left: 0;
                padding: 20px 0;
                @include transition(.3s);
                z-index: 3;
                text-align: left;
                @include transform(translate3d(0,18px,0));
                pointer-events: none;
                box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.10);
                border-top: 2px solid var(--color-1);
                &::before {
                    content: "";
                    position: absolute;
                    top: -18px;
                    left: 15px;
                    z-index: 2;
                    display: block;
                    width: 16px;
                    height: 16px;
                    -webkit-transform: rotate(-45deg) translateY(1rem);
                    -ms-transform: rotate(-45deg) translateY(1rem);
                    transform: rotate(-45deg) translateY(1rem);
                    border-radius: 3px;
                    background: #fff;
                    box-shadow: none;
                }
                li {
                    .submenu::before {
                        display: none;
                    }
                    a {
                        color: var(--color-black);
                        padding: 8px 30px;
                        height: auto;
                        display: block;
                        margin: 0;
                        font-size: 16px;
                    }
                    &:hover > a,
                    &.active > a {
                        color: var(--color-primary);
                        // background-color: rgba(82, 228, 114, 0.077);
                    }
                }
                ul {
                    left: 100%;
                    top: 0px;
                }
            }
        }
    }
}

.main-menu ul li.menu-last ul.submenu {
	right: 0;
	left: auto;
}
.main-menu ul li.menu-last ul.submenu ul {
    right: auto;
    left: -100%;
}


.main-menu ul li ul.submenu .menu-item-has-children > a::after {
	position: absolute;
    top: 9px;
    right: 15px;
    content: "\f105";
    font-size: 13px;
}