header.header {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 100px;
    background: var(--mc1);
    color: var(--white);
    transition: var(--transition);
    padding: 1rem 0;
    --icon-color: var(--white);
    z-index: 20;
}

body:not(.personabar-visible , .detail ).page__Scrolled_Down .header {
    transform: translateY(-100%);
}


body:not(.personabar-visible , .detail ) .header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 20;
}

#PageMenu>ul {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;

}

.header__Menu {
    align-items: center;
    position: static;
}


.header__Tool_Item {
    --back-color: transparent;
    --accent-color: var(--white);
    --hover-back: var(--white);
    --hover-accent: var(--mc1);
    padding: 0.5rem 1rem;
    background-color: var(--back-color);
    border: solid 1px var(--accent-color);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    color: var(--accent-color) !important;
    --icon-color: var(--accent-color);
    justify-content: center;
    line-height: 24px;
}

.header__Tool_Item:hover {
    background-color: var(--hover-back);
    color: var(--hover-accent) !important;
    --icon-color: var(--hover-accent);
    border-color: var(--hover-accent);
}

.tool__White {
    --back-color: var(--white);
    --accent-color: var(--mc1);
    --hover-back: transparent;
    --hover-accent: var(--white);
}

/* *header menus start */

.Dnn__menu_Item {
    display: flex;
    align-items: center;
    --icon-mr: 0.5rem;
    font-size: 14px;
}

.Dnn__Menu_Link>img{
    width: 1.5rem;
    height: 1.5rem;
}


.Dnn__menu_Item .Dnn__Sub_Menu {
    visibility: hidden;
    opacity: 0;
}

.dnnMenu__Have_Submenu:is(.active) .WbIcon {
    transform: rotate(180deg);
}

.header_Bottom.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header_Bottom .Dnn__Sub_Menu {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem 0;
    color: var(--white);
}

.header_Bottom .Dnn__Menu_Link {
    opacity: 0.7;
    transition: opacity var(--transition);
}

.header_Bottom .Dnn__Menu_Link:is(.hover, .active) {
    opacity: 1;
}
.Dnn__Menu_SubLink>img{
    margin-left: 0.5rem;
}

.SetPageImages {
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-sm);
}

.header_Top .dnnMenu__Have_Submenu[data-hover="خدمات برندینگ"]>.Dnn__Sub_Menu {
    display: none;
}

/* ------------------------------- responsive ------------------------------- */

@media (min-width:992px) {
    .header_Bottom {
        border-top: solid 1px var(--bw-fade-5);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        transform: translateY(20px);
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--mc1);
        height: 380px;
        padding: 40px 0;
    }


    .Dnn_Menu_Main li[data-hover="صفحه اصلی"] {
        display: none;
    }


    .Dnn_Menu_Main>.dnnMenu__Have_Submenu>.Dnn__menu_Item>.Dnn__Menu_Link {
        height: 70px;
        display: flex;
        align-items: center;
    }

    .Dnn__menu_Item:has(.Dnn__Sub_Menu) {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 0.5rem;
        height: 70px;
    }

    .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]) {
        position: relative;
    }

    .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]) .Dnn__Sub_Menu {
        position: absolute;
        top: calc(100% + 1rem);
        right: 0;
        border-top: 1px var(--bw-fade-5) solid;
        background-color: var(--black);
        white-space: nowrap;
        min-width: 290px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 0;
        font-weight: var(--fw-600);
        font-size: var(--fz-sm);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), transform var(--transition);
        transform: translateY(+20px);
        border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    }

    .dnnMenu__Have_Submenu:not([data-hover="خدمات برندینگ"]):hover .Dnn__Sub_Menu {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
    }

    .header_Bottom::before,
    .Dnn__Sub_Menu::before {
        content: '';
        width: 100%;
        height: 1.5rem;
        bottom: 100%;
        left: 0;
        display: block;
        position: absolute;
    }

    .header_Bottom .Dnn__Sub_Menu {
        flex-wrap: wrap;
        max-height: 300px;
    }

}


/* !header menus end */

/* -------------------------------------------------------------------------- */
/*                                 RESPONSIVE                                 */
/* -------------------------------------------------------------------------- */
@media (min-width:992px) {
    .header__Logo {
        margin-left: 40px;

    }
}

@media (max-width:991px) {

    .header__Logo {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .Mobile__Menu_Icon {
        display: flex;
        flex-direction: column;
        width: 18px;
        height: 18px;
        cursor: pointer;
        position: relative;
    }

    /* *header sideMenu */
    .menu__ShadowBox {
        width: 110vw;
        height: 110vh;
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-5%, -5%);
        z-index: 998;
        display: none;

    }

    .show-effect .menu__ShadowBox {
        display: block;
    }

    .header__ProductCtg .SCat-Main {
        padding: 0rem 1rem;
        height: calc(100vh - 220px);
        max-height: calc(100vh - 220px);
        height: calc(100dvh - 220px);
        max-height: calc(100dvh - 220px);
        overflow-y: scroll;
        overflow-x: hidden;
    }
/*
    .header_Top .dnnMenu__Have_Submenu[data-hover="خدمات برندینگ"] {
        display: none;
    } */

    .Dnn_Menu_Main {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        /* max-height: calc(100vh - 5.25rem);
        max-height: calc(100dvh - 5.25rem);
        overflow-y: scroll; */
    }

    .Main__Menu_Mobile {
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        min-width: 100vw;
        width: 100vw;
        z-index: 999;
        position: fixed;
        top: 0px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        background: var(--black);
        align-content: flex-start;
        transition: var(--transition), height 0s , max-height 0s;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        padding-bottom: 20%;
        padding-top: 2.5rem;
        overflow-y: hidden;
    }

    .header__Menu_Close {
        margin-bottom: 1.5rem;
    }

    .show-effect .Main__Menu_Mobile {
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
        overflow-y: scroll !important;
    }

    .page_Scrolled__Down .Main__Menu_Mobile {
        transform: translate(100%, 100px);
    }

    .page_Scrolled__Down .show-effect .Main__Menu_Mobile {
        transform: translate(0%, 100px);
    }

    .Main__Menu_Mobile .nav.nav-pills>li {
        text-align: right;
        width: 100%;
        margin: 0px;
        font-weight: var(--fw-400);
        padding: 12px 0;
        border-bottom: dashed var(--mc2-fade-4) 1px;
    }


    .dnnMenu__Have_Submenu .WbIcon {
        margin-right: auto;
    }

    .append__SideMenu_Buttons {
        margin-top: var(--main-space);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    /* !header sideMenu End  */

    /* *bottom pages Menu in mobil start */

    .header_Bottom {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition: calc(var(--transition) * 2);
        background-color: var(--black);
        z-index: 21;
        padding-bottom: 100px;
        padding-top: 2.5rem;
        --icon-color:var(--white);
    }

    .header__Pages_Wrapper {
        height: 100%;
        overflow-y: scroll;
    }

    .header_Bottom.active {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
    }

    /* !bottom pages Menu in mobil end */

    .Main__Menu li.dropdown>a:after {
        position: absolute;
        left: -15px;
        top: 5px;
        color: #fff;
    }

    .Main__Menu li.dropdown b:after {
        color: #fff;
    }

    .Main__Menu_Mobile .Dnn__Sub_Menu {
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
        gap: 1rem;
    }

    .Main__Menu .nav.nav-pills>li.dropdown a {
        pointer-events: none;
    }

    .Main__Menu .nav-pills li.dropdown .dropdown-menu {
        position: relative;
        float: none;
        top: 0;
        background: transparent;
        text-align: center;
        display: none;
    }
}