:root {
  --navbar-width: 50px;
  --navbar-margin: 1vw;
}

.my-navbar {
  background-color: rgb(var(--burger-menu-bg-color));
  opacity: 100%;
  height: fit-content;
  width: fit-content;
  padding: 0;
  /* color: white; */
  position: fixed;
  z-index: 999;
  /*padding: 25px var(--navbar-margin) var(--navbar-margin) var(--navbar-margin);*/
  right: 0;
  top: 0;
  border-radius: 5px;
}

.container-fluid.ContNavbar {
  -webkit-justify-content: right;
  justify-content: right;  
}

.nav-link {
  color: rgb(var(--text-color));
  font-size: clamp(0.5rem, -0.2rem + 2.24vi, 4rem);
  font-weight: bold;
  transition: .1s ease-in-out;
}

.nav-link:hover {
  color: rgb(var(--text-color));
  scale: 1.05;
}

.navbar-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.navbar-collapse.show {
  max-height: 100vh;
}

.my-navbar.navbar-expanded {
  background-color: rgba(var(--bkg-color), .75);
  top: 0;
  border-radius: 0;
}

.navbar-brand {
  display: none;
}

.my-navbar>.container-fluid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
}

.my-navbar>.container-fluid>.navbar-collapse {
  width: calc(100vw - var(--navbar-margin) - var(--navbar-margin));
  height: calc(100vh - var(--navbar-margin) - var(--navbar-margin) - var(--navbar-width));
}

.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  grid-auto-rows: auto;
}

.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>*:nth-child(1),
.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>*:nth-child(5) {
  grid-column: 1 / span 3;
}

/* Item 9: spans columns 1 and 2 */
.my-navbar .navbar-collapse .navbar-nav > *:nth-child(9) {
  grid-column: 1 / span 2;
  grid-row: 6;
  text-align: center;
}

/* Item 10: spans columns 2 and 3 */
.my-navbar .navbar-collapse .navbar-nav > *:nth-child(10) {
  grid-column: 2 / span 2;
  grid-row: 6;
  text-align: center;
}

.my-navbar .navbar-collapse .navbar-nav > *:nth-child(9),
.my-navbar .navbar-collapse .navbar-nav > *:nth-child(10) {
  align-self: center;
  justify-self: center;
}

.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>*:nth-child(9) a,
.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>*:nth-child(10) a {
  font-weight: normal;
  font-size: clamp(0.5rem, 0.3rem + 0.64vi, 1.5rem);
  width: fit-content;
}

.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>.menu-item {
  height: 100%;
  align-content: center;
}

.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>.menu-item-72,
.my-navbar>.container-fluid>.navbar-collapse>.navbar-nav>.menu-item-71 {
  height: 100%;
  width: fit-content;
  justify-items: center;
}

.my-navbar>.container-fluid>.navbar-toggler {
  padding: 0;
  font-size: unset;
  line-height: 1;
  /*color: black;*/
  background-color: transparent;
  border: 0;
  border-radius: 0;
  transition: var(--bs-navbar-toggler-transition);
}

.my-navbar>.container-fluid>.navbar-toggler:focus {
  box-shadow: none;
}

.my-navbar>.container-fluid>.navbar-toggler>.navbar-toggler-icon {
  aspect-ratio: 1;
  height: auto;
  width: var(--navbar-width);
}

.nav-image {
  display: block;
  width: auto;
  height: clamp(1.5rem, 0.8rem + 2.24vi, 5rem);
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.3s ease;
  padding: 0 2px;
}

.nav-image:hover {
  transform: scale(1.05);
}
/*
================================== NAVBAR : toggler ==================================
*/
#ColNavbar {
  padding: 0;
}
button.c2navbar-toggler {
  padding: 0;
  border: 0px;
}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
/*
.light-mode .hamline{
  stroke: #575756;
}
.dark-mode .hamline{
  stroke: #fff;
}
/*
.hamline {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke-width:5.5;
  stroke-linecap:round;
  }
*/
.hamline {
  fill: none;
  stroke: rgb(var(--text-color));
  stroke-width: 5.5;
  stroke-linecap: round;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
}
#hamAlt{
  width: 100px;
}
.ham6 .top {
  stroke-dasharray: 40 172;
}
.ham6 .middle {
  stroke-dasharray: 40 111;
}
.ham6 .bottom {
  stroke-dasharray: 40 172;
}
.ham6.active .top {
  stroke-dashoffset: -132px;
}
.ham6.active .middle {
  stroke-dashoffset: -71px;
}
.ham6.active .bottom {
  stroke-dashoffset: -132px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
.ham8 .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
}
.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
}
.ham8.active .top {
  stroke-dashoffset: -64px;
}
.ham8.active .middle {
/*stroke-dashoffset: -20px;*/
  transform: rotate(90deg);
}
.ham8.active .bottom {
  stroke-dashoffset: -64px;
}
#navbarNavOffcanvas {
  /*background-color: var(--primary-color);*/
  height: 100vh;
  width: 100%;
}
.offcanvas-backdrop{
  display: none;
}