/*============================================ 
============================================*/
.navbar-toggler {
    padding-right: 0;
    /*display: none;*/
    border: none;
}

    .navbar-toggler.left-navbar-toggler {
        padding: 4px 10px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler i {
        color: var(--white-color);
    }

.navbar {
    padding: 2px 0px;
}

    .navbar .navbar-brand {
        padding: 0px;
    }

        .navbar .navbar-brand img {
            height: 26px;
        }

    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
    .navbar .offcanvas .navbar-nav .nav-item .nav-link {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
    .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-item,
    .navbar .offcanvas .navbar-nav .nav-item .nav-link,
    .navbar .offcanvas .navbar-nav .nav-item .dropdown-item {
        font-weight: 500;
        padding: 7px 10px;
        text-transform: capitalize;
        background-color: transparent;
        color: var(--black-color);
        transition: 0.3s;
    }

    .navbar .offcanvas {
        width: 340px;
    }

        .navbar .offcanvas .offcanvas-header {
            background:var(--primary-color);
            box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%), 0 1px 3px 0 rgb(0 0 0 / 8%);
        }

        .navbar .offcanvas .offcanvas-body {
            padding: 0px;
        }

        .navbar .offcanvas .navbar-nav .nav-item a.nav-link:hover {
            background-color: #f4f4f4;
        }

        .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-item,
        .navbar .offcanvas .navbar-nav .nav-item .dropdown-item {
            padding-top: 0px;
            padding-bottom: 0px;
        }

            .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover,
            .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-item:hover,
            .navbar .offcanvas .navbar-nav .nav-item .nav-link:hover,
            .navbar .offcanvas .navbar-nav .nav-item .dropdown-item:hover {
                color: var(--primary-color);
                transition: 0.3s;
            }

            .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active,
            .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-item.active,
            .navbar .offcanvas .navbar-nav .nav-item .nav-link.active,
            .navbar .offcanvas .navbar-nav .nav-item .dropdown-item.active {
                color: var(--primary-color);
            }

        .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle,
        .navbar .offcanvas .navbar-nav .nav-item .nav-link.dropdown-toggle {
            margin-right: 15px;
        }

            .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle::after,
            .navbar .offcanvas .navbar-nav .nav-item .nav-link.dropdown-toggle::after {
                position: absolute;
                content: "\0043";
                border: none;
                font-family: "arafat font";
                font-weight: 400;
                font-size: 14px;
                right: 0;
            }

        .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-menu,
        .navbar .offcanvas .navbar-nav .nav-item .dropdown-menu {
            background-color: var(--bs-white);
            border-color: var(--bs-white);
        }

            .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-menu li a,
            .navbar .offcanvas .navbar-nav .nav-item .dropdown-menu li a {
                display: block;
                padding: 5px 15px;
                transition: 0.3s;
            }

            .navbar .navbar-collapse .navbar-nav .nav-item .dropdown-menu .dropend .dropdown-menu,
            .navbar .offcanvas .navbar-nav .nav-item .dropdown-menu .dropend .dropdown-menu {
                margin-left: 20%;
            }

        .navbar .navbar-collapse .right-area,
        .navbar .offcanvas .right-area {
            margin-left: 20px;
        }

            .navbar .navbar-collapse .right-area .login,
            .navbar .offcanvas .right-area .login {
                font-weight: 600;
                color: var(--primary-color);
            }

            .navbar .navbar-collapse .right-area .cmn-btn,
            .navbar .offcanvas .right-area .cmn-btn {
                margin-left: 30px;
            }

        .navbar .offcanvas .navbar-nav > li .item {
            width: 100%;
            min-height: 46px;
            display: flex !important;
            align-items: center;
        }

        .navbar .offcanvas .navbar-nav > li > a {
            display: flex;
            width: 100%;
        }

            .navbar .offcanvas .navbar-nav > li > a:hover,
            .navbar .offcanvas .navbar-nav > li > a:focus {
                color: #fff;
                background-color: #232323;
            }

        .navbar .offcanvas .navbar-nav > li.dropdown a.item {
            position: relative;            
        }

        .navbar .offcanvas .navbar-nav > li.dropdown ul a.item {            
            padding: 7px 10px 7px 20px;
        }

        .navbar .offcanvas .navbar-nav > li.dropdown ul a.item i{
            padding-right:7px;
        }

        .navbar .offcanvas .navbar-nav > li.dropdown > a.item::after {
            content: "\F285";
            font-family: "bootstrap-icons";
            font-size: 16px;
            position: absolute;
            right: 16px;
            color: var(--black-color);
            opacity: 0.6;
            line-height: 1em;
            height: 18px;
            top: 50%;
            margin-top: -9px;
        }       
        .navbar .offcanvas .navbar-nav .nav-item .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            border-radius: 0;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            transform: none;
            opacity: 1;
            visibility: visible;
        }



        .navbar .offcanvas .navbar-nav > li .item .icon-box {
            min-width: 36px;
            max-width: 36px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1em;
            font-size: 22px;
            border-radius: 400px;
            margin-right:10px;
        }

            .navbar .offcanvas .navbar-nav > li .item .icon-box i {
                font-size: 22px;
            }