/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* Optional palette (reference only) */
.color-palette {
  --athens-gray: #f6f6f8;
  --port-gore: #1d1d55;
  --blue-violet: #4546b3;
  --east-bay: #3d3a71;
  --dolphin: #64648b;
  --victoria: #4b4a9a;
  --blue-bell: #9494c0;
  --wild-blue-yonder: #8c94bc;
  --rhino: #343c6f;
  --comet: #545c76;
}

/* Design tokens (LIGHT THEME DEFAULTS) */
:root {
  /* Brand/core */
  --pbmit-global-color: #4546b3;
  /* primary accent */
  --pbmit-global-color-rgb: 148, 148, 192;

  /* Surface/backgrounds */
  --pbmit-secondary-color: #1f273a;
  /* page bg (light theme secondary/dark section) */
  --pbmit-secondary-color-rgb: 31, 39, 58;
  --pbmit-light-color: #f2f4f9;
  /* light surface */
  --pbmit-white-color: #ffffff;
  /* white surface */
  --pbmit-blackish-color: #21293d;
  /* dark surface/text */
  --pbmit-service-style-3: #4546b3;

  /* Text/links */
  --pbmit-link-color-normal: #21293d;
  --pbmit-link-color-hover: #4546b3;
  --pbmit-body-typography-color: #787c8b;

  /* Typography families/sizing */
  --pbmit-body-typography-font-family: 'DM Sans', sans-serif;
  --pbmit-body-typography-variant: regular;
  --pbmit-body-typography-font-size: 16px;
  --pbmit-body-typography-line-height: 26px;

  --pbmit-heading-typography-font-family: 'Quicksand', sans-serif;
  --pbmit-heading-color: #21293d;
  --pbmit-heading-font-variant: 700;

  /* Buttons */
  --pbmit-btn-typography-font-family: 'Quicksand', sans-serif;
  --pbmit-btn-typography-variant: 700;
  --pbmit-btn-typography-font-size: 13px;
  --pbmit-btn-typography-line-height: 20px;

  /* Layout */
  --pbmit-responsive-breakpoint: 1200px;
  --pbmit-border-radius: 50px;
}

/* DARK THEME OVERRIDES FOR ALL TOKENS ABOVE */
body.dark-mode {
  /* Brand/core (choose darker/lighter contrast as needed) */
  --pbmit-global-color: #4546b3;
  /* primary accent in dark */
  --pbmit-global-color-rgb: 69, 70, 179;

  /* Surface/backgrounds */
  --pbmit-secondary-color: #f2f4f9;
  /* overall page bg in dark mode (light card look) */
  --pbmit-secondary-color-rgb: 242, 244, 249;
  --pbmit-light-color: #131430;
  /* deepest dark */
  --pbmit-white-color: #ffffff;
  /* keep real white for text/icons when needed */
  --pbmit-blackish-color: #f2f4f9;
  /* inverted “blackish” for borders/text on dark bg */

  /* Text/links */
  --pbmit-link-color-normal: #f2f4f9;
  --pbmit-link-color-hover: #4546b3;
  --pbmit-body-typography-color: #e0e0e0;

  /* Typography families/sizing remain the same in dark mode */
  --pbmit-body-typography-font-family: 'DM Sans', sans-serif;
  --pbmit-body-typography-variant: regular;
  --pbmit-body-typography-font-size: 16px;
  --pbmit-body-typography-line-height: 26px;

  --pbmit-heading-typography-font-family: 'Quicksand', sans-serif;
  --pbmit-heading-color: #ffffff;
  --pbmit-heading-font-variant: 700;

  /* Buttons (typography same) */
  --pbmit-btn-typography-font-family: 'Quicksand', sans-serif;
  --pbmit-btn-typography-variant: 700;
  --pbmit-btn-typography-font-size: 13px;
  --pbmit-btn-typography-line-height: 20px;

  /* Layout (unchanged) */
  --pbmit-responsive-breakpoint: 1200px;
  --pbmit-border-radius: 50px;

  /* Apply page colors */
  background-color: var(--pbmit-secondary-color);
  color: var(--pbmit-body-typography-color);
}

/* Add dark mode styles for pbmit-bg-color-secondary footer footer-style-2 site-footer */
body.dark-mode .pbmit-bg-color-secondary.footer.footer-style-2.site-footer {
  background-color: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  box-shadow: 0 -2px 16px 0 rgba(31,39,58,0.18) inset;
}

/* Add dark mode styles for section-lg pbmit-bg-color-secondary service-section-home6 */
body.dark-mode .section-lg.pbmit-bg-color-secondary.service-section-home6 {
  background-color: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  border-bottom: 1px solid var(--pbmit-blackish-color);
}

/* Add dark mode styles for site-header-menu sticky-header */
body.dark-mode .site-header-menu.sticky-header {
  background-color: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  box-shadow: 0 2px 8px rgba(31, 39, 58, 0.08), 0 2px 16px 0 rgba(31,39,58,0.18) inset;
  /* border-bottom: 1px solid var(--pbmit-blackish-color); */
}

/* Add dark mode styles for pbmit-btn pbmit-btn-hover-secondary */
body.dark-mode .pbmit-btn.pbmit-btn-hover-secondary {
  background-color: var(--pbmit-global-color) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(69, 70, 179, 0.12);
}

/* Add dark mode alt style for pbmit-header-button (improved for visibility) */
body.dark-mode .pbmit-header-button,
body.dark-mode .pbmit-header-button.pbmit-header-button,
body.dark-mode .pbmit-header-button * {
  background: var(--pbmit-light-color) !important;
  color: #fff !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 12px 0 rgba(69,70,179,0.18) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  transition: background 0.2s, color 0.2s !important;
}
body.dark-mode .pbmit-header-button:hover,
body.dark-mode .pbmit-header-button.pbmit-header-button:hover {
  background: var(--pbmit-global-color) !important;
  color: #fff !important;
}


body.dark-mode .pbmit-btn.pbmit-btn-hover-secondary:hover {
  background-color: #fff !important;
  color: var(--pbmit-global-color) !important;
  border: 1px solid var(--pbmit-global-color);
}

/* Add dark mode styles for text-style */
body.dark-mode .text-style {
  color: var(--pbmit-global-color) !important;
  text-shadow: 0 1px 4px rgba(69, 70, 179, 0.15);
}

/* Add dark mode styles for dropdown menus */
body.dark-mode .main-menu ul.navigation li.dropdown>ul,
body.dark-mode .main-menu ul.navigation li.dropdown>ul li {
  background: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
}

body.dark-mode .main-menu ul.navigation li.dropdown>ul li {
  box-shadow: 0 4px 24px 0 rgba(31,39,58,0.18);
}

/* Add dark mode styles for pbmit-ihbox-style-8 */
body.dark-mode .pbmit-ihbox-style-8 {
  background: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  box-shadow: 0 4px 24px 0 rgba(31,39,58,0.18);
}

  /* Add dark mode alt style for pbmit-icon-wrapper pbmit-icon-type-icon */
  body.dark-mode .pbmit-icon-wrapper.pbmit-icon-type-icon {
    background: rgba(31,39,58,0.18) !important;
    color: var(--pbmit-global-color) !important;
    border-radius: 50%;
    box-shadow: 0 2px 12px 0 rgba(31,39,58,0.18);
  }

    /* Make pbmit-title text white in dark mode */
    body.dark-mode .pbmit-title {
      color: #fff !important;
    }

/* Add dark mode styles for pbmit-pricing-table-box */
body.dark-mode .pbmit-pricing-table-box {
  background: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  box-shadow: 0 4px 24px 0 rgba(31,39,58,0.18);
}
body.dark-mode .pbminfotech-post-item {
  background: var(--pbmit-light-color) !important;
  color: var(--pbmit-link-color-normal) !important;
  border: 1px solid var(--port-gore);
}



/* Floating theme toggle button (FAB) */
.theme-fab {
  position: fixed !important;
  /* lock to viewport */
  inset: auto auto 16px 16px;
  /* bottom-left */
  z-index: 2147483647;
  /* above all UI */

  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* LIGHT MODE: white button + dark icon */
  background: #202020;
  color: #21293d;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;

  /* Neutralize inherited styles */
  margin: 0 !important;
  padding: 0;
  transform: none !important;
  translate: none;
  rotate: none;
  scale: 1;
  overflow: visible;
}

.theme-fab:hover {
  filter: brightness(0.95);
}

.theme-fab:active {
  transform: translateY(1px);
}

/* Respect mobile safe areas (iOS/Android bottom bars) */
@supports (padding: max(0px)) {
  .theme-fab {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* DARK MODE: black button + white icon */
html.dark-mode .theme-fab,
body.dark-mode .theme-fab {
  background: #ffffff !important;
  color: #ffffff !important;
}