/*--------------------
Header Styles  
-----------------------*/
.axil-header {
    padding: 0px 60px;
    background: #fff;
    position: relative;
    z-index: 99;

    .logo {
        padding: 20px 0;
        @media #{$lg-layout} {
            padding: 0;
        }
        @media #{$md-layout} {
            padding: 0;
        }
        @media #{$sm-layout} {
            padding: 0;
        }
    }
    @media #{$laptop-device} {
        padding: 0 30px;
    }

    @media only screen and (max-width: 1199px) {
        padding: 20px 30px;
    }

    &.header-with-shadow {
        box-shadow: var(--shadow-primary);
    }

    .header-search {
        .header-search-form {
            flex-grow: 1;
            @media #{$large-mobile} {
                flex-grow: 0;
            }
        }
        // Header Search Form 
        .axil-search {
            &.form-group {
                input {
                    min-width: 245px;
                    height: 40px;

                    @media only screen and (min-width: 1600px) and (max-width: 1800px) {
                        min-width: 220px;
                    }

                    @media #{$laptop-device} {
                        min-width: 143px;
                        height: 35px;
                    }

                    @media #{$lg-layout} {
                        min-width: 100%;
                    }

                    @media #{$sm-layout} {
                        min-width: 174px;
                    }
                    @media #{$large-mobile} {
                        display: none;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        padding: 0 20px;
                        transition: inherit;
                        transform: translateY(-50%);
                        z-index: -1;
                        min-width: 0;
                    }
                    &.active {
                        @media #{$large-mobile} {
                            min-width: 174px;
                        }
                    }
                }
                .search-button {
                    i {
                        @media #{$large-mobile} {
                            font-weight: 900;
                            color: var(--color-heading);
                        }
                    }

                    @media #{$large-mobile} {
                        position: static;
                        transform: none;
                        background: var(--color-lightest);
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        display: block;
                        border-radius: 100%;
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .logo {
        a {
            display: inline-block;
            font-size: 24px;
            font-weight: 700;
            @extend %transition;
            img {
                max-height: 37px;
            }
        }
    }
    &.header-transparent {
        position: absolute;
        left: 0;
        right: 0;
        width: auto;
        z-index: 99;
    }
    &.header-sticky {
        &.sticky {
            position: fixed !important;
            top: 0;
            background: white;
            background-color: white;
            left: 0;
            right: 0;
            z-index: 9;
            box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
            animation: headerSlideDown .95s ease forwards;
        }
    }
    &.header-dark {
        background: var(--color-extra04);
        .axil-search {
            &.form-group {
                input {
                    background: var(--color-extra05);
                    color: var(--color-white);
                }

                .search-button {
                    i {
                        color: var(--color-white);
                    }
                    @media #{$large-mobile} {
                        background: var(--color-extra05);
                        color: var(--color-lightest);
                    }
                }
            }
        }
        .metabar-block {
            li {
                &.icon {
                    a {
                        background: var(--color-extra05);
                        color: var(--color-white);
                        &:hover {
                            background: var(--color-primary);
                            color: #fff;
                        }
                    }
                }
            }
        }
        .logo {
            a {
                color: #ffffff;
            }
        }
        &.header-sticky {
            &.sticky {
                background: var(--color-extra04);
                background-color: var(--color-extra04);
            }
        }
    }

}


/* ------------------------
    Metabar Block  
--------------------------*/
.metabar-block {
    @extend %liststyle;
    display: flex;
    align-items: center;

    li {
        margin-left: 20px;
        margin-top: 0;
        margin-bottom: 0;

        @media only screen and (min-width: 1600px) and (max-width: 1800px) {
            margin-left: 8px;
        }

        @media #{$laptop-device} {
            margin-left: 5px;
        }

        @media #{$md-layout} {
            margin-left: 10px;
        }

        @media #{$sm-layout} {
            margin-left: 10px;
        }

        &.icon {
            a {
                background: var(--color-lightest);
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                display: block;
                border-radius: 100%;
                font-size: 14px;
                @extend %transition;

                @media #{$laptop-device} {
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    font-size: 12px;
                }

                &:hover {
                    background: var(--color-primary);
                    color: #fff !important;
                }
            }
        }

        img {
            border-radius: 100%;
            max-height: 40px;
            min-width: 40px;

            @media #{$laptop-device} {
                max-height: 35px;
                min-width: 35px;
            }
        }
    }
}


// Mobile Menu Wrapper 
.hamburger-menu {
    margin-left: 20px;

    @media #{$md-layout} {
        margin-left: 10px;
    }

    @media #{$sm-layout} {
        margin-left: 10px;
    }

    .hamburger-inner {
        .icon {
            background: var(--color-lightest);
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            border-radius: 100%;
            font-size: 14px;
            @extend %transition;
            display: inline-block;
            color: var(--color-heading);

            i {
                font-weight: 900;
            }

            &:hover {
                background: var(--color-primary);
                color: #fff;
            }
        }
    }
}

@media #{$lg-layout} {
    .axil-header.header-dark .hamburger-menu .hamburger-inner .icon {
        background: var(--color-extra05);
        color: var(--color-lightest);
    }
}
@media #{$md-layout} {
    .axil-header.header-dark .hamburger-menu .hamburger-inner .icon {
        background: var(--color-extra05);
        color: var(--color-lightest);
    }
}
@media #{$sm-layout} {
    .axil-header.header-dark .hamburger-menu .hamburger-inner .icon {
        background: var(--color-extra05);
        color: var(--color-lightest);
    }
}


@media #{$large-mobile} {
    .axil-header.header-dark .header-search .header-search-form .axil-search.form-group .search-button {
        background: var(--color-extra05);
    }

    .axil-header.header-dark .header-search .header-search-form .axil-search.form-group .search-button i {
        color: var(--color-white);
    }

    .axil-header.header-dark .hamburger-menu .hamburger-inner .icon {
        background: var(--color-extra05);
        color: var(--color-lightest);
    }
}


/*--------------------------
    Header Style Three  
---------------------------*/
.header-top {
    background: var(--color-lightest);
    .header-top-nav {
        li {
            margin: 0 20px;
            color: var(--color-midgray);
            font-size: var(--font-size-b3);
            line-height: var(--line-height-b3);
            @media #{$md-layout} {
                margin: 0 6px;
            }
            @media #{$sm-layout} {
                margin: 5px;
            }
            a {
                color: var(--color-midgray);
                font-size: var(--font-size-b3);
                line-height: var(--line-height-b3);
                display: inline-block;
                transition: 0.3s;

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }

    .header-top-date {
        li {
            font-size: var(--font-size-b3);
            line-height: var(--line-height-b3);
            color: var(--color-midgray);
            @media #{$sm-layout} {
                margin-right: 5px !important;
            }
            a {
                color: var(--color-midgray);
                font-size: 14px;
                line-height: 22px;
                display: inline-block;
            }
        }
    }

    .social-share-transparent {
        li {
            margin: 0 10px;

            a {
                color: #050505;
                transition: 0.3s;

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }
}

.axil-header {
    &.header-style-3 {
        padding: 0;

        .logo {
            padding: 0;
        }

        .header-top {
            background: var(--color-lightest);
            padding: 12px 0;

            @media #{$lg-layout} {
                padding: 20px 0;
            }

            @media #{$md-layout} {
                padding: 20px 0;
            }

            @media #{$sm-layout} {
                padding: 10px 0;
                padding-bottom: 20px;
            }
            .header-top-bar {
                @media #{$sm-layout} {
                    margin-bottom: 12px;
                }
            }
            .header-top-nav {
                li {
                    margin: 0 20px;

                    @media #{$md-layout} {
                        margin: 0 6px;
                    }
                    @media #{$sm-layout} {
                        margin: 0 5px;
                    }

                    a {
                        color: var(--color-midgray);
                        font-size: 14px;
                        line-height: 22px;
                        display: inline-block;
                        transition: 0.3s;

                        &:hover {
                            color: var(--color-primary);
                        }
                    }
                }
            }

            .header-top-date {
                li {
                    margin-top: 0;
                    margin-bottom: 0;
                    a {
                        color: var(--color-midgray);
                        font-size: 14px;
                        line-height: 22px;
                        display: inline-block;
                    }
                }
            }

            .social-share-transparent {
                li {
                    margin: 0 10px;

                    a {
                        color: #050505;
                        transition: 0.3s;

                        &:hover {
                            color: var(--color-primary);
                        }
                    }
                }
            }
        }

        .header-middle {
            padding: 20px 0;
        }

        .header-bottom {
            border-top: 1px solid var(--color-lightest);
            @media #{$lg-layout} {
                padding: 20px 0;
            }

            @media #{$md-layout} {
                padding: 20px 0;
            }

            @media #{$sm-layout} {
                padding: 20px 0;
            }
            .blog-search {
                padding: 20px 0;
                @media #{$lg-layout} {
                    padding: 0;
                }
                @media #{$md-layout} {
                    padding: 0;
                }
                @media #{$sm-layout} {
                    padding: 0;
                }



            }
        }

        .mainmenu-nav {
            ul {
                &.mainmenu {
                    justify-content: flex-start;
                }
            }
        }

        .metabar-block {
            li {
                &.icon {
                    a {
                        color: #050505;
                    }
                }
            }
        }

        .header-search {
            .header-search-form {
                flex-grow: 0;
            }
            .axil-search {
                &.form-group {
                    input {
                        display: block;
                        min-width: 174px !important;
                        @media #{$large-mobile} {
                            min-width: 176px !important;
                            position: static;
                            transform: none;
                            padding-left: 45px;
                        }
                    }
                    .search-button {
                        @media #{$large-mobile} {
                            position: absolute;
                            left: 0;
                            display: inline-block;
                            top: 50%;
                            transform: translateY(-50%);
                            width: auto;
                            border: 0 none;
                            padding: 0;
                            left: 21px;
                        }
                        i {
                            @media #{$sm-layout} {
                                font-weight: 400;
                                color: var(--color-gray);
                            }
                        }
                    }
                }
            }
        }

        .header-top-bar {
            .header-top-date {
                li {
                    margin-right: 20px;
                }
            }
        }

        @media #{$large-mobile} {
            .header-add-with-bar {
                margin-top: 20px;
            }
        }

    }
}


/*---------------------------
    Header Style Four  
----------------------------*/
.axil-header {
    &.header-style-4 {
        padding: 0;

        .logo {
            padding: 20px 0;
            a {
                img {
                    min-width: 140px;
                    object-fit: contain;
                }
            }
        }

        .header-top {
            background: var(--color-lightest);
            @media #{$md-layout} {
                padding: 10px 0;
            }
            @media #{$sm-layout} {
                padding: 10px 0;
                padding-bottom: 20px;
            }
            .header-top-bar {
                @media #{$sm-layout} {
                    margin-bottom: 10px;
                }
            }
        }

        .metabar-block {
            li {
                margin-left: 10px;

                &.icon {
                    a {
                        color: #050505;
                    }
                }
            }
        }

        .mainmenu-nav {
            ul {
                &.mainmenu {
                    >li {
                        margin: 0 15px;
                    }
                }
            }
        }

        .header-search {
            .header-search-form {
                flex-grow: 0;
                .axil-search {
                    &.form-group {
                        input {
                            min-width: 180px;
                        }
                    }
                }
            }
        }

        .header-bottom {
            @media #{$lg-layout} {
                padding: 0;
            }
            @media #{$md-layout} {
                padding: 0;
            }
            @media #{$sm-layout} {
                padding: 0;
            }
            .logo {
                margin-right: 40px;
                text-align: left;
                @media #{$sm-layout} {
                    margin-right: 20px;
                }
            }
            .blog-search {
                padding: 20px 0;
                @media #{$lg-layout} {
                    padding: 0;
                }
                @media #{$md-layout} {
                    padding: 0;
                }
                @media #{$sm-layout} {
                    padding: 0;
                }
            }
        }

        .header-top-date {
            li {
                @media #{$sm-layout} {
                    margin: 0;
                }
            }
        }
    }
}


/*---------------------------
    Header Style Five 
----------------------------*/
.axil-header {
    &.header-style-5 {
        padding: 0;

        .header-top {
            padding: 20px 0;

            .header-top-date {
                @media #{$sm-layout} {
                    margin-right: 5px !important;
                }
            }
        }

        .mainmenu-nav {
            ul {
                &.mainmenu {
                    justify-content: flex-start;

                    li {
                        &:first-child {
                            margin-left: 0;
                        }
                    }
                }
            }
        }

        .metabar-block {
            li {
                margin-left: 10px;

                &.icon {
                    a {
                        color: #050505;
                    }
                }
            }
        }

        .header-bottom {
            @media #{$lg-layout} {
                padding: 20px 0;
            }

            @media #{$md-layout} {
                padding: 20px 0;
            }

            @media #{$sm-layout} {
                padding: 20px 0;
            }
        }

        .header-search {

            .header-search-form {
                flex-grow: 0;
            }
        }

        .logo {
            text-align: center;

            @media #{$md-layout} {
                text-align: left;
            }

            @media #{$sm-layout} {
                text-align: center;
                margin-bottom: 0px;
                margin-top: 16px;
            }

        }

    }
}


/*---------------------------
    Header Style Six 
----------------------------*/

.axil-header {
    &.header-style-6 {
        padding: 0;
        .header-top {
            padding: 20px 60px;
            @media #{$sm-layout} {
                padding: 20px 15px;
            }
        }
        .mainmenu-nav {
            ul {
                &.mainmenu {
                    justify-content: flex-start;
                    li {
                        
                    }
                }
            }
        }
        .metabar-block {
            li {
                margin-left: 10px;
                &.icon {
                    a {
                        color: #050505;

                    }
                }
            }
        }

        .header-bottom {
            padding: 0px 60px;

            @media #{$sm-layout} {
                padding: 0px 15px;
            }
        }

        .header-search {
            padding: 20px 0;

            .header-search-form {
                flex-grow: 0;
            }
        }

        .logo {
            @media #{$md-layout} {
                text-align: right !important;
            }
            @media #{$sm-layout} {
                text-align: right !important;
            }
            @media #{$large-mobile} {
                margin-top: 20px;
                margin-bottom: 5px;
                text-align: center !important;
            }
        }

        .header-top-bar {
            .header-top-date {
                li {
                    margin-right: 20px;
                }
            }
            @media #{$md-layout} {
                margin-top: 20px;
            }
            @media #{$sm-layout} {
                margin-top: 20px;
            }
        }
    }
}

.header-style-6 .mainmenu-nav ul.mainmenu>li.megamenu-wrapper {
    position: relative;
}

.header-style-6 .mainmenu-nav ul.mainmenu>li.megamenu-wrapper .megamenu-sub-menu {
    left: 0;
    transform: none;
}

.axil-header .logo a img.light-logo {
    display: none;
}

.popup-mobilemenu-area .inner .mobile-menu-top .logo a img.light-logo {
    display: none;
}



/* ------------------------
    Custom Animation 01 
----------------------------*/
@-webkit-keyframes headerSlideDown {
    0% {
        margin-top: -100px;
    }

    to {
        margin-top: 0;
    }
}

@keyframes headerSlideDown {
    0% {
        margin-top: -100px;
    }

    to {
        margin-top: 0;
    }
}

/*------------------------
      slidefadeinup
  --------------------------*/
@-webkit-keyframes slideFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes slideFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.slideFadeInUp {
    -webkit-animation-name: slideFadeInUp;
    animation-name: slideFadeInUp;
}
/*-------------------------
    Admin Bar Styles  
---------------------------*/

@media only screen and (max-width: 600px) {
    body.admin-bar.header-sticky-now .axil-header.header-sticky.sticky {
        top: 0;
    }
}





/*--------------------------
Header Wit Searchbar  
----------------------------*/

.header-with-no-search .header-style-1 .mainmenu-nav ul.mainmenu {
    justify-content: flex-end;
}

.axil-header {
    &.header-style-1 {
        @media #{$smlg-device} {
            padding: 20px 80px 20px 20px;
        }
        .axil-mainmenu-withbar {
            @media #{$smlg-device} {
                position: static;
            }
            
        }
        .hamburger-menu {
            @media #{$smlg-device} {
                margin-left: 20px;
                position: absolute;
                right: 30px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}




/*--------------------------
Header Wit No Searchbar  
----------------------------*/

.header-with-no-search {
    .axil-header {
        &.header-style-3 {
            @media #{$smlg-device} {
                .header-add-with-bar {
                    display: flex;
                    align-items: center;
                }
                .hamburger-menu {
                    margin-left: 20px;
                }
            }
            
        }
    }
}











@media #{$large-mobile} {
    .axil-search-mobile {
        &.form-group {
            position: absolute;
            top: 100%;
            background: #F0F2F5;
            width: 100%;
            right: 0;
            margin-bottom: 0;
            padding: 20px;
        }
    }
    .large-mobile-blog-search {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        &.active {
            opacity: 1;
            visibility: visible;
        }
    }
    .axil-search-mobile.form-group input {
        width: 100%;
        background: #fff;
        padding-right: 52px;
    }
    button.search-button {
        position: absolute;
    }
    .mobile-search-wrapper {
        position: static;
    }
    button.search-button {
        position: absolute;
        width: 52px;
        background: transparent;
        right: 19px;
        border: 0 none;
        top: 50%;
        transform: translateY(-50%);
        height: 47px;
    }
    .search-mobile-icon {
        background: var(--color-lightest);
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        border-radius: 100%;
        font-size: 14px;
        display: inline-block;
        color: var(--color-heading);
        min-width: 40px;

        button {
            border: 0 none;
            i {
                font-weight: 400;
                font-size: 16px;
            }
        }
    }
    .header-dark .search-mobile-icon {
        background: var(--color-extra05);
    }
    .header-dark .search-mobile-icon button i {
        color: #fff;
    }
}

