@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


body {
  font-family: "Poppins", sans-serif;
  /* overflow-x: hidden; */
  --black: #242424;
  --white: #f5f5f5;
  --pill: #e0d4be;
  --red: #511f52;
}

ul {
  list-style: none;
}

.page-wrap {
  position: relative;
}

header {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/*  NAV: Top Menu Section
----------------------------------------------- */
nav {
  width: 100%;
  position: fixed;
  z-index: 10;
  padding: 0.5em 5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav img{
  max-height:50px ;
}
/* nav h1 {
  font-size: clamp(1.2rem, 6vw, 3rem);
  font-weight: normal;
  text-transform: uppercase;
  color: var(--pill);
  font-size: 1.3rem;
  background-color: var(--red);
  padding: 5px 10px;
} */
nav ul {
  display: flex;
  color: var(--white);
}
nav ul li:not(#burger) {
  visibility: hidden;
  margin-right: 1.5em;
}

#burger {
  width: min-content;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  cursor: pointer;
}
#burger span {
  display: block;
  height: 5px;
  width: 29px;
  background-color: var(--red);
  border-radius: 200px;
  transition: transform 0.3s 0.3s ease-in-out;
}

.scrolled{
  background-color: rgba(169, 135, 168, 0.9);
  transition: 0.3s ease-out;
  box-shadow: 0px 2px 50px #666;
  /* box-shadow:
  0px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  0px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  0px 12.5px 10px rgba(0, 0, 0, 0.035),
  0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  0px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  0px 100px 80px rgba(0, 0, 0, 0.07)
; */
}

.active span:nth-of-type(1) {
  transform:rotate(45deg) scaleX(1) translateX(2px) translateY(10px);
}
.active span:nth-of-type(2) {
  transform: translateX(-4px) scaleX(0);
}
.active span:nth-of-type(3) {
  /* display: none; */
  transform:rotate(-45deg) scaleX(1) translateY(-10px);
}

@media(max-width:600px){
  nav img{
    max-height:35px ;
  }
}