@import url('../css/style-global.css');

/* Navbar */
header {
  background: var(--granate);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.header-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img {
  width: auto;
  height: 80px;
  margin-bottom: -30px;
}

/* hamburger */
.nav-toggle {
  border: none;
  background: transparent;
  color: white;
  font-size: 1.5rem;
}

.nav-toggle span {
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 5px;

  background-color: var(--beige);
  border-radius: 6px;
  z-index: 1;

  transform-origin: 0 0;

  transition: 0.4s;
}

.nav-toggle:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: var(--withe);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
}

.nav-toggle.is-active:hover span {
  background-color: var(--withe);
}
/* end hamburger */

nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

nav {
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}
nav li {
  list-style: none;
  display: inline-block;
  position: relative;
  margin: 10px 20px;
}
nav a {
  margin: 10px 0;
  font-family: var(--fontSecundary);
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  color: var(--beige);
}

/*button*/
nav button {
  padding: 13px 25px;
  border: none;
  background: var(--beige);
  color: var(--granate);
  transition: all 0.3s ease-in-out;
}
nav button:hover {
  font-weight: bold;
  border-radius: 0;
  background: var(--orange);
  transform: translatey(-5px);
  color: var(--withe);
}



/* for underline */
nav ul li a::after {
  content: '';
  height: 1px;
  background: var(--beige);
  position: absolute;
  /* left: 0; */
  left: 50%;
  bottom: -6px;
  /* line is hidden */
  width: 0;
  transition: 0.5s;
}

/* show underline */
nav ul li a:hover::after {
  width: 100%;
  left: 0;
}
.nav-open {
  height: 50vh;
  padding-top: 50px;
  border-radius: 5px;
  background: var(--granateDark);
}