/* ================================================================
   STREAMLINED CSS - Auto-Generated
   Classes: 162 | IDs: 39 | Data Attrs: 5
   ================================================================ */


============================================================

============================================================

@charset "UTF-8";

/* =================== FONT FAMILY ===================  */

@font-face {
    font-family: OladraFont;
    src: url('https://oladra.com/webfonts/oladrafont.woff2') format('woff2'),
		url('https://oladra.com/webfonts/oladrafont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-007A;
}


@font-face {
  font-family: SatoshiLight;
  src: url('https://oladra.com/webfonts/Satoshi-Light.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-Light.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: SatoshiLightItalic;
  src: url('https://oladra.com/webfonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: SatoshiRegular;
  src: url('https://oladra.com/webfonts/Satoshi-Regular.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: SatoshiRegularItalic;
  src: url('https://oladra.com/webfonts/Satoshi-RegularItalic.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: SatoshiMedium;
  src: url('https://oladra.com/webfonts/Satoshi-Medium.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: SatoshiMediumItalic;
  src: url('https://oladra.com/webfonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: SatoshiBold;
  src: url('https://oladra.com/webfonts/Satoshi-Bold.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: SatoshiBoldItalic;
  src: url('https://oladra.com/webfonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: SatoshiBlack;
  src: url('https://oladra.com/webfonts/Satoshi-Black.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: SatoshiBlackItalic;
  src: url('https://oladra.com/webfonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('https://oladra.com/webfonts/Satoshi-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


@font-face {
    font-family: SatoshiVariable;
    src: url('https://oladra.com/webfonts/Satoshi-Variable.woff2') format('woff2'),
         url('https://oladra.com/webfonts/Satoshi-Variable.woff') format('woff');
  font-weight: 1 900; /* Supports full range of weights */
  font-style: normal;
  font-display: swap;
}


@font-face {
    font-family: SatoshiVariableItalic;
    src: url('https://oladra.com/webfonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('https://oladra.com/webfonts/Satoshi-VariableItalic.woff') format('woff');
  font-weight: 1 900; /* Supports full range of weights */
  font-style: normal;
  font-display: swap;
}


@font-face {
    font-family: Playfair;
    src: url('https://oladra.com/webfonts/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
         url('https://oladra.com/webfonts/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: 1 900; /* Supports full range of weights */
  font-style: normal;
  font-display: swap;
}


@font-face {
    font-family: PlayfairItalic;
    src: url('https://oladra.com/webfonts/playfairdisplay-italic-variablefont_wght-webfont.woff2') format('woff2'),
         url('https://oladra.com/webfonts/playfairdisplay-italic-variablefont_wght-webfont.woff') format('woff');
  font-weight: 1 900; /* Supports full range of weights */
  font-style: normal;
  font-display: swap;
}


/* ============= HEADINGS ================ */

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

h1 {
  font-size: var(--h1);
  line-height: var(--h1l);
}

.h1 {
  font-size: var(--h1);
  line-height: var(--h1l);
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2l);
}

.h2 {
  font-size: var(--h2);
  line-height: var(--h2l);
}

h3 {
  font-size: var(--h3);
  line-height: var(--h3l);
}

.h3 {
  font-size: var(--h3);
  line-height: var(--h3l);
}

h4 {
  font-size: var(--h4);
  line-height: var(--h4l);
}

.h4 {
  font-size: var(--h4);
  line-height: var(--h4l);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
    color: var(--heading);
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.8rem;
}

h1.darktext,
h2.darktext,
h3.darktext,
h4.darktext {
  font-family: var(--font-heading);
    color: var(--dark-text);
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.8rem;
}

.heading {
  color: var(--heading);
}

/* ============= PARAGRAPHS & LISTS ================ */

p {
  font-family: var(--font-body);
    color: var(--body);
    margin-top: 0;
    margin-bottom: 1.6em;
    line-height: 1.6em; 
}

p.compressed {
  margin-bottom: 0.1em;
}

p.darktext {
  color: var(--dark-body)!important;
}

.conditional-break {
  display: inline;
}

.conditional-break.is-active {
  display: block;
    height: 0.1em;
}

.light {
  font-family: var(--font-light)!important;
    font-weight: 100;
}

.regular {
  font-family: var(--font-regular)!important;
}

.medium {
  font-family: var(--font-medium)!important;
}

.body-text {
  color: var(--body);
}

.p0,
.p0 ul,
.p0 ol,
.p0 li {
  font-size: var(--p0);
/*  line-height: var(--p0l); */
  font-family: var(--font-body);
  color: var(--body);
}

.p1,
.p1 ul,
.p1 ol,
.p1 li {
  font-size: var(--p1);
/*  line-height: var(--p1l); */
  font-family: var(--font-body);
  color: var(--body);
}

.p2,
.p2 ul,
.p2 ol,
.p2 li {
  font-size: var(--p2);
/*  line-height: var(--p2l); */
  font-family: var(--font-body);
  color: var(--body);
}

.p3,
.p3 ul,
.p3 ol,
.p3 li {
  font-size: var(--p3);
  line-height: var(--p3l);
  font-family: var(--font-body);
  color: var(--body);
}

.p4,
.p4 ul,
.p4 ol,
.p4 li {
  font-size: var(--p4);
  line-height: var(--p4l);
  font-family: var(--font-body);
  color: var(--body);
}

ul, 
ol {
  padding-left: 1.5em;   /* Indent list */
  margin-bottom: 1em;    /* Space below list */
  list-style-position: outside;
}

.heading {
  color: var(--heading);
}

/* Makes an entire section a link - add card-link as section class and ass link with class stretched-link inside the section */

.card-link {
  position: relative;
}

.card-link > a.stretched-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;            /* important */
  cursor: pointer;
}

.card-link .row {
  position: relative;
  z-index: 1;
}

.card-link a:not(.stretched-link),
.card-link button,
.card-link input,
.card-link select,
.card-link textarea,
.card-link label {
  position: relative;
  z-index: 3;
}

/* ============= MUTED TEXT ================ */

h1.muted,
h2.muted,
h3.muted,
h4.muted,
p.muted,
.muted {
  color: var(--muted);
}

h1.thin,
h2.thin,
h3.thin,
h4.thin,
p.thin,
.thin {
  font-weight: 100;
}


/* ============= HYPERLINKS ================ */

a {
  color: var(--body);
  font-family: var(--font-regular);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--body-hover);
}

a:active {
  color: var(--body-hover);
}

a.primary {
  color: var(--brand);
  font-family: var(--font-regular);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.primary:hover {
  color: var(--primary-light);
}

a.primary:active {
  color: var(--primary-light);
}

a.muted {
  color: var(--muted);
  font-family: var(--font-regular);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.muted:hover {
  color: var(--body);
}

a.muted:active {
  color: var(--body);
}

button.muted {
  color: var(--muted);
  font-family: var(--font-regular);
  text-decoration: none;
  transition: color 0.2s ease;
}

button.muted:hover {
  color: var(--muted);
}

button.muted:active {
  color: var(--muted);
}

a.cta {
  color: var(--luxe);
}

a.cta:hover {
  color: var(--luxe-hover);
}

a.cta:active {
  color: var(--luxe-hover);
}

a.luxe {
  color: var(--luxe);
  font-family: var(--font-regular);
  font-size: var(--p2);
}

a.luxe:hover {
  color: var(--luxe-hover);
}

a.luxe:active {
  color: var(--luxe-hover);
}

a.luxe1 {
  color: var(--luxe);
  font-family: var(--font-medium);
  font-size: var(--p1);
}

a.luxe1:hover {
  color: var(--luxe-hover);
    text-decoration: underline solid var(--luxe-hover) 1px;
    text-underline-offset: 15px;
}

a.luxe1:active {
  color: var(--luxe-hover);
    text-decoration: underline solid var(--luxe-hover) 1px;
    text-underline-offset: 15px;
}

a.luxe2 {
  color: var(--body);
    text-decoration: underline solid var(--luxe-hover) 1px;
    text-underline-offset: 5px;
}

a.luxe2:hover {
  color: var(--luxe-hover);
}

a.luxe2:active {
  color: var(--luxe-hover);
}


.naked {
  text-decoration: none ;
}

.naked a {
  text-decoration: none ;
}

.naked a:hover {
  text-decoration: none ;
}

/*  ===================  BACKGROUNDS  ========================  */

/* For every <section> or <div> set the background colour using one of the following classes  */

.page-header {
  background: var(--primary);
    margin-top: calc(0px - var(--menu-height));
    padding: 0 0;
}

.equipment-header {
  background: var(--equipment-gradient);
    background-blend-mode: multiply;
    margin-top: calc(0px - var(--menu-height));
    padding: 0 0;
}

.light-header {
  background: var(--secondary);
    margin-top: calc(0px - var(--menu-height));
    padding: 0 0;
}

.page-section {
  background: var(--primary);
    color: var(--body);
    padding: 0 0;
}

.light-section {
  background: var(--secondary);
    color: var(--body);
    padding: 0 0;
}

.highlight-section {
  background: var(--highlight-bg);
    color: var(--dark-body);
    padding: 0 0;
}


/* ======================== MENU SYSTEM ==================== */

/* ======================================================
   OLADRA NAV — TOTAL CSS SOLUTION
   - Base rules apply everywhere
   - Mobile rules only in (max-width: 1024px)
   - Desktop rules only in (min-width: 1025px)
====================================================== */

.oladra-nav {
  color: var(--body);                                                      /* --------- Set Menu Item Colour Default -------------- */
  font-size: var(--p2);                                                         /* --------- Set Menu Item Font Size -------------- */
  z-index: 9999;
}

.oladra-nav a {
  color: var(--body); text-decoration: none;
}

.oladra-nav a:hover,
.oladra-nav a.active {
  color: var(--heading);
}

.oladra-nav-spacer {
  display: none; height: calc(var(--menu-height) - 4px);
}

.oladra-nav-bar {
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 13; /* above mobile backdrop layer */
}

.oladra-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px clamp(20px, 6vw, 100px);                                       /* ------- Min/Scale-Rate/Max Padding Around The Entire Desktop Menu --------  */
}

.oladra-hamburger {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  color: var(--body);                                                      /* --------- Set Hamburger Menu Colour -------------- */
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.oladra-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--body);                                                      /* --------- Profile Default Colour Only -------------- */
}

.oladra-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oladra-logo img {
  height: 40px; display: block;
}

.oladra-desktop-items {
  display: none; 
    gap: clamp(20px, 4vw, 48px);                                                /* ------- Min/Scale-Rate/Max Default Item GAP --------  */
    white-space: nowrap;
}

.fake {
  color: var(--body);
}

.fake:hover {
  color: var(--heading);
}

/* ======================================================
   MOBILE (<1025px)
   - top strip transparent and scrolls away normally
   - backdrop slides down
   - items DO NOT slide (fade up only, staggered)
====================================================== */

@media (max-width: 1024px) {

  /* Mobile bar layout: hamburger | centered logo | profile */
  .oladra-nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 22px;
  }

  /* keep logo centered in the 1fr column */
  .oladra-logo { justify-self: center; }

  /* set size of logo on mobile */
  .oladra-logo img { height: 30px; display: block; }                            /* ----------------  Size of Oladra Logo On Mobile ----------------*/

  /* never apply backdrop to bar on mobile */
  .oladra-nav-bar,
  .oladra-nav[data-scroll="scrolled"] .oladra-nav-bar { background: var(--menu-bg) !important; }

  /* hide desktop menu items on mobile */
  .oladra-desktop-items { display: none !important; }

  /* ---- Backdrop layer (slides) ---- */
  .oladra-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 12;            /* below bar (bar z=3) */
    pointer-events: none;  /* enabled only when open */
    background: transparent; /* backdrop handled by ::before */
  }

  .oladra-mobile-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--menu-bg);                                                /* ------- Mobile Dropdown Background Colour --------  */
    transform: translateY(-100%);
    transition: transform 0.45s ease;                                           /* -------- Speed Of Descent of Background  ---------  */
  }

  .oladra-nav[data-open="true"] .oladra-mobile-overlay { pointer-events: auto; }
  .oladra-nav[data-open="true"] .oladra-mobile-overlay::before { transform: translateY(0); }

  /* ---- Menu items layer (does NOT slide) ---- */
  .oladra-mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--menu-height);                                                    /* -------- Vertical Gap Down To First Menu Item  ---------  */
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;                                                                  /* -------- Vertical Gap Between Menu Items ----------  */
    pointer-events: none;
  }

  .oladra-mobile-menu a {
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .oladra-nav[data-open="true"] .oladra-mobile-menu { pointer-events: auto; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a { opacity: 1; }

  /* Stagger top -> bottom */
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(1) { transition-delay: 0.1s; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(2) { transition-delay: 0.2s; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(3) { transition-delay: 0.3s; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(4) { transition-delay: 0.4s; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(5) { transition-delay: 0.5s; }
  .oladra-nav[data-open="true"] .oladra-mobile-menu a:nth-child(6) { transition-delay: 0.6s; }
}


/* ======================================================
   DESKTOP (>1024px)
   LOGO-ANCHORED, BALANCED NAV — FINAL
====================================================== */

@media (min-width: 1025px) {

  /* Fixed bar + spacer */
  .oladra-nav-spacer { display: block; }

  .oladra-nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--menu-bg);
  }

  .oladra-nav[data-scroll="scrolled"] .oladra-nav-bar {
    background: var(--menu-bg);
  }

  /* --------------------------------------------------
     INNER LAYOUT — GRID, NOT FLEX
     Logo is the anchor point for menu items
  -------------------------------------------------- */

  .oladra-nav-inner {
    display: grid;
    align-items: center;

    /* Balanced around logo */
    grid-template-columns:
      auto                 /* hamburger */
      minmax(180px, 1fr)   /* left menu zone */
      auto                 /* logo */
      minmax(180px, 1fr)   /* right menu zone */
      auto;                /* profile */

    column-gap: clamp(24px, 4vw, 72px);                                         /* ------- Min/Scale-Rate/Max Gaps Between Hamburger - Left-Items - Logo - Right-Items - Profile --------  */

    max-width: none;
    margin: 0;
/*    padding: 18px clamp(20px, 6vw, 100px);    */                                    /* ------- Min/Scale-Rate/Max Padding Around The Entire Menu ALready Set Above --------  */
  }

  /* Logo is centered by grid, no tricks */
  .oladra-logo {
    position: static;
    justify-self: center;
    margin: 0 clamp(1px, calc(5vw - 50px), 60px);                               /* ------- Min/Scale-Rate/Max Adds Margin Space Around The Logo --------  */
  }

  /* Hamburger + profile */
  .oladra-hamburger,
  .oladra-profile {
    flex: 0 0 auto;
  }

  /* --------------------------------------------------
     MENU BANKS
  -------------------------------------------------- */

  .oladra-left-items,
  .oladra-right-items {
    display: inline-flex;
    justify-content: center;
    gap: clamp(20px, calc(8vw - 60px), 70px);                                   /* ------- Min/Scale-Rate/Max Gap Between Menu-Items Within Left-Items and Right-Items --------  */
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-3px);

    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0s linear 0.28s;
  }

  .oladra-left-items { justify-self: end; }                                     /* ------- Left Items Are Positioned Relative To Right (Logo) --------  */
  .oladra-right-items { justify-self: start; }                                  /* ------- Right Items Are Positioned Relative To Left (Logo) --------  */

  /* Menu open */
  .oladra-nav[data-open="true"] .oladra-left-items,
  .oladra-nav[data-open="true"] .oladra-right-items {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 0.32s ease,
      transform 0.32s ease;
  }

  /* Staggered fade */
  .oladra-left-items a,
  .oladra-right-items a {
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .oladra-nav[data-open="true"] .oladra-left-items a,
  .oladra-nav[data-open="true"] .oladra-right-items a {
    opacity: 1;
  }

  .oladra-nav[data-open="true"] .oladra-left-items a:nth-child(1) { transition-delay: 0.1s; }
  .oladra-nav[data-open="true"] .oladra-left-items a:nth-child(2) { transition-delay: 0.2s; }
  .oladra-nav[data-open="true"] .oladra-left-items a:nth-child(3) { transition-delay: 0.3s; }

  .oladra-nav[data-open="true"] .oladra-right-items a:nth-child(1) { transition-delay: 0.4s; }
  .oladra-nav[data-open="true"] .oladra-right-items a:nth-child(2) { transition-delay: 0.5s; }
  .oladra-nav[data-open="true"] .oladra-right-items a:nth-child(3) { transition-delay: 0.6s; }

  /* Desktop never uses mobile overlay */
  .oladra-mobile-overlay { display: none; }
}


/* ======================== TOGGLE COLOUR & HERO OVERLAY ==================== */

.hero-wrap {
  position: relative;
}

.hero-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;

  --overlay-pad-x: clamp(0.5rem, calc(8vw - 20px), 8rem);

  display: flex;

  /* Left horizontally */
  justify-content: flex-start;

  /* Exactly halfway down the image */
  align-items: center;

  padding: 0 var(--overlay-pad-x);

  pointer-events: none;
}

.hero-colours,
.hero-models {
  pointer-events: auto;
}

.hero-colours {
  text-align: left;
}

.hero-models {
  text-align: right;
}
.statement-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;                 /* ensure overlay is above the fading images */
  pointer-events: none;
  padding-top: calc(20px + 8vw);
}

.statement-heading,
.stahement-sub-heading {
  pointer-events: auto;
}

.statement-heading {
  text-align: center;
}

.statement-sub-heading {
    text-align: right;
}

  .hero-models{
    text-align: left;
  }

  /* if .p1 exists and adds padding you don't want on mobile */
  .hero-models.p1{
    padding: 0 !important;
  }
}


/* ======================== TEXT STYLING ==================== */

.hero-models a,
.hero-models .model {
  font-family: var(--font-light);
  font-size: var(--p1);
  background: none;
  border: 0;
  padding: 0;
  color: var(--body);
  cursor: pointer;
}

.hero-models .active {
  font-weight: 600;
  color: var(--body);
}

.hero-models a:hover {
  font-weight: 600;
  color: var(--body);
}

.hero-colours button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-light);
  font-size: var(--p2);
  color: var(--body);
  cursor: pointer;
}

.hero-colours .active {
  font-weight: 600;
  color: var(--body);
}

.hero-colours button:hover {
  font-weight: 600;
  color: var(--body);
}


/* ======================= HERO IMAGES ========================*/

.hero-img {
  display: block;
/*  width: 100vw; */
}

.hero-img img {
  display: block;
  width: 100%;
  height: auto;
}

.fullwidth-img {
  display: block; 
  width: 100vw;
}

.fullwidth-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ======================== PARTNERS PAGE ==================== */

.partner-card {
  padding: 1rem;
      text-align:center;
      border: none;
}

.partner-card img {
  max-width: min(1080px, 100% - 40px);
      height:auto;
      margin-bottom: 2rem;
      border: none;
}

.partner-name {
  font-family: var(--font-heading); font-size: 1.5em;
}

.partner-link a {
  color:var(--luxe); text-decoration:none;
}

.partner-link a:hover {
  text-decoration:underline;
}

.partner-phone {
  margin-top:0.3rem; color:var(--muted);
}

select#country-select {
  padding:1rem 0.6rem;
      margin-top:0.5rem;
      border-radius:10px;
      min-width:200px;
      font-family: var(--font-body)!important;
      font-size: var(--h3)!important;
      text-align: center;
      border: 1px solid var(--primary-border)!important;
      color: var(--body);
}

.location-banner {
  margin-top:1.5rem;
}

@media (max-width:1024px){
      .partner-card { padding:1rem 0; }
      .partner-name { font-size:1rem; }
      .partner-card1 img { max-width: min(880px, 100% - 30px); }
    }


@media (max-width:640px){
      .partner-card { padding:1rem 0; }
      .partner-name { font-size:1rem; }
      .partner-card1 img { max-width: min(480px, 100% - 20px); }
    }


.partner-logo-wrapper {
  text-align: center;
      width: 100%;
      overflow: visible;
}

.partner-logo {
  display: block;
      margin: 0 auto 10px auto;
      width: auto;
      height: auto;
      max-height: 200px;
      max-width: min(580px, 100vw - 100px);
      object-fit: contain;
}

/* ======================== CARD GRID ==================== */

.card {
    background: var(--body);
    color: #000000;
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    margin: 2vw;
    text-align: center;
    height: 100%;
}

/* ======================== CARD GRID ==================== */

@media (max-width: 1024px) {
    .cards-grid1 { grid-template-columns: 1fr; }
}


@media (min-width: 1025px) {
    .cards-grid1 {
      grid-template-columns: 1fr 1fr;   /* or 2fr 1fr, your call */
      grid-template-rows: auto auto;
      grid-template-areas:
        "left-top   right"
        "left-bottom right";
      align-items: stretch;
    }
    .left-top    {
        grid-area: left-top; 
    }
    .left-bottom {
        grid-area: left-bottom;
    }
    .right-span  { 
        grid-area: right;
        height: 100%;
    }
}


/* ======================== EQUAL HEIGHT ROWS/COLUMNS ==================== */

.row.equal-height-row {
  align-items: stretch;
}

.row.equal-height-row > [class*="col-"] {
  display:flex;
}

.row.equal-height-row > [class*="col-"] > .panel.card {
  display:flex;                       /* allow inner layout */
      flex: 1 1 auto;                     /* fill the column height */
      width: 100%;                        /* avoid shrink */
}

/* ======================== ANIMATION ===================== */

/*========= On Scroll ==========*/

@keyframes fadeInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/*========== Static ===========*/

@keyframes fadeInUpStatic {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}


.fadeInUp-Static {
  animation: var(--animation-duration) both fadeInUp;
    animation-delay: var(--animation-delay);
}

/* ======================= OLD CODE FOR COLOUR TOGGLING ========================*/

/* Cross-fade wrapper 
.colour-wrap {
  position: relative;
  width: 100%;
}

/* Both images sit on top of each other
.colour-wrap .colour-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 2s ease;
}

/* Ensure the wrapper has height (prevents collapse) 
.colour-wrap .colour-img.active {
  opacity: 1;
  position: relative; /* gives the wrapper its height 
}




/* ======================== OTHER BASICS ===================== */

* {
  scrollbar-color: var(--body) var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}


html {
  -ms-overflow-style: scrollbar;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.center-row {
  display: flex;
  justify-content: center;
}

.center {
  justify-content: center;
}

.relative {
  position: relative!important;
}

@media (max-width: 1024px) {
    .stick-fixed {
        position: absolute !important;
    }
}

.large {
    font-size: 2em;
}

.hidden {
  display: none;
}

.hidden.is-visible {
  display: block !important;
}

.details-inner {
  overflow: hidden;
  height: 0;
  opacity: 0;

  transition:
    height 1.35s cubic-bezier(0.25, 0.9, 0.25, 1),
    opacity 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.details-inner.is-open {
  opacity: 1;
}

img:not([draggable]),
video {
  max-width: 100%;
/*  height: auto;         */
}

.divider {
  width: auto;
  border: 0;
  height: 1px;
  background-color: var(--divider)!important;
  opacity: 1;
}

.footer-logo .brand-image {
  width: 200px;
  height: 45px;
  max-width: 100%;
  max-height: 100%;
  padding-bottom: 30px; 
  padding-right: 5vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  background-image: var(--brand-image, url('/images/oladra-menu-horizontal.png'));
}

/* ===== Mobile top bar: center the logo, keep burger & login clickable ===== */

/* ===== Footer: center logo & related bits on mobile ===== */

@media (max-width: 1024px) {
  .footer-logo,
  .align-footer-image {
    text-align: center !important;
  }
  .footer-logo .brand-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 200px;   /* keep your chosen size */
    height: 45px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--brand-image, url('/images/oladra-menu-horizontal.png'));
  }
}


/* === Mobile logo click fix: do not change layout, only click routing === */

@media (max-width: 1024px) {
  /* The bar itself should not swallow pointer events */
  .mobile-top-bar {
    pointer-events: none;
  }

  /* But its direct children (burger, logo wrapper, login) should */
  .mobile-top-bar > * {
    pointer-events: auto;
  }
}


/* === FINAL MOBILE LOGO CLICK FIX === */

@media (max-width: 1024px) {

  /* 1. Free the center zone by removing overlapping flex boxes */
  .mobile-top-bar {
    position: relative;
    height: 48px; /* fixed height for alignment */
  }

  /* 2. Left: burger */
  .mobile-top-bar .mobile-menu-toggle {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; /* stays clickable */
  }

  /* 3. Center: logo (already absolute in your CSS, leave it) */
  .mobile-top-bar .mobile-logo-wrap {
    z-index: 4; /* now safely above all */
  }

  /* 4. Right: login button */
  .mobile-top-bar .mobile-login {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; /* stays clickable */
  }
}


/* ==========================  BUTTONS  ====================== */

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
select {
  margin: 0;
    font-size: var(--p2)!important; 
    font-family: var(--font-body)!important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  font-size: var(--p3);
  font-family: var(--font-body) !important;
  -webkit-text-fill-color: var(--dark-body) !important;
  box-shadow: 0 0 0 1000px var(--highlight-bg) inset !important;
  border: 1px solid var(--secondary)!important;
  -webkit-box-shadow: 0 0 0 36px var(--highlight-bg) inset !important;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

button {
  white-space: nowrap;
}

button.button-luxe1 {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-color: transparent;
  outline: none;
  cursor: pointer;
  max-width: 100%!important;
  background-color: transparent;
  font-family: var(--font-regular);
  font-size: var(--p1);
  line-height: var(--p1l);
  color: var(--luxe);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-luxe1:hover {
  background: transparent;
  color: var(--luxe-hover);
}

button.button-luxe1:active {
  background: transparent;
  color: var(--luxe-hover);
}
button.button-transparent {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-color: transparent;
  outline: none;
  cursor: pointer;
  max-width: 100%!important;
  background-color: transparent;
  font-family: var(--font-regular);
  font-size: var(--p1);
  line-height: var(--p1l);
  color: var(--luxe);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-transparent:hover {
  background: transparent;
  color: var(--luxe-hover);
}

button.button-transparent:active {
  background: transparent;
  color: var(--luxe-hover);
}

button.button-outline {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--muted)!important;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 2rem;
  width: auto;
  max-width: 100%!important;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--muted);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-outline:hover {
  background: transparent;
  color: var(--body);
  border: 1px solid var(--body)!important;
}

button.button-outline:active {
  background: transparent;
  color: var(--body);
  border: 1px solid var(--body)!important;
}

button.button-outline-small {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--body)!important;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 1rem;
  width:  calc(80px + 5vw)!important;
  max-width: 100%!important;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--body);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-outline-small:hover {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--body)!important;
}

button.button-outline-small:active {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--body)!important;
}

button.button-outline-tiny {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--body)!important;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
  padding: 0.1rem 1rem;
  width: calc(100px + 2vw)!important;
  max-width: 100%!important;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--body);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-outline-tiny:hover {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--body)!important;
}

button.button-outline-tiny:active {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--body)!important;
}

button.button-outline-round {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--body)!important;
  border-radius: 30px;
  outline: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 1.5rem;
  padding-bottom: 0.15rem;
  line-height: var(--p3l);
  color: var(--body);         
  text-decoration: none !important;
  opacity: 1;
}

button.button-outline-round:hover {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--heading)!important;
}

button.button-outline-round:active {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--heading)!important;
}

button.button-primary {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 2rem;
  width: calc(150px + 5vw)!important;
  max-width: 100%!important;
  background-color: var(--brand);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-primary:hover {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-primary:active {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-primary-small {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 1rem;
  width: calc(80px + 5vw)!important;
  max-width: 100%!important;
  background-color: var(--brand);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-primary-small:hover {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-primary-small:active {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-primary-tiny {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
  padding: calc(0.1rem + 1px) 1rem; 
/*  width: auto; */
  width: calc(100px + 2vw)!important;
  max-width: 100%!important;
  background-color: var(--brand);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-primary-tiny:hover {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-primary-tiny:active {
  background: var(--brand);
    background: var(--primary-gradient);
}

button.button-luxe {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 2rem;
/*  width: auto; */
  width: calc(150px + 5vw)!important;
  max-width: 100%!important;
  height: calc(39px + 0.2vw);
  background-color: var(--luxe-hover);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-luxe:hover {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
}

button.button-luxe:active {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
}

button.button-luxe-small {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 40px;
  outline: none;
  cursor: pointer;
  padding: 0.9rem 1rem;
  width: calc(80px + 5vw)!important;
  max-width: 100%!important;
  background-color: var(--luxe-hover);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-luxe-small:hover {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
}

button.button-luxe-small:active {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
    color: var(--heading);
}

button.button-luxe-tiny {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
  padding: 0.1rem 1rem;
  width: calc(40px + 4vw)!important;
  max-width: 100%!important;
  height: calc(39px + 0.2vw);
  background-color: var(--luxe-hover);
  font-family: var(--font-body);
  font-size: var(--p3);
  line-height: var(--p3l);
  color: var(--button-hover);         
  text-decoration: none !important;
  opacity: 1;
  box-shadow: var(--shadow);
}

button.button-luxe-tiny:hover {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
}

button.button-luxe-tiny:active {
  background: var(--luxe-hover);
    background: var(--luxe-gradient);
}

button.button-link {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  width: auto;
  font-family: var(--font-body);
  font-size: var(--p2);
  line-height: var(--p3l);
  background: transparent;
  color: var(--luxe-hover);         
  text-transform: none;
  text-decoration: none !important;
  opacity: 1;
}

button.button-link:hover {
  color: var(--luxe-hover);
}

button.button-link:active {
  color: var(--luxe-hover);
}

button.button-icon {
  display: inline-block;
  background: transparent; 
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--primary-border);
  outline: none;
  cursor: pointer;
  width: auto;
  height: 46px;
  width: 46px;
  border-radius: 10px;
  text-decoration: none !important;
  opacity: 0.79;
}

button.button-icon:hover {
  background: var(--secondary);
  border: none;
  opacity: 1;
}

button.button-icon:active {
  background: var(--secondary);
  border: none;
  opacity: 1;
}

#buttontop {
  display: inline-block;
  color: var(--heading);
  background-color: transparent;
  opacity: 0.4!important;
  box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.3);  
  width: 50px;
  height: 50px;
  font-size: 18px; /* set the font size */
  text-align: center;
  padding-top: 11px;
  border: 1px solid var(--heading);
  border-radius: 50%;
  position: fixed;
  bottom: calc(5vmin + 55px); /* set the distance from the bottom of the screen */
  left: 40px;
  transition: background-color .2s, 
    opacity .3s, visibility .3s;
  visibility: hidden;
  z-index: 1000;
}

#buttontop::after {
  font-size: 2em;
  line-height: 50px;
  color: #000;
}

#buttontop:hover {
  cursor: pointer;
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--heading);
  text-decoration: none;
  opacity: 1!important;
}

#buttontop:active {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--heading);
  text-decoration: none;
}

#buttontop.show {
  opacity: 1;
  visibility: visible;
}

.btn-group-vertical > .btn,
.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn.active,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:hover,
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus,
.btn-group > .btn:hover {
  z-index: 1;
}

.btn-group > .btn-group:not(:first-child),
.btn-group > .btn:not(:first-child) {
  margin-left: 10px;
}

.btn-group > .btn-group:not(:last-child) > .btn,
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn-group:not(:first-child) > .btn,
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn-group:not(:first-child),
.btn-group-vertical > .btn:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn-group:not(:last-child) > .btn,
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn-group:not(:first-child) > .btn,
.btn-group-vertical > .btn ~ .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-wrap {
  display: flex;
  flex-wrap: wrap;     /* Allow wrapping */
  gap: 10px;           /* Space between buttons */
  justify-content: flex-start; /* Default: left align */
}

.btn-group-wrap .button-primary,
.btn-group-wrap .button-outline {
  flex: 0 0 auto;      /* No stretching */
  white-space: nowrap; /* Keep text on one line */
}

.btn-group-wrap.btn-center {
  justify-content: center;
}

.btn-group-wrap.btn-right {
  justify-content: flex-end;
}

@media (max-width: 1024px) {
    .btn-group-wrap.btn-right {
      justify-content: center;
    }
}


/*  =================== DECORATIVE GRADIENT STRIPE ========================= */

/*  =================== VIDEO ========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 1500px) {
  .overlay-content {
    width: 55%;
  }
}


@media (max-width: 767px) {
  .overlay-content {
    width: 70%;
  }
}


/* =================  CONTAINERS  ======================= */

.container {
  width: 100%;
  padding: 0 4vw 0 4vw;
  margin-right: auto!important;
  margin-left: auto!important;
}

.container-slim {
  max-width: 1800px;
  padding: 0 4vw 0 4vw;
  margin-right: auto!important;
  margin-left: auto!important;
}

.container-slimmer {
  max-width: 1400px;
  padding: 0 4vw 0 4vw;
  margin-right: auto!important;
  margin-left: auto!important;
}

.container-slimmest {
  max-width: 1000px;
  padding: 0 4vw 0 4vw;
  margin-right: auto!important;
  margin-left: auto!important;
}

/*

@media (min-width: 576px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 546px;
  }
}

@media (min-width: 768px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 668px;
  }
}

@media (min-width: 992px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 892px;
  }
}

@media (min-width: 1200px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 1050px;
  }
}

@media (min-width: 1400px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 1250px;
  }
}

@media (min-width: 1600px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 1450px;
  }
}

@media (min-width: 1800px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 1650px;
  }
}

@media (min-width: 2000px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 1850px;
  }
}

@media (min-width: 2500px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 2350px;
  }
}

@media (min-width: 3000px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 2800px;
  }
}

@media (min-width: 3500px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 3300px;
  }
}

@media (min-width: 4000px) {
  .container, .container-slim, .container-slimmer, .container-slimmest {
    max-width: 3800px;
  }
}

*/

/* =================== PARALLAX CONTAINER ====================== */

/* Text Sections */

/* Image Sections 
.image-section {
    position: relative;
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}*/

/* =================== IMAGE-SIZING ====================== */

/* =================== IMAGE OVERLAY ================= */

@media only screen and (max-width: 1600px) {
    .top-center {
        margin: 4vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 4vw 0 !important;
    }
}


@media only screen and (max-width: 1024px) {
    .top-center {
        margin: 3vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 5vw 0 !important;
    }
}


@media only screen and (max-width: 992px) {
    .top-center {
        margin: 6vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 3vw 0 !important;
    }
}


@media only screen and (max-width: 768px) {
    .top-center {
        margin: 3vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 0vw 0 !important; 
    }
}


@media only screen and (max-width: 640px) {
    .top-center {
        margin: 0vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 0vw 0 !important;
    }
}


@media only screen and (max-width: 480px) {
    .top-center {
        margin: 7vw 0 0 0 !important;
    }
    .bottom-center {
        margin: 0 0 0vw 0 !important;
    }
}


@media (min-width: 992px) {
  .button-container-s {
    max-width: 800px; 
  }
}


/* ================ Dark Transparent Overlay ======================== */

/* ======================== ROWS & COLUMNS ====================== */

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

@media (max-width: 575px) {
  .col-sx {
    flex: 1 0 0%;
  }
  .col-sx-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sx-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sx-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sx-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sx-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sx-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sx-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sx-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sx-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sx-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sx-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sx-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sx-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sx-0 {
    margin-left: 0;
  }
  .offset-sx-1 {
    margin-left: 8.33333333%;
  }
  .offset-sx-2 {
    margin-left: 16.66666667%;
  }
  .offset-sx-3 {
    margin-left: 25%;
  }
  .offset-sx-4 {
    margin-left: 33.33333333%;
  }
  .offset-sx-5 {
    margin-left: 41.66666667%;
  }
  .offset-sx-6 {
    margin-left: 50%;
  }
  .offset-sx-7 {
    margin-left: 58.33333333%;
  }
  .offset-sx-8 {
    margin-left: 66.66666667%;
  }
  .offset-sx-9 {
    margin-left: 75%;
  }
  .offset-sx-10 {
    margin-left: 83.33333333%;
  }
  .offset-sx-11 {
    margin-left: 91.66666667%;
  }
  .g-sx-0 {
    --bs-gutter-x: 0;
  }
  .g-sx-0 {
    --bs-gutter-y: 0;
  }
  .g-sx-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sx-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sx-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sx-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sx-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sx-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sx-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sx-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sx-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sx-5 {
    --bs-gutter-y: 3rem;
  }
}


@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5 {
    --bs-gutter-y: 3rem;
  }
}


@media (min-width: 1025px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5 {
    --bs-gutter-y: 3rem;
  }
}


@media (min-width: 1400px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5 {
    --bs-gutter-y: 3rem;
  }
}


@media (min-width: 1400px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5 {
    --bs-gutter-y: 3rem;
  }
}


/* =========== REVERSE COLUMNS ON MOBILE ======================== */

@media only screen and (min-width: 1025px) {
  /* On desktop, no order change, columns remain as is */
  .reverse-columns-mobile .col-md-12 {
    order: initial; /* Default order */
  }
}


@media only screen and (max-width: 1024px) {
  /* Apply reverse order on mobile */
  .reverse-columns-mobile .col-md-12:nth-child(1) {
    order: 2;  /* First column moves below */
  }

  .reverse-columns-mobile .col-md-12:nth-child(2) {
    order: 1;  /* Second column moves to the top */
  }

  /* Adjust text margins on mobile 
  .reverse-columns-mobile .text-left {
    margin-left: 3vw;
    margin-right: 3vw;
  }*/
}


/*================ LIST GROUP ===================== */

.list-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* ================== TABLE ======================== */

table {
  caption-side: bottom;
  border-collapse: collapse;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ======================= USER ZONE ========================= */

@media (max-width: 1024px) {
  .user-box {
    position: static;
    top: auto;
    right: auto;
    float: right;
    padding: 10px 0;
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 180px;
    font-size: 14px;
    box-sizing: border-box;
  }
}


input, select, textarea {
  display: block;
  width: 100%;
  padding: 5px 20px 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid var(--secondary);
  background: var(--highlight-bg);
  color: var(--dark-body);
  font-family: var(--font-body) !important;
  font-size: var(--p3) !important;
  line-height: var(--p3l);
}

textarea {
  border-radius: 16px;
    min-height: 180px;
    resize: vertical;
    padding:16px 18px;
    line-height:1.6;
}

input:focus, textarea:focus {
  border-color: var(--primary-border);
      box-shadow: var(--shadow);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;                 /* <-- this is the big one */
  border-color: var(--primary-border) !important;
  box-shadow: var(--shadow);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--primary-border) !important;
  box-shadow: var(--shadow), 0 0 0 3px rgba(255,255,255,0.08); /* tweak */
}

input:-webkit-autofill:focus {
  outline: none !important;
}

@media (max-width: 768px) {
    .tab {
        display: inline-block;
        padding: 5px 10px;
        cursor: pointer;
    }
}


@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width:579px) {
    .form-grid { 
        grid-template-columns: 1fr; 
    }
}


.contact-grid {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
    align-items: start;
}

@media (max-width:1024px){
    .contact-grid { 
        grid-template-columns: 1fr; 
        gap:28px; 
    }
}


.contact-grid label {
  display:block; 
    padding-top: 8px;
    font-size: var(--p3);
    line-height: var(--p3l);
    color: var(--heading);
}

.contact-grid input[type="text"],
.contact-grid input[type="date"],
.contact-grid input[type="email"],
.contact-grid select,
.contact-grid textarea {
  width:100%; 
  font-size: var(--p3);
  line-height: var(--p3l);
}

@media (max-width:579px) {
    .contact-grid { 
        grid-template-columns: 1fr; 
    }
}


.form-full {
  grid-column: 1 / -1;
}

.notice {
  margin: 0 0 12px 0;
    font-size: var(--p3);
    color: var(--dark-body);
}

.notice.error {
  color: var(--dark-body);
}

@media (max-width:640px){ 
    .grid { 
        grid-template-columns:1fr; 
    } 
}


@media (max-width: 600px) {
  #profile-form .form-grid {
    grid-template-columns: 1fr;
    row-gap: 8px; /* Reduce vertical gap between label and field */
  }

  #profile-form .form-grid label {
    margin-bottom: 0;
  }
}


#user-display {
  position: absolute;
    top: calc((var(--menu-height) / 2) + 20px);
    padding-top: 1px;
    right: 10px;
    font-size: var(--p2)!important;
    line-height: var(--2pl);
    color: var(--heading)!important;
    background: transparent;
    white-space: nowrap;
    z-index: 9999;
}

@media (max-width: 1024px) {
    #user-display {
        position: absolute;
        top: calc((var(--menu-height) / 2) - 2px);
    }
}


@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none;
    }
}
@media (min-width: 1400px) {
    .hide-above-tablet {
        display: none;
    }
}
@media (max-width: 1399.5px) {
    .hide-on-tablet {
        display: none;
    }
}
@media (max-width: 1024px) {
    .hide-on-mobile {
        display: none;
    }
}


/* ======================= LOGIN-NAV ========================= */

@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }
    
    .nav-logo-wrap.hide-on-mobile {
        display: none !important;
    }
    
    .nav-logo-wrap.show-on-mobile {
        display: block !important;
        text-align: center;
        padding: 10px 0;
    }
    
    .menu-login-button {
        display: inline-block;
        margin: 10px auto;
    }
    .userbox-wrapper {
        display: none;
    }
}


/* ======================= NAV ========================= */

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link-footer {
  display: block;
  padding: 0 0 0px 0 !important;
  text-decoration: none;
}

.nav-link-footer:hover {
  color: var(--heading)!important;
}

.nav-tabs .nav-link.active {
  background: var(--gradient3);
  color: var(--body);
  font-family: var(--font-semibold);
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Add a subtle shadow */
  transition: all 0.2s ease-in-out; /* Smooth transition */
}

.nav-tabs .nav-link:not(.active) {
  font-family: var(--font-semibold);
  color: var(--body);
  border: none;
  border-radius: 8px;
  background-color: var(--secondary);
  padding: 10px;
  margin: 0 5px;
}

.tab-content > .active {
  height: auto;
  display: block;
}

/* =========================================================
   Lux Tabs — starts collapsed (headings only)
   Expands on click. Collapses again when scrolled out of view.
   ========================================================= */

.lux-tabs {
  --tab-text: var(--muted);
  --tab-text-active: var(--body);
  --tab-line: transparent;

  --indicator: var(--divider);
  --indicator-glow: var(--primary);
  --indicator-w: clamp(160px, 22vw, 280px);
}

/* Tab bar */
.lux-tabbar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  gap: clamp(36px, 7vw, 150px);
  padding: 0 0 18px;

  margin: 0 auto;
  max-width: 80vw;

  /* baseline only when expanded */
  border-bottom: 1px solid rgba(0,0,0,0); /* hidden by default */

  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lux-tabbar::-webkit-scrollbar { display: none; }

/* Tab button */
.lux-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 4px;
  margin: 0;
  cursor: pointer;

  font-family: var(--font-body);
  letter-spacing: 0.2px;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--tab-text);
  white-space: nowrap;

  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lux-tab:hover { color: var(--body); }
.lux-tab.is-active { color: var(--tab-text-active); }

/* Indicator (hidden unless expanded) */
.lux-indicator {
  position: absolute;
  left: 0;
  bottom: -3px;

  height: 7px;
  width: var(--indicator-w);
  border-radius: 999px;
  background: var(--indicator);
  box-shadow: 0 10px 18px var(--indicator-glow);

  transform: translateX(0);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;

  opacity: 0;           /* hidden by default */
  pointer-events: none;
}

/* Panels wrapper (collapsed by default) */
.lux-panels {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  height: 0;            /* collapsed */
  overflow: hidden;     /* hide content when collapsed */
  transition: height 520ms cubic-bezier(0.22, 1, 0.36, 1), padding 300ms ease;
}

/* Panels are absolute for crossfade when expanded */
.lux-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lux-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lux-panel p {
  margin: 0 0 18px;
  color: var(--body);
  line-height: 1.6;
/*  font-size: var(--p2); */
}
.lux-panel em { color: var(--body); }

/* -------------------------
   Expanded state (set by JS)
   ------------------------- */

.lux-tabs.is-expanded .lux-tabbar {
  border-bottom-color: var(--divider); /* baseline appears */
}

.lux-tabs.is-expanded .lux-indicator {
  opacity: 1; /* underline appears */
}

.lux-tabs.is-expanded .lux-panels {
  padding: 36px 0 0; /* spacing appears */
}

/* Mobile (<1025px) */
@media (max-width: 1024px) {
  .lux-tabbar {
    justify-content: flex-start;
    gap: 18px;
    padding-bottom: 14px;
    overflow-x: auto;
  }

  .lux-tabs {
    --indicator-w: clamp(140px, 56vw, 220px);
  }

  .lux-indicator { height: 5px; }
  .lux-tabs.is-expanded .lux-panels { padding-top: 26px; }
}

/* =========================================
   Fix: make tabs + content follow Bootstrap .container width
   and left-justify headings
   ========================================= */

.lux-tabbar{
  justify-content: flex-start;   /* left-justify headings */
  max-width: none;              /* remove the 80vw cap */
  margin: 0;                    /* stop centering the bar */
  padding-left: 0;              /* align with container */
  padding-right: 0;
}

/* Make the panels use full container width */
.lux-panels{
  max-width: none;              /* remove 980px cap */
  margin: 0;                    /* stop centering the panels block */
  padding-left: 0;
  padding-right: 0;
}

/* Show long label on desktop, short on mobile */
.tab-short{ 
    display:none; 
    font-weight: 300;
}
@media (max-width: 1024px){
  .tab-long{
      display:none; 
      font-weight: 300;
  }
  .tab-short{ 
      display:inline; 
      font-weight: 300;
  }
}

/* =========================================================
   Force headings to look inactive when collapsed
   (wins against focus/active/bootstrap/global button styles)
   ========================================================= */

.lux-tabs:not(.is-expanded) .lux-tab,
.lux-tabs:not(.is-expanded) .lux-tab.is-active,
.lux-tabs:not(.is-expanded) .lux-tab[aria-selected="true"],
.lux-tabs:not(.is-expanded) .lux-tab:focus,
.lux-tabs:not(.is-expanded) .lux-tab:active {
  color: var(--tab-text) !important;
}

/*  ==================  ACCORDION  ================== */

/* =================== FOUR-ITEM CAROUSEL ====================== */



/* ==========================================================
   OLADRA PLAY — TWO COLUMN SLIDER (DROP-IN)
   Includes:
   - Image sizing
   - Image arrows (preserves outside placement on desktop)
   - Text panel stabilisation
   - Dots + x of y progress row (injected by JS)
   ========================================================== */

/* ===========================
   IMAGE SLIDER BASE
   =========================== */

/* Image slider is the positioning context for arrows */
#oladra-play .image-slider {
  position: relative;
}

#oladra-play .image-container img {
  width: 100%;
  height: auto;
}

/* On smaller screens reduce image width */
@media (max-width: 1024px) {
  #oladra-play .image-container img {
    width: 80%;
    height: auto;
  }
}

/* Hide text slider controls (we are not using a Slick text slider) */
#oladra-play .play-text-panel .slick-dots,
#oladra-play .play-text-panel .slick-arrow {
  display: none !important;
}


/* ===========================
   IMAGE SLIDER ARROWS
   (Preserve original intent)
   =========================== */

#oladra-play .image-slider .slick-prev,
#oladra-play .image-slider .slick-next {
  width: calc(32px + .75vw);
  height: calc(32px + .75vw);

  background: transparent;
  border: 1px solid var(--highlight-text);
  border-radius: 50%;
  box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.3);

  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
}

/* Hide default Slick glyphs */
#oladra-play .image-slider .slick-prev::before,
#oladra-play .image-slider .slick-next::before {
  display: none;
  content: '';
}

/* Font Awesome icon styling */
#oladra-play .image-slider .slick-prev i,
#oladra-play .image-slider .slick-next i {
  font-size: calc(20px + 0.5vw);
  color: var(--highlight-text);

  display: block;
  line-height: calc(32px + .75vw);
  text-align: center;
  width: 100%;
  opacity: 1;
}

#oladra-play .image-slider .slick-prev i { padding-right: 2px; }
#oladra-play .image-slider .slick-next i { padding-left: 2px; }

#oladra-play .image-slider .slick-prev:hover,
#oladra-play .image-slider .slick-next:hover {
  background: transparent;
  opacity: 1;
}

#oladra-play .image-slider .slick-prev:hover i,
#oladra-play .image-slider .slick-next:hover i {
  opacity: 1;
}

/* Desktop / larger screens:
   Keep arrows OUTSIDE image area (your original design intent) */
#oladra-play .image-slider .slick-prev {
  left: calc(0 - 32px - .75vw);
}

#oladra-play .image-slider .slick-next {
  right: calc(0 - 32px - .75vw);
}

/* Hide disabled arrow (except if JS marks next as restart button) */
#oladra-play .image-slider .slick-arrow.slick-disabled:not(.slick-restart) {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

/* Mobile / tablet:
   Bring arrows inside so they don't get clipped or float too far away */
@media (max-width: 1024px) {
  #oladra-play .image-slider {
    margin-bottom: 20px;
  }

  #oladra-play .image-slider .slick-prev {
    left: 10px;
  }

  #oladra-play .image-slider .slick-next {
    right: 10px;
  }
}


/* ===========================
   OPTIONAL GLOBAL SLICK DOTS
   (for other sliders site-wide if used)
   =========================== */
.slick-dots li button:before {
  color: var(--slick-dot);
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: var(--slick-dot-active);
  opacity: 1;
}


/* ===========================
   TEXT PANEL (NOT A SLICK SLIDER)
   Avoids Slick fade/theme CSS conflicts
   =========================== */

/* Ensure text column doesn't collapse */
#oladra-play .play-text-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Stabilise text panel height (JS sets min-height) */
#oladra-play .play-text-panel .text-panel {
  min-height: 1px;
  transition: opacity 220ms ease;
}

/* If JS uses a temporary class during swap */
#oladra-play .play-text-panel .text-panel.is-changing {
  opacity: 0.15;
}

/* Keep internal margins predictable */
#oladra-play .play-text-panel .text-content {
  margin: 0;
}


/* ===========================
   OLADRA PLAY TEXT PROGRESS
   (Dots + small x of y)
   DROP-IN REPLACEMENT
   =========================== */

/* Keep the text panel fade (if this block is later in file, it wins) */
#oladra-play .play-text-panel .text-panel {
  transition: opacity 220ms ease;
}

/* Progress row injected by JS */
#oladra-play .play-text-panel .slider-progress {
  display: flex;
  align-items: center;
  justify-content: center;   /* key change: centre the whole progress group */
  gap: 12px;
  flex-wrap: nowrap;
  width: fit-content;        /* shrink to content */
  max-width: 100%;
  margin: 0 auto 22px auto;  /* centred row + spacing below */
  line-height: 1;
}

/* Dots row */
#oladra-play .play-text-panel .slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  flex-wrap: nowrap;
}

/* Individual dot */
#oladra-play .play-text-panel .slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.28);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease;
  flex: 0 0 auto;
}

/* Active dot */
#oladra-play .play-text-panel .slider-dot.is-active {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.92);
  transform: scale(1.05);
}

/* Small supporting text ("3 of 13") */
#oladra-play .play-text-panel .slider-progress-text {
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  top: -1px; /* optical alignment with dots */
}

/* Mobile tuning */
@media (max-width: 1024px) {
  #oladra-play .play-text-panel .slider-progress {
    gap: 10px;
    margin: 0 auto 14px auto; /* still centred, less spacing */
  }

  #oladra-play .play-text-panel .slider-dots {
    gap: 6px;
  }

  #oladra-play .play-text-panel .slider-dot {
    width: 5px;
    height: 5px;
  }

  #oladra-play .play-text-panel .slider-dot.is-active {
    width: 7px;
    height: 7px;
  }

  #oladra-play .play-text-panel .slider-progress-text {
    font-size: 0.8rem;
    top: 0;
  }
}

/* =========================================
   OLADRA PLAY — PROGRESS ROW POSITION TUNING
   ========================================= */

/* Align dots/progress with the text content column */
#oladra-play .play-text-panel .slider-progress {
  justify-content: flex-start;
  margin-left: 0;           /* keep tied to text content edge */
  margin-bottom: 22px;      /* more space before heading */
}

/* Slightly soften and tighten visual balance */
#oladra-play .play-text-panel .slider-progress-text {
  position: relative;
  top: -1px;                /* optically aligns with dots */
}

/* Optional: if your .text-content has large top padding and the dots feel too high,
   use this to nudge the whole row down slightly */
#oladra-play .play-text-panel .text-panel > .text-content .slider-progress {
  margin-top: 6px;
}

/* Mobile: keep compact and readable */
@media (max-width: 1024px) {
  #oladra-play .play-text-panel .slider-progress {
    margin-bottom: 16px;
  }

  #oladra-play .play-text-panel .text-panel > .text-content .slider-progress {
    margin-top: 2px;
  }
}

/* =========================================
   OLADRA PLAY — PROGRESS ROW POSITION TUNING
   Align progress row with .text-content.pl.pr.pt
   ========================================= */

#oladra-play .play-text-panel .text-panel .slider-progress {
  margin-top: 30px;     /* match .pl */
  margin-left: 3vw;     /* match .pl */
  margin-right: 3vw;    /* optional: match .pr for symmetry */
  margin-bottom: 30px;
  align-items: center;
}

/* Optional: slightly quieter x of y text */
#oladra-play .play-text-panel .text-panel .slider-progress-text {
  opacity: 0.5;
  letter-spacing: 0.01em;
}

/* Mobile: keep same alignment (still correct because .pl/.pr remain 3vw) */
@media (max-width: 1024px) {
  #oladra-play .play-text-panel .text-panel .slider-progress {
    margin-top: 20px;     /* match .pl */
    margin-left: 3vw;
    margin-right: 3vw;
    margin-bottom: 20px;
  }
}





/* ===========================
   TEXT PANEL (NOT A SLICK SLIDER)
   This avoids Slick fade + theme CSS conflicts.
   =========================== */

/* ========= PRODUCT SLIDER 1 ============ */

.button-s:hover,
.button-s.active {
  /*    background: var(--slider-active-bg); */
    color: var(--slider-active-text);
    border-radius: 10px;
    border: 1px solid var(--accent-80);
/*    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.4);  */
}

@media (max-width: 1024px) {
    .button-container-s {
        max-width: 90%; /* Make the button container full width on smaller screens */
/*    padding: 0.3vw 2vw 0.3vw 2vw; /* Increase padding for better visibility on smaller screens */
        bottom: 0; /* Position 20% from the bottom of the image */
  }
    .selected-image-s {
        position: absolute;
        top: -20px;
  }
}


/* ========= PRODUCT SLIDER 2 ============ */

/*  ============ MAIN MENU ===============  */

@media (max-width: 1024px) {
    .inner-nav.desktop-nav {
       gap: 0;
    }
}


@media (max-width: 1500px) {
    .nav-left,
    .nav-right {
      display: flex;
      gap: 10px;
    }
}


@media (max-width: 1024px) {
    .nav-left,
    .nav-right {
      display: flex;
      gap: 1px;
    }
}


@media (max-width: 1024px) {
    .nav-left {
        margin-right: 0.5vw!important;
        margin-left: 0.5vw!important; /*Adjust to taste */
    }
}


@media (max-width: 1024px) {
    .nav-right {
        margin-left: 0.5vw!important;
       margin-right: 0.5vw!important; /*Adjust to taste */
    }
}


@media (max-width: 1500px) {
    .nav-size {
        font-size: var(--p3);
    }
}


@media screen and (max-width: 1024px) {
    .main-nav {
        top: 0px;
        background: transparent!important;
    }
}


/* ============================================================
   ACCOUNT BAR
   ============================================================ */

.account-bar.hidden {
  display: none;
}

.account-dropdown.hidden {
  display: none;
}

/* === MOBILE MENU (shown at 1024px and below) === */

@media (max-width: 1024px) {
    /* Ensure hamburger is visible and clickable */
    .mobile-menu-toggle svg {
      top: 20px;
      width: 40px;
      height: 40px;
      stroke: var(--heading); /* Or a fixed color like black if needed */
      display: block;
    }
    
    .mobile-menu-toggle {
      width: 36px;
      height: 36px;
    }
  .mobile-top-bar {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
/*    background-color: var(--bg-menu); */
    position: relative;
    z-index: 9999;
    height: 60px;
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
/*    margin-top: 10px; */
  }

  .mobile-logo {
    flex: 1 1 auto;
    text-align: center;
    margin-top: -20px;
  }

  .mobile-logo img {
    max-height: 30px;
    height: auto;
    width: auto;
    margin-right: 50px;
  }

  .mobile-login {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -40px;
  }

  .mobile-login a {
    display: inline-block;
    padding: 10px 22px;
    font-size: var(--p2);
/*    background-color: var(--brand); */
    color: var(--button-hover);
/*    border-radius: 30px; */
    text-decoration: none;
    white-space: nowrap;
    margin-top: 132px;
  }

  .mobile-login a:hover {
    display: inline-block;
    padding: 10px 22px;
    font-size: var(--p2);
/*    background-color: var(--brand);  */
    color: var(--button-hover-text)!important;
/*    border-radius: 30px;  */
    text-decoration: none;
    white-space: nowrap;
  }

  .desktop-nav {
    display: none !important;
  }

}


/* === DESKTOP NAVIGATION (shown at 1025px and up) === */

@media (min-width: 1025px) {
  .mobile-top-bar {
    display: none !important;
  }

  .desktop-nav {
    display: flex !important;
  }

  .mobile-login a {
    all: unset;
  }
}


/* =========================================================
   MOBILE NAV — final overrides (drop-in)
   ========================================================= */

@media (max-width: 1024px) {
  /* Top bar row (hamburger / logo / login) */
  .mobile-top-bar {
    position: relative;      /* establish context for absolute children */
    z-index: 1000;           /* above page content */
  }

  /* Dropdown wrapper (the mobile menu list) */
  .mobile-nav-wrapper {
    /* Ensure our block wins over earlier styles */
    display: none !important;
    flex-direction: column;
    width: 100%;
    padding: 20px 0;
    background-color: var(--bg-menu);

    /* KEY: create a stacking context and put it above chip/toggle */
    position: relative;
    z-index: 3000;
  }
  .mobile-nav-wrapper.menu-open {
    display: flex !important;
  }

  /* List layout inside the dropdown */
  .mobile-nav-wrapper ul {
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .mobile-nav-wrapper li {
    width: 100%;
    margin: 5px 0;
  }
  .mobile-nav-wrapper a {
    display: block;
    font-size: 16px;
    height: auto !important;
    line-height: 1.4 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
  }

  /* Desktop logo never shows on mobile */
  .nav-logo-wrap.hide-on-mobile { display: none !important; }
  .nav-logo-wrap.show-on-mobile {
    display: block !important;
    text-align: center;
    padding: 10px 0;
  }

  /* Button spacing inside dropdown */
  .menu-login-button {
    display: inline-block;
    margin: 10px auto;
  }

  /* --- Stacking fixes (this is what stops overlap) --- */

  /* Lower the fixed "User: ..." chip under the dropdown */
  #user-display {
    z-index: 20 !important;
  }

  /* Lower the MOBILE theme toggle under the dropdown.
     (Desktop toggle not affected.) */
  .show-on-mobile[data-theme-toggle] {
    position: absolute;  /* you already position it in top.php */
    z-index: 15 !important;
  }
}


@media (max-width: 1600px) {
    .inner-nav ul {
        letter-spacing: 0.01em;
    }
}


.inner-nav ul li:hover > a,
.inner-nav ul li a.active,
.inner-nav ul li a:hover {
  color: var(--heading)!important;
  background: var(--active-menu-bg);
  opacity: 1;
  padding: 0 var(--menuitem-padding-sides) 0 var(--menuitem-padding-sides);
  text-decoration: none !important;
}

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

.mobile-on .inner-nav ul li a.active .mn-has-sub-icon, 
.mobile-on .inner-nav ul li a:hover .mn-has-sub-icon {
  /*  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="9px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>')!important;
*/
  background: var(--mob-active-arrow);  
  background-repeat: no-repeat!important;
  background-size: contain!important; /* Ensures it scales inside the container */
  background-position: center!important; /* Center the SVG */
  box-sizing: content-box; /* Ensure padding is outside the container */
  
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}

/*  ==================  SUB MENUS  ==================  */

@media (min-width: 1025px) { 
    .narrow-menu {
        max-width: var(--sub-width)!important;
    }
}


/*  ====================  MOBILE SUB-MENU  =========================  */

.inner-nav ul li .mn-sub li a:hover,
.mn-sub li a.active,
.mn-sub li a:hover {
  color: var(--button-hover-text)!important;                               /* color of hover and active submenu item */
  background: var(--active-sub-bg)!important;                       /* background colour of hover and active submenu item */
  text-decoration: none !important;
  border-radius: 0px;
}

.mobile-on .desktop-nav ul li a.active,
.mobile-on .desktop-nav ul li a:hover {
  /*  background: var(--mob-active-bg)!important;     Sets the background colour of the active mobile menu item */
  color: var(--button-hover)!important;
}

.mobile-nav.active,
.mobile-nav:hover {
  opacity: 0.75;
}

/* ========== MEGA MENU ================ */

@media (min-width: 1025px) {
  .dropdown-item:hover .mn-sub {
    display: block; /* Show the dropdown on hover */
  }

  /* Show image container and fade in image when hovering over dropdown */
  .dropdown-item:hover .dropdown-image-container {
    visibility: visible; /* Ensure visibility */
    opacity: 1; /* Fully visible */
  }
}


@media (max-width: 1024px) {
    .dropdown-image-container {
        display: none !important;
    }
}


@media (max-width: 1024px) {
    .mn-sub {
        box-shadow: none;
        min-height: none;
        margin: 0 0 0 11px;
    }
}


.mn-sub .row {
  display: flex;
    justify-content: flex-start;
    width: 100%;
    align-items: stretch;
    gap: 0; /* Ensure no gap between the columns */
}

.col-lg-2 .nogap {
  flex: 0 0 16.66%;
    padding: 0;
    margin: 0;
}

.col-lg-6 .nogap {
  flex: 0 0 50%;
    padding: 0;
    margin: 0;
}

.col-lg-2 .withgap {
  flex: 0 0 16.66%;
    padding: 5px;
    margin: 5px;
}

.col-lg-6 .withgap {
  flex: 0 0 50%;
    padding: 5px;
    margin: 5px;
}

.dropdown-links ul li .mn-sub li a:hover,
.mn-sub li a.active,
.mn-sub li a:hover {
  text-decoration: none !important;
}

.dropdown-links ul li .mn-has-sub li a:hover,
.mn-has-sub li a.active,
.mn-has-sub li a:hover {
  text-decoration: none !important;
}

@media (max-width: 800px) {
    .mn-sub {
        flex-direction: column;
    }

    .dropdown-column {
        margin-bottom: 20px;
    }
}


.col-lg-2 {
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    margin: 0;
}

/*  =================  FOOTER  ======================  */

footer ul li a {
  text-decoration: none;
  text-transform: none;
  position: relative;
  display: block;
}

.footer ul li a:hover,
 .footer li a.active,
 .footer li a:hover {
  color: var(--heading)!important;                          /* color of active submenu item */
  text-decoration: none !important;
}

.footer-list {
  text-align: left;
    color: var(--body);
}

@media (max-width: 1024px) {
  .footer-list {
    text-align: center;
    margin-top: 20px;
  }
}


.footer-left {
  text-align: left !important;
}

.footer-right {
  text-align: right !important;
}

@media (max-width: 1024px) {
    .footer-left {
        text-align: center !important;
    }
    .footer-right {
        text-align: center !important;
    }
}


/* =============== CALL TO ACTION =================== */

@media (max-width: 767px) {
    .cta-image {
        min-height: 280px !important; /* Minimum height */
        object-fit: cover; /* Ensures the image covers the div, cropping if necessary */
        object-position: center; /* Align the image to the top so it truncates from the bottom */
    }
}


@media (min-width: 768px) {
    .cta-image {
        max-height: 600px !important; /* Limit the height */
        object-fit: cover; /* Ensures the image covers the container */
        object-position: center; /* Align the image to the top so it truncates from the bottom */
    }
}


/* ------------------------------------------------------------
   Luxurious Fade-In-Up
   ------------------------------------------------------------ */

/* Start state (before JS adds .fade-in-up) */
.fadeInUpAnimation {
  opacity: 0;
  transform: translate3d(0, 100px, 0);           /* bigger rise */
  transition:
    opacity 3200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 3400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;

  /* Optional: subtle “weight” */
  filter: blur(1.5px);
  transition-property: opacity, transform, filter;
  transition-duration: 2200ms, 2400ms, 2400ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1),
                              cubic-bezier(0.22, 1, 0.36, 1),
                              cubic-bezier(0.22, 1, 0.36, 1);
}

/* End state (when JS adds this class) */
.fade-in-up {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fadeInUpAnimation {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/*  =====================  FILTER DIVs  ======================== */

.works-filter a.active:hover {
  text-decoration: none !important;
}

.works-filter a.active:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.light-content .works-filter a.active,
.light-content .works-filter a:hover {
  /*  color: var(--primary);  */
  opacity: 1;
}

.container .work-grid-3 .work-item {
  width: 33.2%;
}

.container .work-grid-4 .work-title,
.container .work-grid-5 .work-title {
  font-size: 18px;
}

.tpl-tabs li .nav-link.active {
  border-color: #ccc #ccc var(--primary);
}

.light-content .tpl-tabs li .nav-link.active {
  border-color: #bbb #bbb #1b1b1b;
  background-color: transparent;
/*  color: var(--primary);       */
}

/* ============================================
   TABBED CONTENT
   ============================================ */

@media (max-width: 1024px) {
  .tabs .tabs-triggers {
    flex-wrap: wrap;
    justify-content: left;
    gap: 1rem 0.7rem;
    margin-bottom: 1rem;
  }
}


@media (max-width: 768px) {
  .tabs .tabs-triggers {
    flex-wrap: wrap;
    justify-content: left;
    gap: 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
  }
}


/* ============================================
   HERO – DESKTOP / LANDSCAPE
   ============================================ */

@media (orientation: portrait) and (max-width: 992px) {
    .home-hero {
        position: relative;
        width: 100%;
        height: 110vh;            /* full screen */
        overflow: hidden;
    }
}


/* ============================================================
   PRODUCT IMAGE – CENTERED, LARGE, HEIGHT-DRIVEN SCALING
   ============================================================ */

@media (orientation: portrait) and (max-width: 992px) {
    .hero-product-image {
            top: 33%;                      /* controls the vertical “lift” */
            transform: translate(-50%, -50%);
            height: 75vh;              /* *** recommended baseline *** */
    }
}


/* ============================================================
   HERO HEADER
   ============================================================ */

.hero-header {
  min-height: calc(100vh + var(--menu-height));          /* full viewport height */
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering of inner block */
  text-align: center;
}

.hero-header-inner {
  width: 100%;
}

.hero-header .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




/* ============================================================
   TEXT – LOWER LEFT BAND
   ============================================================ */

/* ================  SPACING  ========================= */

/* ------ Sets top of header-section to bottom of menu ------*/

.pt-menu {
  padding-top: var(--menu-height);
}

@media (max-width: 1024px) {
    .pt-menu {
        padding-top: 0px;
    }
}


.pb {
  padding-bottom: 3vw;
}

.pr {
  padding-right: 3vw;
}

.pl {
  padding-left: 3vw;
}

.pl1 {
  padding-left: 1vw;
}

.pl2 {
  padding-left: 2vw;
}

.pl3 {
  padding-left: 3vw;
}

.pr1 {
  padding-right: 1vw;
}

.pr2 {
  padding-right: 2vw;
}

.pr3 {
  padding-right: 3vw;
}

.pr4 {
  padding-right: 4vw;
}

.pt0 {
  padding-top: calc(var(--vert) * 0.5vh)!important;
}

.pt1 {
  padding-top: calc(var(--vert) * 1vh)!important;
}

.pt2 {
  padding-top: calc(var(--vert) * 2vh)!important;
}

.pt3 {
  padding-top: calc(var(--vert) * 3vh)!important;
}

.pt4 {
  padding-top: calc(var(--vert) * 4vh)!important;
}

.pt5 {
  padding-top: calc(var(--vert) * 5vh)!important;
}

.pt6 {
  padding-top: calc(var(--vert) * 6vh)!important;
}

.pt7 {
  padding-top: calc(var(--vert) * 7vh)!important;
}

.pt8 {
  padding-top: calc(var(--vert) * 8vh)!important;
}

.pt9 {
  padding-top: calc(var(--vert) * 9vh)!important;
}

.pt10 {
  padding-top: calc(var(--vert) * 10vh)!important;
}

.pt11 {
  padding-top: calc(var(--vert) * 11vh)!important;
}

.pt12 {
  padding-top: calc(var(--vert) * 12vh)!important;
}

.pt13 {
  padding-top: calc(var(--vert) * 13vh)!important;
}

.pt14 {
  padding-top: calc(var(--vert) * 14vh)!important;
}

.pt15 {
  padding-top: calc(var(--vert) * 15vh)!important;
}

.pt16 {
  padding-top: calc(var(--vert) * 16vh)!important;
}

.pt17 {
  padding-top: calc(var(--vert) * 17vh)!important;
}

.pt18 {
  padding-top: calc(var(--vert) * 18vh)!important;
}

.pt19 {
  padding-top: calc(var(--vert) * 19vh)!important;
}

.pt20 {
  padding-top: calc(var(--vert) * 20vh)!important;
}

.pb0 {
  padding-bottom: calc(var(--vert) * 0.5vh)!important;
}

.pb1 {
  padding-bottom: calc(var(--vert) * 1vh)!important;
}

.pb2 {
  padding-bottom: calc(var(--vert) * 2vh)!important;
}

.pb3 {
  padding-bottom: calc(var(--vert) * 3vh)!important;
}

.pb4 {
  padding-bottom: calc(var(--vert) * 4vh)!important;
}

.pb5 {
  padding-bottom: calc(var(--vert) * 5vh)!important;
}

.pb6 {
  padding-bottom: calc(var(--vert) * 6vh)!important;
}

.pb7 {
  padding-bottom: calc(var(--vert) * 7vh)!important;
}

.pb8 {
  padding-bottom: calc(var(--vert) * 8vh)!important;
}

.pb9 {
  padding-bottom: calc(var(--vert) * 9vh)!important;
}

.pb10 {
  padding-bottom: calc(var(--vert) * 10vh)!important;
}

.pb11 {
  padding-bottom: calc(var(--vert) * 11vh)!important;
}

.pb12 {
  padding-bottom: calc(var(--vert) * 12vh)!important;
}

.pb13 {
  padding-bottom: calc(var(--vert) * 13vh)!important;
}

.pb14 {
  padding-bottom: calc(var(--vert) * 14vh)!important;
}

.pb15 {
  padding-bottom: calc(var(--vert) * 15vh)!important;
}

.pb16 {
  padding-bottom: calc(var(--vert) * 16vh)!important;
}

.pb17 {
  padding-bottom: calc(var(--vert) * 17vh)!important;
}

.pb18 {
  padding-bottom: calc(var(--vert) * 18vh)!important;
}

.pb19 {
  padding-bottom: calc(var(--vert) * 19vh)!important;
}

.pb20 {
  padding-bottom: calc(var(--vert) * 20vh)!important;
}

.ml {
  margin-left: 3vw!important;
}

.mr {
  margin-right: 3vw!important;
}

.mr1 {
  margin-right: 1vw!important;
}

.mt3 {
  margin-top: 3vh!important;
}

.mb4 {
  margin-bottom: 4vh!important;
}

/* ================== CENTERING ==================== */

.mx-auto {
  margin-right:auto!important;
    margin-left:auto!important
}

/* ================= ALIGNMENT  ================== */

.align-center {
  text-align: center !important;
}

.align-left {
  text-align: left !important;
}

.align-right {
  text-align: right !important;
}

.align-footer-image {
  text-align: left !important;
}

@media (max-width: 1024px) {
     .align-footer-image {
        text-align: center !important;
     }
}


.align-vertical {
  display: flex;
    justify-content: center;
    flex-direction: column;
}


/* =====  TEXT WRAP COLUMNS ============== */

@media (min-width: 1025px) {
    .two-cols {
        column-count: 2;
        column-fill: balance;
    }
}


/* ===============  PAGE LOADER ================= */

.page-loader {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: 100000;
}

.loader {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  font-size: 10px;
  text-indent: -12345px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spinner 0.7s infinite linear;
  -moz-animation: spinner 0.7s infinite linear;
  -ms-animation: spinner 0.7s infinite linear;
  -o-animation: spinner 0.7s infinite linear;
  animation: spinner 0.7s infinite linear;
  will-change: transform;
  z-index: 100001;
}

.page-loader.dark {
  background: #111;
}

.page-loader.dark .loader {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spinner 0.7s infinite linear;
  -moz-animation: spinner 0.7s infinite linear;
  animation: spinner 0.7s infinite linear;
  z-index: 100001;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* ==================  SKIP TO CONTENT  ============================  */

.skip-to-content {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 20px 40px;
/*  color: var(--primary);      */
  background: #111;
  -webkit-transform: translateY(-150%);
  -moz-transform: translateY(-150%);
  transform: translateY(-150%);
  z-index: 100000;
}

.skip-to-content:focus,
.skip-to-content:hover {
  /*  color: var(--primary);      */
  opacity: 1;
  background: var(--body);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
}

/* ==============================  Small Screens  ============================== */

@media screen and (min-width: 1366px) {
    .item-list {
        display: flex;
        flex-wrap: wrap;
    }

    .item-list li {
        width: 50%;
        box-sizing: border-box;
    }

    /* Ensure that the first item takes the full width */
    .item-list li:first-child {
        width: 100%;
    }
}


@media only screen and (max-width: 1366px) {	
    
    .full-wrapper{
        margin-left: 30px;
        margin-right: 30px;
    }    
    .inner-nav ul li{
        margin-left: 10px;
    }
    .mn-has-multi {
        width: 41vw !important;
        padding: 5px;
        max-width: 41vw;
        margin: 0 30vw 0 30vw !important;
    }
    .mn-sub-multi {
        width: 98vw !important;
    }
    .cols4 {
        width: 180px !important;
    }
    .rows41 {
        min-width: 80vw !important;
        margin: 0 10vw 0 10vw !important;
        height: auto !important;
        overflow: hidden !important;
    }
    .inner-nav ul li .mn-sub li a{
        padding: 8px 8px;
    }
    .text-over {
        padding-bottom: 30vh;
    }
    .rows {
      display: flex;
    }
    .xcolumn {
      width: 100%;
    }
    .item-list {
        display: flex;
        flex-direction: column;
    }    
}


@media only screen and (max-width: 1200px) {
    
    .inner-nav ul li{
        margin-left: 10px;
    }
    .form input[type="text"].input-lg,
    .form input[type="email"].input-lg,
    .form input[type="number"].input-lg,
    .form input[type="url"].input-lg,
    .form input[type="search"].input-lg,
    .form input[type="tel"].input-lg,
    .form input[type="password"].input-lg,
    .form input[type="date"].input-lg,
    .form input[type="color"].input-lg,
    .form select.input-lg{
        height: 51px;
    }
    .btn-mod.btn-large{
        padding: 12px 35px 14px;
    }
    .alt-service-grid{
        margin-top: -40px;
    } 
    .alt-service-item{
        margin-top: 40px;
        padding-left: 48px;
    }
    .alt-services-title{
        margin-bottom: 5px;
    }
    .alt-services-image{
        margin-top: 10px;
    }
    
    .work-grid-4 .work-item{
        width: 20%;
    }

    .work-grid-5 .work-item{
        width: 25%;
    }
    
    .mod-breadcrumbs-mini{
        text-align: right;
    }
    .text-over {
        padding-bottom: 30vh;
    }
}


@media only screen and (max-width: 1199px) {
    
    .work-title{
        letter-spacing: 0;
    }
    .tpl-alt-tabs{
        letter-spacing: 0.2em;
    }
    .tpl-alt-tabs > li{
        width: 170px;
    }
    
    .split-section-wrapper{
        padding: 0 50px;
    }
    .text-over {
        padding-bottom: 30vh;
    }
}


/* ==============================
   Tablet landscape
   ============================== */

@media only screen and (max-width: 1024px) {
    
    .header {
        padding-top: 80px;
        padding-left: 30px;
    }
    .header-sub {
        padding-left: 30px;
    }
    .main-nav,
    .main-nav.small-height,
    .nav-logo-wrap .logo,
    .nav-logo-wrap .logo.small-height,
    .pad-top {
        padding-top: 1px;
    }
    .inner-nav ul li .mn-sub li a{
        padding: 8px 8px;
        color: var(--mob-txt-menu);
    }
    .mobile-cart,
    .mobile-cart.small-height,
    .mobile-nav,
    .mobile-nav.small-height{
        height: 58px !important;
        line-height: 48px !important;
    }
    .scroll-down-alt{
        width: 62px;
        height: 62px;
        line-height: 52px;
        margin-left: -31px;
    }
    .float-images-1{
        top: 12.8vw;
    }
    .team-item-wrap{
        padding: 52px 36px 15px 36px;
    }
    .benefit-item{
        width: 300px;
        padding: 15px 32px;
    }

    .page-section{
        padding: 0 0;
        
    }
    .page-section, .home-section, .small-section{
        background-attachment: scroll;
    }
    
    .owl-pagination{
        bottom: 25px;
    }  
    
    .lp-item{
        width: 50%;
    }
    .lp-item:nth-child(4n + 5) { 
        clear: none; 
    }
    .lp-item:nth-child(2n + 3) {        
        clear:left;
    }
    .fa-examples > li{
        width: 33.3%;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 30vh;
    }
    .show-on-mobile {
        display: block!important;
    }
    .hide-on-mobile {
        display: none!important;
    }
}


@media only screen and (max-width: 992px) {
    
    .split-background{
        width: 32%;
    }    
    .owl-prev,
    .owl-next{
        height: 37px;
    }
    .owl-prev{
        left: 10px;
    }
    .owl-next{
        right: 10px;
    }
    .mod-breadcrumbs:not(.align-center):not(.mod-breadcrumbs-mini) {
        text-align: left !important;
    }
    
    .tpl-alt-tabs > li{
        width: 200px;
    }
      
    .split-section-headings,
    .split-section-headings.left,
    .split-section-headings.right,
    .split-section-content,
    .split-section-content.left,
    .split-section-content.right{
        float: none !important;
        width: auto;
    }
    
    .split-section-headings .section-title{
        letter-spacing: 5px;
    }
    
    .banner-text{
        text-align: center;
    } 
    
    .banner-image{
        margin: 40px 0;
    }
    .team-item-wrap{
        padding: 52px 10px 15px 10px;
    }
    .alt-features-grid{
        margin-top: -30px;
        margin-bottom: 30px;
    } 
    .alt-features-item{
        margin-top: 30px;
    }
    .work-item,
    .work-grid-2 .work-item,
    .work-grid-3 .work-item,
    .work-grid-4 .work-item,
    .container .work-grid-3 .work-item,
    .container .work-grid-4 .work-item,
    .work-grid-5 .work-item{
        width: 49.9%;
    }      
    .countdown > li{
        margin: 0 20px;
    }
    .countdown-number{
        width: 74px;
        height: 74px;
/*        font-size: 24px;  */
        line-height: 64px;
    }
    .countdown-number > b{
        bottom: 18px;
    }   
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 30vh;
    }
    .hide-on-mobile {
        display: none!important;
    }
    .show-on-mobile {
        display: block!important;
    }

}


/* ==============================
   Tablet Portrait
   ============================== */

@media only screen and (max-width: 768px) {

    .hs-wrap{
        max-width: 400px;
    }
    .float-images-1{;
        top: 27vw;
        width: 18vw;
    }
    .float-images-2{;
        width: 18vw;
    }
    .float-images-3{
        bottom: 29.5vh;
        width: 13vw;
    }
    .float-images-4{;
        bottom: 15vh;
        width: 18vw;
    }
    .page-section{
        padding: 0 0;
    }    
    .small-section{
        padding: 30px 0;
    }

    .owl-pagination{
        bottom: 17px;
    }  
    
    .tpl-minimal-tabs > li{
        padding: 0 5px;
    }    
        
    .benefit-item{
        width: 264px;
    }
    .alt-service-grid{
        margin-top: -30px;
    }
    .alt-service-item{
        margin-top: 30px;
    }

    .works-filter a{
        margin: 4px;
    }    
    .blog-item{
        margin-bottom: 50px;
    }
    .blog-media{
        margin-bottom: 15px;
    }
    .google-map > iframe{
        height: 300px;
    }    
    .fm-logo-wrap{
        top: 17px;
        left: 17px;
    }
    .fm-button{
        top: 17px;
        right: 17px;
    }
    .link-to-top {
        display: none;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 30vh;
    }
}


@media only screen and (max-width: 767px) {
    
    .nav-logo-wrap .logo{
        max-width: 150px;
    }    
    .fixed-height-small{
        height: 300px;
        min-height: 300px;
    }
    .fixed-height-medium{
        height: 350px;
        min-height: 350px;
    }
    .fixed-height-large{
        height: 400px;
        min-height: 400px;
    }
    .hs-wrap{
        max-width: 320px;
        padding-top: 27px;
        padding-bottom: 33px;
    }
    .hs-image{
        display: none;
    }
    
    .hs-wrap-1{
        max-width: 240px;
    }    
    .team-item{
        max-width: 370px;
        margin-left: auto;
        margin-right: auto;
    }
    .benefit-item{
        width: 230px;
        padding: 0;
    }    
    .benefit-item:hover:after{
        display: none;
    }       
    .wide-heading{
     /*   font-size: 32px;  */
        letter-spacing: 2px;
    }    
    .works-filter a{
        margin: 4px;
        width: 46%;
    }
    .works-filter a.active:after,
    .works-filter a:hover:after{
        transform: scaleX(0);
        text-decoration: underline 2px solid var(--accent-40) !important;
        text-underline-offset: 3px !important;
    }
    .works-filter a.active,
    .works-filter a.active:hover,
    .works-filter a:hover{
        text-decoration: underline 2px solid var(--accent-40) !important;
        text-underline-offset: 3px !important;
    }
    .work-item,
    .work-grid-2 .work-item,
    .work-grid-3 .work-item,
    .work-grid-4 .work-item,
    .container .work-grid-3 .work-item,
    .container .work-grid-4 .work-item,
    .work-grid-5 .work-item{
        width: 50%;
    }   
    .newsletter-label-text{
        margin-top: 20px;
    }    
    blockquote footer{
        margin-top: 0;
    }
    .banner-content{
        text-align: center;
    } 
    .banner-image{
        text-align: center;
    }    
    .cf-left-col,
    .cf-right-col{
        width: auto;
        margin-right: 0;
        float: none;
    }    
    .section-more,
    .section-more.left,
    .section-more.right{
        float: none !important;
    }    
    .big-icon{
        width: 60px;
        height: 60px;
        line-height: 52px;
        margin-bottom: 0;
    }
    .blog-slide-info{
        padding: 10px;
    }
    .blog-slide-data{
        display: none;
    }    
    .top-bar{
        min-height: 0;
    }
    .top-links{
        float: none !important;
        padding: 5px 0;
        text-align: center;
    }
    .top-links li,
    .top-links li:last-child{
        float: none;
        border:none;
        display: inline-block;
    }
    .top-links li a{
        display: inline-block;
        min-width: 0;
        height: auto;
        line-height: 1;
        padding: 0 5px;
    }
    .top-links li a:hover,
    .top-bar.dark .top-links li a:hover{
        background: none;
    }    
    .side-panel{
        padding-bottom: 20px;
    }
    .sp-logo-wrap{
        max-width: 100px;
        margin: 0 auto;
    }
    .sp-logo-wrap .logo{
        padding: 20px 0 0 0;
    }
    .sp-menu-links a{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .sp-social-links{
        width: auto;
        position: static;
        padding-bottom: 10px;
    }    
    .countdown > li{
        margin: 0 10px 20px;
    }
    .countdown-number{
        width: 44px;
        height: 44px;
        font-size: 20px;
        line-height: 44px;
    }
    .countdown-number > b{
        bottom: -20px;
/*        color: rgba(255,255,255, .85);    */
    } 
    .text-mobile{
        line-height: 1.2;
    }
    .link-to-top {
        display: none;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 30vh;
    }
}


/* ==============================
   Phone
   ============================== */

@media only screen and (max-width: 575px) { 
    .form input.newsletter-field {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .form .newsletter-button {
        display: block;
        width: 100%;
    }
    .link-to-top {
        display: none;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 25vh;
    }
}


@media only screen and (max-width: 480px) {
    
    .full-wrapper{
        margin-left: 1px;
        margin-right: 1px;
    }
/*    .container {
        padding-left: 1px;
        padding-right: 1px;
    } */
    .float-images-1{;
        top: 32vw;
        left: 7vw;
        width: 25vw;
    }
    .float-images-2{;
        width: 25vw;
    }
    .float-images-3{
        bottom: 22vh;
        right: 17vw;
        width: 18vw;
    }
    .float-images-4{;
        bottom: 8vh;
        width: 25vw;
    }
    blockquote{
        margin-bottom: 2em;
    }
    .blog-item-body blockquote p:before{
        display: block;
        margin-top: 1em;
        position: static;
        top: 0;
        left: 0;
        line-height: 0;
        opacity: 1;
    }
    .call-action-1-heading{
        font-size: 32px;
    }
    .form input[type="text"].input-md,
    .form input[type="email"].input-md,
    .form input[type="number"].input-md,
    .form input[type="url"].input-md,
    .form input[type="search"].input-md,
    .form input[type="tel"].input-md,
    .form input[type="password"].input-md,
    .form input[type="date"].input-md,
    .form input[type="color"].input-md,
    .form select.input-md,
    .form input[type="text"].input-lg,
    .form input[type="email"].input-lg,
    .form input[type="number"].input-lg,
    .form input[type="url"].input-lg,
    .form input[type="search"].input-lg,
    .form input[type="tel"].input-lg,
    .form input[type="password"].input-lg,
    .form input[type="date"].input-lg,
    .form input[type="color"].input-lg,
    .form select.input-lg{
        height: 41px;
        padding-bottom: 3px;
    }
    .form textarea.input-md,
    .form textarea.input-lg{
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: var(--p2);
        line-height: var(--p2l);
    }
    .btn-mod.btn-medium,
    .btn-mod.btn-large{
        padding: 8px 15px 10px 15px;
    }
    .nav-bar-compact{
        top: 0;
        left: 0;
    }    
    .page-section{
        padding: 0 0;
    }
    .small-section{
        padding: 20px 0;
    }    
    .owl-pagination{
        bottom: 5px !important;
    }    
    .owl-prev, .owl-next{
        display: none;
    }
    .owl-page{
        padding-left: 8px;
        padding-right: 8px;
    }    

    .tpl-minimal-tabs > li{
        padding: 0;
    }
    .tpl-minimal-tabs > li > a{
        padding: 6px 10px 5px;
    }
    .tpl-alt-tabs{
        letter-spacing: 0.1em;
    }
    .tpl-alt-tabs > li{
        width: 120px;
    }
    .work-container{
        padding: 30px 0;
    }     
    .works-filter{
        margin-bottom: 30px;
    }
    .works-filter a{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }    
    .work-full-text{
        margin-top: 30px;
    }
    .call-action-2-image-2{
        margin: 60px auto;
    }
    .footer-social-links a{
        width: 42px;
        height: 42px;
        line-height: 42px !important;
    }
    .footer-social-links a i,
    .footer-social-links a span[class^=icon]{
        line-height: 42px;
    }
    .blog-container{
        margin-top: 30px;
        margin-bottom: 30px;
    }    
    .pagination a{
        min-width: 32px;
        margin-right: 3px;
        padding: 6px 8px;
    }
    .comment-avatar{
        width: 30px;
        margin-top: 7px;
    }    
    .separ-space{
        display: block;
        height: 10px;
    }    
    .google-map > iframe{
        height: 300px;
    }
    .tpl-tabs > li{
        display: block;
        float: none;
        width: 100%;
    }
    .tpl-tabs > li.active a{
        background: #f5f5f5 !important;
    }    
    .fm-search{
        width: 200px;
    }
    
    .fa-examples > li{
        width: 50%;
    }
    .shopping-cart-table-title{
        min-width: 150px; 
    }
    .link-to-top {
        display: none;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 25vh;
    }
    .hide-on-small {
        display: none!important;
    }
    .show-on-small {
        display: block!important;
    }
}


/* ==============================
   Small Phone
   ============================== 
  
@media only screen and (max-width: 379px) {
    
    .mobile-logo {
        opacity: 0!important;
    }
}*/

/* ==============================
   Very Small Phone
   ============================== */

@media only screen and (max-width: 319px) {
    
      .nav-social-links{
          display: none;
      }
    .link-to-top {
        display: none;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 25vh;
    }
/*    .mobile-logo {
        opacity: 0!important;
    } */
}


/* ==============================
   Max Height 767
   ============================== */

@media only screen and (max-height: 767px) {
    
    .split-image img{
        width: 100%;
    }
    .sp-social-links{
        padding-bottom: 10px;
        position: static;
        width: auto;
    }
    .text-over {
        padding-bottom: 25vh;
    }
    
}


/* ==============================
   Max Height 480
   ============================== */

@media only screen and (max-height: 480px) {
    
    .float-images-1{;
        top: 13.3vw;
        left: 7vw;
        width: 12vw;
    }
    .float-images-2{;
        width: 12vw;
    }
    .float-images-3{
        bottom: 29vh;
        right: 9.8vw;
        width: 9vw;
    }
    .float-images-4{;
        bottom: 8vh;
        width: 12vw;
    }
   .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 20vh;
    }
    
}


/* ==============================
   Max Height 374
   ============================== */

@media only screen and (max-height: 374px) {
    
    .min-height-80vh,
    .min-height-90vh,
    .min-height-100vh{
        min-height: 374px;
    }
    .img-lg {
        display: none;
    }
    .img-sm {
        display: block;
    }
    .text-over {
        padding-bottom: 15vh;
    }
    
}


/* ==============================
   IOS Background Fix
   ============================== */

.mobile .page-section, .mobile .home-section, .mobile .small-section {
  background-attachment: scroll;
}

@media only screen and (min-width: 1025px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    
    html:not(.no-touch) .page-section, html:not(.no-touch) .home-section, html:not(.no-touch) .small-section{
        background-attachment: scroll;
    }
    .float-images-1{
        top: 27vw;
        left: 10vw;
        width: 20vw;
    }
    .float-images-2{
        position: absolute;
        bottom: 0;
        left: 3.125vw;
        width: 20vw;
    }
    .float-images-3{
        bottom: 32vh;
        right: 14vw;
        width: 15vw;
    }
    .float-images-4{
        position: absolute;
        bottom: 18vh;
        right: 3.125vw;
        width: 20vw;
    }
}


/* ==============================
   Internet Explorer Fix
   ============================== */

@media all and (-ms-high-contrast:none){
     
    .min-height-80vh{
        height: 80vh;
    } 
    .min-height-90vh{
        height: 90vh;
    } 
    .min-height-100vh{
        height: 100vh;
    }
    .fixed-height-large{
        height: 800px;
    } 
    .fixed-height-medium{
        height: 700px;
    } 
    .fixed-height-small{
        height: 600px;
    }
     
}


/* ==============================
   Print Styles Fix
   ============================== */

@media print {
    
    *{
/*        color: var(--dark-bg) !important;         */
    }
    
    .main-nav{
        display: none;
    }
    .buy-button{
        display: none;
    }
    img{
        display: block;
    }    
}


============================================================

============================================================

@charset "UTF-8";

/*  ===================================================================  VARIABLES  ====================================================================================  */

:root {
  scroll-behavior: smooth;
}

/* ====================================================================== ASK BROWSER FOR DARK MODE ========================================================================================  */

:root {
  color-scheme: dark;
}

/* ====================================================================== FONTS ========================================================================================  */

:root {
  --font-brand: 'OladraFont', sans-serif;
  --font-heading2: 'SatoshiBlack', sans-serif;
  --font-heading1: 'OladraFont', sans-serif;
  --font-heading: 'Playfair', serif;
  --font-light: 'SatoshiLight', sans-serif;
  --font-regular: 'SatoshiRegular', sans-serif;
  --font-medium: 'SatoshiMedium', sans-serif;
  --font-bold: 'SatoshiBold', sans-serif;
  --font-black: 'SatoshiBlack', sans-serif;
  --font-body: var(--font-light);
  --logo-word: url("https://antipodes.audio/images/logo-word.png");
}

/*  ==============================================================  USER ADJUSTABLE FONT-SIZING  ===========================================================================  */

/*  This section allows you to change the fonts used in the website, and it is safe to change these settings.  */

:root {
  --h1-desktop: 60px;
  --h2-desktop: 36px;
  --h3-desktop: 28px;
  --h4-desktop: 22px;
  --p0-desktop: 29px;
  --p1-desktop: 23px;
  --p2-desktop: 21px;
  --p3-desktop: 19px;
  --p4-desktop: 17px;
  --h1-tablet: 54px;
  --h2-tablet: 36px;
  --h3-tablet: 24px;
  --h4-tablet: 22px;
  --p0-tablet: 28px;
  --p1-tablet: 22px;
  --p2-tablet: 20px;
  --p3-tablet: 18px;
  --p4-tablet: 14px;
  --h1-sm-tablet: 40px;
  --h2-sm-tablet: 30px;
  --h3-sm-tablet: 24px;
  --h4-sm-tablet: 20px;
  --p0-sm-tablet: 24px;
  --p1-sm-tablet: 20px;
  --p2-sm-tablet: 18px;
  --p3-sm-tablet: 16px;
  --p4-sm-tablet: 14px;
  --h1-mobile: 24px;
  --h2-mobile: 20px;
  --h3-mobile: 18px;
  --h4-mobile: 16px;
  --p0-mobile: 20px;
  --p1-mobile: 18px;
  --p2-mobile: 16px;
  --p3-mobile: 14px;
  --p4-mobile: 12px;
  
  --h1l-desktop: 66px;
  --h2l-desktop: 46px;
  --h3l-desktop: 34px;
  --h4l-desktop: 28px;
  --p0l-desktop: 44px;
  --p1l-desktop: 40px;
  --p2l-desktop: 34px;
  --p3l-desktop: 32px;
  --p4l-desktop: 28px;
  --h1l-tablet: 64px;
  --h2l-tablet: 44px;
  --h3l-tablet: 36px;
  --h4l-tablet: 28px;
  --p0l-tablet: 42px;
  --p1l-tablet: 38px;
  --p2l-tablet: 32px;
  --p3l-tablet: 30px;
  --p4l-tablet: 24px;
  --h1l-sm-tablet: 60px;
  --h2l-sm-tablet: 42px;
  --h3l-sm-tablet: 30px;
  --h4l-sm-tablet: 28px;
  --p0l-sm-tablet: 36px;
  --p1l-sm-tablet: 32px;
  --p2l-sm-tablet: 26px;
  --p3l-sm-tablet: 24px;
  --p4l-sm-tablet: 20px;
  --h1l-mobile: 50px;
  --h2l-mobile: 36px;
  --h3l-mobile: 30px;
  --h4l-mobile: 26px;
  --p0l-mobile: 36px;
  --p1l-mobile: 34px;
  --p2l-mobile: 28px;
  --p3l-mobile: 26px;
  --p4l-mobile: 22px;
}

/*  ==============================================================  USER ADJUSTABLE COLOURS  ===========================================================================  */

/*  This section allows you to change the colours used in the website, and it is safe to change these settings within the value limits stated.  */

:root {
  --primary: #e16242;
  --secondary: #171717;
  --brand: #5c002a;
  --brand-hover: #9b0650;
  --body: #e8e8e8;
  --body-hover: #ffffff;
  --body-active: #ffffff;
  --heading: #f5f5f5;
  --highlight-text: #f5f5f5;
  --brand-text: #b80054;
  --brand-text-hover: #ec097a;
  --dark-heading: #171717;
  --dark-body: #2f2f2f;
  --luxe: #98875d;
  --luxe-hover: #c1a867;
  --muted: #8f8f8f;
  --muted-hover: #b2b2b2;
  --semi-muted: #aaaaaa;
  --placeholder: #999999;
  --menu-bg: #e16242;
  --highlight-bg: #f1f1f1;
  --backdrop: #111111ee;
  --divider: #e0e0e0;
  --primary-border: #e0e0e0;
  --button: #8f8f8f;
  --button-hover: #8f8f3e;
  --primary-gradient: linear-gradient(28deg,var(--brand) 0%, var(--brand-hover) 100%);
  --luxe-gradient: linear-gradient(28deg,var(--luxe) 0%, var(--luxe-hover) 100%);
  --slick-dot: #999999;
  --slick-dot-active: #eeeeee;
  --shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.4);
  --shadow-large: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
  --brand-image: url('/images/oladra-logo-light.png');
  --brand-logo: url('/images/oladra-logo-light.png');

}


/* =========================================== SPACING ============================================== */

/*  This changes vertical spacing between portrait and landscape  */

:root {

  --vert: 1;

@media (orientation: portrait) {
    --vert: 0.5;
    }  
}

/* =========================================== MENUS ============================================== */

/*  The colour variables you can change are shown below as 'var(variable)', with the allowable variables found and defined in the COLOURS section below.  */

:root {
  --bg-menu: var(--menu-bg);                           /* background color of the main menu */
  --border-menu: var(--page-bg);                        /* menu bottom-border colour */
  --txt-menu: var(--link-text);                            /* text color of the main menu items */
  --active-menu: var(--text-contrast);                       /* text color of main menu on hover and when active */
  --bg-sub: var(--menu-bg);                            /* background color of the sub-menus */
  --head-sub: var(--heading);                          /* text color of the sub-menu headings */
  --txt-sub: var(--link-text);                             /* text color of the sub menu items */
  --header-bg: var(--menu-bg);                          /* background colour of the header section */
  --header-txt: var(--heading);                          /* text colour of the header section */
  --panel-bg: var(--highlight-bg);                          /* background colour of the header section */
  --panel-txt: var(--body-text);                          /* text colour of the header section */
  --mob-txt-menu: var(--link-text);                        /* text color for mobile menu */
  --mob-bg-menu: var(--page-bg);                       /* background color for mobile menu */
  --mob-active-txt: var(--heading);                    /* text color of hover or active menu items on mobile */
}

/*  ========================================= MENU DIMENSIONS ================================================ */

/* This section is used to set the height of the main menu and sub-menu width */

:root {
  --menu-height: 80px;                                                      /* set the height of the main menu bar */
  --mob-menu-padding: 0px;                                                  /* set the padding of the mobile menu */
  --logo-height: 45px;                                                      /* enter the image height so that it can be automatically vertically centered in the main menu */
  --logo-left-padding: 20px;                                                /* sets the left padding of the logo */
  --sub-width: 250px;                                                       /* set the maximum width of sub-menus in deskptop for narrow-menu class */
  --menuitem-spacing: 10px;                                                 /* space between main menu items */
  --onscroll-padding-top: 0px;                                              /* align sub-menu with main menu on scroll */
  --menuitem-padding-sides: 2px;                                            /* left and right padding of main menu items */
  --stack-gap: 50px;                                                        /* gap between overlay rows for hero section on mobile */
  --lift: 50px;                                                             /* space between overlay rows and bottom of hero section on mobile */
}

/*  ========================================= JUMP ADJUSTMENT ================================================ */

/* This section is used to set the scroll offset when navigating to a specific part of a web page */

:root {
  /* Tune to your actual sticky header height; add a small buffer */
  --nav-offset: 100px;
  scroll-behavior: smooth;           /* optional: smooth jump */
}

@media (max-width: 1024px) {
  :root { --nav-offset: 72px; }
}


/*  ========================================= ANIMATIONS ================================================ */

/* This section is used to set the delay and duration of on-scroll animations */

:root {
  --animation-delay: 0.35s;
  --animation-duration: 1.65s;
}

/* =========================================  CALCULATED VARIABLES  =================================================== */

/*  This section automatically generates all of the remaining variables  */

/*  This section should not normally be adjusted, and should be managed above */

:root {
  /* === Desktop (default) === */
  --h1: var(--h1-desktop);
  --h2: var(--h2-desktop);
  --h3: var(--h3-desktop);
  --h4: var(--h4-desktop);
  --p0: var(--p0-desktop);
  --p1: var(--p1-desktop);
  --p2: var(--p2-desktop);
  --p3: var(--p3-desktop);
  --p4: var(--p4-desktop);

  --h1l: var(--h1l-desktop);
  --h2l: var(--h2l-desktop);
  --h3l: var(--h3l-desktop);
  --h4l: var(--h4l-desktop);
  --p0l: var(--p0l-desktop);
  --p1l: var(--p1l-desktop);
  --p2l: var(--p2l-desktop);
  --p3l: var(--p3l-desktop);
  --p4l: var(--p4l-desktop);
}

/* === Tablet (max-width: 1024px) === */

@media (max-width: 1024px) {
  :root {
    --h1: var(--h1-tablet);
    --h2: var(--h2-tablet);
    --h3: var(--h3-tablet);
    --h4: var(--h4-tablet);
    --p0: var(--p0-tablet);
    --p1: var(--p1-tablet);
    --p2: var(--p2-tablet);
    --p3: var(--p3-tablet);
    --p4: var(--p4-tablet);

    --h1l: var(--h1l-tablet);
    --h2l: var(--h2l-tablet);
    --h3l: var(--h3l-tablet);
    --h4l: var(--h4l-tablet);
    --p0l: var(--p0l-tablet);
    --p1l: var(--p1l-tablet);
    --p2l: var(--p2l-tablet);
    --p3l: var(--p3l-tablet);
    --p4l: var(--p4l-tablet);
  }
}


/* === Small Tablet (max-width: 768px) === */

@media (max-width: 768px) {
  :root {
    --h1: var(--h1-sm-tablet);
    --h2: var(--h2-sm-tablet);
    --h3: var(--h3-sm-tablet);
    --h4: var(--h4-sm-tablet);
    --p0: var(--p0-sm-tablet);
    --p1: var(--p1-sm-tablet);
    --p2: var(--p2-sm-tablet);
    --p3: var(--p3-sm-tablet);
    --p4: var(--p4-sm-tablet);

    --h1l: var(--h1l-sm-tablet);
    --h2l: var(--h2l-sm-tablet);
    --h3l: var(--h3l-sm-tablet);
    --h4l: var(--h4l-sm-tablet);
    --p0l: var(--p0l-sm-tablet);
    --p1l: var(--p1l-sm-tablet);
    --p2l: var(--p2l-sm-tablet);
    --p3l: var(--p3l-sm-tablet);
    --p4l: var(--p4l-sm-tablet);
  }
}


/* === Mobile (max-width: 480px) === */

@media (max-width: 480px) {
  :root {
    --h1: var(--h1-mobile);
    --h2: var(--h2-mobile);
    --h3: var(--h3-mobile);
    --h4: var(--h4-mobile);
    --p0: var(--p0-mobile);
    --p1: var(--p1-mobile);
    --p2: var(--p2-mobile);
    --p3: var(--p3-mobile);
    --p4: var(--p4-mobile);

    --h1l: var(--h1l-mobile);
    --h2l: var(--h2l-mobile);
    --h3l: var(--h3l-mobile);
    --h4l: var(--h4l-mobile);
    --p0l: var(--p0l-mobile);
    --p1l: var(--p1l-mobile);
    --p2l: var(--p2l-mobile);
    --p3l: var(--p3l-mobile);
    --p4l: var(--p4l-mobile);
  }
}


/*  ===========================================  END OF VARIABLES ============================================================== */