#Header {
                background-color: #ffffffa3;
                width: 100%;
                height: 48px;
                position: fixed;
                top: 32px;
                left: 0;
                padding: 0 var(--menuPaddingHoriz);
                display: flex;
            }
            :not(.index) #Header {
                height: 64px;
                padding:8px var(--menuPaddingHoriz);
                top: 0 !important;
            }
            #Header>#Logo {
                height: 100%;
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 11px;
                font-size: 12px;
                color: var(--logoBlue);
            }

            #Header>#Account {
                background-color: #fff;
                margin: 4px 24px 4px 0;
                padding: 2px;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                color: var(--darkBlue);
            }

            #Header>#Navigation {
                border-right: 5px solid var(--menuItmeBlueMid);
                margin-right: 24px;
                flex: 1;
            }
            /* ****** Logo Items : */

            #Logo * {
                height: 100%;
            }

            #Logo>div {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
            }

            #Logo>div>img {
                height: 24px;
            }

            #Logo>div>span {
                height: fit-content;
                line-height: 14px;
                font-weight: 550;
            }
            /******* Navigatio Items :  */

            #Header>#Navigation>ul {
                padding: 0;
                margin: 0;
                display: flex;
                list-style: none;
                height: 100%;
            }

            #Header>#Navigation>ul>li>a,
            #Header>#Navigation .Astyle {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 0 16px;
                height: 100%;
                color: var(--menuItmeBlueMid);
                font-size: var(--menuFontSize);
            }

            #Header>#Navigation a {
                text-decoration: none;
            }

            #Header>#Navigation>ul>li#SearchLi>a {
                padding: 0;
            }

            #Navigation .icon {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #Header>#Navigation>ul>li:not(#SearchLi)>a>.icon,
            #Header>#Navigation>ul>li:not(#SearchLi)>.Astyle>.icon {
                display: none;
            }

            #SearchLi .itemTitle {
                display: none;
            }

            #Navigation li {
                position: relative;
            }

            #Navigation li ul {
                flex-direction: column;
                padding: 0;
                list-style: none;
            }

            #Navigation>ul>li li.havSub::after {
                display: flex;
                justify-content: center;
                align-items: center;
                content: "+";
                position: absolute;
                top: 0;
                left: 0;
                width: 32px;
                height: var(--menuLiHeight);
                transition: .3s;
            }
            /* ******Account Item : */

            #Header>#Account>.arrow {
                width: 12px;
                height: 12px;
                margin-right: 16px;
                fill: var(--accountSvgColor);
            }

            #Header>#Account>#AccountMenu {
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: center;
            }

            #Header>#Account>#AccountMenu .subMenu {
                max-height: 0;
                padding: 0;
                overflow: hidden;
            }

            #Header>#Account>#AccountMenu .subMenu>li>a {
                display: grid;
                grid-template-columns: 32px 1fr;
                align-items: center;
                text-align: right;
                padding: 4px;
                gap: 16px;
                color: var(--menuItmeBlueMid);
                text-decoration: none;
            }

            #AccountImage,
            #AccountImage>svg {
                height: 100%;
                fill: var(--accountSvgColor);
            }
            /* temp */

            #Header>#Account .icon {
                background-color: red;
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }

            #Noting,
            .Noting {
                position: fixed;
                display: none;
            }

            @media (min-width: 980px) {
                /* @media (max-height:800px) {
                    #Header{
                        height: 64px;
                        padding-top: 16px !important;
                        padding-bottom: 16px !important;
                    }
                } */

                #Header {
                    z-index: 2;
                }
                #Header>#Account {
                    box-shadow: 0 0 6px #0003;
                    position: relative;
                    transition: .3s;
                    transition-delay: .2s;
                    z-index: 99;
                }
                #Header>#Navigation>ul>li#SearchLi {
                    margin-right: auto;
                }
                #Header>#Account>#AccountMenu .subMenu {
                    background-color: #fff;
                    width: 100%;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    position: absolute;
                    top: 100%;
                    right: 0;
                    box-shadow: 0 4px 6px #0003;
                    padding: 0 4px;
                    transform: scaleY(0);
                    transform-origin: top;
                    transition: .3s;
                    max-height: unset;
                }
                .subMenu li {
                    border-radius: 20px;
                }
                /* opening Account Menus */
                #Header>#Account:hover .subMenu {
                    transform: scaleY(1) !important;
                    padding: 4px !important;
                }
                #Header>#Account:hover {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    transition: .1s !important;
                    transition-delay: 0s;
                    box-shadow: 0 -1px 6px #0003;
                }
                .subMenu li:hover {
                    background-color: var(--menuItmeBlueMid);
                }
                .subMenu li:hover a {
                    color: #fff !important;
                }
                /* menu item hover */
                #Navigation>ul>li li span {
                    display: inline-block;
                }
                #Navigation li {
                    cursor: pointer;
                }
                #Navigation>ul>li:hover {
                    background: #fff;
                }
                #Navigation>ul>li::after {
                    height: 3px;
                    width: 0%;
                    background: #f00;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    display: inline-block;
                    content: "";
                    transition: .3s;
                    border-radius: 5px;
                }
                #Navigation>ul>li:hover::after {
                    width: 100%;
                }
                /* SubMenu opening */
                .subTitle {
                    display: none;
                }
                #Navigation li ul {
                    display: none;
                    position: absolute;
                    right: 100%;
                    top: 0;
                    transform: scaleY(0);
                    background-color: #fff;
                    min-width: 200px;
                    border-radius: 8px;
                    border-top-right-radius: 0;
                    box-shadow: 0 3px 8px #0003;
                }
                #Navigation>ul>li>ul {
                    top: calc(100% - 5px) !important;
                    right: 0;
                    border-top-left-radius: 0;
                    border-top: 5px solid #f00;
                }
                #Navigation>ul>li li>*:first-child {
                    padding: 8px 16px;
                }
                #Navigation li ul>li:last-child {
                    border-bottom-right-radius: 8px;
                    border-bottom-left-radius: 8px;
                }
                #Navigation li ul>li>a {
                    width: 100%;
                    display: grid;
                    color: var(--darkBlue);
                }
                #Navigation li:hover>ul {
                    display: flex;
                    transform: scaleY(1)
                }
                #Navigation li ul li:hover {
                    background: #eee;
                }
                #Navigation>ul>li li.havSub:hover::after {
                    content: "-";
                    font-size: x-large;
                    padding-left: 16px;
                    transform: rotate(360deg);
                }
            }

            @media (max-width:980px) {
                #Header {
                    background-color: #ffffff;
                    height: 80px;
                    top: 0;
                    padding: 16px var(--menuPaddingHoriz);
                    justify-content: space-between;
                    box-shadow: 0 6px 6px #0003;
                    z-index: 99;
                }
                #Header>#Navigation {
                    border: none;
                    margin: 0;
                    background-color: #ffffff;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: var(--BottomMenuHeight);
                    padding: 0;
                    box-shadow: 0 -6px 6px #0003;
                }
                #Header>#Navigation>ul>li {
                    flex: 1;
                    order: 2;
                }
                #Header>#Navigation>ul>li:nth-child(1) {
                    order: 1;
                }
                #Header>#Navigation>ul>li#SearchLi {
                    order: 2;
                }
                #Header>#Navigation>ul>li>a,
                #Header>#Navigation .Astyle {
                    padding: 0;
                    gap: 4px;
                }
                #Header>#Navigation>ul>li:nth-child(1)>a {
                    padding-left: 0 var(--menuPaddingHoriz);
                }
                #Header>#Navigation>ul>li:last-child>a {
                    padding-right: 0 var(--menuPaddingHoriz);
                }
                #Header>#Navigation>ul>li>a>*,
                #Header>#Navigation>ul>li>.Astyle>.icon {
                    display: inline-block !important;
                }
                #Header>#Navigation>ul>li>a>.icon,
                #Header>#Navigation>ul>li>.Astyle>.icon {
                    height: 24px;
                }
                #Header>#Navigation>ul>li>a>.icon svg,
                #Header>#Navigation>ul>li>.Astyle>.icon svg {
                    height: 100%;
                }
                #Header>#Account>#AccountMenu {
                    overflow: hidden;
                    margin: 0;
                    position: fixed;
                    padding: 24px;
                    padding-top: 20px !important;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    max-height: 0;
                    background-color: #fff;
                    border-top-right-radius: 20px;
                    border-top-left-radius: 20px;
                    border: 2px solid #fff;
                    box-shadow: 0 -3px 6px #0003, inset 0 3px 6px #0003;
                    transform: translateY(55px);
                    transition: .5s;
                }
                #Header>#Account>#AccountMenu .subMenu {
                    max-height: unset;
                    display: flex;
                    flex-direction: column;
                    margin-top: 16px;
                }
                #Header>#Account>#AccountMenu .parentMenu span:first-child {
                    /* #Header>#Account>#AccountMenu #AccountName { */
                    font-family: IRANSansWeb_Bold;
                }
                #AccountImage {
                    height: 32px;
                }
                /************* opening Account Menus */
                #Header>#Account .menu.open {
                    z-index: 100 !important;
                    max-height: 50vh !important;
                    transform: translateY(0) !important;
                }
                #Noting.open {
                    display: inline-block;
                    content: "";
                    width: 100vw;
                    height: 100vh;
                    top: 0px;
                    left: 0;
                    background-color: #0003;
                    z-index: 99;
                }
                /* subMenu Link Style */
                #Login ul {
                    gap: 8px;
                }
                #Login a {
                    background-color: var(--menuItmeBlueMid);
                    color: #fff !important;
                    border-radius: 9px;
                    text-align: center !important;
                    align-items: center !important;
                    grid-template-columns: 1fr !important;
                }
                #Login a:hover {
                    background-color: var(--darkBlue);
                }
                #Login a .icon {
                    display: none;
                }
                /* SubMenu opening */
                .open .subTitle {
                    position: fixed !important;
                    width: 80%;
                    height: 50px;
                    top: 0;
                    left: 0;
                    padding-right: 32px;
                    display: flex;
                    align-items: center;
                    background-color: var(--darkBlue);
                    color: #fff;
                    z-index: 104;
                }
                #Navigation>ul>li>ul {
                    position: fixed;
                    left: 0%;
                    bottom: var(--BottomMenuHeight);
                    width: 80vw;
                    height: 0;
                    background-color: #fff;
                    min-width: 200px;
                    z-index: 103;
                    transition: .3s;
                    overflow: hidden;
                    box-shadow: 6px -6px 6px #0003, inset 0 0 6px #0003;
                    border-right: 2px solid #fff;
                }
                #Navigation>ul>li>ul li ul {
                    max-height: 0;
                    overflow: hidden;
                    transition: .3s;
                }
                #Navigation>ul>li>ul>li {
                    border-bottom: 1px solid #eee;
                }
                #Navigation li li li {
                    background-color: #f1f1f1;
                }
                #Navigation>ul>li.open>ul {
                    padding-top: 50px;
                    height: var(--menuHeight);
                    overflow: auto !important;
                }
                #Navigation>ul>li li.open ul {
                    max-height: 200vh !important;
                }
                #Navigation>ul>li.open::after {
                    background-color: #fff;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    z-index: 200;
                    padding-top: 5%;
                    content: url(../assets/image/DownMenu.svg);
                    box-shadow: inset 0 -6px 6px #0003;
                    box-sizing: border-box;
                }
                #Navigation>ul>li li.havSub::after {
                    content: "+";
                }
                #Navigation>ul>li li.havSub.open::after {
                    content: "-";
                    font-size: x-large;
                    padding-left: 16px;
                    transform: rotate(360deg);
                }
                #Navigation li li span {
                    padding: 8px 24px;
                    display: inline-block;
                    position: relative;
                }
                #Navigation li ul li a {
                    display: inline-block;
                    height: var(--menuLiHeight);
                    width: fit-content;
                    width: -moz-fit-content;
                    color: var(--menuItmeBlueMid) !important;
                }
                .open~.Noting {
                    display: inline-block;
                    width: 100%;
                    height: calc(100% - var(--BottomMenuHeight));
                    background-color: #0003;
                    top: 0;
                    z-index: 99;
                }
            }