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

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

.main-menu{
    @media #{$lg}{
        margin-left: 50px;
    }
    & ul{
        &  li{
            position: relative;
            list-style: none;
            display: inline-block;
            margin-right: 48px;
            & > a {
                display: inline-block;
                color: var(--tp-common-white);
                padding: 35px 0;
                font-size: 20px;
                line-height: 1.5;
            }
			&.has-dropdown{
				& > a{
                    position: relative;
                    &::after{
                        content: '\f107';
                        @include transform(translateY(1px));
                        font-size: 14px;
                        color: var(--tp-common-black);
                        font-family: var(--tp-ff-fontawesome);
                        font-weight: 400;
                        margin-left: 5px;
                        display: none;
                    }
                }
			}
			& .tp-submenu{
                position: absolute;
                top: 100%;
                left: 0;
                transform: scale(1, 0);
                transform-origin: 0 0;
                width: 200px;
                background: var(--tp-common-white);
                z-index: 99;
                visibility: hidden;
                opacity: 0;
                box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
                @extend %tp-transition-common;
                transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
                padding: 25px 0 9px;
                & > li{
                    display: block;
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    -webkit-transform: translateY(-10px);
                    -moz-transform: translateY(-10px);
                    -ms-transform: translateY(-10px);
                    -o-transform: translateY(-10px);
                    transform: translateY(-10px);
                    &.has-dropdown{
                        & > a{
                            &::after{
								position: absolute;
								top: 50%;
                                right: 25px;
                                @include transform(translateY(-50%) rotate(-90deg));
                            }
                        }
                    }
                    & > a{
                        position: relative;
                        z-index: 11;
                        color: var(--tp-common-black);
                        font-weight: 400;
                        font-size: 14px;
                        padding: 0 25px;
                        padding-bottom: 0px;
                        padding-left: 25px;
                        padding-bottom: 1px;
						width: 100%;
                        @include transition(.3s);
                        &::before{
                            position: absolute;
                            content: "";
                            left: 25px;
                            top: 50%;
                            -webkit-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                            transform: translateY(-50%);
                            width: 0;
                            height: 1px;
                            background-color: var(--tp-theme-primary);
                            @include transition(.3s);
                        }
                        
                    }
                    & .tp-submenu{
                        left: 120%;
                        top:0;
                        visibility: hidden;
                        opacity: 0;
                    }
                    &:hover,
                    &.active {
                        & > a{
                            color: var(--tp-theme-primary);
                            padding-left: 43px;
                            &::after{
                                color: var(--tp-common-white);
                            }
                            &::before {
                                width: 12px;
                            }
                        }
                        & > .tp-submenu{
                            left: 100%;
                            visibility: visible;
                            opacity: 1;
                        }
                    }
                }
            }
            &:hover{
				& > a{
                    color: #fdcebc;
					&::after{
						color: var(--tp-theme-primary);
					}
				}
				& > .tp-submenu{
					visibility: visible;
					opacity: 1;
                    transform: scale(1);
				}
			}
        }
    }
}

// .tp-main-menu-mobile,
.main-menu ul li .has-homemenu {
    width: 810px;
    padding: 30px 30px 10px 30px;
    & .homemenu {
        padding: 0px 10px;
        position: relative;
        margin-bottom: 20px;
        &:hover  {
            & .homemenu-btn {
                opacity: 1;
                visibility: visible;
                transform: translateY(-45%);
            }
            & .homemenu-thumb::before {
                background-color: rgba(38, 34, 33, 0.5);
            }
        }
        
    }
    &.tp-submenu li:not(:last-child) {
        border-bottom: none;
    }
}
.homemenu-thumb {
    position: relative;
    &::before {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        @include transition(.3s);
    }
}
.homemenu-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-30%);
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    @include transition(.3s);
}
.homemenu {
    padding: 7px 7px;
    position: relative;
    &:hover  {
        & .homemenu-btn {
            opacity: 1;
            visibility: visible;
            transform: translateY(-45%);
        }
        & .homemenu-thumb::before {
            background-color: rgba(38, 34, 33, 0.5);
        }
    }
    
}
.homemenu-thumb {
    &.comming-demo  {
        position: relative;
        &::before {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(38, 34, 33, 0.5);
            backdrop-filter: blur(3px);
        }
    }
}
.homemenu-btn {
    &.comming-btn {
        opacity: 1;
        visibility: visible;
        transform: translateY(-45%);
    }
}

.header-sticky {
    position: fixed !important;
    left: 0;
    margin: auto;
    top: 0;
    width: 100%;
    z-index: 999;
    animation: fadeInDown 500ms ease-in-out 0s normal none 1 running;
    box-shadow: 0px 20px 40px rgba(37, 9, 62, 0.1);
}


.side {
    &-info {
        &-wrapper {
            padding: 80px 30px 80px 30px;
            position: absolute;
            bottom: 0;
            top: 0;
            right: 0;
            left: 0;
            overflow-y: scroll;
            overscroll-behavior-y: contain;
            scrollbar-width: none;
        }
        &-logo {
            text-align: center;
        }
        &-title {
            font-size: 24px;
            line-height: 1.2;
            color: var(--tp-heading-primary);
            text-transform: uppercase;
            text-align: center;
        }
        &-gallery {
            text-align: center;
            & a {
                margin: 5px 3px;
                display: inline-block;
                & img {
                    height: 110px;
                    width: 110px;
                    object-fit: cover;
                }
            }
        }
        &-contact {
            margin-bottom: 30px;
            & span {
                font-weight: 700;
                color: var(--tp-theme-primary);
                font-size: 20px;
                text-transform: uppercase;
                display: inline-block;
                margin-bottom: 5px;
            }
            & p {
                font-size: 20px;
                color: var(--tp-text-body);
                margin-bottom: 0;
            }
        }
        &-social {
            & a {
                display: inline-block;
                height: 40px;
                width: 40px;
                line-height: 41px;
                background-color: rgba(205, 95, 55, 0.2);
                margin: 0 4px;
                font-size: 14px;
                text-align: center;
                border-radius: 50%;
                color: var(--tp-theme-primary);
                &:hover {
                    background-color: var(--tp-theme-primary);
                    color: var(--tp-common-white);
                }
            }
        }
        &-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 999;
            left: 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-out 0s;
        }
    }
}

.side-info.tp-sidebar-opened {
	transform: translateX(0);
}
.side-info-overlay.opened {
	opacity: 1;
	visibility: visible;
}

.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
    // background: var(--tp-common-white);
    animation: .95s ease 0s normal forwards 1 running headerSlideDown;
    transition: .3s ease;
    z-index: 10;
}