/* Fix for buttons that appear white before hover - ensure they have visible background colors */
/* Fix theme-btn2 - should have blue background, white text by default */
.theme-btn2 {
  background: transparent !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
/* Ensure ::after (blue background) is always visible and behind */
.theme-btn2::after {
  content: "" !important;
  background-color: var(--qt-bg-bg-7, #004080) !important;
  z-index: -2 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
/* Ensure ::before (white background for hover) starts at 0 width */
.theme-btn2::before {
  background-color: var(--qt-bg-bg-w, #FFFFFF) !important;
  width: 0% !important;
  z-index: -1 !important;
}
.theme-btn2:hover {
  color: var(--qt-bg-bg-7, #004080) !important;
}
.theme-btn2:hover::before {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}
/* Fix theme-btn3 - should have white background, blue text by default */
.theme-btn3 {
  background: transparent !important;
  color: var(--qt-bg-bg-7, #004080) !important;
}
/* Ensure ::after (white background) is always visible and behind */
.theme-btn3::after {
  content: "" !important;
  background-color: var(--qt-bg-bg-w, #FFFFFF) !important;
  z-index: -2 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
/* Ensure ::before (blue background for hover) starts at 0 width */
.theme-btn3::before {
  background-color: var(--qt-bg-bg-7, #004080) !important;
  width: 0% !important;
  z-index: -1 !important;
}
.theme-btn3:hover {
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
.theme-btn3:hover::before {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}
/* Fix other theme buttons that might have white background issues */
/* Ensure they have visible backgrounds via pseudo-elements, not white */
.theme-btn4,
.theme-btn5,
.theme-btn6,
.theme-btn7,
.theme-btn8,
.theme-btn9 {
  background: transparent !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
/* Ensure ::after pseudo-elements provide visible backgrounds for buttons that use them */
.theme-btn4::after,
.theme-btn5::after,
.theme-btn6::after,
.theme-btn7::after,
.theme-btn8::after,
.theme-btn9::after {
  background-color: var(--qt-bg-bg-7, #004080) !important;
}
.theme-btn4:hover,
.theme-btn5:hover,
.theme-btn6:hover,
.theme-btn7:hover,
.theme-btn8:hover,
.theme-btn9:hover {
  background: transparent !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
/* Ensure hover states for buttons that use ::before for hover effect */
.theme-btn7:hover::after,
.theme-btn8:hover::after,
.theme-btn9:hover::after {
  background-color: var(--qt-bg-bg-8, #4A90E2) !important;
}
/* Ensure button text and nested elements are visible */
.theme-btn2 *,
.theme-btn3 *,
.theme-btn4 *,
.theme-btn5 *,
.theme-btn6 *,
.theme-btn7 *,
.theme-btn8 *,
.theme-btn9 * {
  color: inherit !important;
}
.theme-btn2:hover * {
  color: var(--qt-bg-bg-7, #004080) !important;
}
.theme-btn3:hover * {
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
/* Fix for buttons in header and other areas */
.header2-buttons .theme-btn2,
.header-area .theme-btn2,
.mobile-nav .theme-btn3 {
  background: var(--qt-bg-bg-7, #004080) !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
.header2-buttons .theme-btn2:hover,
.header-area .theme-btn2:hover {
  background: var(--qt-bg-bg-8, #4A90E2) !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}
.mobile-nav .theme-btn3:hover {
  background: var(--qt-bg-bg-7, #004080) !important;
  color: var(--qt-bg-bg-w, #FFFFFF) !important;
}