// ----------------------------------------------
// Header Style
// ----------------------------------------------


.header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;

    background-color: var(--bs-white);
    transition: all 0.5s ease-in-out;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;

    &.header.fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: rgb(0 0 0 / 5%) 0px 9px 17.5px;
    }

    .navbar {
        min-height: 80px;

        .navbar-collapse {
            .navbar-nav {
                .nav-item {

                    .nav-link {
                        line-height: 28px;
                        padding: 5px 15px;
                        border-radius: 7px;
                        font-size: 16px;
                        color: $dark;
                        display: flex;
                        align-items: center;
                        position: relative;
                        transition: all .3s ease-in-out;

                        &:hover {
                            color: var(--bs-primary);
                            background-color: rgba(42, 53, 71, 0.02);
                        }
                    }
                }

                .dropdown-toggle::after {
                    display: none;
                }
            }
        }
    }
}


.navbar-nav {
    .hover-dd {
        position: static;

        &:hover {
            .dropdown-menu {
                display: block;

                li {
                    line-height: normal;
                }

            }
        }
    }

    .mega-dropdown {
        position: static;

        &.pages-dropdown {
            &:hover {
                .dropdown-menu {
                    max-width: 910px !important;
                }
            }
        }

        &:hover {
            .dropdown-menu {
                left: 0;
                width: 100%;
                max-width: 1170px;
                margin: 0 auto;
                right: 0;

                .lp-demos-box {
                    .lp-demos-btn {
                        opacity: 0;
                    }

                    &:hover {
                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgb(55 114 255 / 20%);
                        }

                        .lp-demos-btn {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}



@-webkit-keyframes animation-dropdown-menu-move-up-scroll {
    from {
        top: 71px;
    }

    to {
        top: 70px;
    }
}

@keyframes animation-dropdown-menu-move-up-scroll {
    from {
        top: 71px;
    }

    to {
        top: 70px;
    }
}

@-webkit-keyframes animation-dropdown-menu-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes animation-dropdown-menu-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dropdown-menu-animate-up {
    -webkit-animation: animation-dropdown-menu-fade-in 0.5s ease 1, animation-dropdown-menu-move-up 0.5s ease-out 1;
    animation: animation-dropdown-menu-fade-in 0.5s ease 1, animation-dropdown-menu-move-up 0.5s ease-out 1;
}