.sideMenuBg{position: fixed;top:0;z-index: -100;height:100vh;width:100vw;background-color: grey;opacity: 0;transition: all .4s;}

.smCloseBTN{position: relative;height:2.5rem;aspect-ratio: 1/1;padding: 0;border: none;background-color: transparent;
}
.smCloseLine{
  width:calc(100% - 2px);height:0;background-color: black;border:2.5px solid black; border-radius: 4px; position: absolute;top:50%;
}
#smClL2{transform: rotate(45deg);}
#smClL1{transform: rotate(-45deg);}

.sideMenuCloseBTN______Deatctivated {
  border: 2px solid black;
    border-radius: 3px;
    padding: 0;
    position: fixed;
    z-index: 501;
    top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 2rem;
    height: 0;
    width: 0;overflow: hidden;
    transition: all .4s  ease-in-out; /* Keep transition for all changes */
    background-color: yellow;
    transform: scale(.1);
  }
.sideMenu{position: fixed;top: 0;z-index: 500;height: 100vh;width:20rem;right: -20rem;background-color: white;transition: all .4s ease-in-out;}


.smTitleRow{padding: 1rem; display: flex;justify-content: space-between;align-items: center;  font-family: 'Open Sans', sans-serif;;font-weight: bold;font-size: 2.6rem;text-decoration: underline;text-decoration-color:#FFF200 ;}
.smFooter{position: absolute;bottom: 0;transform:translate(-50%,0);left:50%}
.legal-navigation{color: black; font-size: 1.5rem;display: flex;align-items: center;}
.legal-navigation a {color : black; font-size: 16px;padding: 0 4px 0 4px; text-decoration: none;}
.legal-navigation a:hover{ text-decoration: underline;text-decoration-color: #FFF200;}
.smCopyright {padding: 1rem;display: flex;justify-content: center;}


/* ////// sidemenu Active ////*/


.sideMenu.smActive{
    z-index: 500;right:0; 
}
.sideMenuBg.smActive{
    z-index: 499;opacity: .5;
}
.sideMenuCloseBTN.smActive {
    
    transition-property:  transform; /* Only transition z-index and transform */
    transition-duration:  0.4s; /* Instant transition for z-index, 0.5s for transform */
    height: 3rem;
    width: 3rem;
    transform: scale(1);
    right: 1rem;
    top: 1rem;
  }



/* ///// Menustyle  ////// */

.menu{margin:0 ;padding: 0;padding-left: 1rem;}
.menu-item{margin:0;padding: 0;list-style: none;display: flex;justify-content: start;align-items: start;margin-top: 1rem;}
.menu-item a{text-decoration: none;;font-size: 1.8rem;font-weight: bold;color: black;margin-left: 3.5rem;}
.menu-item a:hover{text-decoration: underline;text-decoration-color:#FFF200 }

.menuBear{height: 1.8rem;width:3rem;padding-top:0.6rem;margin-right: .5rem;display: none;}


/* Show menuBear div when the parent menu item is hovered */
.menu-item:hover .menuBear {
  display: block;
}

.menuBear.active{display: block;}
.menu-item a.active{margin-left:0}
.menu-item:hover a{margin-left: 0;}

#smLangSwitch{display: flex;justify-content: center;align-items: center;margin-bottom: .75rem;padding-right: .6rem;}
.smDivider{font-size: 1.5rem;}