.elementor-kit-8{--e-global-color-primary:#00CAF2;--e-global-color-secondary:#00DD97;--e-global-color-text:#06181F;--e-global-color-accent:#FFBE53;--e-global-color-d647bcb:#00CAF2;--e-global-color-7700b7d:#00DD97;--e-global-color-f97238e:#FFBE53;--e-global-color-67162e8:#FF003D;--e-global-color-0a988b5:#06181F;--e-global-color-f74da46:#FFFFFF;--e-global-color-15a6722:#132F39;--e-global-typography-primary-font-family:"Exo 2";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:72px;--e-global-typography-secondary-font-family:"Exo 2";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:42px;--e-global-typography-text-font-family:"Exo 2";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:24px;--e-global-typography-accent-font-family:"Exo 2";--e-global-typography-accent-font-size:24px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:22px;background-color:#06181F;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{color:var( --e-global-color-f74da46 );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{color:var( --e-global-color-f74da46 );font-family:"Exo 2", Sans-serif;font-size:28px;font-weight:400;line-height:42px;}.elementor-kit-8 h3{color:var( --e-global-color-f74da46 );font-family:"Exo 2", Sans-serif;font-size:19px;font-weight:400;line-height:42px;}.elementor-kit-8 h4{color:var( --e-global-color-f74da46 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{color:var( --e-global-color-f74da46 );accent-color:var( --e-global-color-f74da46 );background-color:var( --e-global-color-0a988b5 );border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(max-width:1024px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:2400px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}}/* Start custom CSS *//* Download CTA Mobilee */
@media screen and (min-width: 767px){
#downloadCTA {
    display:none;}
}

/* Make the whole Icon Box clickable by stretching the title <a> */
.mega-links .elementor-icon-box-wrapper{
  position: relative;
  cursor: pointer;                  /* hand cursor on hover */
}

.mega-links .elementor-icon-box-title a{
  position: absolute;
  inset: 0;                         /* cover the entire box */
  display: block;
  z-index: 5;                       /* above text so it catches clicks */
  /* keep link visually invisible but still focusable */
  color: inherit;
  text-decoration: none;
}

/* Show a nice focus ring when tabbing */
.mega-links .elementor-icon-box-title a:focus{
  outline: 2px solid rgba(0,202,242,.9); /* your cyan */
  outline-offset: 3px;
  border-radius: 6px;
}


/* Base pill badge */
.badge{
  display:inline-block;
  padding:.35rem .6rem;          /* ~6px 10px */
  border-radius:999px;            /* full pill */
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 10px rgba(0,0,0,.25);
}

/* Colour variants */
.badge--green{       background:#00DD97; color:#06181F; } /* Green */
.badge--blue{    background:#00CAF2; color:#06181F; } /* Blue */
.badge--yellow{  background:#FFBE53; color:#06181F; } /* Yellow */
.badge--red{  background:#FF003D; color::#06181F; } /* Red */

/* Align when using Flexbox Containers */
.e-con .badge{ align-self:flex-start; }

/* =========================================
   CICLOZONE — Accordion Image Stage (clean)
   Scope: #zones-acc
   ========================================= */

#zones-acc{
  --acc-dur: 420ms;                 /* JS will overwrite to match widget */
  --fade-dur: var(--acc-dur);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Stage: fixed height so accordion growth never resizes the art */
#zones-acc .stage{
  position: sticky; top: 24px;
  height: 579px;                    /* your image height */
  min-height: 579px;
  max-height: 579px;

  /* keep reflow/paint from nudging it */
  contain: layout paint size;
  transform: translateZ(0);
}

/* Stack the image widgets */
#zones-acc .stage-img{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* PURE cross-fade (no translate/scale) for stability */
  opacity: 0;
  transition: opacity var(--fade-dur) var(--ease);
  will-change: opacity;
}

/* Inner <img> fills consistently */
#zones-acc .stage-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;            /* avoid baseline quirks */
}

/* Before JS: show only the first image */
#zones-acc:not(.zones-ready) .stage-img:first-child{
  opacity: 1;
  z-index: 2;
}

/* After JS: only active/prev visible */
#zones-acc.zones-ready .stage-img{ opacity: 0; }
#zones-acc.zones-ready .stage-img.is-active,
#zones-acc.zones-ready .stage-img.is-prev{ opacity: 1; }

/* Ensure outgoing frame sits above the stack during overlap */
#zones-acc .stage-img.is-prev { z-index: 2; }
#zones-acc .stage-img.is-active { z-index: 3; }

/* Mobile: relax sticky/height if needed */
@media (max-width: 991px){
  #zones-acc .stage{
    position: relative;
    top: 0;
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }
}

/* Optional (nice to have): keep layout width stable when page first gets a scrollbar */
html { scrollbar-gutter: stable both-edges; }



/* ==============================
   CICLOZONE Accordion Styling
   ============================== */

/* Layout of accordion headers */
#zones-acc-accordion .e-n-accordion-item-title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 140px 16px 24px; /* space for right label */
  line-height: 1.2;
  cursor: pointer;
}

/* ----- Right-side "ZONE n" label ----- */
#zones-acc-accordion summary.e-n-accordion-item-title::after {
  content: "ZONE " attr(data-zone);
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 16px;
  color: var(--zone-color, #9BA8AE);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  white-space: nowrap;
}

/* Per-zone colours (customise as needed) */
#zones-acc-accordion details[data-zone="1"] > summary::after { --zone-color:#9BA8AE; } /* neutral */
#zones-acc-accordion details[data-zone="2"] > summary::after { --zone-color:#00CAF2; } /* cyan */
#zones-acc-accordion details[data-zone="3"] > summary::after { --zone-color:#00DD97; } /* green */
#zones-acc-accordion details[data-zone="4"] > summary::after { --zone-color:#FFBE53; } /* amber */
#zones-acc-accordion details[data-zone="5"] > summary::after { --zone-color:#FF003D; } /* red */

/* ----- Title text styling ----- */
#zones-acc-accordion .e-n-accordion-item-title-text {
  font-weight: 600;
  color: #d0d7da; /* default muted */
  transition: color .3s ease;
}

/* Active item: brighten the left title text */
#zones-acc-accordion details[open] .e-n-accordion-item-title-text {
  color: #ffffff;
}

/* Optional: subtle divider between items */
#zones-acc-accordion details.e-n-accordion-item {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Accessibility helper (for screen-reader-only text added via JS) */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,1px,1px) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ==============================
   CICLOZONE Accordion backgrounds
   Works with Nested Accordion (<details>/<summary>)
   ============================== */

/* Theme variables (tweak these) */
#zones-acc-accordion {
  --bg-inactive: #0f1a20;           /* closed item background */
  --bg-active:   #15252d;           /* open item background */
  --bg-hover:    #132129;           /* hover background (closed) */
  --border:      rgba(255,255,255,.08);
  --radius:      16px;
  --shadow:      0 6px 18px rgba(0,0,0,.25);
  --shine:       linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}

/* Item wrapper */
#zones-acc-accordion details.e-n-accordion-item{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    var(--shine),
    var(--bg-inactive);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    background .35s var(--ease, ease),
    border-color .35s var(--ease, ease),
    box-shadow .35s var(--ease, ease);
  margin-bottom: 12px; /* space between items */
}

/* Remove last divider if you kept a border-bottom elsewhere */
#zones-acc-accordion details.e-n-accordion-item:last-child{
  margin-bottom: 0;
}

/* Hover (only on closed items) */
#zones-acc-accordion details.e-n-accordion-item:not([open]):hover{
  background:
    var(--shine),
    var(--bg-hover);
  border-color: rgba(255,255,255,.12);
}

/* Active/open item */
#zones-acc-accordion details.e-n-accordion-item[open]{
  background:
    radial-gradient(120% 160% at 20% -40%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 60%),
    var(--bg-active);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Header row inherits the container’s rounded corners and padding from your previous CSS */
#zones-acc-accordion .e-n-accordion-item-title{
  backdrop-filter: saturate(1.02); /* a touch more clarity */
}

/* --- Left accent bar tied to the zone color --- */
#zones-acc-accordion details.e-n-accordion-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--zone-color, #9BA8AE);
  opacity:.65;
  transition: opacity .35s var(--ease, ease), width .35s var(--ease, ease);
}

/* Thicker + brighter when active */
#zones-acc-accordion details.e-n-accordion-item[open]::before{
  width:6px;
  opacity:1;
}

/* --- Content region (the panel) --- */
#zones-acc-accordion details.e-n-accordion-item > [role="region"],
#zones-acc-accordion details.e-n-accordion-item > .e-n-accordion__content{
  padding: 10px 24px 20px 24px;   /* comfy inner spacing */
  color: #d6dee2;
  transition: padding .25s var(--ease, ease), background .35s var(--ease, ease);
}

/* Slightly brighter backdrop for open content */
#zones-acc-accordion details.e-n-accordion-item[open] > [role="region"],
#zones-acc-accordion details.e-n-accordion-item[open] > .e-n-accordion__content{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

/* Optional: tighten content padding on closed items (when Elementor keeps DOM mounted) */
#zones-acc-accordion details.e-n-accordion-item:not([open]) > [role="region"],
#zones-acc-accordion details.e-n-accordion-item:not([open]) > .e-n-accordion__content{
  padding-top: 0; padding-bottom: 0;
}

/* --- Title text (left) and Zone label (right) states --- */
/* Left title default + active (from your previous block; repeat here for clarity) */
#zones-acc-accordion .e-n-accordion-item-title-text {
  font-weight: 600;
  color: #d0d7da;
  transition: color .3s var(--ease, ease);
}
#zones-acc-accordion details[open] .e-n-accordion-item-title-text {
  color: #ffffff;
}

/* Right label stays coloured always (no override on open) */
/* (We rely on your per-zone --zone-color rules already set) */

/* Focus ring for keyboard navigation */
#zones-acc-accordion summary.e-n-accordion-item-title:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--zone-color, #00CAF2) 70%, #fff 30%);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #zones-acc-accordion details.e-n-accordion-item{
    transition: none !important;
  }
  #zones-acc-accordion .e-n-accordion-item-title-text{
    transition: none !important;
  }
}
/* Fixed (or clamped) stage height so images don’t resize with content */
#zones-acc{
  --stage-h: clamp(360px, 42vw, 580px);  /* tweak to taste */
}

#zones-acc .stage{
  height: var(--stage-h);
  min-height: var(--stage-h);
  max-height: var(--stage-h);
  position: sticky; top: 24px;          /* keeps it in view while right side grows */
  z-index: 1;
}

/* The frames are already absolute/inset:0; they’ll now fill the fixed stage */
#zones-acc .stage-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}/* End custom CSS */