.navBar {
    @apply transition-all duration-300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    align-items: stretch;
    top: 0;
    left: 0;
    padding: 2rem;
    z-index: 1000;
    background: hsl(0 0% 100% / .2);
    backdrop-filter: blur(1rem);
    font-size: 2rem;
    line-height: 2.8rem;
  }


  @media screen and (width < 768px) {
    .navBar {
      flex-direction: column;
      right: 30%;
      bottom: 0;
      transform: translateX(-100%);
      transition: transform 350ms ease-out;
      padding: min(30vh, 16rem) 2em;
    }
    .mobileNavToggle {
      position: absolute;
      display: block;
      width: 3.2rem;
      top: 3.2rem;
      left: 3.2rem;
      aspect-ratio: 1;
      z-index: 9999;
      background-image: url('/icons/menu.svg');
      background-repeat: no-repeat;
      background-size: contain; /* Adjust as needed: cover, 100% 100%, etc. */
      background-position: center;
    }
    .navBar[data-visible="true"] {
      transform: translateX(0);
    }
    .mobileNavToggle[aria-expanded="true"] {
      background-image: url('/icons/close.svg');
    }
    
  }
  @media screen and (width >= 768px) {
    .navBar {
      right: 0;
      flex-direction: row;
      height: 8rem;
      border-radius:0 0 0.8rem 0.8rem;
      }
  }
  .navBar > div {
    display: flex;
    align-items: center;
    gap: var(--gap, 3.2rem);
  }
  
  /* .navBarInitial {
    @apply bg-white/30 text-black rounded-lg shadow-lg absolute;
  }
  
  .navBarScrolledUp {
    @apply bg-gradient-to-b from-black/30 to-black/10 text-white  rounded-lg fixed;
  } */
  
  /* Custom style */
  .navBarScrolledUp {
    backdrop-filter: blur(10px); /* Adds a blur effect */
  }

  .cls-1, .cls-2 {
    fill: #ffffff;
  }

/* Transparent / almost transparent to white
  .navBarInitial {
    @apply bg-gradient-to-b from-black/50 to-black/30 text-white absolute rounded-lg;
  }
  
  .navBarScrolledUp {
    @apply bg-white text-black rounded-lg shadow-lg fixed;
  }
*/