@media screen and (max-width: 1023px) {
  .navbar-menu {
    background: rgba(0, 30, 22, 0.85) !important;
    backdrop-filter: blur(8.1px);
    -webkit-backdrop-filter: blur(8.1px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem;
    text-align: right;
  }

  .navbar-menu a {
    color: white !important;
  }

  .navbar-item.has-dropdown .navbar-dropdown {
    display: none;
  }

  .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block;
  }

  .navbar-link::after {
    content: ' ▼';
    font-size: 0.7em;
  }

  .navbar-item.has-dropdown {
    pointer-events: auto;
  }
}

@media screen and (min-width: 1024px) {
  .navbar-item.has-dropdown:hover .navbar-dropdown {
    display: block;
  }
}

/* Base Header Styles */
.navbar {
  align-items: center;
  /* height: 75px; */
  position: fixed;
  width: 100%;
  z-index: 9999;
}

.navbar a {
  font-size: larger;
}



@media screen and (max-width: 1023px) {
  .navbar-start {
    margin: auto;
  }
}

@media screen and (min-width: 1023px) {
  .navbar-start {
    margin: auto;
    height: 75px;
  }
}


.navbar-item {
  padding: 0rem 0.75rem;
}

a.navbar-item-logo:hover {
  background-color: #30313a00;
  /* Darker background on hover */
}

.navbar-item-logo img {
  width: 160px;
  /* Adjust as needed */
  height: auto;
  /* Keeps aspect ratio */
  max-height: 80px;
  /* Ensures it doesn't exceed navbar height */
}

.is-active {
  /* background-color: #1f2229 !important; */
}

.navbar {
  background-color: #30313a91;
  /* display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px; */
  height: 75px;
  transition: .6s ease;
}

.navbar-brand {
  height: 100%;
  /* width: 20%; */
}

nav a {
  color: #FFFFFF !important;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: .6s ease;
}

.navbar-start a.active {
  color: #00d1ff !important;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: .6s ease;
}

.navbar-start a:hover {
  color: #00d1ff !important;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  transition: .2s ease;
  background-color: #30313a00;
  /* Blue-ish color for hover and active */
}

.navbar-dropdown {

  background-color: #30313a79;
}

.navbar-item {
  background: #00000000;
}

.navbar-dropdown a.navbar-item:not(.is-active, .is-selected) {
  color: #FFFFFF;
  background-color: #30313a00;
}


@media screen and (max-width: 768px) {
  .navbar-item.has-dropdown .navbar-dropdown {
    display: none;
  }

  .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block;
  }
}

.navbar-link:not(.is-arrowless)::after {
  border-color: hsl(193, 68.5%, 53.9%);
  inset-inline-end: 1.125em;
  margin-top: -.375em;
}

/* CTA buttons */
.nav-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.nav-buttons button {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1rem;
  max-height: 35px;
}

.nav-buttons button:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}


.signup-button {
  background-size: 200% auto;
  filter: drop-shadow(0px 0px 10px #487cf74b);
  -webkit-filter: drop-shadow(0px 0px 10px #487cf74b);
  color: #fff;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%)
}

.login-button {
  background-size: 200% auto;
  color: #fff;
  filter: drop-shadow(0px 0px 10px #48f7884b);
  -webkit-filter: drop-shadow(0px 0px 10px #48f7884b);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  background-image: linear-gradient(to right, #1FD176 0%, #12fa5b 51%, #1FD176 100%);
}