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

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

.mtheader__menu nav ul li .has-homemenu {
    width: 1100px;
    padding: 30px 30px 10px 30px;
    opacity: 0;
    visibility: hidden;
    left: 0;
    background-color: var(--mt-common-white);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    & .homemenu {
        padding: 0px 10px;
        position: relative;
        margin-bottom: 20px;
    }

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

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

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

.homemenu-title {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--mt-common-black);
    display: inline-block;
    font-weight: 700;

    &:hover {
        color: var(--mt-common-black);
    }
}

.homemenu-thumb {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);

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



.header-sticky {
    & .mtheader__menu-2,.mtheader__menu-3 {
        & ul li .sub-menu {
            top: 132%;
        }
    }
}

