header{position: fixed;display: flex;width: 100%;justify-content: center;align-items: center;z-index: 2;}
header nav{display: flex;width: 100%;justify-content: space-evenly;align-items: center;height: 120px;flex-wrap: wrap;}
header nav #menu-header-menu-far-logo li{background-color: #EAEAEA;padding: 4px 20px;border-radius: 2px; &:hover a{color: #ffffff;transition: all 400ms linear;}&:hover{background-color: #ffffff59;transition: all 400ms linear;}}
header nav #menu-header-menu-far-logo li a{color: black;}
header nav .beside_logo_container{display: flex;align-items: center; gap: 19px;}
header nav ul{display: flex;gap: 30px;margin: 0;padding: 0;text-decoration: none;list-style: none;}
header nav a {display: flex;align-items: center;justify-content: center;}
header nav #menu-header-menu-beside-logo a{ color: #EAEAEA;&:hover{color: #ffffff59;transition: all 400ms linear;}}
header nav #menu-header-menu-beside-logo a::before {content: url(https://rejayford.top/wp-content/uploads/2025/02/star-disk.svg);margin-right: 5px;}
header nav .logo-wrapper{height: 66px;border-right: 1px solid #ffffff6b;padding-right: 19px;}
header nav a img{width: 147px;}
header.sticky{background-color: black;transition: all 0.5s ease;height: 64px;}
.current_page_item a {color: #ffffff94 !important;}
/* nav for mobile */
header nav div#mobile{display:none;position: relative;}
header nav div#mobile div#bar1,div#bar2,div#bar3{background-color: aliceblue;height: 3px;width: 30px;border-radius: 10px;transition: all 400ms linear;}
#dropdown_mobile_container{position: fixed;z-index: 1000; left: 0;height: 100vh; width: 100%;background-color: rgba(0, 0, 0, 0.234);backdrop-filter: blur(1px);visibility: hidden;opacity: 0; transition: all 0.1s ease;display: flex;}
#dropdown_mobile_container #whiteSpace{height: 100vh; width: 40%;}
#dropdown_mobile_container .dropdown_mobile_content{position: relative;display: flex; width: 100%;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo{width: 100%;height: 100vh;background-color: #282828;padding: 10px;display: flex;flex-direction: column;padding-top: 45px;transform: translateX(-300px); transition: all 0.1s ease;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo hr{width: 100%;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList{margin: 0 30px 0 30px;justify-content: center;align-items: center;flex-direction: column;height: 60vh;overflow: scroll;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList #menu-header-menu-beside-logo-1 li a{color: #EAEAEA;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList #menu-header-menu-beside-logo-1 li{text-align: center;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList #menu-header-menu-far-logo-1 li{text-align: center;background-color: #EAEAEA;padding: 4px 20px;border-radius: 2px;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList #menu-header-menu-far-logo-1 li a{color: black;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList ul{text-decoration: none;list-style: none;padding: 0;display: flex;flex-direction: column;gap:20px; margin-bottom: 20px;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div{display: flex;justify-content: space-between;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div #arrow{display: flex;flex-direction: column;height: fit-content;padding: 10px;margin-right: 10px; border: 1px solid;border-radius: 4px;gap: 4px;cursor: pointer;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div #arrow #barArrow1{transform: rotate(-43deg);}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div #arrow #barArrow2{transform: rotate(43deg);}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div #arrow #barArrow1,#barArrow2{background-color: aliceblue;height: 3px;width: 12px;border-radius: 10px;transition: all 400ms ease;}
#dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo div a img{height: 27px;}




.js_bar1{position: absolute;transform: rotate(45deg);top: 0; transition: all 0.1s ease;}
.js_bar2{visibility: hidden;opacity: 0; transition: all 2s ease;}
.js_bar3{position: absolute;transform: rotate(-45deg);top: 0; transition: all 0.1s ease;}

.js_dropdown_mobile_container{visibility: visible !important; opacity: 1 !important; transition: all 0.1s ease;}
.js_dropdown_mobile_logoOpen{transform: translateX(0) !important; transition: all 0.1s ease;}

@media only screen and (max-width: 913px) {
    header.sticky{height: unset !important;}
}
@media only screen and (max-width: 800px) {
    header nav{justify-content: space-between;padding: 0 30px;}
    header nav .menu-header-menu-beside-logo-container, header nav .menu-header-menu-far-logo-container{display: none;}
    header nav .logo-wrapper{border-right:unset;padding-right: unset;}
    header nav div#mobile{display:flex; flex-direction: column; align-items: center;justify-content: center;margin-right: 20px;gap: 5px;cursor: pointer;}
}
@media only screen and (max-width: 320px) {
    #dropdown_mobile_container .dropdown_mobile_content .dropdown_mobile_logo .menuList #menu-header-menu-far-logo-1 li{line-height: 1;}
    
}