@use '../../utils' as *;

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/

// mega menu 
.mt-main-menu ul>li:hover .mt-mega-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transition-duration: .2s;
    @include transform(scale(1));
}

.mt-mega-menu {
    position: absolute;
    top: 105%;
    left: 0;
    width: 900px;
    background: #fff;
    padding: 15px 15px;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    border-radius: 0 0 14px 14px;
    transform-origin: top;
    transition: 0.1s;
    transform-origin: 0 0;
    transform: scale(1, 0);
    backdrop-filter: blur(40px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.1);
    // border-top: 3px solid var(--mt-theme-2);

    @media #{$xl} {
        width: 900px;
    }

    @media #{$lg,$md,$xs} {
        width: auto;
        opacity: 1;
        visibility: visible;
        transition: none;
        position: static;
        display: none;
    }

    & .mt-home-menu {
        & a {
            padding: 0;
        }
    }
}

.mt-home-title {
    font-size: 17px;
    margin-top: 19px;
    margin-bottom: 0;
    transition: .3s;
    color: var(--mt-common-black);

    &:hover {
        color: var(--mt-theme-2);
    }
}

.homemenu-btn {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

.mt-home-thumb {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;

    img {
        box-shadow: 0px 2px 6px rgba(1, 15, 28, 0.2);
    }

    &:hover {
        & .homemenu-btn {
            opacity: 1;
            visibility: visible;
            bottom: 50%;
            transform: translateY(50%);
        }
    }
}

.mt-megamenu {
    &-wrapper {
        position: absolute;
        transition: 0.3s;
        opacity: 0;
        visibility: hidden;
        padding-top: 45px;
        top: 100%;
        left: 0;
        right: 0;
        max-width: 1460px;
        z-index: 99;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 0 0 14px 14px;
        transform-origin: top;
        transition: 0.1s;
        transform-origin: 0 0;
        transform: scale(1, 0);
        backdrop-filter: blur(40px);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.1);
        // border-top: 3px solid var(--mt-theme-2);

        @media #{$xxl,$xl} {
            max-width: calc(100% - 40px);
        }

        @media #{$lg,$md,$xs} {
            padding-top: 25px;
        }

        &.megamenu-black-bg {
            backdrop-filter: blur(40px);
            background: rgba(38, 37, 40, 0.9);
            box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1);

            & .mt-megamenu-title {
                color: #111013;
                border-bottom: 1px solid #F3F3F6;
            }

            & .mt-megamenu-list ul::after {
                background-color: #F3F3F6;
            }

            & .mt-megamenu-list ul li a {
                color: #636368;
            }

            & .mt-megamenu-list ul li a:hover {
                background-color: #f8f8fb;
                color: var(--mt-common-black);
            }
        }
    }

    &-title {
        font-weight: 600;
        font-size: 16px;
        line-height: 1;
        margin-bottom: 0;
        padding-left: 40px;
        padding-bottom: 25px;
        text-align: start;
        text-transform: uppercase;
        word-spacing: 3.2px;
        color: var(--mt-common-black);
        border-bottom: 1px solid #c8c8c85c;

        @media #{$xxl} {
            padding-left: 23px;
        }

        @media #{$xl} {
            padding-left: 20px;
        }

        @media #{$lg,$md,$xs} {
            padding-left: 20px;
        }
    }

    &-list {
        height: 100%;

        & ul {
            position: relative;
            height: 100%;
            padding-top: 18px;
            padding-bottom: 50px;

            &::after {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 1px;
                height: 100%;
                background-color: #c8c8c85c;

                @media #{$lg,$md,$xs} {
                    display: none;
                }
            }

            & li {
                padding: 0px 20px;
                margin: 0;
                display: block;

                // @media #{$x3l,$xxl,$xl} {
                //     padding: 0px 10px;
                // }

                &:not(:last-child) {
                    margin-bottom: 10px;
                }

                & a {
                    position: relative;
                    width: 100%;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 1;
                    color: #00000091;
                    padding: 10px 18px;
                    border-radius: 8px;
                    display: inline-block;
                    letter-spacing: -0.01em;
                    text-align: start;

                    // @media #{$x4l,$x3l} {
                    //     font-size: 14px;
                    // }

                    @media #{$xxl} {
                        font-size: 14px;
                        padding: 12px 12px;
                    }

                    @media #{$xl} {
                        font-size: 14px;
                        padding: 12px 8px;
                    }

                    & span {
                        font-size: 13px;
                        line-height: 1;
                        font-weight: 800;
                        padding: 6px 8px;
                        border-radius: 20px;
                        display: inline-block;
                        margin-left: 3px;
                        text-transform: capitalize;
                        letter-spacing: .7px;

                        @media #{$xxl} {
                            font-size: 8px;
                            padding: 5px 6px;
                        }

                        @media #{$xl,$lg,$md,$xs} {
                            display: none;
                        }

                        &.hot {
                            color: #FF535B;
                            background-color: rgba($color: #FF535B, $alpha: 0.08);
                        }

                        &.new {
                            color: #01D2A1;
                            background-color: rgba($color: #01D2A1, $alpha: 0.08);
                        }

                        &.pop {
                            color: #2555FF;
                            background-color: rgba($color: #2555FF, $alpha: 0.08);
                        }
                    }

                    &:hover {
                        // background-color: #2c2b2e;
                        // color: var(--mt-common-white);
                    }
                }
            }
        }
    }

    &-thumb {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 17%;

        @media #{$lg,$md,$xs} {
            display: none;
        }

        & img {
            height: 100%;
            object-fit: cover;
            width: 100%;
            overflow: hidden;
        }
    }
}



.mt-megamenu-wrapper ul {
    & li {
        padding: 8px 22px !important;
        text-align: start;

        & a {
            color: #000;
            display: inline !important;
        }

        &:hover {
            & a {
                color: #000 !important;
            }
        }
    }
}

.mt-header-2-main-menu ul li.p-static {
    position: static;
}

.mt-header-main-menu ul li.p-static {
    position: static;
}

.mt-header-3-main-menu ul li.p-static {
    position: static;
}

.mt-header-2-main-menu ul>li:hover {
    & .mt-megamenu-wrapper {
        visibility: visible;
        opacity: 1;
        transition-duration: .2s;
        @include transform(scale(1));
    }
}

.mt-header-main-menu ul>li:hover {
    & .mt-megamenu-wrapper {
        visibility: visible;
        opacity: 1;
        transition-duration: .2s;
        @include transform(scale(1));
    }
}

.mt-header-3-main-menu ul>li:hover {
    & .mt-megamenu-wrapper {
        visibility: visible;
        opacity: 1;
        transition-duration: .2s;
        @include transform(scale(1));
    }
}

• [F] _menu.scss
  Delete
• [F] index.scss
  Delete