//requires header-2 
.ks-header-4 {
    .ks-header-2-top {
        background: $header-4-top-background;
        z-index: 1030;

        .top__links {

            a,
            label {
                color: $header-4-top-color !important;
                margin-bottom: 0;
            }
        }

        &-social {
            a {
                color: $header-4-top-color;
            }
        }

        + .container-lg  {
            position: relative;
            z-index: 1020;
        }
    }

    .ks-header-2-top {
        box-shadow: 0 0 2px rgba(117, 112, 112, 0.46);

        #top-nav {
            order: 2;
        }
    }

    .ks-header-2-menu-icon {
        @media (max-width: 990px) {
            background: $primary;

            .badge-primary {
                background: $theme-text-color;
                color: $primary;
            }

            .col-lg-12 {
                i,
                span,
                a:not(.dropdown-item) {
                    color: $theme-text-color;
                }

            }
        }

        @media (max-width: 340px) {
          max-width: calc(100% - 20px);
        }
    }

    &-main {
       #top_menu {
            margin-bottom: 0;
            background: $primary;
            width: 100%;
            justify-content: center;

            > li {
                transition: 0.2s ease-in-out;
                a{
                    span:after{
                        border-color: darken($primary, 20%)
                    }
                    &.active,
                    &:hover{
                        transition: 0.2s ease-in-out;
//                         background: darken($primary, 10%);
                    }
                }
                @media (min-width: 992px) {
                    > a:not(.dropdown-item) {
                        color: $theme-text-color;
                    }
                }
            }

        }

       .container {
            @media (min-width: 992px) {
                    padding: 0;
            }
       }

        @media (max-width: 990px) {
            background: $white;
            .navbar-toggler {
                color: $theme-text-color;
                margin-right: 10px;
            }

            .navbar-collapse {
                margin-bottom: 0px;
                margin-top: 3px;
            }
        }
    }

    &.ks-header-2 {
        #top-nav {
            > li {
                > .col {
                    a {
                        color: $black !important;
                    }
                }
            }
        }
    }
    + .o_affix_disabled,
    + .o_affix_enabled {
        z-index: 1010;
    }

    &-topmost {
        .col-xl-4.col-lg-3.col-6 {
           display: flex;
           align-items: center;
        }

        .ks-header-2-top  {
           z-index: 1040;
        }

        @media (max-width: 990px) {
            .container-lg {
               z-index: auto !important;
            }

            #top_menu {
               .badge {
                    top: -4px;
               }
            }

            .search_container {
                z-index: 1050 !important;
            }

            .ks-header-2-menu-icon {
                   z-index: 1040;
                   max-width: calc(100% - 40px);
            }
            + .o_affix_disabled,
            + .o_affix_enabled {
                .navbar-collapse {
                    padding: 10px;

                    > #top_menu {
                        box-shadow: none !important;
                    }
                }

                .ks-header-4-main-inside {
                   margin-top: -36px;

                   .dropdown-item.active {
                    background: $white;
                   }
                }
            }

            ~ .affixed {
                .ks-header-4-main {
                    margin-top: 0;

                    .container {
                        padding-top: 0 !important;

                        .navbar-collapse  {
                            padding: 0 10px 10px;
                            border-bottom: none !important;

                            #top_menu {
                                box-shadow: none !important;
                            }
                        }
                    }
                    @media (max-width: 990px) {
                        .navbar-toggler{
                            margin-right: 20px;
                        }
                    }
                }

            }

            @media (max-width: 990px) {
                .fa-facebook {
                    margin-left: 0 !important;
                }

                .top__links:last-child {
                    padding-right: 0 !important;
                }

                .col-xl-4.col-lg-3.col-6 {
                    padding: 0;
                }

                .search_container {
                    padding: 0;
                }

                .ks-header-2-menu-icon {
                    > .col-lg-12 {
                        padding-left: 0;
                    }
                }
            }
        }
    }
}

.ks-header-4-main-inside {
    background: $primary;

    .nav-link {
        padding: 8px 24px;

        span {
            &:after {
               border-bottom-color: $theme-text-color;
            }
        }
    }
}

//fixed header 
header.o_header_affix.affix.affixed {
    .ks-header-4-main {
        background: $primary;

        @media (max-width: 990px) {
            .container {
                padding: 10px 0 0 !important;

                #top_menu_collapse_clone {
                    border-bottom: 1px solid rgb(233, 233, 233);
                }
            }

            .navbar-collapse {
                margin-top: 0;
            }

            .navbar-toggler {
                margin-bottom: 9px;
            }
        }
    }
}

@media (max-width: 575px) {
    .ks-header-4-topmost {
        .container-lg {
            width: 100%;
        }
    }

    .ks-header-4-main {
        .navbar-toggler {
            margin-right: 0;
        }
    }
}

@media (max-width: 575px) {
    .ks-header-4-topmost {
        .container-lg {
            width: 100%;
        }
    }

    .ks-header-4-main {
        .navbar-toggler {
            margin-right: 0;
        }
    }
}