header{
  left:0;
  right:0;
  top: 0;
  height: 65px;
  background-color: rgb(30, 30, 30);
  /* background-color: rgb(245, 245, 245); */
  margin: 0;
  position: fixed;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 80px 0 45px;
  display: flex;
  /* box-shadow: 0 7px 20px rgba(0,0,0,0.3); */
  z-index: 20;
  transition: background-color 0.3s ease;
  
}
header.transparent {
  background-color: transparent;
}
.header-pic{
  height: 80%;
  width: auto;
  object-fit: contain;
}

.header a {
  text-decoration: none;
  color: rgb(232, 232, 232);  
}

header .left {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
  padding-left: 20px;
}
.header-svg{
  height: 100%;
  aspect-ratio: 1/1;
  /* background-color: lightpink; */
}
.header-svg svg{
  padding-top: 3px;
  height: 92%;
  width: auto;
}

/* 
.logo-pic-area{
  height: 100%;
  aspect-ratio: 1/1;
  z-index:1000;
}
.logo-pic{
  padding-top:3px;
  height: 90%;
  object-fit: contain;
} */

.logo-text{
  font-size: 2.5rem;
  font-weight: 500;
  font-family: 'Cormorant Garamond';
  white-space: nowrap;
}
header.transparent .header-svg svg{
  opacity: 0;
}

header .navs{
  display: flex;
  align-items: center;
  gap: 50px;
  flex-direction: row;
  flex-shrink: 0;
  
}

.nav-link{
  font-size: 19px;
  font-weight: 250;
  transition: color 0.15s;
}
.nav-link:hover{
  text-decoration: overline;
  color: var(--salmon);

}
.nav-link.active{
  text-decoration: overline;
  color: var(--salmon);
}