.transparent-header {
  @apply relative z-999;
}

body:not(.home) #header.transparent-header .site-title-sticky {
  @apply block;
}

body:not(.home) #header.transparent-header .site-title {
  @apply invisible;
}

.transparent-header .header-menu-component {
  @apply bg-[var(--rb-header-background-color)] border-b border-[var(--rb-header-border-color)];
}

.home .transparent-header {
  @apply absolute top-0 w-full;
}

.home .transparent-header .header-menu-component {
  @apply bg-transparent border-transparent;
}

.home.menu-open .transparent-header .header-menu-component {
  @apply bg-[var(--rb-header-background-color)] border-b border-[var(--rb-header-border-color)];
}

.home .transparent-header .main-menu > .menu-item > a,
.home .transparent-header .login_register_popup_btn {
  @apply text-[var(--rb-header-transparent-text-color)];
}

.home .transparent-header .main-menu > .menu-item:hover > a {
  @apply bg-[var(--rb-base-nav-link-hover-background-color)] text-[var(--rb-base-nav-link-hover-color)];
}

.transparent-header.is-sticky .header-menu-component {
  @apply bg-[var(--rb-base-sticky-nav-background-color)] border-[var(--rb-header-border-color)];
}

.transparent-header.is-sticky .main-menu > .menu-item > a,
.transparent-header.is-sticky .login_register_popup_btn,
.transparent-header .dl-menu .login_register_popup_btn {
  @apply text-[var(--rb-base-nav-link-color)] hover:text-[var(--rb-base-nav-link-hover-color)] bg-[var(--rb-base-nav-link-background-color)] hover:bg-[var(--rb-base-nav-link-hover-background-color)];
}

.home .transparent-header .dl-trigger span {
  @apply bg-[var(--rb-header-transparent-text-color)];
}

.home.menu-open .transparent-header .dl-trigger span,
.transparent-header.is-sticky .dl-trigger span {
  @apply bg-[var(--rb-base-nav-link-color)];
}