.jewelryStore_header {
 position: fixed;
 font-family: 'irsans', sans-serif;
 width: 100%;
 height: -webkit-fit-content;
 height: -moz-fit-content;
 height: fit-content;
 z-index: 30;
}

.jewelryStore_header > .header {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 50px;
 background-color: var(--secondary_color);
}

.jewelryStore_header > .header > .logo {
 position: absolute;
 right: 30px;
 font-size: 14px;

 @media screen and (max-width: 650px) {
     right: none;
     left: 30px;
 }
}

.jewelryStore_header > .header > nav {
 @media screen and (max-width: 650px) {
     display: none;
 } 
}

.jewelryStore_header > .header ul {
 display: flex;
 list-style: none;
 flex-direction: row;
 align-items: center;
 direction: rtl;
 -moz-column-gap: 25px;
      column-gap: 25px;
 font-size: 16px;
}

.jewelryStore_header > .header ul > li {
 text-decoration: underline;
 text-underline-offset: 4px;
 -webkit-text-decoration-color: transparent;
         text-decoration-color: transparent;
 transform: scale(1);
 transition: transform 0.2s ease, -webkit-text-decoration-color 0.2s ease;
 transition: text-decoration-color 0.2s ease, transform 0.2s ease;
 transition: text-decoration-color 0.2s ease, transform 0.2s ease, -webkit-text-decoration-color 0.2s ease;
 -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
 cursor: pointer;
}
.jewelryStore_header > .header ul > li:hover {
 -webkit-text-decoration-color: #000000;
         text-decoration-color: #000000;
 transform: scale(1.1);
}
.jewelryStore_header > .header ul > li:active {
 transform: scale(0.9);
}

/* hamMenu */

.jewelryStore_header > .header  > .hamMenu {
 position: absolute;
 display: none;
 align-self: flex-end;
 right: 0.75rem;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 flex-direction: column;
 width: 35px;
 cursor: pointer;
 direction: ltr;
 z-index: 2;
 
 @media screen and (max-width: 650px) {
     display: flex;
 }
}

.jewelryStore_header > .header  > .hamMenu span {
 display: block;
 background: #000000;
 border-radius: 10px;
 height:4px;
 margin: 5px 0;
 transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 -webkit-transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.jewelryStore_header > .header  > .hamMenu span:nth-of-type(1){
 width: 50%;  
}

.jewelryStore_header > .header  > .hamMenu span:nth-of-type(2){
 width: 100%;
}

.jewelryStore_header > .header  > .hamMenu span:nth-of-type(3){
 width: 75%;
}

.jewelryStore_header > .header  > .hamMenu input[type="checkbox"]{
 display: none;
}

.jewelryStore_header > .header  > .hamMenu input[type="checkbox"]:checked ~ span:nth-of-type(1){
 transform-origin: bottom;
 -webkit-transform-origin: bottom;
 transform: rotatez(45deg) translate(5px,3px);
 -webkit-transform: rotatez(45deg) translate(5px,3px);
}

.jewelryStore_header > .header  > .hamMenu input[type="checkbox"]:checked ~ span:nth-of-type(2){
 transform-origin: top;
 -webkit-transform-origin: top;
 transform: rotatez(-45deg);
 -webkit-transform: rotatez(-45deg);
}

.jewelryStore_header > .header  > .hamMenu input[type="checkbox"]:checked ~ span:nth-of-type(3){
 transform-origin: bottom;
 -webkit-transform-origin: bottom;
 width: 50%;
 transform: translate(15px, -8px) rotatez(45deg);
 -webkit-transform: translate(15px, -8px) rotatez(45deg);
}

/* mobile menu */

.jewelryStore_header > .mobileMenu  {
 position: fixed;
 color: #000000;
 display: none;
 right: 0;
 width: 100%;
 height: 100%;
 top: 0;
 background-color: rgba(0, 0, 0, 0.64);
 opacity: 0;
 transition: opacity 200ms ease-in-out;
 direction: rtl;
 z-index: -1;
}

.jewelryStore_header > .mobileMenu  > div {
 position: relative;
 left: 0;
 display: flex;
 width: 60%;
 flex-direction: column;
 gap: 1.25rem;
 right: -60%;
 height: 100%;
 border-top-left-radius: 0.75rem;
 border-bottom-left-radius: 0.75rem;
 background-color: var(--secondary_color);
 padding-top: 4rem;
 overflow: hidden;
 transition: right 500ms cubic-bezier(0.8, 0.05, 0.23, 0.98);
}

.jewelryStore_header > .mobileMenu  > div > h2 {
 font-size: 2.25rem;
 padding-right: 0.75rem;
}

.jewelryStore_header > .mobileMenu  > div > ul > li {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 border-bottom-width: 2px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 padding: 1.25rem 0.75rem;
}

.jewelryStore_header > .mobileMenu  > div > ul > li:first-child {
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: #000000;
}

.jewelryStore_header > .mobileMenu  > div > ul > li > img {
 width: 14px;
}