/* ======================================== */
/* GLOBX - BASE STYLES                     */
/* ======================================== */

/* Google Fonts Import */
/* @import removed  Google Fonts now loaded via <link rel="preload"> in main.php
   for non-blocking, parallel fetch with font-display:swap. */

/* 1. A Modern CSS Reset & Box-Sizing */
/* ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. Define Global Variables */
/* ---------------------------------------- */
:root {
  /* Project Colors */
  --primary-lightest: hsla(210, 20%, 98%, 1);
  --primary-light: hsla(206, 100%, 95%, 1);
  --primary-light-2: hsla(196, 100%, 81%, 1);
  --primary-light-3: hsla(24, 100%, 99%, 1);
  --primary: hsla(199, 74%, 39%, 1);
  --primary-hover: hsla(199, 74%, 32%, 1);
  --primary-dark: hsla(199, 100%, 15%, 1);
  --primary-dark-2: hsla(195, 100%, 24%, 1);
  --secondary: hsla(25, 100%, 68%, 1);
  --secondary-hover: hsla(25, 100%, 63%, 1);
  --text-dark: hsla(0, 0%, 7%, 1);
  --text-dark-2: hsla(0, 0%, 60%, 1);
  --text-dark-3: hsla(0, 0%, 50%, 1);
  --text-light: hsla(0, 0%, 100%, 1);
  --text-light-2: hsla(0, 0%, 100%, 0.8);
  --text-light-3: hsla(0, 0%, 97%, 1);
  --text-light-4: hsla(0, 0%, 90%, 1);

  /* Fonts */
  --font-primary: 'Poppins Medium', 'Poppins', 'Helvetica', 'Arial', sans-serif;
  --font-headings: 'Poppins SemiBold', 'Poppins', 'Helvetica', 'Arial', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Spacing (based on 1rem = 16px) */
  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.5rem;
  /* 8px */
  --spacing-3: 1rem;
  /* 16px */
  --spacing-4: 2rem;
  /* 32px */
  --spacing-5: 4rem;
  /* 64px */
  --section-width: 1220px;
}

html {
  font-size: 18px;
}

/* 3. Utility Classes */
/* ---------------------------------------- */
.primary-light {
  background-color: hsla(206, 100%, 95%, 1) !important;
}

.primary {
  background-color: hsla(199, 74%, 39%, 1) !important;
}

.primary-dark {
  background-color: hsla(199, 100%, 15%, 1) !important;
}

.secondary {
  background-color: hsla(25, 100%, 68%, 1) !important;
}

.text-dark {
  color: hsla(0, 0%, 7%, 1) !important;
}

.text-light {
  color: hsla(0, 0%, 100%, 1) !important;
}

.text-primary {
  color: hsla(199, 74%, 39%, 1) !important;
}

/* Pull <main> up behind the absolutely-positioned navbar so the hero
   background image starts at the very top of the viewport (the navbar is
   transparent on the home page). Was previously only ≤600px which left a
   white strip above the hero on tablet-portrait widths (601–991px). */
@media screen and (max-width: 991.98px) {

  /* Only pages with the TRANSPARENT navbar (home, about-us, services, etc.)
     need <main> pulled up behind the navbar. Products and other pages that
     use body.gx-nav-fixed-solid already reserve padding-top for the solid
     header  the negative margin would shove their content under it. */
  body:not(.gx-nav-fixed-solid) main {
    margin-top: -102px !important;
  }
}

/* ──────────────────────────────────────────────
   Navbar  enforce a consistent vertical baseline across all items
   (logo · nav links · search pill · ellipsis · hamburger). Bootstrap's
   default flex-align is `stretch`; switching to center ensures every
   element of differing height sits on the same horizontal line.
   ────────────────────────────────────────────── */
.gx-navbar { display: flex; align-items: center; }
.gx-navbar > .container,
.gx-navbar .container { display: flex; align-items: center; flex-wrap: nowrap; }
.gx-navbar .navbar-collapse { align-items: center; }
.gx-navbar .gx-nav-links { align-items: center; margin: 0; }
.gx-navbar .navbar-brand { align-self: center; }

/* Sidebar carousel  fade animation overlap fix.
   Owl's animateOut: fadeOut + animateIn: fadeIn briefly stacks the outgoing
   and incoming slides on top of each other, which makes BOTH labels readable
   simultaneously. Force outgoing slide below incoming via z-index. */
.gx-sidebar-carousel.owl-loaded .owl-item {
  position: relative;
}
.gx-sidebar-carousel.owl-loaded .owl-item.animated.fadeOut {
  z-index: 0;
  pointer-events: none;
}
.gx-sidebar-carousel.owl-loaded .owl-item.animated.fadeIn {
  z-index: 1;
}

.section-width {
  max-width: var(--section-width);
}

/* 4. Set Base Body & Typography Styles */
/* ---------------------------------------- */
body {
  font-family: var(--font-primary);
  color: var(--text-dark);
  /* background-color: var(--primary-light); */
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Aspect-ratio preservation  ONLY for images WITHOUT explicit width/height
   attributes. This prevents the global rule from overriding inline dimensions
   on logos, flags, and other UI images that need exact sizes. */
img:not([width]):not([height]) {
  height: auto;
}

/* CLS prevention  reserve space for images that don't yet have width/height attributes */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Reduce paint cost on long content (Lighthouse: forced reflow) */
.gx-related-card,
.gx-featured-card,
.gx-hero-slide,
.gx-marketing-slide,
section {
  contain: content;
}
.gx-testimonial-pagination-dot{
  margin-top: 40px !important;
}

/* ════════════════════════════════════════════════════════════════
   CLS PREVENTION  reserve space BEFORE Owl Carousel JS initializes.
   Loaded synchronously (base.css) so applies on every page.
═══════════════════════════════════════════════════════════════ */

/* All carousels  reserve height so layout doesn't shift when JS measures */
.gx-hot-part-numbers-carousel,
.gx-related-carousel,
.gx-featured-carousel {
  min-height: 280px;
  contain: layout paint;
}

.gx-hero-carousel {
  min-height: 270px;
  contain: layout paint;
}

.gx-marketing-carousel {
  min-height: 350px;
  contain: layout paint;
}

/* Each card has stable min-height even before Owl measures it */
.gx-hot-part-numbers-carousel .gx-related-card,
.gx-related-carousel .gx-related-card,
.gx-featured-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

/* Manufacturer marquee / scroll track  fixed height matches partner-logo */
.gx-manufacturers-scroll-container {
  min-height: 110px;
  contain: layout paint;
}

/* Pre-Owl placeholder  ONLY for product / featured / hot-part carousels.
   Hero + sidebar carousels MUST keep their content visible (H1 + categories)
   so users see real content immediately, not an empty grey box. */
.gx-hot-part-numbers-carousel:not(.owl-loaded),
.gx-related-carousel:not(.owl-loaded),
.gx-featured-carousel:not(.owl-loaded) {
  display: block;
  visibility: visible;
  min-height: 280px;
  background: linear-gradient(90deg, #f5f5f5 0%, #fafafa 50%, #f5f5f5 100%);
  background-size: 200% 100%;
  animation: cls-shimmer 1.5s linear infinite;
  border-radius: 8px;
}

.gx-hot-part-numbers-carousel:not(.owl-loaded)>*,
.gx-related-carousel:not(.owl-loaded)>*,
.gx-featured-carousel:not(.owl-loaded)>* {
  display: none;
}

/* Hero + sidebar carousels  keep content visible during Owl init (no shimmer) */
.gx-hero-carousel:not(.owl-loaded),
.gx-sidebar-carousel:not(.owl-loaded),
.gx-marketing-carousel:not(.owl-loaded) {
  display: block;
  visibility: visible;
}

.gx-hero-carousel:not(.owl-loaded)>.gx-hero-slide:not(:first-child),
.gx-sidebar-carousel:not(.owl-loaded)>.gx-sidebar-slide:not(:first-child),
.gx-marketing-carousel:not(.owl-loaded)>.gx-marketing-slide:not(:first-child) {
  /* Hide all but the first slide before Owl initialises  prevents stacking */
  display: none;
}

@keyframes cls-shimmer {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: var(--spacing-2);
}

.btn:hover {
  background-color: inherit;
  border-color: inherit;
}

/* 5. Top Bar */
/* ---------------------------------------- */
.gx-top-bar {
  background: var(--primary-dark);
  color: var(--secondary);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: .25rem 0;
  text-align: center;
}

.gx-top-bar-link {
  color: var(--primary-light);
  text-decoration: underline;
}

.gx-top-bar-link:hover {
  color: var(--secondary);
}

/* 6. Navbar/Header */
/* ---------------------------------------- */
.gx-navbar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  z-index: 20;
  position: absolute;
  /* top: 1.5rem; */
  left: 0;
  width: 100%;
}

/* Sticky Navigation Bar - Always uses application navbar styles */
#gxStickyNav {
  position: fixed !important;
  top: -1px !important;
  left: 0;
  width: 100%;
  z-index: 1000 !important;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;

  /* Force application navbar styling regardless of parent context */
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04) !important;
}

#gxStickyNav.gx-navbar-sticky--visible {
  transform: translateY(0);
}

/* Ensure sticky navbar always has application navbar link colors */
#gxStickyNav .gx-nav-links .nav-link {
  color: #333;
}

#gxStickyNav .gx-nav-links .nav-link.gx-nav-active,
.gx-nav-links .nav-item.active .nav-link {
  color: var(--primary) !important;
}

#gxStickyNav .gx-nav-links .nav-link:hover,
#gxStickyNav .gx-nav-links .nav-link:focus {
  color: var(--primary);
}

/* Ensure sticky navbar has application navbar chevron colors */
#gxStickyNav .gx-chevron svg {
  stroke: #333;
}

/* Ensure sticky navbar has application navbar toggler icon */
#gxStickyNav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile responsive styles for sticky navbar */
@media (max-width: 991.98px) {
  #gxStickyNav {
    background: #fff !important;
  }

  #gxStickyNav .navbar-collapse {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
}

/* ── Logo swap based on scroll state ──
   Default (top of page, transparent navbar): WHITE logo visible
   Scrolled (body.has-scrolled, solid navbar):  COLORED logo visible
   Sticky nav (always solid): COLORED logo visible
*/
.gx-navbar .logo--white {
  display: inline-block;
}

.gx-navbar .logo--colored {
  display: none;
}

body.has-scrolled .gx-navbar .logo--white {
  display: none;
}

body.has-scrolled .gx-navbar .logo--colored {
  display: inline-block;
}

#gxStickyNav .logo--white {
  display: none;
}

#gxStickyNav .logo--colored {
  display: inline-block;
}

/* Mobile: always show colored logo (mobile navbar is always solid white) */
@media (max-width: 991.98px) {
  .gx-navbar .logo--white {
    display: none;
  }

  .gx-navbar .logo--colored {
    display: inline-block;
  }
}

/* ── Nav links / flag / chevron  colour adapts to scroll state ──
   IMPORTANT: white-text rule applies ONLY on desktop (>=992px).
   On mobile, the drawer has its own white background  links must
   ALWAYS be dark (regardless of scroll state) so they're readable. */
@media (min-width: 992px) {
  body:not(.has-scrolled) .gx-navbar .gx-nav-links .nav-link {
    color: #fff !important;
  }

  body:not(.has-scrolled) .gx-navbar .gx-nav-links .nav-link.active,
  body:not(.has-scrolled) .gx-navbar .gx-nav-links .nav-link.gx-nav-active {
    color: #fff !important;
    text-decoration-color: #fff !important;
  }
}

body:not(.has-scrolled) .gx-navbar .gx-flag-chevron,
body:not(.has-scrolled) .gx-navbar .gx-chevron svg {
  color: #fff !important;
  stroke: #fff !important;
  background-color: transparent !important;
}

body:not(.has-scrolled) .gx-navbar .gx-flag-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

body:not(.has-scrolled) .gx-navbar .gx-account-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

body:not(.has-scrolled) .gx-navbar .gx-account-btn i,
body:not(.has-scrolled) .gx-navbar .gx-account-btn span {
  color: #fff !important;
}

body:not(.has-scrolled) .gx-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

body:not(.has-scrolled) .gx-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* SCROLLED (solid navbar): dark text  restored */
body.has-scrolled .gx-navbar .gx-nav-links .nav-link {
  color: #333 !important;
}

body.has-scrolled .gx-navbar .gx-nav-links .nav-link.active,
body.has-scrolled .gx-navbar .gx-nav-links .nav-link.gx-nav-active {
  color: var(--primary, #007bff) !important;
}


#navbarNav,
#navbarNavSticky {
  /* Was 3rem  pushed the first nav-link ("Home") far from the logo and
     misaligned with the hero content. 0.5rem keeps a tasteful gap from the
     logo while letting nav links sit roughly where the hero copy starts. */
  padding-left: 0.5rem;
}
/* Remove Bootstrap's default 1rem right-margin on navbar-brand so the Home
   link sits closer to the logo, NOT 64px away. */
.gx-navbar .navbar-brand.gx-logo {
  margin-right: 0.5rem;
}
/* Right-side toolbox (search pill + ellipsis) flush to the container's right
   edge for symmetry with the logo on the left. */
.gx-navbar .gx-header-search { margin-right: 0; }
.gx-navbar .gx-tools-menu { margin-right: 0; }

.gx-logo img {
  height: 48px;
  width: auto;
}

/* Shrink the logo on mobile / tablet so the header still fits the search
   pill + ellipsis + hamburger when the search input expands on focus. */
@media (max-width: 991.98px) {
  /* Strip Bootstrap's default `.navbar-brand` padding (which Bootstrap sets to
     `0.3125rem 0` plus margin-right 1rem) so the logo sits flush with the
     left edge and aligns vertically with the icon buttons. */

  .navbar>.container {
    display: flex !important;
    align-items: center !important;
  }

  .navbar-brand.gx-logo {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
  }

  .gx-logo img {
    width: 45px !important;
    height: auto !important;
  }
}


.gx-nav-links .nav-link {
  color: var(--text-light-2);
  font-weight: 400;
  /* Smaller, tighter type so longer translations (e.g. German) don't break
     the row. `white-space: nowrap` keeps each link on a single line. */
  font-size: 0.92rem;
  margin: 0 0.35rem;
  position: relative;
  padding: 0.5rem 0.2rem;
  width: 100%;
  white-space: nowrap;
}

@media (min-width: 1290px) {
  /* Wider desktops can afford a slightly more comfortable size */
  .gx-nav-links .nav-link {
    font-size: 0.98rem;
    margin: 0 0.5rem;
  }
}

@media (min-width: 992px) and (max-width: 1290px) {

  /* Medium desktops  tightest type to fit long German labels without wrap */
  .gx-nav-links .nav-link {
    font-size: 0.82rem;
    margin: 0 0.25rem;
  }

  #navbarNav,
  #navbarNavSticky {
    padding-left: 0;
  }
}

.gx-nav-links .nav-link span {
  font-size: 0.8em;
}

.gx-nav-links .nav-link:hover,
.gx-nav-links .nav-link:focus {
  color: var(--secondary);
}

.gx-flag-selector {
  margin-left: 0rem;
}

/* ──────────────────────────────────────────────
   Logged-in admin tools menu  single ellipsis dropdown holding both
   language switcher and account links so the header stays compact.
   ────────────────────────────────────────────── */
.gx-tools-btn {
  width: 40px;
  height: 40px;
  /* `!important` overrides Bootstrap's default .btn padding which would push the
     icon glyph toward the top-left and break centering. */
  padding: 0 !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-light-2, #333);
  font-size: 1.05rem;
  line-height: 1;
  /* Vertical alignment fix: align baseline of the inline-flex box to the middle
     so it doesn't sit on the text baseline of surrounding nav items. */
  vertical-align: middle;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.gx-tools-btn>i {
  display: block;
  line-height: 1;
  /* FontAwesome glyphs have intrinsic vertical metrics  flex centering plus
     line-height:1 puts the dots dead-center in the circle. */
}

.gx-tools-btn:hover,
.gx-tools-btn:focus {
  color: var(--secondary, #007bff);
  background: rgba(0, 0, 0, 0.05);
}

body:not(.has-scrolled) .gx-navbar .gx-tools-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

body:not(.has-scrolled) .gx-navbar .gx-tools-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.gx-tools-menu__list {
  min-width: 220px;
  padding: 0.4rem 0;
}

/* Language-switcher button  shows the currently selected flag inside the
   same square 40×40 button used for the old ⋯ ellipsis. */
.gx-lang-btn {
  /* Re-assert the flex centering in case Bootstrap or another rule pushed
     any inherited padding/text-align to the button and offset the flag. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden;
  /* No text node should ever live inside this button  zero out font metrics
     that could create phantom baseline space inside the flex container. */
  font-size: 0;
  line-height: 0;
}
.gx-lang-btn__flag {
  width: 22px;
  height: 16px;
  display: block;
  margin: 0;            /* nothing pushing it off-center */
  flex: 0 0 auto;       /* don't let flex grow/shrink the flag */
  border-radius: 2px;
  /* Subtle border helps the white parts of flags (e.g. UK) read against the
     transparent / scrolled navbar backgrounds. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}
body:not(.has-scrolled) .gx-navbar .gx-lang-btn__flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.gx-tools-menu__list .dropdown-header {
  padding: 0.4rem 1rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.gx-tools-menu__list .dropdown-item {
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
}

.gx-tools-menu__list .dropdown-item img {
  border-radius: 2px;
}

/* ──────────────────────────────────────────────
   Header product search  mobile icon link + desktop inline search box.
   ────────────────────────────────────────────── */

/* Mobile: small circular icon (tight space  keeps a single tap target) */
.gx-search-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-light-2, #333);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.gx-search-toggle:hover,
.gx-search-toggle:focus {
  color: var(--secondary, #007bff);
  background: rgba(0, 0, 0, 0.05);
}

body:not(.has-scrolled) .gx-navbar .gx-search-toggle {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

body:not(.has-scrolled) .gx-navbar .gx-search-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Pill-shaped inline search box that sits inside the navbar. Used on both
   desktop (≥992px) and mobile  sized via .gx-header-search--mobile variant.
   Sized to align vertically with the flag and account buttons (~40px tall). */
.gx-header-search {
  display: flex;
  /* keep the icon/input/button on a single horizontal line */
  align-items: center;
  height: 40px;
  width: 240px;
  padding: 0 0.35rem 0 0.85rem;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  gap: 0.5rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, width .2s ease;
  margin: 0;
}

.gx-header-search:focus-within {
  width: 300px;
  background: #fff;
  border-color: var(--primary, #1a7fae);
  box-shadow: 0 0 0 3px rgba(26, 127, 174, 0.15);
}

@media (min-width: 992px) and (max-width: 1290px) {
  .gx-header-search {
    width: 180px;
  }

  .gx-header-search:focus-within {
    width: 220px;
  }
}

/* Mobile variant  slimmer pill that fits in the tight mobile-tools row alongside
   the ellipsis menu and hamburger. */
.gx-header-search--mobile {
  height: 36px;
  width: 150px;
  padding: 0 0.25rem 0 0.7rem;
}

.gx-header-search--mobile:focus-within {
  width: 200px;
}

.gx-header-search--mobile .gx-header-search__input {
  font-size: 0.85rem;
}

.gx-header-search--mobile .gx-header-search__submit {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

@media (max-width: 420px) {
   .navbar>.container {
    display: flex !important;
    align-items: center !important;
  }
  .gx-header-search--mobile {
    width: 120px;
  }

  .gx-header-search--mobile:focus-within {
    width: 170px;
  }

  .gx-header-search--mobile .gx-header-search__input::placeholder {
    color: transparent;
  }
}

.gx-header-search__icon {
  color: #888;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.gx-header-search__input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-dark, #333);
  padding: 0;
  min-width: 0;
  /* allow flex shrink so submit button is never clipped */
}

.gx-header-search__input::placeholder {
  color: #888;
  opacity: 1;
}

.gx-header-search__submit {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0;
  background: var(--primary, #1a7fae);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}

.gx-header-search__submit:hover {
  background: var(--primary-hover, #155f82);
}

.gx-header-search__submit:active {
  transform: scale(0.95);
}

/* Transparent navbar (over hero)  frosted-white style so it reads on dark bg */
body:not(.has-scrolled) .gx-navbar .gx-header-search {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body:not(.has-scrolled) .gx-navbar .gx-header-search:focus-within {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.has-scrolled) .gx-navbar .gx-header-search .gx-header-search__icon {
  color: rgba(255, 255, 255, 0.85);
}

body:not(.has-scrolled) .gx-navbar .gx-header-search:focus-within .gx-header-search__icon {
  color: #888;
}

body:not(.has-scrolled) .gx-navbar .gx-header-search__input {
  color: #fff;
}

body:not(.has-scrolled) .gx-navbar .gx-header-search__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

body:not(.has-scrolled) .gx-navbar .gx-header-search:focus-within .gx-header-search__input,
body:not(.has-scrolled) .gx-navbar .gx-header-search:focus-within .gx-header-search__input::placeholder {
  color: var(--text-dark, #333);
}

/* Brief pulse on the header search box when arrived via the header search icon */
@keyframes gxSearchPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.35);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(0, 123, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.gx-search-section.gx-search-highlighted .gx-search-input-group {
  animation: gxSearchPulse 1.2s ease-out 2;
  border-radius: 6px;
}

.gx-flag-btn {
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 500;
}

.gx-flag-btn:active {
  background: transparent;
}

/* Flag images  explicit sizes so they never grow with global img rules */
.gx-flag-btn img,
.gx-flag-btn .selected-flag {
  width: auto;
  height: 20px;
  max-width: 30px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
}

/* Mobile flag selector  compact pill in header.
   Default (transparent navbar): white frosted pill on dark hero.
   Scrolled (solid navbar):       white pill with subtle border. */
.gx-flag-selector--mobile .gx-flag-btn {
  padding: 0.35rem 0.6rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.has-scrolled .gx-flag-selector--mobile .gx-flag-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gx-flag-selector--mobile .dropdown-menu {
  min-width: 140px;
  margin-top: 0.5rem;
}

.gx-mobile-tools {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
}

.gx-mobile-tools .navbar-toggler {
  /* Match the .gx-tools-btn ellipsis: 40x40 rounded square, same border treatment */
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease;
}

.gx-mobile-tools .navbar-toggler:focus {
  box-shadow: none;
}

/* Constrain the burger icon so the lines stay visually centered in the circle */
.gx-mobile-tools .navbar-toggler .navbar-toggler-icon {
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}

/* Transparent navbar (over hero): frosted-white circle, same as ellipsis button */
body:not(.has-scrolled) .gx-navbar .gx-mobile-tools .navbar-toggler {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

body:not(.has-scrolled) .gx-navbar .gx-mobile-tools .navbar-toggler:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Scrolled / solid navbar: subtle gray hover, matches .gx-tools-btn */
body.has-scrolled .gx-mobile-tools .navbar-toggler {
  border-color: transparent;
}

body.has-scrolled .gx-mobile-tools .navbar-toggler:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Hide the desktop-only toggler on small screens (we use the mobile-tools toggler) */
@media (max-width: 991.98px) {
  .navbar-toggler.d-none.d-lg-inline-block {
    display: none !important;
  }
}

.lang-select img {
  width: auto;
  height: 18px;
  max-width: 28px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 0.5rem;
}

.lang-select {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Navbar logo  never larger than design intent */
.navbar-brand img,
.gx-logo img {
  height: 48px;
  width: auto;
  max-height: 48px;
  display: block;
}

.gx-flag-chevron {
  font-size: 0.8em;
  color: #333;
  background-color: white;
  padding: 0rem 0.2rem;
}

.gx-chevron svg {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* 7. Responsive Design - Global */
/* ---------------------------------------- */
@media (max-width: 991.98px) {

  /* Navbar & Header Styles */
  .gx-navbar .container,
  .gx-navbar .container-fluid {
    flex-direction: row !important;
    align-items: flex-start !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gx-logo img {
    height: 36px;
  }

  .gx-nav-links {
    width: 100%;
    text-align: left;
    margin-top: 0.5rem;
  }

  .gx-nav-links .nav-link {
    font-size: 1rem;
    margin: 0.2rem 0.5rem;
    padding: 0.5rem 0;
  }

  .gx-flag-selector {
    margin-left: 0;
    margin-top: 0.5rem;
    align-self: flex-end;
  }

  /* Mobile Navigation Collapse */
  .navbar-collapse {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    background: rgba(30, 30, 30, 0.98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border-radius: 0 0 1rem 1rem;
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
    max-width: 320px;
    position: absolute;
    top: 80%;
    right: 0;
    left: auto;
    z-index: 1001;
  }

  .gx-nav-links {
    flex-direction: column !important;
    width: 100%;
    text-align: left;
    margin-top: 0;
  }

  .gx-nav-links .nav-link {
    font-size: 1.1rem;
    margin: 0.2rem 0;
    padding: 0.7rem 0;
    width: 10rem;
  }

  .gx-flag-selector {
    margin-left: 0;
    margin-top: 0rem;
    align-self: flex-start;
  }

  /* Top Bar Mobile */
  .gx-top-bar {
    display: none !important;
  }

  .gx-navbar {
    top: 0rem;
    padding: 0 !important;
    min-height: auto;
  }

  /* Minimize navbar height when collapsed on mobile */
  .gx-navbar .navbar-collapse:not(.show) {
    display: none !important;
  }

  /* Ensure navbar doesn't take unnecessary space when collapsed */
  .gx-navbar .container {
    min-height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 1300px) {
  #navbarNav {
    padding-right: 0rem;
  }
}

@media (min-width: 768px) {
  /* Desktop styles */
}

@media (min-width: 992px) {

  /* Desktop styles */
  .gx-why-work-separator {
    width: clamp(200px, 50%, 600px);
    justify-self: end;
  }

  /* Desktop-only clip-path effects */
  .gx-reveal-section.gx-revealed .gx-reveal-content {
    clip-path: polygon(0% 0%, 95% 0%, 100% 10.5%, 100% 100%, 0% 100%);
  }
}

@media (min-width: 1200px) {
  /* Styles for XL screens */
}

/* 8. Bootstrap Overrides */
/* ---------------------------------------- */
.navbar-toggler {
  border: none;
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}

/* Scroll-triggered reveal animations */
.gx-reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gx-reveal-section.gx-revealed {
  opacity: 1;
  transform: translateY(0);
}

.gx-reveal-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}

.gx-reveal-section.gx-revealed .gx-reveal-content {
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
}

.gx-reveal-delay-1 {
  transition-delay: 0.1s;
}

.gx-reveal-delay-2 {
  transition-delay: 0.2s;
}

.gx-reveal-delay-3 {
  transition-delay: 0.3s;
}

.gx-reveal-delay-4 {
  transition-delay: 0.4s;
}

/* Staggered animations for grid items */
.gx-reveal-grid-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.gx-reveal-section.gx-revealed .gx-reveal-grid-item {
  opacity: 1;
  transform: translateY(0);
}

.gx-reveal-grid-item:nth-child(1) {
  transition-delay: 0.1s;
}

.gx-reveal-grid-item:nth-child(2) {
  transition-delay: 0.2s;
}

.gx-reveal-grid-item:nth-child(3) {
  transition-delay: 0.3s;
}

.gx-reveal-grid-item:nth-child(4) {
  transition-delay: 0.4s;
}

.gx-reveal-grid-item:nth-child(5) {
  transition-delay: 0.5s;
}

.gx-reveal-grid-item:nth-child(6) {
  transition-delay: 0.6s;
}

/* Special animations for specific elements */
.gx-reveal-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gx-reveal-section.gx-revealed .gx-reveal-slide-left {
  opacity: 1;
  transform: translateX(0);
}

.gx-reveal-slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gx-reveal-section.gx-revealed .gx-reveal-slide-right {
  opacity: 1;
  transform: translateX(0);
}

.gx-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.gx-reveal-section.gx-revealed .gx-reveal-scale {
  opacity: 1;
  transform: scale(1);
}

@keyframes gx-slide-in-right-fg {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.gx-reveal-slide-right-fg {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

.gx-reveal-section.gx-revealed .gx-reveal-slide-right-fg {
  opacity: 1;
  transform: translateX(0);
  animation: gx-slide-in-right-fg 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .gx-reveal-section,
  .gx-reveal-content,
  .gx-reveal-grid-item,
  .gx-reveal-slide-left,
  .gx-reveal-slide-right,
  .gx-reveal-scale,
  .gx-reveal-slide-right-fg,
  .gx-reveal-section.gx-revealed .gx-reveal-slide-right-fg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: var(--section-width);
  }

  .navbar .container {
    max-width: 1450px;
  }
}

/* Sticky Navigation Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Ensure sticky navigation is initially hidden */
#gxStickyNav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}