.header{
  background-color: #101010;
  border-bottom: 0.2vw solid var(--primaryColor);
}

.dark{
  opacity: 1 !important;
}

.light{
  opacity: 0 !important;
}

.top-header .light,
.top-header .dark{
  opacity: 0 !important;
}

.header .header-item{
  color: var(--primaryColor) !important;
  font-weight: 900;
}

.header .header-item > span{
  transition: border-bottom 0.2s ease-in-out;
  border-bottom: 0.2vw solid var(--secondaryColor);
}

.header-item:hover > span {
  transition: border-bottom 0.2s ease-in-out;
  border-bottom: 0.2vw solid var(--primaryColor);
}

.header-button{
  background-color: var(--tertiaryHeadingColor);
  color: var(--secondaryHeadingColor);
  padding: 1vw 2vw;
  border-radius: 0.3vw;
}

.header .header-nav-container > nav > ul > li:nth-child(4),
.header .header-nav-container > nav > ul > li:nth-child(6),
.header .header-nav-container > nav > ul > li:nth-child(8){
  display: none !important;
}

.header .switch-toggle{
  display: none;
}

.top-header{
  background-color: transparent !important;
  border: 0;

}

.top-header .header-button{
  background-color: transparent;
  border: 0.2vw solid var(--primaryColor) !important;
  color: var(--primaryColor) !important;
  border-radius: 0.2vw;
  font-family: var(--headingFont);
  font-weight: 700;
  font-size: var(--subheadingFontSize);
  box-sizing: border-box;
  padding: 0.8vw 1.8vw;
  margin-right: 1vw;
  transition: all 0.2s ease-in-out !important;
}

.top-header .header-button:hover{
  transition: all 0.2s ease-in-out;
  color: #000000 !important;
  background-color: var(--primaryColor);
}

@media(max-width: 700px){
  .header{
    width: 100vw;
    position: fixed;
    height: 20vw !important;
    box-sizing: border-box;
    border-bottom: 0.5vw solid var(--primaryColor);
  }

  .header .header-button{
    padding: 2vw 3vw !important;
  }

  .header .header-logo-container{
    width: 40% !important;
  }

  .top-header{
    position: fixed;
    height: 20vw !important;
    box-sizing: border-box;
    top: 5vw !important;
    padding: 6vw 10vw !important;
    border-bottom: 0;
  }

  .top-header .header-button{
    padding: 2vw 3vw !important;
    border:  0.5vw solid var(--primaryColor) !important;
  }
}