/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  /* Each web font is followed by its metric-matched local fallback (FontFallbacks; the theme emits the faces with the
     font request), so the page does not move when the font arrives. Default.razor loads only the families these lead
     with, or the site's own choices (GoogleFontsRequest.DefaultStacks mirrors these three lines). */
  --default-font: "Open Sans", "Open Sans VC Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Jost", "Jost VC Fallback", sans-serif;
  --nav-font: "Poppins", "Poppins VC Fallback", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Clean white — professional racing facility website */
  --default-color: #374151; /* Blue-gray — racing suit fabric tone, excellent readability */
  --heading-color: #1e3a5f; /* Deep racing navy — Le Mans / BMW Motorsport inspired */
  --accent-color: #2563eb; /* Electric blue — vivid and energetic, like sim center LED accents */
  --surface-color: #f1f5f9; /* Cool aluminum — polished metal card backgrounds */
  --contrast-color: #ffffff; /* White — ensures readability against accent and heading color backgrounds */
  /* Text on an accent FILL (primary buttons, badges, the active pill, the accent band). Declared here,
     on :root, so it keeps its value inside a .dark-background section, which resets --contrast-color
     to white for text on the dark band: a yellow accent button on a dark page used to inherit that
     white (1.4:1). The theme replaces this with a value computed from the accent's luminance whenever
     a site or page sets its colors (AccentContrast), so a pale accent gets dark text. */
  --accent-contrast-color: var(--contrast-color);
  --header-bg: #1e3a5f; /* Header band. The footer follows it, so a preset moves both together. */

  /* The footer sits on the header colour by default rather than the page background:
     these are the two dark bands that frame the page, and every style preset ships a
     dark header. Text therefore defaults to the nav colour, the one colour chosen to read
     on that band, not --default-color, or a preset switch would leave dark text on a dark
     band. Not --contrast-color either: that is the text ON THE ACCENT, and Dark Elegance
     and Tech Forward ship a dark one for their pale accents, which put #111827 on a black
     footer (1.1:1, 2026-10-23). An operator who sets an explicit Footer colour in Theme
     Settings overrides both. */
  --footer-bg: var(--header-bg);
  --footer-text: var(--nav-color, var(--contrast-color));
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* White — legible on the deep navy header */
  --nav-hover-color: #60a5fa; /* Sky blue — lighter highlight against dark header */
  --nav-mobile-background-color: #ffffff; /* White — clean mobile nav for light theme */
  --nav-dropdown-background-color: #ffffff; /* White — clean dropdown background */
  --nav-dropdown-color: #374151; /* Blue-gray — standard text in dropdowns */
  --nav-dropdown-hover-color: #2563eb; /* Electric blue — accent color on hover */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f1f5f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1e3a5f;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #2b4c7e;
  --contrast-color: #ffffff;
}

/* Brand accent section. Inverts text/heading onto the accent so a
   row preset of "accent" produces a fully-branded color band that
   nested elements (Page Builder or any module) inherit cleanly. */
.accent-background {
  --background-color: var(--accent-color);
  --default-color: var(--accent-contrast-color);
  --heading-color: var(--accent-contrast-color);
  --surface-color: color-mix(in srgb, var(--accent-color), black 12%);
  background-color: var(--accent-color);
  color: var(--accent-contrast-color);
}
.accent-background a:not(.btn) { color: var(--accent-contrast-color); text-decoration: underline; }
.accent-background h1, .accent-background h2, .accent-background h3,
.accent-background h4, .accent-background h5, .accent-background h6 { color: var(--accent-contrast-color); }

/* Page Builder section wrapper — neutral by default; presets above
   layer on color/dark-mode behavior. Adds vertical breathing room
   so any module dropped into a Page Builder section reads cleanly. */
.pb-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--background-color);
  color: var(--default-color);
}
.pb-section + .pb-section { padding-top: 0; }

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* Shape */
:root {
  --border-radius: 4px;
}

/*--------------------------------------------------------------
# Bootstrap Primary Palette Override
# Re-routes Bootstrap's built-in --bs-primary (used by core Oqtane controls
# and any module that renders btn-primary, text-primary, bg-primary, etc.)
# onto the theme's --accent-color so everything follows site colors.
--------------------------------------------------------------*/
:root {
  --bs-primary: var(--accent-color);
  --bs-link-color: var(--accent-color);
  --bs-link-hover-color: color-mix(in srgb, var(--accent-color), black 15%);
}

/* A filled button's face is --accent-fill, the accent a shade deeper (or lighter) where its words would read below 4.5:1 on
   the accent itself (PageColorScheme.AccentFill, wave 11); the accent when unset. Every filled button below follows it. */
.btn-primary {
  --bs-btn-color: var(--accent-contrast-color);
  --bs-btn-bg: var(--accent-fill, var(--accent-color));
  --bs-btn-border-color: var(--accent-fill, var(--accent-color));
  --bs-btn-hover-color: var(--accent-contrast-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-fill, var(--accent-color)), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-fill, var(--accent-color)), black 12%);
  --bs-btn-focus-shadow-rgb: 0,0,0;
  --bs-btn-active-color: var(--accent-contrast-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent-fill, var(--accent-color)), black 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent-fill, var(--accent-color)), black 20%);
  --bs-btn-disabled-color: var(--accent-contrast-color);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--accent-color), white 35%);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--accent-color), white 35%);
}

.btn-outline-primary {
  /* Words and edge in the accent shade that reads where the button sits (--accent-ink, wave 8); the accent when unset. */
  --bs-btn-color: var(--accent-ink, var(--accent-color));
  --bs-btn-border-color: var(--accent-ink, var(--accent-color));
  --bs-btn-hover-color: var(--accent-contrast-color);
  --bs-btn-hover-bg: var(--accent-fill, var(--accent-color));
  --bs-btn-hover-border-color: var(--accent-fill, var(--accent-color));
  --bs-btn-active-color: var(--accent-contrast-color);
  --bs-btn-active-bg: var(--accent-fill, var(--accent-color));
  --bs-btn-active-border-color: var(--accent-fill, var(--accent-color));
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
}

.text-primary { color: var(--accent-color) !important; }
.bg-primary   { background-color: var(--accent-color) !important; }
.border-primary { border-color: var(--accent-color) !important; }
.link-primary { color: var(--accent-color) !important; }
.link-primary:hover, .link-primary:focus { color: color-mix(in srgb, var(--accent-color), black 15%) !important; }

/*--------------------------------------------------------------
# Bootstrap Bridge for Third-Party Oqtane Modules
# Many Oqtane modules (core admin dialogs, ToSIC, BlogModule,
# Modules.Hosting, etc.) render Bootstrap components that read
# additional --bs-* tokens we hadn't overridden. Bridging these
# here ensures every Oqtane module on the site automatically
# adopts the VenueChief accent without per-module CSS.
#
# Strategy:
#   * Re-route color tokens (and their *-rgb companions) onto
#     the theme accent / heading / surface palette.
#   * Theme common interactive surfaces (alerts, badges, nav,
#     pagination, list-group, progress, form focus, focus rings).
#   * Theme Oqtane framework chrome classes (.app-*) that ship
#     with the framework's app.css.
# Anything not listed here cleanly inherits Bootstrap defaults.
--------------------------------------------------------------*/
:root {
  /* Accent/secondary RGB triplets used by rgba() in Bootstrap. */
  --bs-primary-rgb: 37, 99, 235;            /* matches #2563eb accent */
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color-rgb: 31, 84, 200;
  --bs-focus-ring-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
  --bs-focus-ring-rgb: 37, 99, 235;

  /* Form controls — keeps every <input>/<select>/<textarea> across
     all Oqtane modules using the theme accent for focus rings. */
  --bs-form-control-focus-border-color: var(--accent-color);
  --bs-form-select-focus-border-color: var(--accent-color);

  /* Headings / body — many module pages set their own h2/h3 inline,
     but those that respect Bootstrap variables now follow the theme. */
  --bs-heading-color: var(--heading-color);
  --bs-body-font-family: var(--default-font);
  --bs-heading-font-family: var(--heading-font);
  --bs-border-radius: var(--border-radius);
}

/* Alerts (success/info/warning/danger keep semantic colors, but
   alert-primary follows brand). */
.alert-primary {
  --bs-alert-color: color-mix(in srgb, var(--accent-color), black 30%);
  --bs-alert-bg: color-mix(in srgb, var(--accent-color), white 80%);
  --bs-alert-border-color: color-mix(in srgb, var(--accent-color), white 60%);
  --bs-alert-link-color: color-mix(in srgb, var(--accent-color), black 35%);
}

/* Badges */
.badge.bg-primary, .badge.text-bg-primary {
  background-color: var(--accent-color) !important;
  color: var(--accent-contrast-color) !important;
}

/* Progress bars */
.progress-bar { background-color: var(--accent-color); }

/* List groups */
.list-group-item.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast-color);
}
.list-group-item-primary {
  background-color: color-mix(in srgb, var(--accent-color), white 80%);
  color: color-mix(in srgb, var(--accent-color), black 30%);
}

/* Nav pills / tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--accent-color);
  color: var(--accent-contrast-color);
}
.nav-tabs .nav-link.active {
  border-bottom-color: var(--accent-color);
}
.nav-link {
  color: var(--accent-color);
}
.nav-link:hover, .nav-link:focus {
  color: color-mix(in srgb, var(--accent-color), black 15%);
}

/* Pagination */
.page-link { color: var(--accent-color); }
.page-link:hover { color: color-mix(in srgb, var(--accent-color), black 15%); }
.page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast-color);
}

/* Form control focus — site-wide (admin pages, module settings, every form). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.form-range::-webkit-slider-thumb { background-color: var(--accent-color); }
.form-range::-moz-range-thumb     { background-color: var(--accent-color); }

/* Bootstrap dropdown active item (used by every module that renders a
   <select>-style menu, ControlPanel sub-menus, etc.). */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent-color);
  color: var(--accent-contrast-color);
}

/* Spinners follow brand. */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--accent-color) !important; }

/* Generic Bootstrap focus rings (Bootstrap 5.3+ utility). */
.focus-ring,
:focus-visible.focus-ring {
  --bs-focus-ring-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/*--------------------------------------------------------------
# Oqtane Framework Chrome (.app-*)
# These classes ship in oqtane.framework's app.css and appear on
# every site (admin dialogs, module action menus, search box,
# pane-edit borders, progress indicator, etc.). Re-color them so
# admin/edit experiences match the theme.
--------------------------------------------------------------*/
.app-pane-admin-border { border-color: var(--accent-color) !important; }
.app-pane-admin-title  { background-color: var(--accent-color); color: var(--accent-contrast-color); }
.app-progress-indicator { color: var(--accent-color); }
.app-rule { border-color: color-mix(in srgb, var(--accent-color) 40%, transparent); }
.app-link-unstyled,
.app-link-unstyled:visited,
.app-link-unstyled:hover,
.app-link-unstyled:active,
.app-link-unstyled:focus { color: inherit; }
.app-search-noinput button       { color: var(--nav-color, var(--accent-color)); }
.app-search-noinput button:hover { color: var(--nav-hover-color, var(--accent-color)); }
.app-moduleactions .dropdown-menu .dropdown-item:active,
.app-moduleactions .dropdown-menu .dropdown-item.active { background-color: var(--accent-color); color: var(--accent-contrast-color); }
.app-admin-modal .modal-header { color: var(--heading-color); }

/* Center & constrain framework admin auth forms (Login, Register, Forgot Password)
   when rendered as a page module inside the theme's main region. The framework
   markup is full-width by default, which looks stretched on wide layouts. */
.main .Oqtane-Modules-Admin-Login,
.main .Oqtane-Modules-Admin-UserProfile,
.main .Oqtane-Modules-Admin-Register,
.main .Oqtane-Modules-Admin-Reset {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.main .Oqtane-Modules-Admin-UserProfile {
  /* Profile editor has more fields, give it a bit more room */
  max-width: 720px;
}

/* Theme dropdown trigger used in header (person icon) */
.user-menu-toggle {
  background: transparent;
  border: 0;
  color: var(--nav-color, var(--accent-color));
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color 0.2s ease;
}
.user-menu-toggle:hover,
.user-menu-toggle:focus {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  color: var(--nav-hover-color, var(--accent-color));
}
.user-menu .dropdown-menu {
  min-width: 12rem;
}
/* Open the user menu on hover (matches the navmenu page-dropdown UX).
   We bridge the gap between the toggle and the menu so moving the
   pointer down doesn't close it. */
.user-menu:hover > .dropdown-menu,
.user-menu:focus-within > .dropdown-menu {
  display: block;
}
.user-menu .dropdown-menu {
  margin-top: 0;
}
.user-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5rem;
  bottom: -0.5rem;
  pointer-events: auto;
}
.user-menu {
  position: relative;
}
.user-menu .dropdown-header {
  /* Render the user's name as a distinct header strip that is always
     readable against whatever menu surface the theme produces. We use
     Bootstrap's own dropdown tokens so this automatically tracks the
     theme's light/dark mode and any custom menu colors. */
  font-weight: 600;
  color: var(--bs-dropdown-link-color, var(--bs-body-color, #212529));
  background-color: color-mix(in srgb, var(--bs-dropdown-link-color, var(--bs-body-color, #212529)) 8%, var(--bs-dropdown-bg, #fff));
  border-bottom: 1px solid var(--bs-dropdown-divider-bg, rgba(0, 0, 0, 0.15));
  margin-bottom: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
/* Make the framework's Login/UserProfile controls look like real dropdown items
   when we pass them CssClass="dropdown-item". The framework's <Login> renders
   inside a <form> — flatten that so the button stretches the full width. */
.user-menu .app-form-inline,
.user-menu form.app-login {
  display: block;
  margin: 0;
  padding: 0;
}
.user-menu .app-form-inline .dropdown-item,
.user-menu form.app-login .dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
}

/* Header controls group: unify Search, UserMenu and ControlPanel triggers
   into matching circular icon buttons. Targets direct children so the
   appearance is consistent regardless of which control rendered them.
   The search button without a text box (.btn-search inside the Search
   control's form) is one of them too (wave 9): sized by Bootstrap's .btn
   padding and its icon glyph, it grew from 36.5 to 42 px when the icon font
   arrived and moved the menu and the button beside it. */
.controls-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.controls-group > a,
.controls-group > button,
.controls-group > .btn,
.controls-group .app-search > button,
.controls-group .app-search > a,
.controls-group .app-controlpanel > a,
.controls-group .app-controlpanel > button,
.controls-group .btn-search {
  background: transparent;
  border: 0;
  color: var(--nav-color, var(--accent-color));
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.controls-group > a:hover,
.controls-group > a:focus,
.controls-group > button:hover,
.controls-group > button:focus,
.controls-group > .btn:hover,
.controls-group > .btn:focus,
.controls-group .app-search > button:hover,
.controls-group .app-search > button:focus,
.controls-group .app-search > a:hover,
.controls-group .app-search > a:focus,
.controls-group .app-controlpanel > a:hover,
.controls-group .app-controlpanel > a:focus,
.controls-group .app-controlpanel > button:hover,
.controls-group .app-controlpanel > button:focus,
.controls-group .btn-search:hover,
.controls-group .btn-search:focus {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  color: var(--nav-hover-color, var(--accent-color));
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
--background-color: var(--header-bg);
--heading-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

/* The site name in the masthead.
   It was an h1 and is now a span — branding is not the heading of the page — so this has to match
   on the class. The h1 selector stays because the element is what older stored header markup and
   the theme settings previews use, and dropping it would leave those unstyled.

   The colour follows the HEADER, not the page. It used to be --heading-color, which is chosen to
   read against the page background and says nothing about the header band: a site whose header is
   black and whose headings are black rendered its own name invisible. --nav-color is the one
   colour already guaranteed legible on this band — it is what the menu beside it uses — and the
   heading colour stays as the fallback for a theme that sets no nav colour. */
.header .logo h1,
.header .logo .sitename {
  font-size: 30px;
  margin: 0;
  font-weight: 500;
  color: var(--nav-color, var(--heading-color));
  letter-spacing: 2px;
  text-transform: uppercase;
}

.header .logo.logo-padded {
  padding: 4px 0;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--accent-contrast-color);
  background: var(--accent-fill, var(--accent-color));
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--accent-contrast-color);
  background: color-mix(in srgb, var(--accent-fill, var(--accent-color)), transparent 15%);
}

/* Below the desktop menu (1199.98px, not 1200px: at a 1200px window both this and the desktop menu's min-width:1200px
   applied, and the one-line desktop header came out in the phone order, wave 6). */
@media (max-width: 1199.98px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

/* A phone. The search, account and control-panel buttons, the logo, the call-to-action and the menu
   button needed about 450px between them, so on a 375px phone the header ran off the right edge,
   every page became wider than the screen, the browser zoomed the whole site out to fit, and
   anything pinned to the bottom of the window (Book Now's Continue bar) sat below what the visitor
   could see (2026-10-08). Here the logo gives way, and the rest keeps its size. */
@media (max-width: 575.98px) {
  .header > .container-fluid {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header .controls-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0;
    flex-shrink: 0;
  }

  .header .logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .header .logo img {
    max-width: 100%;
    height: auto;
    margin-right: 0;
  }

  .header .logo h1,
  .header .logo .sitename {
    font-size: 20px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .header .mobile-nav-toggle {
    margin-right: 0;
  }
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(30, 58, 95, 0);
  --heading-color: #ffffff;
  --nav-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: rgba(30, 58, 95, 0.95);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;

    /*
      Wrapping, because the number of top-level items is not this theme's to decide. A site
      import that brought a page across for every page of the source produced twenty-eight of
      them, and a flex row that cannot wrap laid the bar out 3640px wide inside a 1642px window
      — which pushed the whole site into a horizontal scrollbar, on every page, including ones
      with no imported content on them at all.

      The importer no longer does that (it caps what it promotes to the top level), but a menu
      that breaks at some particular number of items is a trap waiting for the next person who
      adds one by hand.
    */
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: var(--border-radius);
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .navmenu .megamenu {
    position: static;
  }

  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .megamenu ul li {
    flex: 1;
  }

  .navmenu .megamenu ul li a,
  .navmenu .megamenu ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
  }

  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .megamenu:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dd-box-shadow {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
}

/* The menu button is a real button (NavMenu.razor, wave 14), so a keyboard
   and a screen reader can use it: drawn exactly as the icon it replaced, no
   button face, border or padding. Its size, color and place stay with the
   rules below. */
button.mobile-nav-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: calc(var(--border-radius) * 1.5);
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--accent-contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--accent-contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--footer-text, var(--default-color));
  background-color: var(--footer-bg, var(--background-color));

  /* Where the page ends. The footer follows the header band, and two presets ship a
     header within a few percent of their page background (Dark Elegance #1a1a2e on
     #111827, Tech Forward #020617 on #0f172a) — on those the footer dissolves into the
     content above it. The accent is the one colour every preset guarantees is distinct
     from both, so the rule reads as deliberate rather than as a seam. Operators had
     already been adding this by hand: LOK's bespoke footer opens with a 4px red rule. */
  border-top: 3px solid var(--footer-divider, var(--accent-color));
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top,
.footer .footer-bottom {
  background-color: var(--footer-bg, var(--background-color));
  color: var(--footer-text, var(--default-color));
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: var(--footer-link, color-mix(in srgb, var(--default-color), transparent 20%));
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--footer-link-hover, var(--accent-color));
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  /*
    Above the page and the sticky header (997), below anything that opens over the page.

    It was 99999, which put it on top of every dialog, where it covered the footer buttons: a
    dialog's Close at bottom right showed as "Clos". Syncfusion gives a dialog or popup a z-index
    of 1000 or more, Bootstrap's modal and its backdrop sit at 1050-1055, and Oqtane's own dialogs
    at 9999. The admin shell's mobile nav backdrop is 999, so 998 is the highest value that stays
    under all of them.
  */
  z-index: 998;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--accent-contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--accent-contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* Page title overlay when hero is active (breadcrumbs shown over hero) */
.page-title-over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: transparent;
  padding: 100px 0 10px 0;
}

.page-title-over-hero .breadcrumbs ol {
  color: rgba(255, 255, 255, 0.85);
}

.page-title-over-hero .breadcrumbs ol a {
  color: rgba(255, 255, 255, 0.75);
}

.page-title-over-hero .breadcrumbs ol a:hover {
  color: #fff;
}

.page-title-over-hero .breadcrumbs ol li+li::before {
  color: rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/* A phone's screen is short: 60px of empty band above and below every section pushed the content (a
   booking's first question, a form) a good way down before anything started. */
@media (max-width: 575.98px) {

  section,
  .section {
    padding: 32px 0;
  }
}

/*--------------------------------------------------------------
# Page Layouts
--------------------------------------------------------------*/

/* Page width wrappers inside .main */
.main > .container,
.main > .container-fluid {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Cap content width on ultra-wide screens for readability */
.main > .row,
.main > .pane-layout-row,
.main > section,
.main > .section {
  max-width: 2200px;
  margin-left: auto;
  margin-right: auto;
}

.main > .container aside,
.main > .container-fluid aside {
  margin-top: 30px;
}

@media (min-width: 992px) {

  .main > .container aside,
  .main > .container-fluid aside {
    margin-top: 0;
  }
}

.main > .container aside section,
.main > .container-fluid aside section {
  padding: 25px 0;
}

/* --- Page Width modes (site/page "Page Width" setting) ---
   Content inside .main is wrapped in a Bootstrap .container (the per-module
   "standard" container layout and the page title), which has a fixed
   max-width. In Fluid/Full modes the page-level wrapper is widened/removed,
   but those inner containers would still pin content to a narrow centered
   column, making the Fluid/Full Width options appear to do nothing. Expand
   them to match the selected page width. Scoped to .main so the header and
   footer keep their own width. */
.pb-pagewidth-fluid .main .container,
.pb-pagewidth-full .main .container {
  max-width: none;
  width: 100%;
}

/* Full Width is edge-to-edge: lift the ultra-wide readability cap so
   sections and pane rows span the full viewport. */
.pb-pagewidth-full .main > .container,
.pb-pagewidth-full .main > .container-fluid,
.pb-pagewidth-full .main > .row,
.pb-pagewidth-full .main > .pane-layout-row,
.pb-pagewidth-full .main > section,
.pb-pagewidth-full .main > .section {
  max-width: none;
}

/* Pane layout rows */
.pane-layout-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.pane-layout-row>[class*="col-"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* Full-width panes (top/bottom) - no container, stretch edge to edge */
.pane-full-width {
  width: 100%;
}

/* Sidebar pane styling */
.pane-sidebar section {
  padding: 25px 0;
}

@media (min-width: 992px) {
  .pane-sidebar {
    border-left: 1px solid var(--surface-color, #f1f5f9);
    padding-left: 24px;
  }

  .pane-sidebar-left {
    border-left: none;
    border-right: 1px solid var(--surface-color, #f1f5f9);
    padding-right: 24px;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  text-transform: uppercase;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 80vh;
  position: relative;
  padding: 120px 0 60px 0;
  display: flex;
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}

.hero .btn-get-started {
  color: var(--accent-contrast-color);
  background: var(--accent-fill, var(--accent-color));
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 50px;
  transition: 0.5s;
}

.hero .btn-get-started:hover {
  color: var(--accent-contrast-color);
  background: color-mix(in srgb, var(--accent-fill, var(--accent-color)), transparent 15%);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--contrast-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Hero Carousel
--------------------------------------------------------------*/
.hero-carousel {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.hero-carousel .swiper-slide {
  position: relative;
  overflow: hidden;
}

.hero-carousel .hero-slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel .hero-slide-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Overlay variants */
.hero-carousel .hero-overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-carousel .hero-overlay-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.hero-carousel .hero-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

/* Slide content */
.hero-carousel .hero-slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 15px;
}

.hero-carousel .hero-slide-content.text-start {
  justify-content: flex-start;
}

.hero-carousel .hero-slide-content.text-end {
  justify-content: flex-end;
}

.hero-carousel .hero-slide-content h1 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-carousel .hero-slide-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 25px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-carousel .hero-slide-content .btn-get-started {
  color: #fff;
  background: var(--accent-fill, var(--accent-color));
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px;
  border-radius: 50px;
  transition: 0.5s;
  text-decoration: none;
}

.hero-carousel .hero-slide-content .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-fill, var(--accent-color)), transparent 15%);
}

/* Swiper nav/pagination customization */
.hero-carousel .swiper-button-prev,
.hero-carousel .swiper-button-next {
  color: rgba(255, 255, 255, 0.85);
  z-index: 3;
}

.hero-carousel .swiper-button-prev:hover,
.hero-carousel .swiper-button-next:hover {
  color: #fff;
}

.hero-carousel .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.hero-carousel .swiper-pagination-bullet-active {
  background: #fff;
}

/* Ken Burns animation */
.hero-kenburns .swiper-slide-active .hero-slide-image {
  animation: kenburns 8s ease-out forwards;
}

@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-carousel {
    height: 60vh;
  }

  .hero-carousel .hero-slide-content h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .hero-carousel .hero-slide-content p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .hero-carousel .hero-slide-content .btn-get-started {
    font-size: 13px;
    padding: 8px 22px 10px;
  }

  .hero-carousel .swiper-button-prev,
  .hero-carousel .swiper-button-next {
    display: none;
  }
}

/* Hero Content Width Variants */
.hero-content-narrow .hero-slide-content .container {
  max-width: 680px;
}

.hero-content-boxed .hero-slide-content .container {
  max-width: 800px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--border-radius, 4px);
  padding: 40px 48px;
}

@media (max-width: 768px) {
  .hero-content-boxed .hero-slide-content .container {
    padding: 24px 20px;
    max-width: 95%;
  }
}

.hero-content-full .hero-slide-content .container {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 12px 0;
}

.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
  padding: 0 10px;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 8px 28px;
  border-radius: var(--border-radius);
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-color);
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us {
  padding: 30px 0;
}

.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.why-us .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.why-us .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.why-us .faq-container .faq-item h3 {
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
}

.why-us .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
  font-weight: 600;
}

.why-us .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.why-us .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.why-us .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.why-us .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.why-us .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.why-us .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.why-us .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.why-us .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.why-us .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

.why-us .why-us-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us .why-us-img img {
  max-height: 70%;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.skills .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.skills .content p:last-child {
  margin-bottom: 0;
}

.skills .content ul {
  list-style: none;
  padding: 0;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--default-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--heading-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--heading-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  height: 100%;
}

.services .service-item .icon {
  margin-bottom: 10px;
}

.services .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: 0.3s;
}

.services .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.services .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  transform: translateY(-10px);
}

.services .service-item:hover h4 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 35%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-fill, var(--accent-color));
  border: 2px solid var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: var(--border-radius);
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--accent-contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--background-color);
  padding: 60px 40px;
  height: 100%;
  border-radius: var(--border-radius);
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  color: var(--accent-color);
  font-size: 48px;
  font-weight: 400;
  font-family: var(--heading-font);
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: var(--accent-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
  border: 1px solid var(--accent-color);
}

.pricing .buy-btn:hover {
  background: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

.pricing .featured {
  border-top-color: var(--accent-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Faq 2 Section
--------------------------------------------------------------*/
.faq-2 .faq-container {
  margin-top: 15px;
}

.faq-2 .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.faq-2 .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq-2 .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq-2 .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq-2 .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq-2 .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq-2 .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq-2 .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq-2 .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq-2 .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Counter Section
--------------------------------------------------------------*/
.counter {
    padding-top: 80px;
}

.counter .count-box {
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.06);
border-radius: var(--border-radius);
}

.counter .count-box i {
    position: absolute;
    width: 54px;
    height: 54px;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    background: #fff;
    color: var(--heading-color);
    border-radius: 50px;
    border: 2px solid #fff;
    box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.counter .count-box span {
    font-size: 36px;
    display: block;
    font-weight: 700;
    color: #111111;
}

.counter .count-box span:after {
    content: "+";
    display: inline;
}

.counter .count-box p {
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
}

/*--------------------------------------------------------------
# Countdown Section
--------------------------------------------------------------*/

.countdown {
    width: 100%;
    text-align: center;
}

.countdown .enddate {
    visibility: hidden;
}

.countdown .interval {
    display: inline-block;
    text-align: center;
    margin: 20px;
}

.countdown .timer {
    font: 72px Courier;
    display: block;
}

.countdown .measure {
    font: 36px Courier;
}

@media (max-width: 768px) {
  .countdown .interval {
    margin: 10px;
  }

  .countdown .timer {
    font-size: 42px;
  }

  .countdown .measure {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .countdown .interval {
    margin: 6px;
  }

  .countdown .timer {
    font-size: 32px;
  }

  .countdown .measure {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# Overrides Section
--------------------------------------------------------------*/

.app-search-noinput button {
    color: var(--nav-color);
}

/*--------------------------------------------------------------
# Button Style Variants
--------------------------------------------------------------*/
.btn-style-outline .btn-getstarted,
.btn-style-outline .btn-getstarted:focus {
  background: transparent !important;
  border: 2px solid var(--accent-color);
  color: var(--accent-color) !important;
}

.btn-style-outline .btn-getstarted:hover,
.btn-style-outline .btn-getstarted:focus:hover {
  background: var(--accent-fill, var(--accent-color)) !important;
  color: var(--accent-contrast-color) !important;
}

.btn-style-soft .btn-getstarted,
.btn-style-soft .btn-getstarted:focus {
  background: color-mix(in srgb, var(--accent-color), transparent 85%) !important;
  color: var(--accent-color) !important;
}

.btn-style-soft .btn-getstarted:hover,
.btn-style-soft .btn-getstarted:focus:hover {
  background: var(--accent-fill, var(--accent-color)) !important;
  color: var(--accent-contrast-color) !important;
}

/*--------------------------------------------------------------
# Heading Scale Variants
--------------------------------------------------------------*/
.heading-scale-compact h1 { font-size: clamp(20px, 2.5vw, 24px); }
.heading-scale-compact h2 { font-size: clamp(17px, 2.2vw, 20px); }
.heading-scale-compact h3 { font-size: clamp(16px, 2vw, 18px); }
.heading-scale-compact h4 { font-size: 16px; }

.heading-scale-large h1 { font-size: clamp(28px, 4vw, 42px); }
.heading-scale-large h2 { font-size: clamp(24px, 3.4vw, 34px); }
.heading-scale-large h3 { font-size: clamp(20px, 2.8vw, 26px); }
.heading-scale-large h4 { font-size: clamp(18px, 2.2vw, 22px); }

.heading-scale-compact .page-title h1 { font-size: clamp(18px, 2.4vw, 22px); }
.heading-scale-large .page-title h1 { font-size: clamp(24px, 3.6vw, 36px); }

/*--------------------------------------------------------------
# Heading Style
# HeadingWeight, HeadingStyle, HeadingTransform, HeadingLetterSpacing,
# HeadingLineHeight, HeadingStyleScope, DisplaySize, SectionHeadingSize.
#
# Default.razor (HeadingStyle.cs) adds a class to the page wrapper ONLY for
# a setting the site has, and declares that setting's variable with it. So
# every rule below is inert on a site that sets none: no class, no rule, the
# headings exactly as before. A rule never reads a variable whose class is
# missing, so an unset value can never fall back to "unset".
#
# The scope class says which headings take the style: every heading, page
# headlines and section headings, page headlines only, or only the headings
# the content marks as display headings (.pb-display: the importer's mark for
# a headline style the source used on its hero and nowhere else).
#
# Page content only: the headings of the Page Builder's sections (.pb-section),
# never a module's own interface (.scm-mod) nor the masthead, menu, page-title
# band or footer. A 112px display size on every h1 in .main cut Book Now's
# "What would you like to do?" to "WHAT…" (wave 5, 2026-10-25).
--------------------------------------------------------------*/

/* Sizes: the headline and section headings at their desktop size, scaled down
   for smaller screens (the clamp() is worked out in HeadingStyle.cs). A big
   headline needs a line height to match: the theme's hero sets 56px, which
   overlaps the lines of anything larger. These come BEFORE the style rules,
   which have the same specificity, so a HeadingLineHeight the site sets wins
   over the line height here. Under the display scope (vc-hsize1d) the size is
   the display headline's alone. Long words wrap rather than run off a phone. */
.vc-hsize1 .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hsize1d .main .pb-section h1.pb-display:not(.scm-mod *) {
  font-size: var(--heading-h1-size);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.vc-hsize2 .main .pb-section :is(h2, .h2):not(.scm-mod *) {
  font-size: var(--heading-h2-size);
  line-height: 1.15;
  overflow-wrap: break-word;
}

.vc-hscope-all.vc-hw .main .pb-section :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.scm-mod *),
.vc-hscope-h1h2.vc-hw .main .pb-section :is(h1, h2, .h1, .h2):not(.scm-mod *),
.vc-hscope-h1.vc-hw .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hscope-display.vc-hw .main .pb-section .pb-display:not(.scm-mod *) { font-weight: var(--heading-weight); }

.vc-hscope-all.vc-hs .main .pb-section :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.scm-mod *),
.vc-hscope-h1h2.vc-hs .main .pb-section :is(h1, h2, .h1, .h2):not(.scm-mod *),
.vc-hscope-h1.vc-hs .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hscope-display.vc-hs .main .pb-section .pb-display:not(.scm-mod *) { font-style: var(--heading-style); }

.vc-hscope-all.vc-ht .main .pb-section :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.scm-mod *),
.vc-hscope-h1h2.vc-ht .main .pb-section :is(h1, h2, .h1, .h2):not(.scm-mod *),
.vc-hscope-h1.vc-ht .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hscope-display.vc-ht .main .pb-section .pb-display:not(.scm-mod *) { text-transform: var(--heading-transform); }

.vc-hscope-all.vc-hl .main .pb-section :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.scm-mod *),
.vc-hscope-h1h2.vc-hl .main .pb-section :is(h1, h2, .h1, .h2):not(.scm-mod *),
.vc-hscope-h1.vc-hl .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hscope-display.vc-hl .main .pb-section .pb-display:not(.scm-mod *) { letter-spacing: var(--heading-letter-spacing); }

.vc-hscope-all.vc-hlh .main .pb-section :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.scm-mod *),
.vc-hscope-h1h2.vc-hlh .main .pb-section :is(h1, h2, .h1, .h2):not(.scm-mod *),
.vc-hscope-h1.vc-hlh .main .pb-section :is(h1, .h1):not(.scm-mod *),
.vc-hscope-display.vc-hlh .main .pb-section .pb-display:not(.scm-mod *) { line-height: var(--heading-line-height); }

/* Each heading level's own look (H1Font … H4Size, wave 6, 2026-10-25): an
   inner page's headline, the section headings and the card titles, read per
   level from the source. Never a display heading (.pb-display keeps the style
   above), never a block's own component heading (a BEM element such as a live
   board's __title keeps its block's look), never a module's interface. The
   class is doubled so a level's own value outranks the general heading style
   above, whatever its scope. */
.vc-h1f.vc-h1f .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { font-family: var(--h1-font); }
.vc-h1w.vc-h1w .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { font-weight: var(--h1-weight); }
.vc-h1s.vc-h1s .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { font-style: var(--h1-style); }
.vc-h1t.vc-h1t .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { text-transform: var(--h1-transform); }
.vc-h1l.vc-h1l .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { letter-spacing: var(--h1-letter-spacing); }
.vc-h1z.vc-h1z .main .pb-section :is(h1, .h1):not(.pb-display, [class*="__"], .scm-mod *) { font-size: var(--h1-size); line-height: var(--h1-line-height); overflow-wrap: break-word; }

.vc-h2f.vc-h2f .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { font-family: var(--h2-font); }
.vc-h2w.vc-h2w .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { font-weight: var(--h2-weight); }
.vc-h2s.vc-h2s .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { font-style: var(--h2-style); }
.vc-h2t.vc-h2t .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { text-transform: var(--h2-transform); }
.vc-h2l.vc-h2l .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { letter-spacing: var(--h2-letter-spacing); }
.vc-h2z.vc-h2z .main .pb-section :is(h2, .h2):not(.pb-display, [class*="__"], .scm-mod *) { font-size: var(--h2-size); line-height: var(--h2-line-height); overflow-wrap: break-word; }

.vc-h3f.vc-h3f .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { font-family: var(--h3-font); }
.vc-h3w.vc-h3w .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { font-weight: var(--h3-weight); }
.vc-h3s.vc-h3s .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { font-style: var(--h3-style); }
.vc-h3t.vc-h3t .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { text-transform: var(--h3-transform); }
.vc-h3l.vc-h3l .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { letter-spacing: var(--h3-letter-spacing); }
.vc-h3z.vc-h3z .main .pb-section :is(h3, .h3):not(.pb-display, [class*="__"], .scm-mod *) { font-size: var(--h3-size); line-height: var(--h3-line-height); overflow-wrap: break-word; }

.vc-h4f.vc-h4f .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { font-family: var(--h4-font); }
.vc-h4w.vc-h4w .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { font-weight: var(--h4-weight); }
.vc-h4s.vc-h4s .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { font-style: var(--h4-style); }
.vc-h4t.vc-h4t .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { text-transform: var(--h4-transform); }
.vc-h4l.vc-h4l .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { letter-spacing: var(--h4-letter-spacing); }
.vc-h4z.vc-h4z .main .pb-section :is(h4, .h4):not(.pb-display, [class*="__"], .scm-mod *) { font-size: var(--h4-size); line-height: var(--h4-line-height); overflow-wrap: break-word; }
/* End Heading Style */

.app-search-noinput button:hover {
    color: var(--nav-hover-color);
}

/* Bootstrap Button Overrides - scoped to .main to avoid affecting Oqtane admin panel */
.main .btn-primary {
    background-color: var(--accent-fill, var(--accent-color));
    border-color: var(--accent-fill, var(--accent-color));
    color: var(--accent-contrast-color);
}

.main .btn-primary:hover,
.main .btn-primary:focus,
.main .btn-primary:active,
.main .btn-primary.active {
    background-color: color-mix(in srgb, var(--accent-fill, var(--accent-color)), #000 15%);
    border-color: color-mix(in srgb, var(--accent-fill, var(--accent-color)), #000 20%);
    color: var(--accent-contrast-color);
}

.main .btn-secondary {
    background-color: var(--heading-color);
    border-color: var(--heading-color);
    color: var(--contrast-color);
}

.main .btn-secondary:hover,
.main .btn-secondary:focus,
.main .btn-secondary:active,
.main .btn-secondary.active {
    background-color: color-mix(in srgb, var(--heading-color), #000 15%);
    border-color: color-mix(in srgb, var(--heading-color), #000 20%);
    color: var(--contrast-color);
}

.main .btn-outline-primary {
    color: var(--accent-ink, var(--accent-color));
    border-color: var(--accent-ink, var(--accent-color));
}

.main .btn-outline-primary:hover,
.main .btn-outline-primary:focus,
.main .btn-outline-primary:active,
.main .btn-outline-primary.active {
    background-color: var(--accent-fill, var(--accent-color));
    border-color: var(--accent-fill, var(--accent-color));
    color: var(--accent-contrast-color);
}

.main .btn-outline-secondary {
    color: var(--heading-color);
    border-color: var(--heading-color);
}

.main .btn-outline-secondary:hover,
.main .btn-outline-secondary:focus,
.main .btn-outline-secondary:active,
.main .btn-outline-secondary.active {
    background-color: var(--heading-color);
    border-color: var(--heading-color);
    color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Centered Header Style
--------------------------------------------------------------*/
.header-centered .logo {
  text-align: center;
}

.header-centered .navmenu {
  justify-content: center;
}

@media (min-width: 1200px) {
  .header-centered .navmenu ul {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Stacked Header Style

The brand on its own row, the menu on the row beneath it.

This is the layout to reach for when a site has more top-level items than fit beside a name — which
is most imported sites, since the source decides how many there are and we find out afterwards. In
the side-by-side layouts the two compete for one row of horizontal space and the loser wraps.

It did not previously work. The rules below the container only centred things; the header's own row
is a flex container, so the logo and the menu stayed side by side however they were justified. The
column direction is what actually stacks them, and `me-auto` on the logo has to be undone or it
still pushes the menu away.
--------------------------------------------------------------*/
.header-stacked {
  padding-top: 10px;
  padding-bottom: 0;
}

/* Wrapping rather than a column, so the second row stays a row.
   The header's children are the brand, the menu, the Book Now button and the controls. Making the
   container a column puts all four on separate lines — the button and the controls each get one of
   their own, which is worse than the problem being solved. Giving the brand the full width forces
   exactly one break after it, and the remaining three lay themselves out side by side underneath. */
.header-stacked > .container,
.header-stacked > .container-fluid {
  flex-wrap: wrap;
}

.header-stacked .logo {
  flex: 0 0 100%;
  padding: 8px 0;
  margin-right: 0 !important;   /* beats the me-auto that lays the header out side by side */
  justify-content: center;
}

.header-stacked .navmenu {
  flex: 1 1 auto;
  border-top: 1px solid color-mix(in srgb, var(--nav-color), transparent 80%);
  padding-top: 4px;
}

@media (min-width: 1200px) {
  .header-stacked .navmenu ul {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Folded Header (wave 5, 2026-10-25; decided before paint, wave 9)

A menu that does not fit on one line beside the logo, the button and the
controls folds behind the menu button on a desktop too, instead of wrapping:
an imported site with thirteen entries put the menu on a second row and the
Book Now button on a third, its words broken over two lines. Folded, the
header is one row, the logo on the left, and the menu opens as the phone menu
does. A stacked header keeps its two rows: the logo on its own, and the menu
button where the menu was.

Default.Header.cs adds nav-fold when its estimate says the row will not fit
at the narrowest desktop width; HeaderFit.Script, inline right after the
header, measures the real row and corrects it either way before the first
paint, and interop.js runs it again when fonts, the logo or the window change.
Nothing here applies without the class, and below 1200px the phone menu rules
apply as before.

The same box (wave 9): a folded and an unfolded header are exactly the same
height, so neither the fold nor a later refit moves the page. The menu
button's box keeps the one-line menu's height (--nav-row-height, measured by
the script; the stylesheet's own row height without it), and the logo, the
button and the controls keep their sizes and paddings.
--------------------------------------------------------------*/

/* A button's words never break over two lines, whatever the header does. */
.header .btn-getstarted {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Folding and unfolding never animate the row (wave 6). The logo and the
   button are links, which transition "all" for their hover colors, and order
   and margins are animatable: unfolding at load slid the logo across the
   header for 0.3 s. Only the colors transition. */
.header .logo,
.header .btn-getstarted,
.header .btn-getstarted:focus {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}

/* While the script measures and settles the row, nothing transitions from the
   measured state to the final one (the header itself transitions "all"). */
.header.nav-still,
.header.nav-still * {
  transition: none !important;
}

@media (min-width: 1200px) {
  /* The measurement (HeaderFit.Script): the row on one line, nothing allowed to
     shrink, the dropdowns out of the way. Set and removed in one task, never
     painted. */
  .header.nav-measure > .container,
  .header.nav-measure > .container-fluid {
    flex-wrap: nowrap;
  }

  .header.nav-measure.header-stacked > .container,
  .header.nav-measure.header-stacked > .container-fluid {
    flex-wrap: wrap;
  }

  .header.nav-measure > .container > *,
  .header.nav-measure > .container-fluid > * {
    flex-shrink: 0;
  }

  .header.nav-measure .navmenu ul {
    flex-wrap: nowrap;
  }

  .header.nav-measure .navmenu li > ul {
    display: none;
  }

  /* Tightened header (HeaderFit.Script, wave 14): a row that does not fit is
     drawn tighter, a step at a time, before it folds. The script sets the
     step's padding, words and button gap; a row that fits never gets
     nav-snug, so it is drawn exactly as before. Top-level entries only: the
     dropdowns keep their own type. */
  .header.nav-snug:not(.nav-fold) .navmenu > ul > li > a,
  .header.nav-snug:not(.nav-fold) .navmenu > ul > li > a:focus {
    padding-left: var(--nav-snug-pad);
    padding-right: var(--nav-snug-pad);
    font-size: var(--nav-snug-size);
  }

  .header.nav-snug:not(.nav-fold) .navmenu > ul > li:last-child > a {
    padding-right: 0;
  }

  .header.nav-snug:not(.nav-fold) .btn-getstarted,
  .header.nav-snug:not(.nav-fold) .btn-getstarted:focus {
    margin-left: var(--nav-snug-gap);
  }

  .header.nav-fold:not(.header-stacked) > .container,
  .header.nav-fold:not(.header-stacked) > .container-fluid {
    flex-wrap: nowrap;
  }

  .header.nav-fold:not(.header-stacked) .logo {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto !important;
  }

  .header.nav-fold:not(.header-stacked) .btn-getstarted { order: 2; }
  .header.nav-fold:not(.header-stacked) .controls-group { order: 3; }

  .header.nav-fold:not(.header-stacked) .navmenu {
    order: 4;
    flex: 0 0 auto;
    padding: 0;
  }

  .header.nav-fold .navmenu {
    display: flex;
    align-items: center;
    min-height: var(--nav-row-height, calc(15px * 1.5 + 36px));
    z-index: 9997;
  }

  .header-minimal.nav-fold .navmenu {
    min-height: var(--nav-row-height, calc(14px * 1.5 + 8px));
  }

  .header.nav-fold .mobile-nav-toggle.d-xl-none {
    display: inline-block !important;
    width: 1em; /* an icon glyph is 1em wide; fixed, so the icon font arriving moves nothing */
    text-align: center;
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin: 0 0 0 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .header.nav-fold.header-stacked .mobile-nav-toggle.d-xl-none {
    margin-left: 0;
  }

  .header.nav-fold .navmenu ul {
    display: none;
    flex-wrap: nowrap;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: calc(var(--border-radius) * 1.5);
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .header.nav-fold .navmenu a,
  .header.nav-fold .navmenu a:focus,
  .header.nav-fold .navmenu li:last-child a {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 500;
  }

  .header.nav-fold .navmenu a:hover,
  .header.nav-fold .navmenu .active,
  .header.nav-fold .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .header.nav-fold .navmenu .dropdown ul,
  .header.nav-fold .navmenu .dropdown:hover > ul {
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    margin: 10px 20px;
    padding: 10px 0;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
  }

  .header.nav-fold .navmenu .dropdown ul li { min-width: 0; }

  .header.nav-fold .navmenu .dropdown > .dropdown-active { display: block; }

  .mobile-nav-active:has(.header.nav-fold) { overflow: hidden; }

  .mobile-nav-active .header.nav-fold .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    padding: 0;
    border-top: 0;
    background: rgba(33, 37, 41, 0.8);
  }

  .mobile-nav-active .header.nav-fold .navmenu > ul { display: block; }

  .mobile-nav-active .header.nav-fold .mobile-nav-toggle.d-xl-none {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  /* A full-width header (HeaderWidth "full", wave 9): the row runs the width of
     the window, as the source's did, less a gutter either side. */
  .header.header-full > .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Sign In and Sign Up as words (AccountLinks "text", UserMenu.razor). Sign Up
   is the call to act, in the accent; Sign In is outlined. */
.user-menu-links {
  gap: 8px;
  flex-shrink: 0;
}

.user-menu-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 2px solid var(--accent-color);
  border-radius: var(--border-radius, 6px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.user-menu-link-primary,
.user-menu-link-primary:focus {
  background: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

.user-menu-link-secondary,
.user-menu-link-secondary:focus {
  background: transparent;
  color: var(--nav-color, var(--accent-color));
}

.user-menu-link-primary:hover {
  background: color-mix(in srgb, var(--accent-fill, var(--accent-color)), transparent 15%);
  color: var(--accent-contrast-color);
}

.user-menu-link-secondary:hover {
  background: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

/*--------------------------------------------------------------
# Phone header (wave 6, 2026-10-25)

On a phone the header row is the logo, the button and the menu button. The
Sign In and Sign Up words (below 768px) and the search button (below 576px)
squeezed a wide logo to 36 x 7 px, so they leave the row and are offered at the
foot of the opened menu (.navmenu-extras, Default.razor), the way most sites
put their account links in the phone menu. The header carries has-account-words
and has-search only when it renders them, so nothing here applies otherwise.
The logo keeps its height and gives way only down to a readable width.
--------------------------------------------------------------*/
.header .navmenu-extras {
  display: none;
}

.header .navmenu-extras-search {
  display: none;
}

@media (max-width: 1199.98px) {
  .header .logo {
    min-width: 120px;
    flex-shrink: 1;
    overflow: hidden;
  }

  .header .logo img {
    max-width: 100%;
    height: auto;
  }

  .mobile-nav-active .header .navmenu-extras {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-radius: calc(var(--border-radius) * 1.5);
    background-color: var(--nav-mobile-background-color);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .header .navmenu-extras .user-menu-link {
    padding: 8px 18px;
    font-size: 15px;
  }

  .header .navmenu-extras .user-menu-link-secondary,
  .header .navmenu-extras .user-menu-link-secondary:focus,
  .header .navmenu-extras-search {
    color: var(--nav-dropdown-color);
  }

  .header .navmenu-extras-search {
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-family: var(--nav-font);
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .header.has-account-words .controls-group .user-menu-links {
    display: none !important;
  }

  .mobile-nav-active .header.has-account-words .navmenu-extras {
    display: flex;
  }

  .mobile-nav-active .header.has-account-words .navmenu > ul {
    bottom: 104px;
  }
}

@media (max-width: 575.98px) {
  .header.has-search .controls-group > .app-search-noinput,
  .header.has-search .controls-group > .app-search {
    display: none;
  }

  .header.has-search .navmenu-extras-search {
    display: inline-flex;
  }

  .mobile-nav-active .header.has-search .navmenu-extras {
    display: flex;
  }

  .mobile-nav-active .header.has-search .navmenu > ul {
    bottom: 104px;
  }
}

/*--------------------------------------------------------------
# Minimal Header Style
--------------------------------------------------------------*/
.header-minimal {
  padding-top: 4px;
  padding-bottom: 4px;
}

.header-minimal .logo img {
  max-height: 36px;
}

.header-minimal .logo .sitename {
  font-size: 20px;
}

@media (min-width: 1200px) {
  .header-minimal .navmenu a {
    font-size: 14px;
    padding: 4px 12px;
  }
}

.header-minimal .btn-getstarted {
  font-size: 13px;
  padding: 6px 16px;
}

/*--------------------------------------------------------------
# Event Schedule Section
--------------------------------------------------------------*/
.event-schedule {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.event-schedule .schedule-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 540px;
}

.event-schedule .schedule-table thead th {
  background-color: var(--heading-color);
  color: var(--contrast-color);
  font-weight: 600;
  padding: 14px 16px;
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-schedule .schedule-table thead th:first-child {
  border-radius: 8px 0 0 0;
}

.event-schedule .schedule-table thead th:last-child {
  border-radius: 0 8px 0 0;
}

.event-schedule .schedule-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.event-schedule .schedule-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.event-schedule .schedule-table .badge {
  font-size: 12px;
  padding: 5px 10px;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Menu Board Section
--------------------------------------------------------------*/
.menu-board .menu-category {
  background-color: var(--surface-color);
  border-radius: calc(var(--border-radius) * 2.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s;
}

.menu-board .menu-category:hover {
  transform: translateY(-5px);
}

.menu-board .menu-category-header {
  background-color: var(--heading-color);
  color: var(--contrast-color);
  padding: 24px;
  text-align: center;
}

.menu-board .menu-category-header i {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
}

.menu-board .menu-category-header h3 {
  color: var(--contrast-color);
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.menu-board .menu-items {
  padding: 20px;
}

.menu-board .menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--default-color), transparent 85%);
}

.menu-board .menu-item:last-child {
  border-bottom: none;
}

.menu-board .menu-item-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--heading-color);
}

.menu-board .menu-item-info p {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.menu-board .menu-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap;
  margin-left: 15px;
}

/*--------------------------------------------------------------
# Leaderboard Section
--------------------------------------------------------------*/
.leaderboard {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leaderboard .leaderboard-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: calc(var(--border-radius) * 2.5);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-width: 540px;
}

.leaderboard .leaderboard-table thead th {
  background-color: var(--heading-color);
  color: var(--contrast-color);
  font-weight: 600;
  padding: 14px 16px;
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leaderboard .leaderboard-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  background-color: var(--surface-color);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.leaderboard .leaderboard-table .position-gold td {
  background-color: color-mix(in srgb, #ffd700, transparent 90%);
}

.leaderboard .leaderboard-table .position-silver td {
  background-color: color-mix(in srgb, #c0c0c0, transparent 90%);
}

.leaderboard .leaderboard-table .position-bronze td {
  background-color: color-mix(in srgb, #cd7f32, transparent 90%);
}

.leaderboard .leaderboard-table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
}

.leaderboard .lap-time {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Booking CTA Section
--------------------------------------------------------------*/
.booking-cta {
  padding: 80px 0;
}

.booking-cta h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 15px;
}

.booking-cta p {
  font-size: 18px;
  color: var(--default-color);
  margin-bottom: 0;
}

.booking-cta h5 {
  color: var(--heading-color);
}

.booking-cta small {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.booking-cta .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.5s;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.booking-cta .cta-btn:hover {
  background: var(--accent-fill, var(--accent-color));
  border-color: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
}

/*--------------------------------------------------------------
# Admin Panel & Setup Assistant Compatibility
# Completely neutralizes AOS animation effects and theme section
# constraints on sections that contain admin modules with
# positioned panels (setup wizards, admin dashboards).
#
# AOS (Animate On Scroll) sets FOUR problematic properties on
# [data-aos] elements before their scroll-triggered animation:
#   1. transform: translate3d(…) — creates a containing block
#      that traps position:fixed children (they position
#      relative to the section instead of the viewport).
#   2. opacity: 0 — hides the entire section and all children.
#   3. pointer-events: none — makes everything unclickable.
#   4. transition on transform — even when overridden, briefly
#      holds a non-none intermediate value during transition.
#
# After Blazor client-side navigation, AOS may NOT re-process
# dynamically-added sections, leaving them permanently stuck
# in the pre-animation state. The overrides below use !important
# to force correct values regardless of AOS state.
--------------------------------------------------------------*/

/* Nuclear reset: override ALL AOS effects and section
   constraints so admin panels render and function correctly.
   Every property that AOS touches is explicitly overridden. */
section:has(.scm-admin-shell),
section:has(.setup-assistant),
.section:has(.scm-admin-shell),
.section:has(.setup-assistant) {
  overflow: visible !important;
  padding: 0;
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  /* Prevent ANY property from creating a containing block */
  will-change: auto !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  backdrop-filter: none !important;
}

/* Remove container max-width so the module can use the full
   width available inside <main> */
section:has(.scm-admin-shell) > .container,
section:has(.scm-admin-shell) > .container-fluid,
section:has(.setup-assistant) > .container,
section:has(.setup-assistant) > .container-fluid,
.section:has(.scm-admin-shell) > .container,
.section:has(.scm-admin-shell) > .container-fluid,
.section:has(.setup-assistant) > .container,
.section:has(.setup-assistant) > .container-fluid {
  max-width: 100%;
  padding: 0;
}

/* Remove row flex layout so the sidebar is not treated as a
   flex child and can position itself freely */
section:has(.scm-admin-shell) > .container > .row,
section:has(.scm-admin-shell) > .container-fluid > .row,
section:has(.setup-assistant) > .container > .row,
section:has(.setup-assistant) > .container-fluid > .row,
.section:has(.scm-admin-shell) > .container > .row,
.section:has(.scm-admin-shell) > .container-fluid > .row,
.section:has(.setup-assistant) > .container > .row,
.section:has(.setup-assistant) > .container-fluid > .row {
  display: block;
}

/* When the setup assistant is visible, strip ALL AOS effects
   from every section inside the theme's outer <main>.
   The .with-setup-assistant class is on the admin module's
   inner <main>, so we use :has() to target the theme's outer
   <main class="main"> that wraps the Container.razor sections. */
.main:has(.with-setup-assistant) {
  position: relative;
}

.main:has(.with-setup-assistant) > section,
.main:has(.with-setup-assistant) > .section,
.main:has(.with-setup-assistant) > .container > section,
.main:has(.with-setup-assistant) > .container > .section,
.main:has(.with-setup-assistant) > .container-fluid > section,
.main:has(.with-setup-assistant) > .container-fluid > .section {
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  will-change: auto !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  backdrop-filter: none !important;
}

/* Remove Bootstrap max-width from the Oqtane pane wrapper (Default.razor
   widthClass div) so admin shell content is not constrained to a narrow
   centered column while the setup assistant is viewport-fixed. */
.main:has(.with-setup-assistant) > .container,
.main:has(.with-setup-assistant) > .container-fluid,
.main > .container:has(.scm-admin-shell),
.main > .container-fluid:has(.scm-admin-shell) {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*--------------------------------------------------------------
# Oqtane Control Panel (Offcanvas) Compatibility
# The ControlPanel renders a Bootstrap offcanvas inside the
# <header>, which has position:sticky and z-index creating a
# stacking context. The offcanvas backdrop is appended to <body>
# (outside the header stacking context), so the backdrop's
# z-index must be below the header's for the offcanvas panel
# to remain visible and interactive above the backdrop.
--------------------------------------------------------------*/
.offcanvas-backdrop {
  z-index: 990 !important;
}

/*--------------------------------------------------------------
# Sticky Header Toggle
--------------------------------------------------------------*/
.header-no-sticky {
  position: relative !important;
}

/*--------------------------------------------------------------
# Font Size Variants
--------------------------------------------------------------*/
.font-size-sm {
  --base-font-size: 14px;
}
.font-size-sm body, .font-size-sm .main { font-size: 14px; }
.font-size-sm .main p,
.font-size-sm .main li { font-size: 14px; }

.font-size-lg {
  --base-font-size: 18px;
}
.font-size-lg body, .font-size-lg .main { font-size: 18px; }
.font-size-lg .main p,
.font-size-lg .main li { font-size: 18px; }

.font-size-xl {
  --base-font-size: 20px;
}
.font-size-xl body, .font-size-xl .main { font-size: 20px; }
.font-size-xl .main p,
.font-size-xl .main li { font-size: 20px; }

/*--------------------------------------------------------------
# Section Spacing Variants
--------------------------------------------------------------*/
.spacing-compact section,
.spacing-compact .section {
  padding-top: 30px;
  padding-bottom: 30px;
}

.spacing-relaxed section,
.spacing-relaxed .section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.spacing-spacious section,
.spacing-spacious .section {
  padding-top: 120px;
  padding-bottom: 120px;
}

/*--------------------------------------------------------------
# Announcement / Top Bar
--------------------------------------------------------------*/
:root {
  /* Approximate rendered height of the announcement bar. Used to
     offset fixed/sticky headers so the bar is never covered. */
  --announcement-height: 38px;
}

.announcement-bar {
  background-color: var(--accent-color, #2563eb);
  color: var(--accent-contrast-color, #ffffff);
  text-align: center;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  /* Above the header (z-index 997) and the offcanvas backdrop (990)
     so the bar is always visible and clickable. */
  z-index: 1030;
}

/* When a fixed-top header is active (Hero / Carousel modes), the header
   sits at top:0 and would otherwise cover the announcement. Pin the
   announcement to the top instead and push the header down by its
   height. The body padding-top added by Bootstrap's fixed-top pattern
   does not exist in this theme, so we also nudge the main content. */
.has-announcement .header.fixed-top {
  top: var(--announcement-height);
}
.has-announcement .announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.has-announcement:has(.header.fixed-top) .main {
  margin-top: var(--announcement-height);
}

/* For sticky-top headers the announcement scrolls away naturally; we
   only need to make sure the header sticks BELOW the announcement
   while both are on-screen. */
.has-announcement .header.sticky-top {
  top: 0;
}

.announcement-bar a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.announcement-bar a:hover {
  opacity: 0.85;
}

.announcement-bar .announcement-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px 8px;
  line-height: 1;
}

.announcement-bar .announcement-close:hover {
  opacity: 1;
}
/*--------------------------------------------------------------
# Content brought in from somewhere else
--------------------------------------------------------------*/
/*
  An imported page arrives as markup without its stylesheet. The site importer discards the
  source's CSS on purpose — a venue's old stylesheet fighting this theme is worse than no
  stylesheet — but that means anything the source sized in CSS arrives at its intrinsic size.

  Measured on a real import: a sponsor logo saved at 3300px wide rendered at 3300px, and the
  page laid out 4280px wide inside a 1642px window. Every page of that site scrolled sideways,
  which on a phone is both an appearance problem and a ranking one.

  Scoped to the content region so the header, footer and any deliberately full-bleed furniture
  are untouched.
*/
.main :where(img, video, canvas, svg, iframe, embed, object) {
  max-width: 100%;
  height: auto;
}

/*
  A wide table or a long unbroken line scrolls inside itself rather than widening the page.

  Content tables only. `display: block` takes a table out of table layout: its rows get an
  anonymous table that sizes to its own content, so `width: 100%` and `table-layout: fixed` stop
  applying. That is a fair trade for imported markup, but `.main` also holds every module, and
  component tables are built on exactly those two properties. A Syncfusion grid draws its header
  and body as two separate tables that only line up while both keep their fixed column widths;
  under this rule every admin grid's headers drifted off their columns. A Bootstrap `.table`
  shrank to its content. Components already handle their own overflow (the grid scrolls its
  content area, `.table-responsive` wraps a Bootstrap table), so their tables are left alone.
*/
.main :where(pre),
.main :where(table:not(.table, .e-control *, .scm-admin-shell *, .scm-mod *)) {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

.main :where(p, li, h1, h2, h3, h4, h5, h6, td, th) {
  overflow-wrap: break-word;
}

/*--------------------------------------------------------------
# Venue footer (VenueFooter.razor, W4-6)
--------------------------------------------------------------*/
/*
  The footer a visitor scrolls down for: logo, address, phone, the week's hours, the site's own
  links and a Book button, from the venue record the module publishes. It sits inside .footer, so
  the band's background, its accent rule and the operator's footer colors all apply.

  Every color here is a footer token. Text and links default to --footer-text, the nav color,
  which is the one color chosen to read on the header band the footer shares; nothing falls back
  to --default-color or --heading-color, which are the PAGE's colors and are dark on light presets
  (dark text on a dark band). No opacity on text either: a faded line is a contrast failure on
  the presets where the band is not near-black. The Book button is an accent fill, so its text is
  --accent-contrast-color.
*/
.vc-footer {
  --vc-footer-link: var(--footer-link, var(--footer-text));
  --vc-footer-link-hover: var(--footer-link-hover, var(--footer-text));
  --vc-footer-rule: color-mix(in srgb, var(--footer-text) 20%, transparent);
  color: var(--footer-text);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 3rem 0 0;
}

/* The footer's columns are sections, and the global section rule ("Global Sections") paints a section
   in the PAGE's background and text color with 60px of padding above and below. Inside the footer that
   drew three of its four columns as page-colored boxes on the band: white boxes on a light preset, where
   the footer's light words vanished, and a black box under dark words on an imported light header
   (1.57:1, wave 14). Every column sits on the band itself, in the footer's own colors. */
.vc-footer section {
  background-color: transparent;
  color: inherit;
  padding: 0;
  overflow: visible;
  scroll-margin-top: 0;
}

.vc-footer__grid {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .vc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .vc-footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.vc-footer a {
  color: var(--vc-footer-link);
  text-decoration: none;
  text-underline-offset: 3px;
}

.vc-footer a:hover,
.vc-footer a:focus-visible {
  color: var(--vc-footer-link-hover);
  text-decoration: underline;
}

.vc-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vc-footer__heading {
  color: var(--footer-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.85rem;
}

/* Sized by height, never squeezed into a square: a wide wordmark stays readable. */
.vc-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}

.vc-footer__logo img {
  display: block;
  height: 48px;
  width: auto;
  max-width: min(240px, 100%);
  object-fit: contain;
}

/* The logo was chosen to read on the header. When the footer's band is on the other side of light and
   dark from the header (FooterColors.LogoPlate, wave 14), it is drawn on a plate in the header's color. */
.vc-footer--logo-plate .vc-footer__logo {
  background-color: var(--header-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
}

.vc-footer__name {
  color: var(--footer-text);
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 700;
}

.vc-footer__address {
  font-style: normal;
  margin: 0 0 0.75rem;
}

.vc-footer__address a,
.vc-footer__phone a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.vc-footer__address .bi,
.vc-footer__phone .bi {
  line-height: 1.6;
}

.vc-footer__address-line {
  display: block;
}

.vc-footer__phone {
  margin: 0;
}

/* The venue's public email and social pages (wave 8): the same link style as the phone, icons in a row under them. */
.vc-footer__email {
  margin: 0.5rem 0 0;
}

.vc-footer__email a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.vc-footer__email .bi {
  line-height: 1.6;
}

.vc-footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
}

.vc-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--vc-footer-rule);
  /* The site's own corner radius, as the footer's Book button: square on a square design. */
  border-radius: var(--border-radius);
  font-size: 1.1rem;
}

.vc-footer__hours dl {
  margin: 0;
}

.vc-footer__hours-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.3rem 0 0.3rem 0.6rem;
  border-left: 3px solid transparent;
}

.vc-footer__hours-row + .vc-footer__hours-row {
  border-top: 1px solid var(--vc-footer-rule);
}

.vc-footer__hours-row dt {
  font-weight: 600;
}

.vc-footer__hours-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Today: a heavier weight and the accent rule beside it, never a color the band might not carry. */
.vc-footer__hours-row.is-today {
  border-left-color: var(--accent-color);
}

.vc-footer__hours-row.is-today dt,
.vc-footer__hours-row.is-today dd {
  font-weight: 700;
}

.vc-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-footer__list li + li {
  margin-top: 0.45rem;
}

.vc-footer__list--two {
  columns: 2;
  column-gap: 1.5rem;
}

.vc-footer__list--two li {
  break-inside: avoid;
}

.vc-footer__list--two li + li {
  margin-top: 0;
  padding-top: 0.45rem;
}

.vc-footer .vc-footer__book {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: var(--border-radius);
  background-color: var(--accent-fill, var(--accent-color));
  color: var(--accent-contrast-color);
  border: 2px solid var(--accent-fill, var(--accent-color));
  /* A ring in the band's own ink, so the button reads even where the accent is close to the band. */
  box-shadow: 0 0 0 1px var(--vc-footer-rule);
  font-weight: 700;
  text-decoration: none;
}

.vc-footer .vc-footer__book:hover,
.vc-footer .vc-footer__book:focus-visible {
  background-color: color-mix(in srgb, var(--accent-fill, var(--accent-color)), black 12%);
  color: var(--accent-contrast-color);
  text-decoration: none;
}

.vc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--vc-footer-rule);
  font-size: 0.85rem;
}

.vc-footer__copyright {
  margin: 0;
}

.vc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 639.98px) {
  .vc-footer {
    padding-top: 2.25rem;
  }

  .vc-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*--------------------------------------------------------------
# Header from the source (wave 8, 2026-10-26)

The header settings the website import reads from the source's own header, or
an operator sets on the settings screen. Default.razor adds each class only
when its setting is set (NavStyle), so a site that sets none renders as before.

  nav-typed          the menu's weight, case and letter spacing
                     (--nav-weight, --nav-transform, --nav-letter-spacing),
                     on the desktop row, the folded menu and the phone menu
  nav-btn-*          the header button's corners: square, rounded or pill
  nav-panel-header   the opened phone menu, the folded menu, the menu's
                     dropdowns and the account menu in the header's own
                     background and menu colors, not a white panel

A tall logo (LogoMaxHeight up to 120px) is capped on a phone, where the row is
the logo, the button and the menu button (--logo-cap, Default.razor's inline
max-height); a logo of 80px or less is drawn exactly as before.
--------------------------------------------------------------*/
@media (max-width: 575.98px) {
  .header .logo img {
    --logo-cap: 80px;
  }
}

@media (min-width: 1200px) {
  .header.nav-typed .navmenu a,
  .header.nav-typed .navmenu a:focus {
    font-weight: var(--nav-weight, 400);
    text-transform: var(--nav-transform, none);
    letter-spacing: var(--nav-letter-spacing, normal);
  }

  .header.nav-typed.nav-fold .navmenu a,
  .header.nav-typed.nav-fold .navmenu a:focus,
  .header.nav-typed.nav-fold .navmenu li:last-child a {
    font-weight: var(--nav-weight, 500);
  }
}

@media (max-width: 1199px) {
  .header.nav-typed .navmenu a,
  .header.nav-typed .navmenu a:focus {
    font-weight: var(--nav-weight, 500);
    text-transform: var(--nav-transform, none);
    letter-spacing: var(--nav-letter-spacing, normal);
  }
}

.header.nav-btn-square .btn-getstarted,
.header.nav-btn-square .btn-getstarted:focus {
  border-radius: 0;
}

.header.nav-btn-rounded .btn-getstarted,
.header.nav-btn-rounded .btn-getstarted:focus {
  border-radius: max(var(--border-radius, 4px), 4px);
}

.header.nav-btn-pill .btn-getstarted,
.header.nav-btn-pill .btn-getstarted:focus {
  border-radius: 50px;
}

/* Inside .header, --background-color is the header band (--header-bg), and
   --nav-color is the color chosen to read on it. */
.header.nav-panel-header {
  --nav-mobile-background-color: var(--background-color);
  --nav-dropdown-background-color: var(--background-color);
  --nav-dropdown-color: var(--nav-color);
  --nav-dropdown-hover-color: var(--nav-hover-color);
}

/* A dark panel over the dimmed page needs an edge to stand apart from it. */
@media (max-width: 1199px) {
  .header.nav-panel-header .navmenu ul,
  .mobile-nav-active .header.nav-panel-header .navmenu-extras {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-color), transparent 82%), 0 0 30px rgba(0, 0, 0, 0.35);
  }

  .header.nav-panel-header .navmenu .dropdown ul {
    border-color: color-mix(in srgb, var(--nav-color), transparent 82%);
  }
}

@media (min-width: 1200px) {
  .header.nav-panel-header.nav-fold .navmenu ul {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-color), transparent 82%), 0 0 30px rgba(0, 0, 0, 0.35);
  }
}

.header.nav-panel-header .user-menu .dropdown-menu {
  --bs-dropdown-bg: var(--background-color);
  --bs-dropdown-color: var(--nav-color);
  --bs-dropdown-link-color: var(--nav-color);
  --bs-dropdown-link-hover-color: var(--nav-hover-color);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--nav-color), transparent 90%);
  --bs-dropdown-link-active-color: var(--nav-hover-color);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--nav-color), transparent 85%);
  --bs-dropdown-border-color: color-mix(in srgb, var(--nav-color), transparent 82%);
  --bs-dropdown-divider-bg: color-mix(in srgb, var(--nav-color), transparent 82%);
  --bs-dropdown-header-color: var(--nav-color);
  font-family: var(--nav-font);
}

.header.nav-panel-header.nav-typed .user-menu .dropdown-item {
  font-weight: var(--nav-weight, 400);
  text-transform: var(--nav-transform, none);
  letter-spacing: var(--nav-letter-spacing, normal);
}

/* ── Chrome icons without the icon font (website import wave 11) ──
   The header's menu button, its dropdown chevrons, the scroll-to-top arrow, the phone menu's search link, the account
   icon and Oqtane's search button drew a glyph from Bootstrap Icons (130 KB) or Open Iconic (15 KB), so every page
   downloaded both fonts for six glyphs, a text-only page included. Each is drawn here from its own outline (the same
   Bootstrap Icons glyph, MIT) as a mask in the text color, so a page loads an icon font only when its own content uses
   one. The markup and its classes are unchanged (interop.js still swaps bi-list for bi-x). */
.mobile-nav-toggle.bi::before,
.navmenu .toggle-dropdown.bi::before,
.scroll-top .bi::before,
.navmenu-extras-search .bi::before,
.user-menu .bi::before,
.btn-search .oi::before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--vc-icon) center / contain no-repeat;
  mask: var(--vc-icon) center / contain no-repeat;
}
.mobile-nav-toggle.bi-list { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M47 225Q47 221 49.5 218.5Q52 216 56 216L244 216Q248 216 250.5 218.5Q253 221 253 225Q253 229 250.5 231.5Q248 234 244 234L56 234Q52 234 49.5 231.5Q47 229 47 225ZM47 150Q47 146 49.5 143.5Q52 141 56 141L244 141Q248 141 250.5 143.5Q253 146 253 150Q253 154 250.5 156.5Q248 159 244 159L56 159Q52 159 49.5 156.5Q47 154 47 150ZM47 75Q47 71 49.5 68.5Q52 66 56 66L244 66Q248 66 250.5 68.5Q253 71 253 75Q253 79 250.5 81.5Q248 84 244 84L56 84Q52 84 49.5 81.5Q47 79 47 75Z'/%3E%3C/svg%3E"); }
.mobile-nav-toggle.bi-x { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M87 87Q90 84 94 84Q98 84 100 87L150 137L200 87Q202 84 206 84Q210 84 213 87Q216 90 216 94Q216 98 213 100L163 150L213 200Q216 202 216 206Q216 210 213 213Q210 216 206 216Q202 216 200 213L150 163L100 213Q98 216 94 216Q90 216 87 213Q84 210 84 206Q84 202 87 200L137 150L87 100Q84 98 84 94Q84 90 87 87Z'/%3E%3C/svg%3E"); }
.navmenu .toggle-dropdown.bi-chevron-down { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M31 87Q34 84 37.5 84Q41 84 44 87L150 193L256 87Q259 84 262.5 84Q266 84 269 87Q272 90 272 94Q272 98 269 100L157 213Q154 216 150 216Q146 216 143 213L31 100Q28 98 28 94Q28 90 31 87Z'/%3E%3C/svg%3E"); }
.scroll-top .bi-arrow-up-short { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150 225Q154 225 156.5 222.5Q159 220 159 216L159 107L200 147Q202 150 206 150Q210 150 213 147.5Q216 145 216 141Q216 137 213 134L157 78Q154 75 150 75Q146 75 143 78L87 134Q84 137 84 141Q84 145 87 147.5Q90 150 94 150Q98 150 100 147L141 107L141 216Q141 220 143.5 222.5Q146 225 150 225Z'/%3E%3C/svg%3E"); }
.navmenu-extras-search .bi-search, .btn-search .oi-magnifying-glass { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M220 194Q239 169 243 138.5Q247 108 236 79Q225 50 201 29.5Q177 9 147 2.5Q117 -4 87.5 5Q58 14 35.5 36Q13 58 4.5 87.5Q-4 117 2.5 147Q9 177 29.5 201Q50 225 79 236Q108 247 138.5 243Q169 239 194 220L194 220L268 295Q273 300 281 300Q289 300 294.5 294.5Q300 289 300 281Q300 273 295 268ZM225 122Q225 150 211 173.5Q197 197 173.5 211Q150 225 122 225Q94 225 70 211Q46 197 32.5 173.5Q19 150 19 122Q19 94 32.5 70Q46 46 70 32.5Q94 19 122 19Q150 19 173.5 32.5Q197 46 211 70Q225 94 225 122Z'/%3E%3C/svg%3E"); }
.user-menu .bi-person-circle { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M206 112Q206 136 189.5 152.5Q173 169 150 169Q127 169 110.5 152.5Q94 136 94 112.5Q94 89 110.5 72.5Q127 56 150 56Q173 56 189.5 72.5Q206 89 206 112ZM0 150Q0 109 20 74.5Q40 40 74.5 20Q109 0 150 0Q191 0 225.5 20Q260 40 280 74.5Q300 109 300 150Q300 191 280 225.5Q260 260 225.5 280Q191 300 150 300Q109 300 74.5 280Q40 260 20 225.5Q0 191 0 150ZM150 19Q112 19 80 39Q48 59 31.5 93Q15 127 19.5 164.5Q24 202 47 232Q59 213 81 202Q109 188 150 187.5Q191 187 219 202Q241 213 253 232Q276 202 280.5 164.5Q285 127 268.5 93Q252 59 220 39Q188 19 150 19Z'/%3E%3C/svg%3E"); }
.user-menu .bi-person { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150 150Q173 150 189.5 133.5Q206 117 206 93.5Q206 70 189.5 54Q173 38 150 37.5Q127 37 110.5 53.5Q94 70 94 93.5Q94 117 110.5 133.5Q127 150 150 150ZM188 94Q188 109 177 120Q166 131 150 131Q134 131 123 120Q112 109 112.5 93.5Q113 78 123.5 67Q134 56 150 56Q166 56 177 67Q188 78 188 94ZM263 244Q263 252 258.5 256Q254 260 249 262L244 262L56 262L51 262Q46 260 42 256Q38 252 38 244Q38 231 46 216Q57 196 79 184Q107 169 150 169Q193 169 221 184Q243 196 254 216Q263 231 263 244ZM244 244Q244 238 241 231Q236 221 228 212Q217 202 201 195Q179 187 150 187.5Q121 188 99 195Q83 202 72 212Q64 221 59 231Q56 238 56 244Z'/%3E%3C/svg%3E"); }

/* The venue footer's icons are inline SVG (FooterIcons): set on the first line of the text beside them, as the glyph was. */
.vc-footer .vc-icon {
  flex: 0 0 auto;
  margin-top: 0.3em;
}

.vc-footer__social .vc-icon {
  margin-top: 0;
}

/* Their old footer's line about the venue (wave 11), under the logo. */
.vc-footer__tagline {
  margin: 0 0 1rem;
  max-width: 32ch;
  color: var(--footer-text);
}