.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}@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;}}
/* Start custom CSS *//* ============================================================
   DRC-STYLE STICKY PILL NAVBAR
   Copy into: Elementor > Settings > Custom CSS
              OR Appearance > Customise > Additional CSS
              OR child-theme style.css

   Required CSS class on the header Section:   drc-header
   Required CSS class on the logo widget:       drc-logo
   Required CSS class on the nav column:        drc-nav-col
   Required CSS class on the nav-menu widget:   drc-nav
   Required CSS class on the button widget:     drc-btn

   Elementor Pro sticky setting: Advanced > Motion Effects
     - Sticky: Top
     - Effects Offset: 80
     - Sticky On: Desktop, Tablet, Mobile
============================================================ */


/* ──────────────────────────────────────────────────────────
   SECTION 1 — VARIABLES
   Edit ONLY this block to customise colours, sizes, timing.
────────────────────────────────────────────────────────── */
:root {
  /* Height of the header at the top of the page */
  --drc-height-top:      85px;

  /* Height after scroll kicks in */
  --drc-height-scroll:   60px;

  /* Logo width at the top of the page */
  --drc-logo-top:        170px;

  /* Logo width after scroll */
  --drc-logo-scroll:     138px;

  /* Header background at page top */
  --drc-bg-top:          #ffffff;

  /* Header background when scrolled (keep alpha < 1 for frosted glass) */
  --drc-bg-scroll:       rgba(255, 255, 255, 0.97);

  /* Border-radius of the floating pill on scroll */
  --drc-pill-radius:     12px;

  /* How far the pill floats in from each side edge */
  --drc-pill-inset:      20px;

  /* Gap between the pill and the top of the viewport on scroll */
  --drc-pill-top-gap:    10px;

  /* Shadow when scrolled */
  --drc-shadow:          0 4px 30px rgba(0, 0, 0, 0.10);

  /* Thin border shown around the pill (and bottom-only at full width) */
  --drc-border-color:    rgba(255, 255, 255, 0.35);

  /* Nav link default colour */
  --drc-nav-color:       #1a1a2e;

  /* Nav link hover / active colour */
  --drc-nav-hover:       #0073e6;

  /* Master transition — tweak 0.38s to speed up or slow down everything */
  --drc-t:               0.38s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ──────────────────────────────────────────────────────────
   SECTION 2 — BASE STATE  (page is at the very top)
   Full-width bar, square edges, bottom border only.

   left/right/top are explicitly 0 here so the browser has
   a concrete start-value to tween FROM when the effects
   class is added — this is what makes the shrink smooth.
   (width: auto cannot be transitioned, so we never set it.)
────────────────────────────────────────────────────────── */
header.drc-header {
  top:              0px;
  left:             0px;
  right:            0px;
  background-color: var(--drc-bg-top);

  /* Border: bottom visible, three sides transparent */
  border-style:       solid;
  border-width:       1px;
  border-top-color:   transparent;
  border-right-color: transparent;
  border-bottom-color: var(--drc-border-color);
  border-left-color:  transparent;

  transition:
    left                  var(--drc-t),
    right                 var(--drc-t),
    top                   var(--drc-t),
    border-radius         var(--drc-t),
    box-shadow            var(--drc-t),
    background-color      var(--drc-t),
    border-top-color      var(--drc-t),
    border-right-color    var(--drc-t),
    border-left-color     var(--drc-t);
}

header.drc-header > .elementor-container {
  min-height: var(--drc-height-top);
  transition: min-height var(--drc-t);
}


/* ──────────────────────────────────────────────────────────
   SECTION 3 — SCROLLED STATE (pill)
   Elementor Pro adds .elementor-sticky--effects once the
   page has scrolled past the Effects Offset value.

   left and right animate from 0px → inset (smooth shrink).
   border-radius animates from 0 → pill radius (smooth round).
   Top three border sides fade in to complete the outline.
────────────────────────────────────────────────────────── */
header.drc-header.elementor-sticky--effects {
  left:              var(--drc-pill-inset)   !important;
  right:             var(--drc-pill-inset)   !important;
  top:               var(--drc-pill-top-gap) !important;
  border-radius:     var(--drc-pill-radius)  !important;
  background-color:  var(--drc-bg-scroll)    !important;
  box-shadow:        var(--drc-shadow)        !important;

  /* All four border sides now visible */
  border-top-color:   var(--drc-border-color) !important;
  border-right-color: var(--drc-border-color) !important;
  border-left-color:  var(--drc-border-color) !important;

  /* Frosted glass — requires alpha < 1 on --drc-bg-scroll */
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header.drc-header.elementor-sticky--effects > .elementor-container {
  min-height: var(--drc-height-scroll);
}


/* ──────────────────────────────────────────────────────────
   SECTION 4 — LOGO
   Smoothly scales down on scroll.
   CSS class "drc-logo" → logo widget Advanced tab.
────────────────────────────────────────────────────────── */
header.drc-header .drc-logo img,
header.drc-header .drc-logo.elementor-widget-theme-site-logo img {
  width: var(--drc-logo-top) !important;
  transition: width var(--drc-t);
}

header.drc-header.elementor-sticky--effects .drc-logo img,
header.drc-header.elementor-sticky--effects .drc-logo.elementor-widget-theme-site-logo img {
  width: var(--drc-logo-scroll) !important;
}


/* ──────────────────────────────────────────────────────────
   SECTION 5 — NAV COLUMN CENTERING
   The middle column (class "drc-nav-col") centres its child.
   The nav-menu items themselves are centred within that space.
   CSS class "drc-nav-col" → middle column Advanced tab.
────────────────────────────────────────────────────────── */
header.drc-header .drc-nav-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

header.drc-header .drc-nav .elementor-nav-menu--main {
  justify-content: center;
}


/* ──────────────────────────────────────────────────────────
   SECTION 6 — NAV LINKS
   Colour + hover + sliding underline.
   CSS class "drc-nav" → nav-menu widget Advanced tab.
────────────────────────────────────────────────────────── */
header.drc-header .drc-nav .elementor-item {
  color: var(--drc-nav-color) !important;
  transition: color var(--drc-t);
}

header.drc-header .drc-nav .elementor-item:hover,
header.drc-header .drc-nav .elementor-item-active {
  color: var(--drc-nav-hover) !important;
}

/* Sliding underline bar */
header.drc-header .drc-nav .elementor-nav-menu .elementor-item {
  position: relative;
}

header.drc-header .drc-nav .elementor-nav-menu .elementor-item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--drc-nav-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--drc-t);
  border-radius: 1px;
}

header.drc-header .drc-nav .elementor-nav-menu .elementor-item:hover::after,
header.drc-header .drc-nav .elementor-nav-menu .elementor-item-active::after {
  transform: scaleX(1);
}


/* ──────────────────────────────────────────────────────────
   SECTION 7 — CTA BUTTON
   CSS class "drc-btn" → button widget Advanced tab.
   Colour and padding are set in Elementor; this adds transitions.
────────────────────────────────────────────────────────── */
header.drc-header .drc-btn .elementor-button {
  transition:
    background-color var(--drc-t),
    color            var(--drc-t),
    border-radius    var(--drc-t),
    padding          var(--drc-t);
}


/* ──────────────────────────────────────────────────────────
   SECTION 8 — WP ADMIN BAR OFFSET
   Prevents the pill from overlapping the WP admin bar.
────────────────────────────────────────────────────────── */
@media screen and (min-width: 601px) {
  body.admin-bar header.drc-header.elementor-sticky--effects {
    top: calc(32px + var(--drc-pill-top-gap)) !important;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar header.drc-header.elementor-sticky--effects {
    top: calc(46px + var(--drc-pill-top-gap)) !important;
  }
}


/* ──────────────────────────────────────────────────────────
   SECTION 9 — MOBILE OVERRIDES
────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --drc-height-top:    70px;
    --drc-height-scroll: 54px;
    --drc-pill-inset:    12px;
    --drc-logo-top:      135px;
    --drc-logo-scroll:   110px;
  }
}/* End custom CSS */