@use "../../abstract/" as *;
/*Preloader css*/
$white: #fff;
$sticky-link-color: red;
$dark-nav-color: red;

div#loading {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $white;
}

div#loading img {
    z-index: 9999;
    width: 25%;

    @media (min-width: 567px) {
        width: 17%;
    }

    @media (min-width: 768px) {
        width: 15%;
    }

    @media (min-width: 992px) {
        width: 7%;
    }
}

.preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: #ffffff !important;
}

.preloader img {
    width: 500px;
}

/*Header Css StaRT*/

.site-navbar {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    @media (min-width:992px) {
        flex-flow: row nowrap;
        justify-content: flex-start;
        padding-top: 0px;
    }

    .menu-block-wrapper {
        flex-grow: 1;
        align-items: center;

        @media (min-width:992px) {
            display: flex !important;
            flex-basis: auto;
            justify-content: center;
        }
    }
}

.site-header {

    padding-top: 20px;
    padding-bottom: 20px;

    .logo {
        &-light {
            display: block;
        }

        &-dark {
            display: none;
        }
    }


    &--absolute {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    &--sticky {
        &:not(.mobile-sticky-enable) {
            position: absolute !important;
            top: 0;
            right: 0;
            width: 100%;
            z-index: 999;

            @media (min-width:992px) {
                position: fixed !important;
                transition: 0.4s;

                &.scrolling {
                    transform: translateY(-100%);
                    transition: 0.4s;
                }

                &.reveal-header {
                    transform: translateY(0%);
                    box-shadow: 0 12px 34px -11px rgba(65, 62, 101, 0.1);
                    z-index: 1000;

                    a {
                        color: $sticky-link-color;
                    }

                    .btn-link {
                        color: var(--color-headings-2);
                    }

                    // .menu-social-share {
                    //   li{
                    //     a{
                    //       color: $white;
                    //     }
                    //   }
                    // }
                }
            }
        }

        &.mobile-sticky-enable {
            top: 0;
            right: 0;
            width: 100%;
            z-index: 999;
            position: fixed !important;
            transition: 0.4s;

            &.scrolling {
                transform: translateY(-100%);
                transition: 0.4s;
            }

            &.reveal-header {
                transform: translateY(0%);
                box-shadow: 0 12px 34px -11px rgba(65, 62, 101, 0.1);
                z-index: 9999;
                height: 100%;
                background-color: transparent !important;

                .site-navbar {
                    background-color: #fff;
                    padding: 15px 10px;
                    border-radius: 5px;
                    box-shadow: 0 12px 34px -11px rgba(65, 62, 101, 0.1);
                }

                @media (min-width:768px) {
                    height: auto;
                }


            }
        }
    }

    &--menu {
        &-center {
            .container {
                position: relative;
            }

            .menu-block-wrapper {
                position: static;
            }

            .menu-block {
                @media (min-width:992px) {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        &-left {
            .container-fluid {
                .sub-menu.megamenu {
                    @media (min-width:992px) {
                        left: 50%;
                        transform: translateX(-50%) translateY(10px);
                    }
                }

                .nav-item.has-megamenu:hover>.sub-menu {
                    @media (min-width:992px) {
                        transform: translateX(-50%) translateY(-2px);
                        left: 50%;
                    }
                }
            }

            .menu-block {
                .site-menu-main {
                    justify-content: flex-start;
                    padding-left: 15px;
                }

                @media (min-width:1200px) {
                    width: 100%;
                }
            }
        }

        &-right {
            .menu-block {
                margin-left: auto;
            }

            >.container-fluid {
                .sub-menu.megamenu {
                    @media (min-width:992px) {
                        left: 100%;
                        transform: translateX(-100%) translateY(10px);
                    }
                }

                .nav-item.has-megamenu:hover>.sub-menu {
                    @media (min-width:992px) {
                        transform: translateX(-100%) translateY(-10px);
                        left: 100%;
                    }
                }
            }
        }
    }

    &--dark {
        background-color: #070B18;

        .nav-link-item {
            color: #fff;
        }

        .btn {
            color: #fff;

            &-outline {
                border-color: #fff;
            }

            &:hover {
                color: $primary
            }
        }

        .logo {
            &-light {
                display: none;
            }
            &-dark {
                display: block;
            }
        }
    }

    .header-cta-btn-wrapper {
        display: none;
        margin-left: 30px;

        @media (min-width: 992px) {
            display: block;
        }

        a {
            .icon {
                margin-right: 10px;
            }
        }
    }

    .header-cta-btn-mobile {
        display: block;
        padding-top: 30px;
        text-align: center;

        @media (min-width: 992px) {
            display: none;
        }

    }
}

// .container-fluid{
//   .site-navbar{
//     @media (min-width:768px) {
//       padding-left: 10px;
//       padding-right: 10px;
//     }
//     @media (min-width:992px) {
//       padding-left: 30px;
//       padding-right: 30px;
//     }
//     @media (min-width:1200px){
//       padding-left: 60px;
//       padding-right: 60px;
//     }
//   }
// }

.header-btns {
    @media (min-width:480px) {
        margin-right: 15px;
    }

    @media (min-width:992px) {
        margin-right: 0;
    }
}

.brand-logo {
    img {
        max-height: 35px;
    }
}

.dynamic-sticky-bg {
    &.reveal-header {
        background: var(--bg);
    }

    &.dark-mode-texts {
        .menu-block.active .nav-link-item {
            color: $dark-nav-color !important;
        }

        .menu-social-share li {
            a {
                color: var(--color-headings-2);
            }
        }
    }
}

.sticky-bg-white {
    &.reveal-header {
        background: #fff;

        .dark-version-logo {
            display: none !important;
        }

        .light-version-logo {
            display: block !important;
        }

        .menu-sep-left {
            position: relative;

            &::before {
                content: "";
                border-left: rgba($dark-nav-color, 0.5) !important;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 2px;
                height: 26px;
                z-index: 9;
            }
        }
    }
}




// body[data-theme="dark"],
// .dark-mode-texts {
//     .reveal-header {
//         .menu-social-share {
//             li {
//                 a {
//                     color: $white;
//                     transition: 0.4s;

//                     &:hover {
//                         color: $electric-violet-2;
//                     }
//                 }
//             }
//         }

//         .nav-link-item {
//             color: $dark-nav-color !important;

//             @media (min-width:992px) {
//                 color: var(--color-headings-2) !important;
//             }
//         }

//     }
// }