nav {
      padding-top: 20px;
      padding-bottom: 20px;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 999;
      transition: all 0.3s ease;
      height: 50px;
}
.navbarActive {
      transition: all 0.3s ease;
      backdrop-filter: blur(20px) grayscale(0.8);
      background-color: #0b0b0b6b;
      box-shadow: 0 0 15px 0 #0b0b0b44;
}
.navG {
      gap: 100px;
      padding-left: 150px;
}
.navD {
      padding-right: 150px;
}
.navLinks {
      list-style: none;
      padding: 0;
      gap: 30px;
}
.navLi a,
.navD p {
      font-size: 15px;
      transition: all 0.3s ease;
}
.navLi a:hover {
      color: var(--lightGreen);
}
.navLi a.active {
      color: var(--lightGreen);
}

/* ------------------------------- Change lang ------------------------------ */

.langContainer {
      gap: 5px;
      cursor: pointer;
}
.langArrowImg {
      width: 15px;
      transition: all 0.3s ease;
}
.langContainer a {
      font-size: 15px;
}
.langContainer:hover a {
      color: var(--lightGreen);
}

.langSelectorContainer {
      position: absolute;
      top: 60px;
      right: 50px;
      width: 150px;
      background-color: var(--pictoBackground);
      border-radius: 5px;
      box-shadow: 0 0 15px 0 #0b0b0b44;
      max-height: 0;
      z-index: 99999;
      overflow: hidden;
      transition: max-height 0.5s ease;
}
.select {
      transition: all 0.3s ease;
      padding: 10px 0 10px 10px;
      cursor: pointer;
}
.langSelectorContainer a {
      display: block;
      font-size: 15px;
      width: 100%;
}
.langSelectorContainer .select:hover {
      background-color: var(--lightGreen);
}
.langSelectorContainer .select:hover a {
      color: var(--pictoBackground);
}

.langSelectorActive {
      max-height: 200px;
}

/* -------------------------------------------------------------------------- */
/*                                NAVBAR MOBILE                               */
/* -------------------------------------------------------------------------- */

.navMobile {
      display: none;
      justify-content: space-between;
      box-sizing: border-box;
      height: 80px;
      max-width: 100vw;
}

.burgerLine {
      width: 40px;
      height: 3px;
      background-color: #fff;
      margin: 5px;
      transition: all 0.3s ease;
      margin-left: auto;
}
.burgerLine:nth-child(2) {
      width: 30px;
}
.burgerLine:nth-child(3) {
      width: 20px;
}
.navMobileLinksContainer {
      transition: all 0.3s ease;
      position: absolute;
      top: 80px;
      left: 0;
      background-image: url('../src/imgs/navBg.png');
      background-size: cover;
      box-shadow: 0 5px 25px 0 #0b0b0b7a;
      z-index: 99999;
      box-sizing: border-box;
      height: 0;
      overflow: hidden;
      /* height: calc(100vh - 80px); */
      width: 100vw;
}
.navMobileLinks {
      width: 100%;
      /* display: none; */
      padding: 50px;
      padding-top: 20px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-sizing: border-box;
}
.navMobileLinks a {
      font-size: 1.3rem;
      font-family: 'arizona', sans-serif;
}
.navMobileLinks li {
      padding-bottom: 20px;
      border-bottom: 1px solid #fff;
}

.navMobileLinksActive {
      /* display: block; */
      height: calc(100vh - 80px);
}

.navMobileBurgerActive .burgerLine {
      background-color: var(--lightGreen);
}
.navMobile .langSelector .active {
      color: var(--lightGreen);
}
nav.navMobile.navbarActive {
      backdrop-filter: none;
      background-color: #1a1a1a;
      box-shadow: 0 0 15px 0 #0b0b0b44;
}
.navMobileActive {
      background-color: #1a1a1a;
}
.navMobile .langSelector {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-top: 50px;
}

.navMobileActive .burgerLine:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
}
.navMobileActive .burgerLine:nth-child(2) {
      opacity: 0;
}
.navMobileActive .burgerLine:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
      width: 40px;
}