/* ============= Header Start Here ======================= */
.header {
    @include md-screen {
        padding: 10px 0;
    }
    &.fixed-header {
        position: fixed !important;
        inset-inline-start: 0;
        inset-block-start: 0;
        inset-inline-end: 0;
        width: 100%;
        z-index: 999;
        backdrop-filter: blur(24px);
        animation: slideDown 0.35s ease-out;    
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
        background-color: hsl(var(--white));
    }
    &.position-absolute.fixed-header {
        position: fixed !important;
        margin-top: 0 !important;
    }
}
@keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
}

/* Header Menu and Submenu Css Start */
.nav-menu {
    &__item {
        &.activePage {
            > a {
                color: var(--main-600) !important;
                &::before {
                    color: var(--main-600);
                }
            }
        }
        &:hover {
            > a {
                color: hsl(var(--heading-color));
            }
        }
    }
}

.has-submenu {
    &.active {
        > a, > a::before{
            color: var(--main-600);
        }
        > a::before {
            transform: translateY(-50%) rotate(180deg) !important; 
        }
    }
    &:hover {
        > a {
            @media (min-width: 992px) {
                color: var(--main-600);
            }
        }
    }
    &:hover {
        .nav-submenu {
            visibility: visible;
            opacity: 1;
            margin-block-start: 0;
        }
        > a {
            &::before {
                @media (min-width: 992px) {
                    color: var(--main-600);
                    transform: translateY(-50%) rotate(180deg);
                }
            }
        }
    }
    > a {
        position: relative;
        &::before {
            position: absolute;
            content: "\E136";
            inset-inline-end: 0;
            inset-block-start: 50%;
            transform: translateY(-50%);
            font-family: 'Phosphor';
            font-weight: 900;
            color: var(--neutral-400);
            transition: .2s linear;
            font-size: 12px;
        }
    }
    &--arrow-end {
        > a {
            &::before {
                color: hsl(var(--white));
            }
        }
    }
}

/* Submenu Start */
.nav-submenu {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    min-width: 190px;
    visibility: hidden;
    opacity: 0;
    @media (min-width: 992px) {
        max-height: 400px;
        overflow-y: auto;
    }
    &__item {
        &.activePage {
            .nav-submenu {
                &__link {
                    color: var(--main-600) !important;
                }
            }
        }
        &:hover {
            a {
                color: hsl(var(--heading-color));
            }
        }
    }
}
/* Submenu End */
/* Header Menu and Submenu Css End */

.header-inner-page a.nav-menu__link {
    color: var(--heading-color)!important;
}
.nav-menu__item.activePage > a {
    color: var(--main-600) !important;
}
/* ================================= Header Css End =========================== */
