header{
    .navbar>.container{
        flex-flow: column;
    }

    .navbar{
        background-color: $white;
        padding: 12px 0px;
        .site-logo{
            height: 130px;
            a{
                display: inline-flex;
            }
            img{
                height: 100%;
                width: 100%;
              
            }
            @include xs{
                height: auto;
            }
            @include md{
                height: 80px;
            }
        }
        // .header-upper{
        //     margin-bottom: 25px;

        // }
        .offcanvas{
            background-color: #929191;
            margin-top: 0px;
            .offcanvas-body{
                .navbar-nav{
                    // position: relative;
                    .nav-item{
                        padding: 0px 30px;
                        a{
                            @include font-applying($fs: 14px,
                                $ff: $font_text,
                                $fw: $semi_bold,
                                $fsty: normal
                            );
                            line-height: 27px;
                            letter-spacing: 1px;
                            color: $text_color;
                            text-transform: uppercase;
                            padding-bottom: 0px;
                        }
                        @include xs{
                            padding: 0px 0px;
                        }
                        .dropdown {
                            position: static;
                        }
                        &.dropdown:hover .dropdown-menu {
                            display: flex;
                            width: 1055px;
                            margin: 0px auto;
                            padding: 35px 88px 60px;
                            border-radius: 0px !important;
                        }
                        .dropdown-menu.show {
                            display: flex;
                        }
                    }
                    .dropdown-menu {
                        top: 30px;
                        position: absolute;
                        border-top: 1px solid #f6f6f6 !important;
                        .mega-manu-links{
                            padding-left: 55px;
                        }
                        ul{
                            list-style: none;
                            padding-left: 40px;
                            li{
                                padding: 10px 0px;
                                a{
                                    color: #929191;
                                    @include font-applying($fs: 28px,
                                    $ff: $font_text,
                                    $fw: $bold,
                                    $fsty: normal);
                                    line-height: 40px; 
                                    letter-spacing: 0px;
                                    cursor: url(../images/anchor-cursor.svg), auto;
                                }
                                &:hover{
                                    a{
                                        color: $text_color;
                                    }
                                }
                            }
                        }
                        .mega-menu-image{
                            height: 280px; 
                            width: 280px;
                            border-radius: 27px;
                            position: relative;
                            overflow: hidden;

                            img{
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                            }
                            .menu-image-content{
                                position: absolute;
                                top: 0px;
                                display: flex;
                                align-items: end;
                                justify-content: center;
                                height: 100%;
                                width: 100%;
                                background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
                                padding: 30px;
                                h4{
                                    color: $white;
                                }
                            }
                        }
                    }
                }
            }
            .offcanvas-header{
                .site-logo-canvas{
                    height: 70px;
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
                .btn-close {
                    background-size: 1.2em;
                }
            }
            @include xs{
                background-color: $base_color !important;
            }
            @include sm{
                background-color: $base_color !important;
            }
            @include md{
                background-color: $base_color !important;
            }
        }
        .navbar-toggler{
            padding: 0px;
            border: 0px;
            margin-left: 8px;
        }
        .e-com-icons{
            .e-com-single-icon{
                margin: 0px 12px;
                @include xs{
                    margin: 0px 8px;
                }
            }
        }
        
    }
}

@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        left: -50%;
    }
}