.loader,
#loader,
[class*="loader"],
[class*="loading"] {
  z-index: 9999 !important;
}

/* Preloader z-index - header dan past */
#preloader,
[class*="preloader"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Header base styles - scope only to navbar header */
#component-navbar .header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9998 !important;
  transition:
    background-color 0.3s ease-out,
    box-shadow 0.3s ease-out,
    backdrop-filter 0.3s ease-out;
  background: transparent !important;
  margin-top: 0 !important;
}
.hero-block {
  margin-top: -200px !important;
}
/* Header container blur effect */
#component-navbar .header .container,
#component-navbar .header .header-container {
  transition:
    background-color 0.3s ease-out,
    box-shadow 0.3s ease-out,
    backdrop-filter 0.3s ease-out,
    border-radius 0.3s ease-out;
  position: relative;
  margin-top: 0 !important;
}

/* Scrolled state - blur effect */
#component-navbar .header.header-scrolled .container,
#component-navbar .header.header-scrolled .header-container {
  -webkit-backdrop-filter: blur(0.5px) !important;
  margin-top: 0 !important;
}

/* Agar container bo'lmasa, header ga to'g'ridan-to'g'ri qo'llash */
#component-navbar .header.header-scrolled {
  -webkit-backdrop-filter: blur(0.5px) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #component-navbar .header.header-scrolled .container,
  #component-navbar .header.header-scrolled .header-container {
    border-radius: 16px 16px 16px 16px !important;
    margin-top: 0 !important;
  }
}

/* Desktop adjustments */
@media (min-width: 769px) {
  #component-navbar .header.header-scrolled .container,
  #component-navbar .header.header-scrolled .header-container {
    border-radius: 30px 30px 30px 30px !important;
    margin-top: 0 !important;
  }
}
