//2.1 Nav 


//================ NAV================//
.header-sky {
    .bg-menu {
        background: #232323;
        @include transition-2;
        opacity: 0.9;
    }
    &.header-top-sky {
        .header-top {
            margin-top: -90px;
            @include transition-2;
        }
        .navbar {
            padding-top: 0;
            .navbar-nav {
                li {
                    .submenu-hover1 {
                        .dropdown-margin {
                            li {
                                a {
                                    color: #FFF;
                                }
                            }
                        }
                    }
                }
                .dropdown-menu {
                    background: #232323;
                    border: none;
                    li {
                        a {
                            color: #FFF;
                        }
                    }
                }
            }
        }
        .navbar {
            box-shadow: 0px 2px 3px #353333;
            background: #080303;
            opacity: 0.9;
        }
    }
    position: fixed;
    z-index: 999;
    right: 0;
    left: 0;
    top: 0;
    .header-top {
        &.header-top-v3 {
            border: none;
            .logo-v3 {
                display: none;
            }
        }
        @include transition-2;
        display: flow-root;
        &.no-border {
            border: none;
        }
        border-bottom: 1px solid rgba(255, 255, 255, 0.20);
        line-height: 40px;
        ul {
            li {
                a {
                    color: #FFF;
                    font-size: 12px;
                    font-weight: 400;
                    padding: 0px 10px;
                    &:hover,
                    &:focus {
                        background: transparent;
                    }
                }
            }
        }
        .header-top-left {
            float: left;
            color: white;
            span {
                font-size: 12px;
                margin-right: 15px;
                font-weight: 400;
                i {
                    font-size: 15px;
                    padding-right: 5px;
                }
            }
        }
        .header-top-right {
            float: right;
            .icon-v3-top {
                display: inline-block;
                margin-right: 5px;
                a {
                    padding: 10px 0px;
                    &:hover {
                        background: #FFF;
                        .fa {
                            color: $color-black;
                        }
                    }
                }
                .fa {
                    font-size: 15px;
                    color: #FFF;
                    padding: 0px 7px;
                    display: inline-block;
                    @media (min-width: 768px)and(max-width: 991px) {
                        padding: 0px 5px;
                    }
                }
            }
            @media all and (min-width: 1200px) {
                .dropdown:hover {
                    .caret {
                        border-top: 0px dashed;
                        border-bottom: 4px dashed;
                    }
                    &:hover {
                        .dropdown-menu {
                            visibility: visible;
                            opacity: 1;
                            transform: translate(0px);
                            -moz-transform: translateY(0px);
                            -webkit-transform: translateY(0px);
                            -ms-transform: translateY(0px);
                            @include transition-3;
                        }
                    }
                }
                .dropdown-menu {
                    padding: 20px;
                    transform: translateY(50px);
                    -moz-transform: translateY(50px);
                    -ms-transform: translateY(50px);
                    -webkit-transform: translateY(50px);
                    @include transition-3;
                    padding: 15px 0px;
                    visibility: hidden;
                    opacity: 0;
                    display: block;
                }
            }
            .dropdown-menu {
                padding: 0;
                border-radius: 0px;
                min-width: 100px;
                right: 0px;
                left: auto;
                margin-top: 0px;
                border: none;
                li {
                    a {
                        color: #232323;
                        padding: 6px 15px;
                        text-transform: uppercase;
                        &:hover {
                            background: $color-hover;
                            color: #FFF !important;
                        }
                    }
                }
                .active {
                    a {
                        background: $color-hover;
                        color: #FFF !important;
                    }
                }
            }
            ul {
                padding: 0;
                list-style: none;
                margin-bottom: 0;
                float: right;
                .dropdown {
                    display: inline-block;
                    margin-left: -4px;
                    &:hover {
                        background: #fff;
                        a {
                            color: #232323;
                        }
                    }
                    &.open>a,
                    a:hover,
                    {
                        text-decoration: none;
                        color: #232323;
                    }
                    .dropdown-toggle {
                        display: inline;
                        padding: 11px 10px;
                        @media (min-width: 768px)and(max-width: 991px) {
                            padding: 11px 8px;
                        }
                    }
                }
            }
        }
    }
    .navbar-header {}
    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus {
        background: transparent;
    }
    .navbar {
        &.navbar-fixed-top {
            top: initial;
            z-index: 999;
        }
        border-radius: 0px;
        border: none;
        margin: 0;
        .navbar-header {
            .hamburger-icon {
                padding: 12px 10px;
                span:nth-child(2) {
                    transition: 0.2s ease-in-out;
                    transform: translateY(4px) rotate(42deg);
                }
                span:nth-child(3) {
                    display: none;
                    transition: 0.2s ease-in-out;
                }
                span:nth-child(4) {
                    transition: 0.2s ease-in-out;
                    transform: translateY(-2px) rotate(-42deg);
                }
            }
            .navbar-brand {
                padding-top: 14px;
                padding-right: 0px;
                img{
                    max-width: 100% ;
                    height: auto;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden; 
                }
            }
        }
        .navbar-nav {
            .submenu-hover1 {
                a {
                    .caret {
                        margin: 0px;
                        text-transform: none;
                        background: transparent;
                        position: absolute;
                        right: -3%;
                        top: 44% !important;
                        @media(max-width: 768px) {
                            margin-top: 0px !important;
                        }
                    }
                }
                &:hover {
                    .dropdown-margin {
                        li {
                            a {
                                color: $color-black;
                                &:hover {
                                    color: $color-hover;
                                }
                            }
                        }
                    }
                }
            }
            .active {
                a {
                    background: red;
                    color: #ffffff;
                }
            }
            li {
                padding: 35px 25px;
                .caret {
                    margin-left: 5px;
                }
                &:hover {
                    a {
                        background: transparent;
                        color: $color-hover;
                    }
                }
                a {
                    font-weight: 600;
                    font-size: 14px;
                    color: #fff;
                    font-family: 'Poppins', sans-serif;
                    padding: 0px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    @media(max-width: 767px) {
                        &:hover {
                            color: $color-hover;
                            &:before {}
                        }
                    }
                    &:focus {
                        background: transparent;
                    }
                    &:before {}
                }
                .dropdown-menu {
                    -webkit-border-radius: 0px;
                    border-radius: 0px;
                    left: 0;
                    right: auto;
                    li {
                        position: relative;
                        padding-bottom: 6px !important;
                        padding-top: 6px !important;
                        &:hover,
                        &:focus {
                            a {
                                background: transparent;
                                color: $color-hover;
                                .caret {
                                    color: $color-hover;
                                }
                            }
                        }
                        a {
                            padding: 0px !important;
                            color: #232323;
                            text-transform: none;
                            background: transparent;
                            position: relative;
                            &:before {
                                display: none;
                            }
                        }
                    }
                }
            }
            @media all and (min-width: 1200px) {
                .dropdown {
                    &:hover {
                        .submenu-hover {
                            visibility: visible;
                            opacity: 1;
                            transform: translate(0px);
                            -moz-transform: translateY(0px);
                            -webkit-transform: translateY(0px);
                            -ms-transform: translateY(0px);
                            transition: opacity 0.4s ease 0s, -moz-transform 0.4s ease 0s;
                            -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.4s ease 0s;
                            -o-transition: opacity 0.4s ease 0s, -o-transform 0.4s ease 0s;
                            -ms-transition: opacity 0.4s ease 0s, -ms-transform 0.4s ease 0s;
                        }
                    }
                }
                .submenu-hover {
                    width: 190px;
                    filter: alpha(opacity=0);
                    padding: 20px;
                    transform: translateY(50px);
                    -moz-transform: translateY(50px);
                    -ms-transform: translateY(50px);
                    -webkit-transform: translateY(50px);
                    transition: opacity 0.4s ease 0s, -moz-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                    -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                    -ms-transition: opacity 0.4s ease 0s, -ms-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                    -o-transition: opacity 0.4s ease 0s, -o-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                    padding: 10px 0px;
                    visibility: hidden;
                    opacity: 0;
                    display: block;
                    position: absolute;
                }
                .submenu-hover1 {
                    position: relative;
                    &:hover {
                        .dropdown-margin {
                            visibility: visible;
                            opacity: 1;
                            transform: translate(0px);
                            -moz-transform: translateY(0px);
                            -webkit-transform: translateY(0px);
                            -ms-transform: translateY(0px);
                            transition: opacity 0.4s ease 0s, -moz-transform 0.4s ease 0s;
                            -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.4s ease 0s;
                            -o-transition: opacity 0.4s ease 0s, -o-transform 0.4s ease 0s;
                            -ms-transition: opacity 0.4s ease 0s, -ms-transform 0.4s ease 0s;
                            li {
                                a {
                                    color: $color-black;
                                    &:hover {
                                        color: $color-hover;
                                    }
                                }
                            }
                        }
                    }
                    .dropdown-margin {
                        visibility: hidden;
                        opacity: 0;
                        display: block;
                        position: absolute;
                        left: 100% !important;
                        top: 0;
                        margin: 0;
                        filter: alpha(opacity=0);
                        transform: translateY(50px);
                        -moz-transform: translateY(50px);
                        -ms-transform: translateY(50px);
                        -webkit-transform: translateY(50px);
                        transition: opacity 0.4s ease 0s, -moz-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                        -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                        -ms-transition: opacity 0.4s ease 0s, -ms-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                        -o-transition: opacity 0.4s ease 0s, -o-transform 0.4s ease 0s, visibility 0.4s linear 0s;
                    }
                }
            }
        }
    }
}
//================ END NAV================//