/* Custom Scroll Header Styles */
.nav.scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  background-color: white !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  z-index: 999 !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav.scrolled.is-accent-primary {
  background-color: white !important;
}

.nav.scrolled.is-inverse {
  background-color: white !important;
}

.nav.scrolled.is-secondary {
  background-color: white !important;
}

/* Smooth transition for normal state */
.nav {
  transition: all 0.3s ease;
}

/* Add padding to body when header becomes fixed to prevent layout jump */
body.header-scrolled {
  padding-top: 80px;
  background-color: white;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 991px) {
  body.header-scrolled {
    padding-top: 70px;
  }
}

@media screen and (max-width: 767px) {
  body.header-scrolled {
    padding-top: 60px;
  }
}