/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans",  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",  sans-serif;
  --nav-font: "Poppins",  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 */
  --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 contrast colour, not --default-color,
     or a preset switch would leave dark text on a dark band. An operator who sets an
     explicit Footer colour in Theme Settings overrides both. */
  --footer-bg: var(--header-bg);
  --footer-text: 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(--contrast-color);
  --heading-color: var(--contrast-color);
  --surface-color: color-mix(in srgb, var(--accent-color), black 12%);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
.accent-background a:not(.btn) { color: var(--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(--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%);
}

.btn-primary {
  --bs-btn-color: var(--contrast-color);
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color), black 12%);
  --bs-btn-focus-shadow-rgb: 0,0,0;
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent-color), black 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color), black 20%);
  --bs-btn-disabled-color: var(--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 {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: 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(--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(--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(--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(--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(--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(--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(--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. */
.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 {
  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 {
  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(--contrast-color);
  background: 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(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

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

  .header .navmenu {
    order: 3;
  }
}

/* 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);
  }
}

/* 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(--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(--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;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

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

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--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;
  }
}

/*--------------------------------------------------------------
# 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(--contrast-color);
  background: 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(--contrast-color);
  background: color-mix(in srgb, 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-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-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-color);
  color: var(--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-color);
  border: 2px solid var(--accent-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(--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(--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-color);
  color: var(--contrast-color);
}

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

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--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-color) !important;
  color: var(--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-color) !important;
  color: var(--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); }

.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-color);
    border-color: var(--accent-color);
    color: var(--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-color), #000 15%);
    border-color: color-mix(in srgb, var(--accent-color), #000 20%);
    color: var(--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-color);
    border-color: 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-color);
    border-color: var(--accent-color);
    color: var(--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;
  }
}

/*--------------------------------------------------------------
# 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-color);
  border-color: var(--accent-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(--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. */
.main :where(table, pre) {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

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