#navMobile .bar {
  height: 0.25rem;
  width: 2rem;
  border-radius: 0.375rem;
  background-color: black;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#navMobile.open .bar {
  &:nth-child(1) {
    transform: translateY(200%) rotate(45deg);
  }
  &:nth-child(2) {
    opacity: 0;
  }
  &:nth-child(3) {
    transform: translateY(-200%) rotate(-45deg);
  }
}

#navMobileMenu {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(150%);
  pointer-events: none;

  &.open {
    transform: translateX(0);
    pointer-events: auto;
  }
}

#navMobileBackground.open {
  position: fixed;
  inset: 0;
  background-color: #0000004d;
  z-index: 40;
}

.budayaSelector {
  color: #432004ab;
  font-weight: 500;
  font-size: 1.25rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid #43200457;
  margin: -1px;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;

  &:hover {
    background-color: #ffffff82;
  }

  &.active {
    color: #432004;
    background-color: white;
    border: 0;
    margin: 0;
  }
}

.budayaSection {
  display: none;

  &.active {
    display: block;
  }
}

.progress-track {
  cursor: pointer;
  width: 100%;
  height: 0.25rem;
  background-color: #43200457;
  position: relative;
}

.progress-bar {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-color: #5ea500;
  width: 0;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  button {
    cursor: pointer;
  }
}