.elementor-kit-5{--e-global-color-primary:#1AA2BD;--e-global-color-secondary:#54595F;--e-global-color-text:#C0C0C0;--e-global-color-accent:#61A42B;--e-global-color-1ec0272:#071C20;--e-global-color-41de86e:#1D2F32;--e-global-color-eff8ebf:#FFFFFF;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:300;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:300;background-color:var( --e-global-color-1ec0272 );color:var( --e-global-color-text );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#1AA2BD;border-radius:40px 40px 40px 40px;padding:15px 25px 15px 25px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{color:#FFFFFF;}.elementor-kit-5 h2{color:#FFFFFF;font-size:54px;}.elementor-kit-5 h3{color:#FFFFFF;}.elementor-kit-5 h4{color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --grid-border:#ff05f7; }
/* Start custom CSS *//* ============================================================
   DYCEM — Global Custom CSS
   Home: Elementor → Site Settings → Custom CSS
   (NOT pasted into an HTML widget — keep it global.)
   ============================================================ */

/* ---- Design tokens -----------------------------------------
   Single source of truth. Update a value here and it cascades
   everywhere. Verify the ⚠︎ values against Figma Dev Mode.    */
:root {
  /* Brand (from Figma) */
  --c-primary: #1AA2BD;   /* blue  */
  --c-accent:  #61A42B;   /* green */
  --c-bg:      #081E22;   /* dark teal page background (subtle gradient) */
  --c-text:    #FFFFFF;   /* headings / high-contrast text */
  --c-muted:   #C0C0C0;   /* muted grey body copy */

  /* Grid system */
  --grid-border: #404F52; /* Figma "Grey lines" — the hairline colour */
  --grid-line: 1px;       /* hairline thickness */

  /* Spacing (Figma) */
  --gap: 30px;            /* standard gap */
  --gap-sm: 20px;         /* small gap   */
  --gutter: 20px;         /* section side gutter — single source of truth */
}

/* ---- Text colour utilities ---------------------------------
   Apply via a widget's Advanced → CSS Classes field.          */
.text-primary { color: var(--c-primary); }
.text-accent  { color: var(--c-accent); }


/* ============================================================
   GRID SECTION FRAME
   Full-width section whose horizontal rules run edge-to-edge,
   while the constrained inner container carries the left/right
   rules. This is what keeps the page reading as one big grid.

   Apply `grid-section` to the SECTION (outer container).
   ============================================================ */
.grid-section {
  border-top:    var(--grid-line) solid var(--grid-border);
  border-bottom: var(--grid-line) solid var(--grid-border);
  /* Lock the side gutter here, NOT in the per-section padding field, so every
     grid-section is exactly the same width. Equal width → repeat(N, 1fr) tracks
     resolve identically across sections → vertical column lines align page-wide.
     A hand-typed 21px in one section is what broke this before.
     Leave the horizontal padding field EMPTY on grid-sections; set vertical
     padding (top/bottom) in the field as needed. */
  padding-left:  var(--gutter);
  padding-right: var(--gutter);
}
.grid-section > .e-con-inner {
  border-left:  var(--grid-line) solid var(--grid-border);
  border-right: var(--grid-line) solid var(--grid-border);
}

/* Where two framed sections stack, pull the lower one up by one hairline so
   its top border overlaps the upper one's bottom border — they render as a
   single 1px line instead of doubling to 2px. Position-independent (no
   :first-child), so a section is never accidentally stripped of its border. */
.grid-section + .grid-section {
  margin-top: calc(-1 * var(--grid-line));
}


/* ============================================================
   BULLETED HEADING
   Square accent marker to the left of a heading.
   Apply `bulleted-heading` to the heading widget.
   NOTE: the ::before is absolutely positioned, so the element
   MUST be position: relative — set below (your original relied
   on an ancestor being positioned, which mis-placed the dot).
   ============================================================ */
.bulleted-heading {
  position: relative;
  padding-left: 20px;
  gap: 10px;
  flex-wrap: wrap;
}
.bulleted-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  flex: none;
}


/* ============================================================
   DIVIDED GRID
   Internal hairlines drawn BETWEEN grid items (not around the
   outside). The border classes are toggled by custom-js.js so
   they reflow correctly when columns wrap on smaller screens.

   Apply `divided-grid` to the grid CONTAINER.
   Pair with `grid-section` on the wrapping section for the
   outer frame.
   ============================================================ */
.divided-grid__border-right  { border-right:  var(--grid-line) solid var(--grid-border); }
.divided-grid__border-bottom { border-bottom: var(--grid-line) solid var(--grid-border); }


/* ============================================================
   SWIPER SLIDER (mobile only) — init in custom-js.js
   Desktop (>=768px): render as the normal 3-col divided grid;
   Swiper is NOT initialised, so the wrapper stays a CSS grid.
   Mobile (<=767px): JS initialises Swiper, which takes over the
   wrapper (flex + transforms) and the controls box is shown.

   Structure (full-width Elementor containers so slides stay
   direct children — no .e-con-inner between wrapper and slides):
     .swiper.why-slider  >  .swiper-wrapper.divided-grid  >  .swiper-slide
   Controls (.slider-controls) sit in their own bordered box and
   are referenced by Swiper navigation via .why-prev / .why-next.
   ============================================================ */

/* Desktop — behave as the static 3-column divided grid */
@media (min-width: 768px) {
  .why-slider { overflow: visible !important; }
  .why-slider > .swiper-wrapper.divided-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    transform: none !important;             /* clear any Swiper transform */
  }
  .why-slider > .swiper-wrapper > .swiper-slide { width: auto !important; }
  .slider-controls { display: none !important; }  /* slider is mobile-only */
}

/* Mobile — Swiper owns the wrapper; reveal the controls box */
@media (max-width: 767px) {
  .slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    border: var(--grid-line) solid var(--grid-border);
    padding: var(--gap-sm);
  }
  .why-prev, .why-next { cursor: pointer; user-select: none; }
  .swiper-button-disabled { opacity: 0.35; pointer-events: none; }
}


/* ============================================================
   SITE FOOTER
   Apply `grid-section site-footer` to the footer SECTION so it
   joins the page grid (edge-to-edge T/B rules, L/R on the inner
   box, 1px overlap with the section above).

   Background is layered (back → front):
     1. dark teal base (#081E22, set on the section)
     2. .footer-bg — a corner graphic image absolutely pinned
        bottom-right (the transparent pale-blue dots)
     3. ::before on the inner box — a 5% primary-blue colour wash
        sitting OVER the image
     4. the content rows, lifted above the wash with z-index
   Because the base is dark, internal dividers and link/legal text
   are WHITE; column headings stay accent green per the design.

   Two rows inside the inner box:
     .footer-top    — brand block | vertical hairline | 3 link cols
     .footer-bottom — legal line  |  credit  (horizontal hairline above)

   Everything is namespaced under `.site-footer ...` on purpose:
   the extra ancestor class out-specifies Elementor's own widget
   .elementor-kit-5s (e.g. .elementor-widget-heading .elementor-heading-title),
   so these rules win the cascade WITHOUT needing !important.
   ============================================================ */

/* Drop Elementor's default container top/bottom padding — the cell
   padding provides all vertical spacing. padding-block only touches
   top/bottom, so the grid-section side gutter (inline) is untouched. */
.site-footer {
  padding-block: 0;
}

/* ---- Layered background ----------------------------------- */
/* The inner box is the positioning + stacking context for all
   three layers. overflow:hidden keeps the corner image clipped
   to the bordered box. */
.site-footer > .e-con-inner {
  position: relative;
  overflow: hidden;
  /* Elementor's stock `.e-con>.e-con-inner` adds top/bottom padding here;
     zero it so the cells alone control vertical spacing. */
  padding-block: 0;
}
/* (2) corner graphic, pinned bottom-right, behind everything */
.site-footer .footer-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-width: 50%;
  pointer-events: none;
}
.site-footer .footer-bg img { display: block; width: 100%; height: auto; }
/* (3) 5% primary-blue colour wash, over the image */
.site-footer > .e-con-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(26, 162, 189, 0.05); /* --c-primary at 5% */
  pointer-events: none;
}
/* (4) content above the wash */
.site-footer .footer-top,
.site-footer .footer-bottom {
  position: relative;
  z-index: 2;
}

/* ---- Top row: brand | links ------------------------------- */
/* Wrapper carries NO padding/gap — the divider is the border on
   the links cell, and each cell pads its own content (set in the
   template, 40px).
   GUARD: Elementor gives every container a default 10px padding;
   on these *structural* wrappers (footer-top, footer-col) that
   inset breaks the bordered-grid alignment (cells no longer sit
   flush to the box, the divider drifts off-grid). Zero it here —
   scoped to the structural classes ONLY, never a blanket .e-con
   reset, so the real cells keep their intentional 40px. */
.site-footer .footer-top,
.site-footer .footer-col {
  padding: 0;
}
.site-footer .footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}

.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Logo pins to the top, social row drops to the bottom of the cell
     (which stretches to the tallest link column) — matches the design. */
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer .footer-logo img { max-width: 240px; height: auto; }

/* The single vertical divider sits on the links block's leading edge.
   Translucent white so it reads on the blue background. */
.site-footer .footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  border-left: var(--grid-line) solid rgba(255, 255, 255, 0.3);
}

/* ---- Column headings (green, small) ----------------------- */
.site-footer .footer-heading { margin-bottom: 16px; }
.site-footer .footer-heading .elementor-heading-title {
  color: var(--c-accent);
  font-size: 16px;
  font-weight: 400;
}

/* ---- Link lists (icon-list with the icons hidden) --------- */
.site-footer .footer-nav .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer .footer-nav .elementor-icon-list-item { padding: 0; }
.site-footer .footer-nav .elementor-icon-list-icon { display: none; }
.site-footer .footer-nav .elementor-icon-list-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  transition: color 0.15s ease;
}
.site-footer .footer-nav a:hover .elementor-icon-list-text { color: #FFFFFF; }

/* ---- Social icons (outlined circles, fill in on hover) ---- */
.site-footer .footer-social .elementor-social-icons-wrapper {
  gap: 12px;
  justify-content: flex-start; /* left-align under the logo (widget default is centred) */
}
.site-footer .footer-social .elementor-social-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: var(--grid-line) solid rgba(255, 255, 255, 0.5);
  color: var(--c-text);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.site-footer .footer-social .elementor-social-icon:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--c-primary);
}

/* ---- Bottom bar: legal | credit --------------------------- */
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: var(--grid-line) solid rgba(255, 255, 255, 0.3);
}
.site-footer .footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

/* ---- Footer responsive ------------------------------------ */
@media (max-width: 767px) {
  .site-footer .footer-top { grid-template-columns: 1fr; }
  .site-footer .footer-links {
    grid-template-columns: repeat(2, 1fr);
    border-left: 0; /* no vertical divider once the brand stacks above */
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   UTILITIES (Tailwind-style)
   Apply via a widget/container's Advanced → CSS Classes field.
   NOTE: !important is intentional — Elementor's per-element CSS
   is more specific than a plain class, so utilities need it to
   win when applied through the CSS Classes field.
   For responsive display changes, prefer Elementor's own
   visibility controls over toggling .hidden at breakpoints.
   ============================================================ */

/* ---- Display ---------------------------------------------- */
.block        { display: block !important; }
.inline-block { display: inline-block !important; }
.inline       { display: inline !important; }
.flex         { display: flex !important; }
.inline-flex  { display: inline-flex !important; }
.grid         { display: grid !important; }
.hidden       { display: none !important; }

/* ---- Font size (mapped to the Figma type scale) ----------- */
.text-xs   { font-size: 0.75rem !important; }   /* 12 */
.text-sm   { font-size: 0.875rem !important; }  /* 14 */
.text-base { font-size: 1rem !important; }      /* 16 — body */
.text-lg   { font-size: 1.125rem !important; }  /* 18 — standfirst */
.text-xl   { font-size: 1.25rem !important; }   /* 20 */
.text-2xl  { font-size: 1.5rem !important; }    /* 24 — H4 */
.text-3xl  { font-size: 2rem !important; }      /* 32 — H3 */
.text-4xl  { font-size: 2.5rem !important; }    /* 40 */
.text-5xl  { font-size: 3.375rem !important; }  /* 54 — H2 */
.text-6xl  { font-size: 5rem !important; }      /* 80 — H1 */

/* ---- Font weight (Poppins ships 300 / 400 in this design) -- */
.font-light  { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }

/* ---- Line height ------------------------------------------ */
.leading-none   { line-height: 1 !important; }
.leading-tight  { line-height: 1.2 !important; }
.leading-snug   { line-height: 1.3 !important; }
.leading-normal { line-height: 1.5 !important; }

/* ---- Text align ------------------------------------------- */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* ---- Text transform --------------------------------------- */
.uppercase   { text-transform: uppercase !important; }
.lowercase   { text-transform: lowercase !important; }
.capitalize  { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ---- Text colour (tokens) --------------------------------- */
.text-white { color: var(--c-text) !important; }
.text-muted { color: var(--c-muted) !important; }
/* (.text-primary / .text-accent defined above) */

/* ---- Spacing (4px scale: n × 4px) -------------------------
   Prefixes: m=margin p=padding · t/b/x/y = side · plus mx-auto.
   e.g. .mt-4 = margin-top 16px, .py-2 = padding y 8px           */
.m-0  { margin: 0 !important; }
.m-2  { margin: 0.5rem !important; }
.m-4  { margin: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

.p-0  { padding: 0 !important; }
.p-2  { padding: 0.5rem !important; }
.p-4  { padding: 1rem !important; }
.p-6  { padding: 1.5rem !important; }
.p-8  { padding: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }/* End custom CSS */