@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --Primary-color:  #FFC544;
  --Secundary-color:#FFD984;
  --Tertiary-color: #379090;

  --FontSizeMenu: 1rem;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif;
  text-decoration: none;
  color: black;
  font-size: 1rem;
}

body{
  width: 100dvw;
  max-width: 100%;
  position: relative;
}

header {
  width: 100%;
  display: flex;
  height: 5rem;
  justify-content: center;
  align-items: center;
  background-color: var(--Primary-color);
}

header .container{
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 1380px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.4rem;
}

.container .Menu_logo{
 width: 130px;
 overflow: hidden;
 transition: transform .3s ease-in-out;
}

.container .Menu_logo:hover{
  transform: scale(1.1);
  cursor: pointer;
}

.container .Menu_logo img{
  width: 100%;
}
.container .Menu_items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.container .Menu_items ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.container .Menu_items li{
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  position: relative;
  padding: .3rem 0;
  cursor: pointer;

}
.container .Menu_items li > i{
  transform: translateY(15%);
  margin-left: .3rem;
}

.container .Menu_items li > a,
.Menu_items li .submenu a{
  font-size: var(--FontSizeMenu);
}
.container .Menu_items li:not(:nth-child(5)){
  padding: .5rem 0;
}
.container .Menu_items li:not(:nth-child(5))::after,
.container .Menu_items .submenu:nth-child(n) a::after,button::after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  height: 2.5px;
  width: 0%;
  background-color: var(--Tertiary-color);
  transition: all ease-in-out .3s;
  transform: translateX(10%);
}

.container .Menu_items li:not(:nth-child(n+5)):hover::after,
.container .Menu_items .submenu:nth-child(n) a:hover::after,button:hover::after{
  width: 80%;
}
.container .Menu_items li:has(.submenu a:hover)::after {
  width: 0%;
}
.container .Menu_items li:nth-child(n){
  display: block;
  flex-direction: row;
}
.container .Menu_items .Menu_profile{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
}


.container .Menu_items .Menu_profile-icon{
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  
}
.container .Menu_items .Menu_profile-icon img{
  max-width: 100%;
}

.container .Menu_items .submenu{
  display: none;
  position: absolute;
  flex-direction: column;
  transition: all 2s ease-in-out;
  cursor: pointer;
  /* transform: translateY(80%); */
}
.container .Menu_items li:nth-child(n):hover > .submenu{
  display: flex;
}

.container .Menu_items li:nth-child(n) i{
    transition: all .3s ease-in-out;
}
.container .Menu_items li:nth-child(n):not(.inbox):hover i{
  transform: rotate(180deg);
}
.container .Menu_items .Menu_profile_option:nth-child(n) button{
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--FontSizeMenu);
}
.container .Menu_items .submenu:nth-child(n) a,button{
  position: relative;
  padding: 1rem;
  background-color: var(--Primary-color);
  text-align: start;
  transition: background-color .3s ease;
}

.container .Menu_items li > .inbox{
  font-size: 1.5rem;
  animation: transform ease-in-out .1s;
}

.container .Menu_items li > .inbox:hover{
  transform: scale(1.1);
}