.navbarSupremeContainer {
  width: 100%;
  padding: 0.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #a7b8bd4d;
  z-index: 99;
  transition: all 0.3s ease; /* Smooth transition effect */
}

.navbar {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 4rem;
  max-width: 70rem;
  margin: 0 auto;
}

.navbarContainer1 {
  display: flex;
  align-items: center;
}

.navbarContainer1H1 {
  display: flex;
  align-items: center;
  color: white;
  font-weight: normal;
}

.navbarContainer1H1 > img {
  width: 118px;
  height: 55px;
  margin-right: 8px;
}

/* -------(start) Hide search box------- */
.navbarContainer2 {
  display: flex;
  justify-content: end;
  padding: 0 0.5rem;
  align-items: center;
}

.navbarContainer2Span,
.navbarButtomSearchBarContainer {
  display: none;
}

.navbarButtomSearchBar {
  display: none;
}

.navbarSearchButton,
.navbarSearchCloseButton,
.navbarSearchCheckBox {
  display: none;
}

.navbarContainerButton {
  display: grid;
  position: relative;
}

.navbarContainer3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarMenuButton,
.navbarCloseButton,
.navbarCheckBox {
  display: none;
}

.navbarContainer3Navbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  column-gap: 2rem;
  align-items: center;
}

.navbarLink {
  color: rgb(20, 86, 155);
  font-size: small;
  text-transform: uppercase;
  position: relative;
  transition: color 0.6s ease; /* Add a transition for color change */
}

.navbarLink.active {
  line-height: 1.25rem;
  border-bottom: 2px solid rgb(20, 86, 155);
}

@media only screen and (max-width: 962px) {
  .navbarSupremeContainer {
    padding: 0.5rem;
  }
  .navbar {
    grid-template-columns: auto auto 3rem;
  }

  /* -------(start) Hide search box------- */
  .navbarContainer2SearchCheckBox {
    justify-content: space-between;
    padding: 0 0.5rem;
  }

  .navbarContainer2Span {
    display: none;
  }

  .navbarButtomSearchBarContainer.show {
    display: flex;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
  }

  .navbarButtomSearchBar {
    width: 92vw;
  }

  .navbarButtomSearchBar {
    display: none;
  }

  .navbarSearchButton,
  .navbarSearchCheckBox {
    display: none;
  }
  /* -------(End) Hide search box------- */

  .navbarContainerButton {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 2rem;
  }

  .navbarMenuButton,
  .navbarCheckBox {
    display: block;
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
  }

  .navbarCheckBox,
  .navbarSearchCheckBox {
    opacity: 0;
    z-index: 999;
  }

  .navbarCheckBox:checked ~ .navbarContainer3Navbar {
    transform: translateX(0);
  }

  .navbarCheckBox:checked ~ .navbarMenuButton {
    opacity: 0;
    transition: all 0.4s ease;
  }

  .navbarCheckBox:checked ~ .navbarCloseButton {
    display: block;
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    opacity: 100%;
    transition: all 0.4s ease;
  }

  .navbarContainer3Navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    top: 5rem;
    left: 0;
    position: fixed;
    z-index: 99999;
    background: #a7b8bd;
    height: -webkit-fill-available;
    width: 100vw;
    transition: all 0.4s ease;
    transform: translateX(100%);
  }

  .navbarLink {
    font-size: large;
  }
}

@media only screen and (max-width: 426px) {
  .navbarSupremeContainer {
    padding: 0.5rem;
  }
  .navbar {
    grid-template-columns: 8rem auto 2.5rem;
  }

  /* -------(Start) Hide search box------- */
  .navbarButtomSearchBar {
    display: none;
  }
  /* -------(End) Hide search box------- */
}

@media only screen and (max-width: 376px) {
  /* -------(Start) Hide search box------- */
  /* .navbarButtomSearchBar {
      width: 72.5vw;
    } */
  /* -------(End) Hide search box------- */
}

@media only screen and (max-width: 321px) {
  .navbar {
    grid-template-columns: 8rem auto 2rem;
  }

  /* -------(Start) Hide search box------- */
  .navbarButtomSearchBar {
    display: none;
  }

  .navbarSearchButton,
  .navbarSearchCheckBox,
  .navbarSearchCloseButton {
    width: 1.25rem;
    height: 1.25rem;
  }
  /* -------(End) Hide search box------- */

  .navbarMenuButton,
  .navbarCloseButton,
  .navbarCheckBox {
    width: 2rem;
    height: 2rem;
  }
}