Na}{

File Content: `mainmenu.scss`

// Main Navigation
$menu_font_size: 15px;
$menu_gap: 35px;

$dropdown_font_size: 14px;
$dropdown_color: var(--dropdown-regular);
$dropdown_color_hover: var(--dropdown-hover);
$dropdown_border_color: var(--cms-body-color);
//--------------------------------------------------
// All 
.primary-menu{
    // First Level
    > li{
        > a {
            color: var(--cms-menu-regular);
            font-weight: 700;
            display: flex;
            gap: 5px;
            position: relative;
            font-size: $menu_font_size;
            &:before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                margin: auto;
                background-color: var(--cms-menu-regular);
                height: 2px;
                transform-origin: right center;
                -webkit-transform-origin: right center;
                @include transform(scale(0, 1));
                @include transition(transform 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85));
                margin-top: 12px;
            }
        }
        &:hover > a,
        &.current-menu-item > a,
        &.current-menu-ancestor > a {
            color: var(--cms-menu-hover);
            &:before {
                transform-origin: left center;
                -webkit-transform-origin: left center;
                @include transform(scale(1, 1));
                background-color: var(--cms-menu-hover);
            }
        }
    }
    // Dropdown
    .sub-menu {
        background: var(--dropdown-bg);
        border-radius: var(--dropdown-radius);
        @include transition();
        li {
            a {
                color: $dropdown_color;
                font-size: $dropdown_font_size;
                border-bottom: 1px solid $dropdown_border_color;
                line-height: normal;
                padding: 11px 0;
                position: relative;
                display: flex;
                &:before {
                    content: '';
                    @include transition();
                    height: 1px;
                    width: 0;
                    position: absolute;
                    background-color: $dropdown_color_hover;
                    bottom: -1px;
                    left: 0;
                    opacity: 0;
                }
            }
            .menu-title{
                display: flex;
                gap: 10px;
                flex-wrap: nowrap;
                white-space: nowrap;
                &:after{
                    content: "\e909";
                    font-family: 'cmsi';
                    visibility: hidden;
                    opacity: 0;
                    font-size: 10px;
                    @include transform(translate(-10px, 10px));
                    @include transition();
                    [dir="rtl"] &{
                        content: "\e906";
                        @include transform(translate(10px, 10px));
                    }
                }
            }
            
            > a:hover,
            &.current-menu-item > a,
            &.current-menu-ancestor > a {
                color: $dropdown_color_hover;
                border-bottom-color: var(--cms-body-color);
                font-weight: 700;
                &:before {
                    width: 100%;
                    opacity: 1;
                }
                .menu-title:after{
                    visibility: visible;
                    opacity: 1;
                    @include transform(translate(0, 3px));
                }
            }
        }
       
        // RTL 
        [dir="rtl"] &{  
            li a:before{
                left: auto;
                right: 0;
            }
        }
        // Mega menu
        .elementor-column:not(:last-child){
            border-right: 1px solid rgba(#677a74, 0.5);
            [dir="rtl"] &{
                border-right: 0;
                border-left: 1px solid rgba(#677a74, 0.5);
            }
        }
        .cms-emenu-6{
            > .cms-title{
                font-size: 17px;
                padding: 0 0 25px;
                border-bottom: 0;
                color: $dropdown_color_hover;
            }
        }
    }
}
.menu-line-in{
    .primary-menu{
        // First Level
        > li{
            > a {
                &:before{
                    height: 1px;
                    top: calc(50% + 11px);
                }
            }
        }
    }
}
// Menu Desktop
@media #{$min-desktop} {
    .main-menu-toggle {
        display: none;
    }
    .primary-menu {
        display: flex;
        flex-wrap: wrap;
        gap: $menu_gap;
        margin: 0;
        li {
            position: relative;
        }
        > li {
            > a {
                line-height: var(--cms-header-height);
                &:before{
                    height: 3px;
                    top: calc(100% - 3px);
                    margin-top: 0;
                }
            }
            &.menu-item-has-children > a:after {
                content: "\e91d";
                font-family: "cmsi";
                font-weight: normal;
                font-size: 8px;
            }
            > ul.back {
                right: 0 !important;
                left: auto !important;
                li > ul.back {
                    right: 100% !important;
                    left: auto !important;
                }
            }
            > .sub-menu li > ul.back {
                right: 100% !important;
                left: auto !important;
            }
        }
        // Dropdown
        .sub-menu {
            position: absolute;
            padding: 40px;
            top: 100%;
            left: 0;
            margin-bottom: 0;
            margin-top: 15px;
            min-width: 235px;
            z-index: 99;
            visibility: hidden;
            opacity: 0;
            @include box-shadow(0px 5px 83px 0px rgba(0, 28, 65, 0.14));
            clip: rect(1px, 1px, 1px, 1px);

            li{
                &:first-child {
                margin-top: -14px;
                }
                &:last-child {
                    margin-bottom: -14px;
                    > a {
                        border-bottom: none;
                    }
                }
            }
            // level 3+
            .sub-menu {
                top: 0;
                left: 100%;
            }
            // RTL 
            [dir="rtl"] &{
                left: auto;
                right: 0;
                .sub-menu{
                    left: auto;
                    right: 100%;
                }
                li a:before{
                    left: auto;
                    right: 0;
                }
            }
        }

        li:hover,
        li.focus {
            overflow: visible;
            > .sub-menu {
                visibility: visible;
                opacity: 1;
                margin-top: 0;
                clip: inherit;
            }
        }
        /* Mega Menu */
        li.megamenu {
            position: relative;
            .sub-menu {
                width: 480px;
                max-width: 100vw;
                padding: 0;
                p {
                    margin-bottom: 0;
                }
                li {
                    padding: 0;
                    > .container {
                        padding: 0;
                    }
                }
            }
            .sub-megamenu{
                >li>.container>.elementor>.elementor-section>.elementor-container>.elementor-column{
                    padding: 20px 20px 0;
                    //box-shadow: 0px 5px 83px 0px rgba(0, 28, 65, 0.14);
                    //background: white;
                    &:first-child{
                        z-index: 1;
                    }
                }
            }
        }
    }
    // Header Transparent
    .header-transparent:not(.header-sticky-show) .primary-menu{
        > li {
            > a {
                color: var(--cms-menu-transparent-regular);
                &:before {
                    background-color: var(--cms-menu--transparentregular);                    
                }
            }
            &:hover > a,
            &.current-menu-item > a,
            &.current-menu-ancestor > a {
                color: var(--cms-menu-transparent-hover);
                &:before {
                    background-color: var(--cms-menu-transparent-hover);
                }
            }
        }
    }
}

/**
 * Mobile Menu
*/
@media #{$min-desktop}{
    #main-menu-mobile{
        display: none;
    }
}
@media #{$max-mobile-menu} {
    .site-navigation {
        background-color: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        position: absolute;
        padding: 15px 20px;
        top: calc(100% + 30px);
        bottom: auto;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        @include transition(all 300ms linear 0ms);
        z-index: -1;
        max-height: 80vh;
        overflow: scroll;
        &.navigation-open {
            opacity: 1;
            visibility: visible;
            top: 100%;
            z-index: 999;
        }
    }
    .primary-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        // All
        li {
            position: relative;
            &.current-menu-item > a,
            &.current-menu-ancestor > a {
                color: $dropdown_color_hover;
            }
            .link-icon {
                margin-right: 6px;
                font-size: 90%;
            }
        }
        // Level 1
        > li {
            > a{
                padding-top: 10px;
                padding-bottom: 10px;
                &:before{
                    top: auto;
                    bottom: 0;
                }
            }
            &:hover > a,
            &.current-menu-item > a,
            &.current-menu-ancestor > a {
                color: var(--cms-menu-active);
            }
        }
        // Level 2+
        .sub-menu {
            position: relative;
            padding-inline-start: 20px;
            display: none;
            .container {
                padding: 0;
            }
            > a{
                display: flex;
                justify-content: space-between;
                padding: 10px 0;
                font-size: 13px;
                color: $dropdown_color;
                font-weight: 700;
            }
        }

        li.focus {
            > .sub-menu {
                visibility: visible;
                opacity: 1;
                max-height: none;
                overflow: visible;
            }
        }
        /* Mega Menu */
        li.megamenu {
            .sub-megamenu{
                padding-inline-start: 0;
                a.cms-etitle{
                    margin-bottom: 5px;
                }
            }
        }
    }
    .primary-menu-not-set {
        margin: 0;
        list-style: none;
        a {
            display: block;
            padding: 10px 0;
            color: #000;
            font-weight: 600;
            font-size: 15px;
            &:hover {
                color: var(--cms-primary-regular);
            }
        }
    }
    #main-menu-mobile {
        .btn-nav-mobile {
            color: #282828;
            display: inline-block;
            font-size: 16px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            vertical-align: middle;
            width: 30px;
            cursor: pointer;
            position: relative;
            @include transition(all 300ms linear 0ms);

            &:before, &:after, span {
                @include transition(all 300ms linear 0ms);
                content: "";
                background-color: var(--cms-menu-regular);
                display: block;
                height: 2px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                width: 22px;
                top: 21px;
            }
            &:before {
                top: 9px;
            }

            span {
                top: 15px;
            }

            &.opened{
                &:before {
                    top: 15px;
                    @include transform(rotate(45deg));
                }
                &:after {
                    @include transform(rotate(-45deg));
                    top: 15px;
                }
                span{
                    display: none;
                }
                &:before, &:after, span {
                    background-color: var(--cms-menu-active);
                }
            }
        }
        // white color
        &.white{
            .btn-nav-mobile,
            .btn-nav-mobile.opened {
                &:before, &:after, span {
                    background-color: $white;
                }
            }
        }
    }
    .header-transparent:not(.header-sticky-show){
        #main-menu-mobile {
            .btn-nav-mobile {
                color: var(--cms-menu-transparent-regular);
                &:before, &:after, span {
                    background-color: var(--cms-menu-transparent-regular);
                }
                &.opened{
                    &:before, &:after, span {
                        background-color: var(--cms-menu-transparent-active);
                    }
                }
            }
            &.white{
                .btn-nav-mobile,
                .btn-nav-mobile.opened {
                    &:before, &:after, span {
                        background-color: $white;
                    }
                }
            }
        }
    }
    .main-menu-toggle {
        @include transition(all 300ms linear 0ms);
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        position: absolute;
        right: 0;
        text-align: center;
        top: 10px;
        width: 25px;
        background-color: var(--cms-primary-regular);
        border-radius: 2px;
        color: #fff;
        &:hover {
            background-color: var(--cms-secondary-regular);
        }
        &:before {
            content: "\e91d";
            font-family: "cmsi";
        }
        &.open:before {
            content: "\e920";
        }
    }
    #cms-header {
        .mega-auto-width {
            display: block;
            > .wpb_column {
                width: 100%;
                .vc_column-inner {
                    padding: 0 !important;
                    border: none;
                }
            }
        }
        .vc_wp_custommenu {
            padding: 0;
            background-color: transparent;
        }
    }
    .mega-auto-width > .elementor-container > .elementor-row > .elementor-element .elementor-column-wrap {
        padding: 0 !important;
        border: none !important;
        margin: 16px 0 !important;
    }
}

/* add class back when submenu out body */
ul.back {
    right: 100%;
    left: auto!important;
}

/* Mega Menu */
li.megamenu {
    position: relative;
    .sub-megamenu{
        >li {
            &:first-child{
                margin-top: 0;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
        a.cms-etitle{
            padding: 0;
            border-bottom: 0;
            font-size: 17px;
            margin-top: -7px;
        }
    }
}

.mega-auto-width {
    > .elementor-container > .elementor-row {
        > .elementor-element {
            width: 285px;
            .elementor-column-wrap {
                padding: 0 40px;
                border-right: 2px solid #eaeaea;
                margin: 28px 0;
            }
            &:last-child .elementor-column-wrap {
                border-right: none;
            }
        }
    }
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: inherit;
    }
    .elementor-widget-wp-widget-nav_menu ul.menu {
        background-color: transparent;
        @include box-shadow(none);
        @include border-radius(0px);
        margin-top: -8px;
        li {
            border: none;
            a {
                background-color: transparent;
                font-size: 14px;
                color: #9b9b9b;
                font-weight: normal;
                padding: 8px 0 8px 22px;
            }
            &:hover > a,
            &.current-menu-item > a,
            &.current-menu-ancestor > a {
                color: var(--cms-primary-regular);
            }
            &:first-child {
                a {
                    font-weight: 500;
                    font-size: 22px;
                    font-family: var(--cms-font-heading);
                    color: #1b1a1a;
                    display: block;
                    padding-inline-start: 0;
                    &:before {
                        display: none;
                    }
                }
                &:hover > a,
                &.current-menu-item > a,
                &.current-menu-ancestor > a {
                    color: var(--cms-primary-regular);
                }
            }
            &:last-child a {
                padding-bottom: 0;
            }
        }
    }
}
Name	Size	Permission
404.scss	250 bytes	0644
_border.scss	485 bytes	0644
_cf7.scss	1501 bytes	0644
_clip_path.scss	0 bytes	0644
_colors.scss	105 bytes	0644
_display.scss	8584 bytes	0644
_divider.scss	884 bytes	0644
_gradient.scss	15840 bytes	0644
_hover.scss	1712 bytes	0644
_icons.scss	766 bytes	0644
_inner_spacing.scss	7142 bytes	0644
_menu.scss	1544 bytes	0644
_outer_spacing.scss	6903 bytes	0644
_radius.scss	2113 bytes	0644
_ribbon.scss	1619 bytes	0644
_shadow.scss	1257 bytes	0644
_swiper.scss	8343 bytes	0644
_unit_test.scss	1469 bytes	0644
_v109.scss	2390 bytes	0644
base.scss	3712 bytes	0644
button.scss	12001 bytes	0644
class.scss	7834 bytes	0644
comments.scss	4697 bytes	0644
elementor-custom.scss	6136 bytes	0644
elementor.scss	38677 bytes	0644
footer.scss	841 bytes	0644
forms.scss	5519 bytes	0644
header.scss	7337 bytes	0644
layout.scss	756 bytes	0644
mainmenu.scss	17399 bytes	0644
media.scss	1061 bytes	0644
mixins.scss	19181 bytes	0644
normalize.scss	1665 bytes	0644
pagetitle.scss	3706 bytes	0644
post-page.scss	4693 bytes	0644
responsive.scss	9277 bytes	0644
theme.scss	782 bytes	0644
theme_variables.scss	1220 bytes	0644
typography.scss	9060 bytes	0644
variables.scss	2513 bytes	0644
widgets.scss	3368 bytes	0644
woocommerce.scss	22003 bytes	0644
File Content: mainmenu.scss

File Content: `mainmenu.scss`
