/*
 Theme Name: Flow Life Global (Divi Child)
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Official theme of Flow Life Global
 Author: Wondermill Studio
 Author URI: https://wondermill.studio
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ==========================================================
   BASE CONTENT HELPERS
   ========================================================== */

.et_pb_gallery .et_pb_gallery_image,
.et_pb_gallery .et_pb_gallery_image a {
  display: block;
  overflow: hidden;
}

.et_pb_gallery .et_pb_gallery_image img {
  display: block;
  width: 100%;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}

.et_pb_gallery .et_pb_gallery_image:hover img,
.et_pb_gallery .et_pb_gallery_image:focus-within img {
  transform: scale(1.07);
}

/* ==========================================================
   STICKY FOOTER LAYOUT — DIVI FIXED NAV SAFE VERSION
   Footer stays visible on long pages and sticks to bottom on short pages.
   ========================================================== */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

/* Remove Divi fixed-nav padding from the outer wrapper.
   That padding was causing the footer to render below the scrollable page. */
body.et_fixed_nav #page-container {
  padding-top: 0 !important;
}

/* Outer wrapper should not control footer flex behavior */
#page-container {
  display: block !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Actual parent of #main-content and #main-footer */
#et-main-area {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;

  /* Replaces Divi's #page-container fixed-nav offset */
  padding-top: var(--divi-header-h, 54px) !important;
}

/* Home page keeps hero under the transparent/frosted nav */
body.home #et-main-area {
  padding-top: 0 !important;
}

/* Logged-in WordPress admin bar adjustment */
body.admin-bar:not(.home) #et-main-area {
  padding-top: calc(var(--divi-header-h, 54px) + 32px) !important;
}

@media (max-width: 782px) {
  body.admin-bar:not(.home) #et-main-area {
    padding-top: calc(var(--divi-header-h, 54px) + 46px) !important;
  }
}

/* Main content becomes the flexible spacer */
#main-content {
  flex: 1 0 auto !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Undo broad flex rules from earlier attempts */
#main-content article,
#main-content .entry-content,
#main-content .et_builder_inner_content {
  display: block !important;
  flex: initial !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Footer stays in normal document flow */
#main-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  width: 100%;
  clear: both;
}


/* Intro overlay must sit above the header/logo during animation */
#flow-life-intro-overlay {
  z-index: 2147483647 !important;
}

/* Prevent header / navigation UI from being text-selected */
#main-header,
#top-header,
#et-top-navigation,
#et-secondary-nav,
#top-menu,
#mobile_menu,
#mobile_menu1,
.et_mobile_nav_menu,
.et_pb_menu,
.et_pb_fullwidth_menu,
.et_pb_menu__wrap,
.et_pb_menu__logo,
.et_pb_menu__menu,
.et-menu,
.et_mobile_menu,
.logo_container,
#logo {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#main-header,
#top-header,
.et_pb_menu,
.et_pb_fullwidth_menu,
.logo_container,
#logo,
#top-menu,
.et-menu,
.et_mobile_menu {
  cursor: default;
}

#main-header a,
#top-header a,
.et_pb_menu a,
.et_pb_fullwidth_menu a,
#top-menu a,
.et-menu a,
.et_mobile_menu a {
  cursor: pointer;
}

/*
 * Prevent transient compositing seam above footer while scrolling.
 * Extends the footer background slightly upward so no page background
 * can flash through during transformed/smooth scrolling.
 */
body:not(.home) #main-footer {
    position: relative;
    border-top: 0 !important;
    box-shadow: none !important;
    z-index: 2;
}

body:not(.home) #main-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 4px;
    background: #222;
    pointer-events: none;
    z-index: 1;
}

body:not(.home) #footer-bottom {
    border-top: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   GLOBAL NAV VARIABLES
   ========================================================== */

body {
  --divi-header-h: 54px;
  --mobile-header-h: var(--divi-header-h);
  --divi-logo-gap: 0px;

  /* Shared compact-logo tuning: desktop sticky, desktop non-home, and mobile */
  --logo-sticky-y: 5px;
  --logo-sticky-scale: 1.25;

  /* Home expanded-logo tuning */
  --logo-expand-y: 80px;
  --logo-expand-scale: 3.5;
  --logo-nudge-x: 12px;

  /* Desktop spacing */
  --center-gap: 200px;
  --menu-item-gap: 30px;

  /* Header / submenu color system */
  --header-top-bg: rgba(255, 255, 255, 0.38);
  --header-sticky-bg: rgba(255, 255, 255, 0.95);
  --header-top-blur: 10px;
  --header-sticky-blur: 6px;
  --header-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);

  --nav-text: rgba(0, 0, 0, 0.86);
  --nav-text-hover: rgba(0, 0, 0, 1);
  --nav-active: #8d10ff;

  --submenu-top-bg: rgba(255, 255, 255, 0.38);
  --submenu-sticky-bg: rgba(255, 255, 255, 0.95);
  --submenu-top-blur: 10px;
  --submenu-sticky-blur: 6px;
  --submenu-radius: 14px;
  --submenu-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  --submenu-border: rgba(0, 0, 0, 0.08);
  --submenu-hover: rgba(0, 0, 0, 0.06);
  --submenu-divider: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  body {
    --header-top-bg: rgba(12, 12, 14, 0.42);
    --header-sticky-bg: rgba(12, 12, 14, 0.88);
    --header-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

    --nav-text: rgba(255, 255, 255, 0.88);
    --nav-text-hover: rgba(255, 255, 255, 1);
    --nav-active: #b35cff;

    --submenu-top-bg: rgba(12, 12, 14, 0.42);
    --submenu-sticky-bg: rgba(12, 12, 14, 0.88);
    --submenu-border: rgba(255, 255, 255, 0.12);
    --submenu-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
    --submenu-hover: rgba(255, 255, 255, 0.10);
    --submenu-divider: rgba(255, 255, 255, 0.10);
  }
}

/* ==========================================================
   DESKTOP / LARGE TABLET HEADER >= 991px
   ========================================================== */

@media (min-width: 991px) {

  #main-header,
  #main-header .container,
  #main-header .et_menu_container,
  #et-top-navigation {
    overflow: visible !important;
  }

  #main-header {
    transform: none !important;
  }

  #main-header > .container,
  #et-top-navigation,
  #top-menu-nav,
  #main-header .et_menu_container {
    height: var(--divi-header-h) !important;
    min-height: var(--divi-header-h) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    top: 0 !important;
  }

  #et-top-navigation {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  #top-menu-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  #top-menu {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: var(--menu-item-gap);
  }

  #top-menu > li {
    display: flex !important;
    align-items: center !important;
  }

  #top-menu > li > a {
    display: flex !important;
    align-items: center !important;
    height: var(--divi-header-h) !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: var(--nav-text) !important;
  }

  #top-menu > li > a:hover,
  #top-menu > li > a:focus {
    color: var(--nav-text-hover) !important;
  }

  /* Permanent center slot for the inline logo */
  #top-menu > li.centered-inline-logo-wrap {
    flex: 0 0 var(--center-gap) !important;
    width: var(--center-gap) !important;
    max-width: var(--center-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #top-menu > li.centered-inline-logo-wrap > a {
    display: visible !important;
  }

  #top-menu > li.centered-inline-logo-wrap .logo_container {
    width: 100% !important;
    height: var(--divi-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  #top-menu > li.centered-inline-logo-wrap .logo_container a {
    pointer-events: auto !important;
  }

  #top-menu > li.centered-inline-logo-wrap #logo,
  #top-menu > li.centered-inline-logo-wrap .logo_container img {
    max-height: calc(var(--divi-header-h) - var(--divi-logo-gap)) !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: translateY(var(--logo-sticky-y)) scale(var(--logo-sticky-scale)) !important;
    transform-origin: center top;
  }

  /* Top-level caret alignment */
  #top-menu > li.menu-item-has-children > a:after,
  #top-menu > li.menu-item-has-children > a .et-pb-icon,
  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > a:after,
  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > a .et-pb-icon {
    position: static !important;
    display: inline-block !important;
    margin-left: 6px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(2px) !important;
  }

  /* First-level submenus */
  #top-menu > li.menu-item-has-children {
    position: relative !important;
  }

  #top-menu > li.menu-item-has-children > ul.sub-menu {
    top: calc(var(--divi-header-h) - 2px) !important;
    left: 0 !important;
    margin-top: 0 !important;
    transform: translateY(10px) !important;
    background: var(--submenu-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-top-blur));
    backdrop-filter: blur(var(--submenu-top-blur));
    border: 1px solid var(--submenu-border);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);
    padding: 10px 0 !important;
    overflow: visible !important;
    min-width: 240px;
    transition: background-color 520ms cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000001 !important;
  }

  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > ul.sub-menu,
  body:not(.home) #top-menu > li.menu-item-has-children > ul.sub-menu {
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  #top-menu li ul.sub-menu li a {
    background: transparent !important;
    color: var(--nav-text) !important;
    padding: 12px 18px !important;
    line-height: 1.2 !important;
    font-weight: inherit;
    letter-spacing: inherit;
    transition: background-color 180ms ease, padding-left 180ms ease, color 180ms ease;
  }

  #top-menu li ul.sub-menu li a:hover,
  #top-menu li ul.sub-menu li a:focus {
    background: var(--submenu-hover) !important;
    color: var(--nav-text-hover) !important;
    padding-left: 22px !important;
  }

  #top-menu li ul.sub-menu li:not(:last-child) {
    border-bottom: 1px solid var(--submenu-divider);
  }

  #top-menu > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 18px;
    background: transparent;
  }

  #top-menu li ul.sub-menu:before {
    display: none !important;
  }

  /* Second-level submenu arrows and positioning */
  #top-menu li ul.sub-menu li.menu-item-has-children {
    position: relative !important;
  }

  #top-menu li ul.sub-menu li.menu-item-has-children > a {
    position: relative !important;
    padding-right: 1.8em !important;
  }

  #top-menu li ul.sub-menu li.menu-item-has-children > a .et-pb-icon {
    display: none !important;
  }

  #top-menu li ul.sub-menu li.menu-item-has-children > a:after {
    content: "\203A" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a {
    padding-right: 18px !important;
    padding-left: 1.8em !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a:after {
    content: none !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a:before {
    content: "\2039" !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children > ul.sub-menu {
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) !important;
    transition: opacity 200ms ease-out, visibility 200ms ease-out, transform 200ms ease-out !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children.et-hover > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children.et-hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > ul.sub-menu {
    top: 0 !important;
    left: auto !important;
    right: 100% !important;
    margin-right: 4px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    transition: opacity 200ms ease-out, visibility 200ms ease-out, transform 200ms ease-out !important;
  }

  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children.et-hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    background: var(--submenu-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-top-blur));
    backdrop-filter: blur(var(--submenu-top-blur));
    border: 1px solid var(--submenu-border);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);
    min-width: 240px !important;
    z-index: 1000000 !important;
  }

  #main-header.et-fixed-header #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu,
  body:not(.home) #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  /* Search */
  #et_top_search {
    height: var(--divi-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  #et_search_icon {
    display: block !important;
    line-height: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: translateY(0) !important;
  }

  #et_search_icon:before {
    position: relative !important;
    line-height: 1 !important;
    opacity: 1 !important;
    color: var(--nav-text) !important;
    transform: translateY(2px) !important;
  }

  #et_top_search:hover #et_search_icon:before {
    color: var(--nav-text-hover) !important;
  }

  #main-header .et_search_outer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
    overflow: visible !important;
    visibility: hidden !important;
  }

  #main-header .et_search_outer:has(.et_pb_search_form_visible),
  #main-header .et_search_outer:has(.et_search_form_container:not(.et_pb_search_form_hidden)) {
    visibility: visible !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 320px !important;
    max-width: 320px !important;
    margin-left: -158px !important;
  }

  #main-header .et_search_outer .et_search_form_container:not(.et_pb_search_form_hidden) {
    pointer-events: auto !important;
  }

  #main-header .et_search_form_container {
    max-width: 320px !important;
  }

  #main-header .et_search_form_container:not(.et_pb_search_form_hidden),
  #main-header .et_search_form_container.et_pb_search_form_visible {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    opacity: 1 !important;
  }

  .et_pb_search_form_hidden {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et-search-field,
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et_close_search_field,
  #main-header .et_search_form_container.et_pb_search_form_visible .et-search-field,
  #main-header .et_search_form_container.et_pb_search_form_visible .et_close_search_field {
    opacity: 1 !important;
    color: var(--nav-text) !important;
  }

  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et-search-field::placeholder,
  #main-header .et_search_form_container.et_pb_search_form_visible .et-search-field::placeholder {
    opacity: 1 !important;
    color: color-mix(in srgb, var(--nav-text) 70%, transparent) !important;
  }

  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et_close_search_field:before,
  #main-header .et_search_form_container.et_pb_search_form_visible .et_close_search_field:before {
    opacity: 1 !important;
    color: inherit !important;
  }

  /* Home-only overlay header and expanded-logo behavior */
  body.home #main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999999 !important;
    height: var(--divi-header-h) !important;
    min-height: var(--divi-header-h) !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: background-color 520ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.home #main-header:not(.et-fixed-header) {
    background-color: var(--header-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-top-blur));
    backdrop-filter: blur(var(--header-top-blur));
    box-shadow: none !important;
  }

  body.home #main-header.et-fixed-header,
  body:not(.home) #main-header {
    background-color: var(--header-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-sticky-blur));
    backdrop-filter: blur(var(--header-sticky-blur));
    box-shadow: var(--header-shadow) !important;
  }

  body.home.et_fixed_nav #page-container {
    padding-top: 0 !important;
  }

  body.home #top-menu > li.centered-inline-logo-wrap {
    overflow: visible !important;
  }

  body.home #main-header .container {
    position: static !important;
  }

  body.home #main-header .logo_container {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: var(--center-gap) !important;
    height: var(--divi-header-h) !important;
    margin-left: calc((var(--center-gap) / -2) - var(--logo-nudge-x)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 1000000 !important;
    overflow: visible !important;
  }

  body.home #main-header .logo_container a {
    pointer-events: auto !important;
  }

  body.home #main-header #logo,
  body.home #main-header .logo_container img {
    max-height: calc(var(--divi-header-h) - var(--divi-logo-gap)) !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  body.home #main-header #logo {
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top;
    will-change: transform;
  }

  body.home #main-header:not(.et-fixed-header) #logo {
    transform: translateY(var(--logo-expand-y)) scale(var(--logo-expand-scale)) !important;
  }

  body.home #main-header.et-fixed-header #logo {
    transform: translateY(var(--logo-sticky-y)) scale(var(--logo-sticky-scale)) !important;
  }
}

/* ==========================================================
   MOBILE / SMALL TABLET HEADER <= 990px
   Clean Divi mobile nav: centered logo, left hamburger, no Select Page bar.
   ========================================================== */

@media (max-width: 990px) {

  #main-header {
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: var(--header-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-sticky-blur));
    backdrop-filter: blur(var(--header-sticky-blur));
    box-shadow: var(--header-shadow) !important;
    transform: none !important;
  }

  body.home #main-header:not(.et-fixed-header) {
    background-color: var(--header-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--header-top-blur));
    backdrop-filter: blur(var(--header-top-blur));
    box-shadow: none !important;
  }

  #main-header .container,
  #main-header .et_menu_container {
    width: 100% !important;
    max-width: none !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 16px !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Hide desktop nav/search from the mobile layout */
  #top-menu-nav,
  #top-menu,
  #et_top_search {
    display: none !important;
  }

  /* Center logo independent of hamburger width */
  #main-header .logo_container {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: var(--center-gap) !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    margin-left: calc(var(--center-gap) / -2) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  #main-header .logo_container a {
    height: var(--mobile-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  #main-header #logo,
  #main-header .logo_container img {
    max-height: calc(var(--mobile-header-h) - var(--divi-logo-gap)) !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: translateY(var(--logo-sticky-y)) scale(var(--logo-sticky-scale)) !important;
    transform-origin: center top !important;
  }

  /* Mobile nav container pinned to the left side of the header */
  #et-top-navigation {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 5 !important;
  }

  #et_mobile_nav_menu {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    top: 0 !important;
    width: 36px !important;
    height: var(--mobile-header-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    z-index: 6 !important;
  }

  .mobile_nav {
    position: static !important;
    width: 36px !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 0 !important;
    display: block !important;
  }

  .mobile_nav .select_page {
    display: none !important;
  }

  .mobile_menu_bar {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
    cursor: pointer;
  }

  .mobile_menu_bar:before {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    display: block !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    color: var(--nav-text) !important;
    transform: translateY(-50%) !important;
  }

  .mobile_menu_bar:hover:before,
  .mobile_menu_bar:focus:before {
    color: var(--nav-text-hover) !important;
  }

  /* Mobile dropdown panel */
  .et_mobile_menu,
  #mobile_menu,
  #mobile_menu1 {
    position: absolute !important;
    top: var(--mobile-header-h) !important;
    left: -16px !important;
    right: auto !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background-color: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--submenu-border) !important;
    box-shadow: var(--submenu-shadow) !important;
  }

  .et_mobile_menu li a,
  #mobile_menu li a,
  #mobile_menu1 li a {
    padding: 13px 22px !important;
    color: var(--nav-text) !important;
    border-bottom-color: var(--submenu-divider) !important;
    line-height: 1.25 !important;
  }

  .et_mobile_menu li a:hover,
  .et_mobile_menu li a:focus,
  #mobile_menu li a:hover,
  #mobile_menu li a:focus,
  #mobile_menu1 li a:hover,
  #mobile_menu1 li a:focus {
    background-color: var(--submenu-hover) !important;
    color: var(--nav-text-hover) !important;
  }

  .et_mobile_menu li li a,
  #mobile_menu li li a,
  #mobile_menu1 li li a {
    padding-left: 38px !important;
    color: color-mix(in srgb, var(--nav-text) 82%, transparent) !important;
    font-size: 0.95em;
  }
}

/* ==========================================================
   ACTIVE LINK COLOR — DESKTOP + SUBMENUS + MOBILE
   Keep this after normal and dark mode nav color rules.
   ========================================================== */

#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a,
#top-menu li.current_page_ancestor > a,
#top-menu li.current-menu-parent > a,
#top-menu li.current_page_parent > a,
#top-menu li ul.sub-menu li.current-menu-item > a,
#top-menu li ul.sub-menu li.current_page_item > a,
#top-menu li ul.sub-menu li.current-menu-ancestor > a,
#top-menu li ul.sub-menu li.current_page_ancestor > a,
#top-menu li ul.sub-menu li.current-menu-parent > a,
#top-menu li ul.sub-menu li.current_page_parent > a,
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a,
.et_mobile_menu li.current-menu-ancestor > a,
.et_mobile_menu li.current_page_ancestor > a,
.et_mobile_menu li.current-menu-parent > a,
.et_mobile_menu li.current_page_parent > a,
#mobile_menu li.current-menu-item > a,
#mobile_menu li.current_page_item > a,
#mobile_menu li.current-menu-ancestor > a,
#mobile_menu li.current_page_ancestor > a,
#mobile_menu li.current-menu-parent > a,
#mobile_menu li.current_page_parent > a,
#mobile_menu1 li.current-menu-item > a,
#mobile_menu1 li.current_page_item > a,
#mobile_menu1 li.current-menu-ancestor > a,
#mobile_menu1 li.current_page_ancestor > a,
#mobile_menu1 li.current-menu-parent > a,
#mobile_menu1 li.current_page_parent > a {
  color: var(--nav-active) !important;
}


/* ==========================================================
   DESKTOP LOGO OVERFLOW FIX
   Let the centered logo visually hang below the nav bar
   without changing the visible nav bar height.
   ========================================================== */

/* ==========================================================
   DESKTOP LOGO OVERFLOW FIX
   Allow the logo to hang below the nav without changing
   the logo container's layout height or vertical alignment.
   ========================================================== */

@media (min-width: 991px) {
  #main-header,
  #main-header > .container,
  #main-header .container,
  #main-header .et_menu_container,
  #et-top-navigation,
  #top-menu-nav,
  #top-menu,
  #top-menu > li,
  #top-menu > li.centered-inline-logo-wrap,
  #top-menu > li.centered-inline-logo-wrap .logo_container,
  #top-menu > li.centered-inline-logo-wrap .logo_container a {
    overflow: visible !important;
  }

  #top-menu > li.centered-inline-logo-wrap,
  #top-menu > li.centered-inline-logo-wrap .logo_container {
    height: var(--divi-header-h) !important;
    min-height: var(--divi-header-h) !important;
  }
}




/* ==========================================================
   FINAL MOBILE LOGO OVERRIDE
   Force mobile logo to match desktop sticky logo appearance.
   Must remain at the very bottom of style.css.
   ========================================================== */

@media (max-width: 990px) {
  body {
    --mobile-header-h: var(--divi-header-h, 54px);
  }

  #main-header .container,
  #main-header .et_menu_container {
    position: relative !important;
    overflow: visible !important;
  }

  #main-header .logo_container,
  .et_header_style_left #main-header .logo_container,
  .et_header_style_split #main-header .logo_container,
  .et_header_style_centered #main-header .logo_container {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: var(--center-gap, 200px) !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    margin-left: calc(var(--center-gap, 200px) / -2) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  #main-header .logo_container a {
    height: var(--mobile-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  #main-header #logo,
  #main-header .logo_container img,
  .et_header_style_left #main-header #logo,
  .et_header_style_split #main-header #logo,
  .et_header_style_centered #main-header #logo {
    max-height: calc(var(--mobile-header-h) - var(--divi-logo-gap, 0px)) !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;

    display: block !important;
    margin: 0 auto !important;

    transform: translateY(var(--logo-sticky-y, 7px)) scale(var(--logo-sticky-scale, 1.25)) !important;
    transform-origin: center top !important;
  }
  
}

/* ==========================================================
   MOBILE HOME LOGO EXPANSION
   Home top state: expanded logo
   Home scrolled/sticky state: normal logo
   ========================================================== */

@media (max-width: 990px) {
  body.home {
    --mobile-logo-expand-y: 142px;
    --mobile-logo-expand-scale: 3.6;
  }

  body.home #main-header:not(.et-fixed-header) #logo,
  body.home #main-header:not(.et-fixed-header) .logo_container img {
    transform: translateY(var(--mobile-logo-expand-y)) scale(var(--mobile-logo-expand-scale)) !important;
    transform-origin: center top !important;
    transition: transform 520ms cubic-bezier(.16,1,.3,1) !important;
    will-change: transform;
  }

  body.home #main-header.et-fixed-header #logo,
  body.home #main-header.et-fixed-header .logo_container img {
    transform: translateY(var(--logo-sticky-y, 7px)) scale(var(--logo-sticky-scale, 1.25)) !important;
    transform-origin: center top !important;
    transition: transform 520ms cubic-bezier(.16,1,.3,1) !important;
  }
}


/* ==========================================================
   MOBILE FIXED HEADER
   Keep mobile nav visible while scrolling.
   Home page hero can sit underneath it.
   ========================================================== */

@media (max-width: 990px) {
  #main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
  }

  body.home.et_fixed_nav #page-container {
    padding-top: 0 !important;
  }
}




/* ==========================================================================
   Flow Life — Enhanced Divi 5 CSS Parallax
   ==========================================================================

   Divi remains responsible for:
   - selecting the background image
   - responsive image configuration
   - background sizing / positioning
   - creating its parallax wrapper and background layer

   This code enhances only backgrounds configured in Divi as:

       Use Parallax Effect: Yes
       Parallax Method: CSS

   JavaScript adds .flow-depth-parallax-layer only after confirming
   trueParallax === false in Divi 5's own parallax data.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Global tuning
   -------------------------------------------------------------------------- */

:root {
    /*
     * 0.10 = subtle
     * 0.16 = recommended starting point
     * 0.22 = stronger / more cinematic
     */
    --flow-parallax-depth: 0.16;

    /*
     * Absolute upper limit on movement.
     * JavaScript also imposes a section-height-based safety limit.
     */
    --flow-parallax-max-travel: 110;
}


/* --------------------------------------------------------------------------
   Enhanced Divi 5 CSS parallax layer
   -------------------------------------------------------------------------- */

.et-pb-parallax-background.flow-depth-parallax-layer {

    /*
     * Divi's CSS method normally achieves parallax by fixing the background
     * to the viewport.
     *
     * We return it to normal scrolling and then move Divi's existing layer
     * with transform instead.
     */
    background-attachment: scroll !important;

    /*
     * Give the background vertical overscan so translating it cannot expose
     * an empty edge inside Divi's parallax wrapper.
     */
    top: -18% !important;
    bottom: -18% !important;
    height: auto !important;

    /*
     * JavaScript modifies only --flow-parallax-y.
     */
    transform: translate3d(
        0,
        var(--flow-parallax-y, 0px),
        0
    ) !important;

    transform-origin: center center;
    backface-visibility: hidden;

    /*
     * Don't permanently promote every parallax image to a compositor layer.
     */
    will-change: auto;
}


/*
 * Promote only backgrounds near the viewport.
 */
.et-pb-parallax-background.flow-depth-parallax-layer.flow-depth-parallax-visible {
    will-change: transform;
}


/* --------------------------------------------------------------------------
   Optional per-element presets
   --------------------------------------------------------------------------

   Add one of these classes to the Divi section/row/column/module.

   Normally you don't need either.
   -------------------------------------------------------------------------- */

.flow-parallax-subtle {
    --flow-parallax-depth: 0.10;
    --flow-parallax-max-travel: 70;
}

.flow-parallax-deep {
    --flow-parallax-depth: 0.22;
    --flow-parallax-max-travel: 140;
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .et-pb-parallax-background.flow-depth-parallax-layer {
        transform: none !important;
        will-change: auto !important;
    }

}

/* Repurpose Divi's X/Twitter footer icon as YouTube */
#footer-bottom .et-social-twitter a.icon::before {
    content: "\e0a3" !important;
    font-family: "ETmodules" !important;
}


#logo,
.logo_container a {
  cursor: pointer;
}


/* Relevanssi contextual search-term highlight */
.relevanssi-highlight {
    font-weight: 700;
    color: inherit;
    background: rgba(141, 16, 255, 0.16);
    border-radius: 3px;
    padding: 0 2px;
}







/* ==========================================================
   FLOW LIFE GLOBAL — BUTTON SYSTEM
   ========================================================== */

:root{
  --fl-violet:#8d10ff;
  --fl-violet-bright:#a943ff;
  --fl-violet-deep:#6e00d1;
  --fl-lavender:#d9c2ff;

  --fl-ink:#110d19;
  --fl-ink-soft:#1d1727;

  --fl-btn-radius:100px;

  --fl-btn-font:'Source Sans Pro',sans-serif;
}


/* ==========================================================
   BASE BUTTON
   ========================================================== */

.fl-btn,
a.fl-btn,
button.fl-btn,
input.fl-btn,
.et_pb_button.fl-btn{
  position:relative;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-height:52px;

  padding:14px 29px!important;

  font-family:var(--fl-btn-font)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.2!important;

  letter-spacing:.015em!important;

  text-align:center!important;
  text-decoration:none!important;

  border-radius:var(--fl-btn-radius)!important;

  cursor:pointer!important;

  -webkit-appearance:none;
  appearance:none;

  transform:translateY(0);

  transition:
    transform .18s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    filter .2s ease!important;
}


/* Disable Divi's automatic button arrow */

.et_pb_button.fl-btn:after{
  display:none!important;
}


/* ---------- Shared interaction ---------- */

.fl-btn:hover,
a.fl-btn:hover,
button.fl-btn:hover,
.et_pb_button.fl-btn:hover{
  transform:translateY(-2px);
}

.fl-btn:active,
a.fl-btn:active,
button.fl-btn:active,
.et_pb_button.fl-btn:active{
  transform:translateY(0);
}

.fl-btn:focus-visible,
a.fl-btn:focus-visible,
button.fl-btn:focus-visible,
.et_pb_button.fl-btn:focus-visible{
  outline:none!important;

  box-shadow:
    0 0 0 3px rgba(217,194,255,.30),
    0 0 0 6px rgba(141,16,255,.16)!important;
}

.fl-btn:disabled,
.fl-btn[aria-disabled="true"]{
  opacity:.48!important;

  cursor:not-allowed!important;
  pointer-events:none!important;

  transform:none!important;
}


/* ==========================================================
   1. PRIMARY
   Main CTA
   ========================================================== */

.fl-btn--primary,
a.fl-btn--primary,
button.fl-btn--primary,
.et_pb_button.fl-btn--primary{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #7610df 0%,
      var(--fl-violet) 48%,
      var(--fl-violet-bright) 100%
    )!important;

  border:1px solid rgba(224,199,255,.48)!important;

  box-shadow:
    0 11px 25px -11px rgba(106,0,204,.78),
    0 2px 8px rgba(34,8,57,.20),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(53,0,93,.22)!important;

  text-shadow:
    0 1px 1px rgba(39,0,65,.22);
}


/* Primary hover */

.fl-btn--primary:hover,
a.fl-btn--primary:hover,
button.fl-btn--primary:hover,
.et_pb_button.fl-btn--primary:hover{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #8419ed 0%,
      #9a27ff 50%,
      #b458ff 100%
    )!important;

  border-color:rgba(235,217,255,.62)!important;

  box-shadow:
    0 15px 31px -11px rgba(106,0,204,.88),
    0 4px 10px rgba(34,8,57,.24),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(53,0,93,.18)!important;
}


/* Primary pressed */

.fl-btn--primary:active{
  background:
    linear-gradient(
      135deg,
      #6900ca,
      #8410ed
    )!important;

  box-shadow:
    0 5px 13px -6px rgba(92,0,177,.7),
    inset 0 2px 4px rgba(43,0,70,.22)!important;
}


/* ==========================================================
   2. SECONDARY
   Supporting CTA / alternate path
   ========================================================== */

.fl-btn--secondary,
a.fl-btn--secondary,
button.fl-btn--secondary,
.et_pb_button.fl-btn--secondary{
  color:#f4ebff!important;

  background:
    linear-gradient(
      180deg,
      rgba(36,28,49,.91),
      rgba(22,17,31,.94)
    )!important;

  border:1px solid rgba(217,194,255,.38)!important;

  box-shadow:
    0 8px 22px -13px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.12)!important;

  text-shadow:none!important;
}


/* Secondary hover */

.fl-btn--secondary:hover,
a.fl-btn--secondary:hover,
button.fl-btn--secondary:hover,
.et_pb_button.fl-btn--secondary:hover{
  color:#fff!important;

  background:
    linear-gradient(
      180deg,
      rgba(57,38,79,.95),
      rgba(30,21,43,.98)
    )!important;

  border-color:rgba(217,194,255,.62)!important;

  box-shadow:
    0 12px 27px -13px rgba(0,0,0,.7),
    0 0 18px rgba(141,16,255,.10),
    inset 0 1px 0 rgba(255,255,255,.17)!important;
}


/* Secondary pressed */

.fl-btn--secondary:active{
  background:#191222!important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28)!important;
}


/* ==========================================================
   3. UTILITY
   Back / Previous / Cancel / secondary controls

   Subtle graphite / metallic violet treatment.
   ========================================================== */

.fl-btn--utility,
a.fl-btn--utility,
button.fl-btn--utility,
.et_pb_button.fl-btn--utility{
  min-height:48px;

  padding:12px 24px!important;

  color:rgba(255,255,255,.88)!important;

  background:
    linear-gradient(
      180deg,
      #423b4a 0%,
      #2e2935 8%,
      #211d27 52%,
      #17141d 100%
    )!important;

  border:1px solid rgba(221,211,231,.30)!important;

  box-shadow:
    0 8px 18px -11px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;

  text-shadow:
    0 1px 1px rgba(0,0,0,.55)!important;
}


/* Metallic rim */

.fl-btn--utility:hover,
a.fl-btn--utility:hover,
button.fl-btn--utility:hover,
.et_pb_button.fl-btn--utility:hover{
  color:#fff!important;

  background:
    linear-gradient(
      180deg,
      #544a60 0%,
      #383041 10%,
      #292230 54%,
      #1b1720 100%
    )!important;

  border-color:rgba(217,194,255,.48)!important;

  box-shadow:
    0 11px 22px -11px rgba(0,0,0,.82),
    0 0 16px rgba(141,16,255,.09),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;
}


/* Utility pressed */

.fl-btn--utility:active{
  background:
    linear-gradient(
      180deg,
      #1a161f,
      #2a2430
    )!important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55)!important;
}


/* ==========================================================
   OPTIONAL FULL-WIDTH MODIFIER
   ========================================================== */

.fl-btn--full{
  width:100%!important;
}


/* ==========================================================
   BUTTON GROUP
   ========================================================== */

.fl-btn-group{
  display:flex;

  flex-wrap:wrap;
  align-items:center;

  gap:13px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767px){

  .fl-btn,
  a.fl-btn,
  button.fl-btn,
  .et_pb_button.fl-btn{
    min-height:50px;

    padding:13px 24px!important;

    font-size:15px!important;
  }

}

/* ==========================================================
   FLOW LIFE GLOBAL — FORMINATOR BUTTON BRIDGE v2

   Opt-in usage:
     Add "fl-form-buttons" to any Divi wrapper containing a
     Forminator form that should use the global Flow Life
     button system.

   Forms without .fl-form-buttons remain completely untouched.

   IMPORTANT:
   Forminator remains responsible for showing/hiding buttons.
   We deliberately DO NOT set display on submit/next/back
   controls, because doing so can expose controls Forminator
   intended to keep hidden.
   ========================================================== */


/* ==========================================================
   SHARED FORMINATOR BUTTON FOUNDATION
   ========================================================== */

.fl-form-buttons .forminator-button-submit,
.fl-form-buttons .forminator-button-next,
.fl-form-buttons .forminator-button-back,
.fl-form-buttons .forminator-button-upload{
  position:relative!important;

  min-height:52px!important;

  padding:14px 29px!important;

  font-family:var(--fl-btn-font)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.2!important;

  letter-spacing:.015em!important;

  text-align:center!important;
  text-decoration:none!important;

  border-radius:var(--fl-btn-radius)!important;

  cursor:pointer!important;

  -webkit-appearance:none!important;
  appearance:none!important;

  transform:translateY(0);

  transition:
    transform .18s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    filter .2s ease!important;
}


/* ---------- Hover movement ---------- */

.fl-form-buttons .forminator-button-submit:hover,
.fl-form-buttons .forminator-button-next:hover,
.fl-form-buttons .forminator-button-back:hover,
.fl-form-buttons .forminator-button-upload:hover{
  transform:translateY(-2px);
}


/* ---------- Pressed ---------- */

.fl-form-buttons .forminator-button-submit:active,
.fl-form-buttons .forminator-button-next:active,
.fl-form-buttons .forminator-button-back:active,
.fl-form-buttons .forminator-button-upload:active{
  transform:translateY(0);
}


/* ---------- Keyboard focus ---------- */

.fl-form-buttons .forminator-button-submit:focus-visible,
.fl-form-buttons .forminator-button-next:focus-visible,
.fl-form-buttons .forminator-button-back:focus-visible,
.fl-form-buttons .forminator-button-upload:focus-visible{
  outline:none!important;

  box-shadow:
    0 0 0 3px rgba(217,194,255,.30),
    0 0 0 6px rgba(141,16,255,.16)!important;
}


/* ---------- Disabled ---------- */

.fl-form-buttons .forminator-button-submit:disabled,
.fl-form-buttons .forminator-button-next:disabled,
.fl-form-buttons .forminator-button-back:disabled,
.fl-form-buttons .forminator-button-upload:disabled{
  opacity:.48!important;

  cursor:not-allowed!important;
  pointer-events:none!important;

  transform:none!important;
}


/* ==========================================================
   PRIMARY
   Submit / Next
   ========================================================== */

.fl-form-buttons .forminator-button-submit,
.fl-form-buttons .forminator-button-next{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #7610df 0%,
      var(--fl-violet) 48%,
      var(--fl-violet-bright) 100%
    )!important;

  border:
    1px solid rgba(224,199,255,.48)!important;

  box-shadow:
    0 11px 25px -11px rgba(106,0,204,.78),
    0 2px 8px rgba(34,8,57,.20),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(53,0,93,.22)!important;

  text-shadow:
    0 1px 1px rgba(39,0,65,.22)!important;
}


.fl-form-buttons .forminator-button-submit:hover,
.fl-form-buttons .forminator-button-next:hover{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #8419ed 0%,
      #9a27ff 50%,
      #b458ff 100%
    )!important;

  border-color:
    rgba(235,217,255,.62)!important;

  box-shadow:
    0 15px 31px -11px rgba(106,0,204,.88),
    0 4px 10px rgba(34,8,57,.24),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(53,0,93,.18)!important;
}


.fl-form-buttons .forminator-button-submit:active,
.fl-form-buttons .forminator-button-next:active{
  background:
    linear-gradient(
      135deg,
      #6900ca,
      #8410ed
    )!important;

  box-shadow:
    0 5px 13px -6px rgba(92,0,177,.70),
    inset 0 2px 4px rgba(43,0,70,.22)!important;
}


/* ==========================================================
   UTILITY
   Back / Previous
   Graphite-metallic treatment
   ========================================================== */

.fl-form-buttons .forminator-button-back{
  min-height:48px!important;

  padding:12px 24px!important;

  color:rgba(255,255,255,.88)!important;

  background:
    linear-gradient(
      180deg,
      #423b4a 0%,
      #2e2935 8%,
      #211d27 52%,
      #17141d 100%
    )!important;

  border:
    1px solid rgba(221,211,231,.30)!important;

  box-shadow:
    0 8px 18px -11px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;

  text-shadow:
    0 1px 1px rgba(0,0,0,.55)!important;
}


.fl-form-buttons .forminator-button-back:hover{
  color:#fff!important;

  background:
    linear-gradient(
      180deg,
      #544a60 0%,
      #383041 10%,
      #292230 54%,
      #1b1720 100%
    )!important;

  border-color:
    rgba(217,194,255,.48)!important;

  box-shadow:
    0 11px 22px -11px rgba(0,0,0,.82),
    0 0 16px rgba(141,16,255,.09),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;
}


.fl-form-buttons .forminator-button-back:active{
  background:
    linear-gradient(
      180deg,
      #1a161f,
      #2a2430
    )!important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55)!important;
}


/* ==========================================================
   SECONDARY
   Upload / supporting form actions
   ========================================================== */

.fl-form-buttons .forminator-button-upload{
  color:#f4ebff!important;

  background:
    linear-gradient(
      180deg,
      rgba(36,28,49,.91),
      rgba(22,17,31,.94)
    )!important;

  border:
    1px solid rgba(217,194,255,.38)!important;

  box-shadow:
    0 8px 22px -13px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.12)!important;

  text-shadow:none!important;
}


.fl-form-buttons .forminator-button-upload:hover{
  color:#fff!important;

  background:
    linear-gradient(
      180deg,
      rgba(57,38,79,.95),
      rgba(30,21,43,.98)
    )!important;

  border-color:
    rgba(217,194,255,.62)!important;

  box-shadow:
    0 12px 27px -13px rgba(0,0,0,.70),
    0 0 18px rgba(141,16,255,.10),
    inset 0 1px 0 rgba(255,255,255,.17)!important;
}


.fl-form-buttons .forminator-button-upload:active{
  background:#191222!important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28)!important;
}


/* ==========================================================
   PAGINATED FORM FOOTER

   Back stays compact.
   Next / Submit receives the remaining space.

   This affects layout only, not Forminator visibility.
   ========================================================== */

.fl-form-buttons .forminator-pagination-footer{
  display:flex!important;

  align-items:center!important;
  flex-wrap:wrap!important;

  gap:12px!important;
}


/* Back */

.fl-form-buttons
.forminator-pagination-footer
.forminator-button-back{
  flex:0 0 auto!important;

  width:auto!important;

  margin:0!important;
}


/* Next / final Submit */

.fl-form-buttons
.forminator-pagination-footer
.forminator-button-next,

.fl-form-buttons
.forminator-pagination-footer
.forminator-button-submit{
  flex:1 1 220px!important;

  width:auto!important;

  margin:0!important;
}


/* ==========================================================
   STANDALONE SUBMIT

   A normal non-paginated form submit can fill its row.

   IMPORTANT:
   Width does not change visibility, so Forminator can still
   hide conditional/alternate submit controls normally.
   ========================================================== */

.fl-form-buttons
.forminator-row-last
.forminator-button-submit{
  width:100%!important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767px){

  .fl-form-buttons
  .forminator-pagination-footer{
    gap:10px!important;
  }


  .fl-form-buttons
  .forminator-pagination-footer
  .forminator-button-back{
    flex:0 0 auto!important;
  }


  .fl-form-buttons
  .forminator-pagination-footer
  .forminator-button-next,

  .fl-form-buttons
  .forminator-pagination-footer
  .forminator-button-submit{
    flex:1 1 180px!important;
  }

}



/*
 * Divi / WordPress admin toolbar spacing fix.
 *
 * When the WP admin bar is present, Divi is leaving an additional
 * admin-bar-height gap between the site header and page content.
 * Pull the main content back up only for logged-in users with the
 * toolbar displayed.
 */
@media (min-width: 783px) {
    body.admin-bar #et-main-area {
        margin-top: -32px !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar #et-main-area {
        margin-top: -46px !important;
    }
}