.elementor-kit-7{--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-size:35px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:600;--e-global-typography-1e2601d-font-size:14px;--e-global-typography-1e2601d-font-weight:300;--e-global-typography-1e2601d-text-decoration:underline;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1450px;}.e-con{--container-max-width:1450px;}.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-kit-7{--e-global-typography-primary-font-size:40px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:16px;--e-global-typography-1e2601d-font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:40px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-1e2601d-font-size:10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   MEDIAFOCUS BASE THEME — QUICK GUIDE
   ---------------------------------------------------------
   1) Color System: edit variables only in the blocks below
      - Light vars in body { … }
      - Dark  vars in body.dark { … }
      - Navigation colors: --nav-bg, --nav-text, --nav-hover
   2) Don’ts:
      - Don’t hardcode colors in widgets
      - Always use CSS variables (e.g., color: var(--text))
   3) Utilities (add as CSS Classes in Elementor → Advanced):
      - section-soft → background: var(--bg-soft)
      - card         → card background + border
   4) Header background uses .elementor-location-header
   5) Icons & Buttons follow variables; hover stays subtle
   6) Navigation pills are global; use .no-pills to opt out
   7) Dark/Light toggle: JS adds body.dark; CSS vars handle the rest
   ========================================================= */


/* =========================================================
   COLOR SYSTEM (Light / Dark)
   Variables you can change:
   --bg           : Main background
   --bg-soft      : Section background (soft band)
   --card         : Card / panel background
   --text         : Main text
   --border       : Dividers / borders
   --primary      : Brand (links, CTAs)
   --secondary    : Accent
   --*-contrast   : Text color on top of brand colors
   --nav-*        : Header / navigation colors
   ========================================================= */

/* ---------- Light mode ---------- */
body {
  --bg: #ffffff;
  --bg-soft: #f5f7f8;
  --card: #ffffff;
  --text: #1a1a1a;
  --border: #e6e8eb;

  --primary: #0050ff;
  --primary-contrast: #ffffff;
  --secondary: #00c2c7;
  --secondary-contrast: #0b1f22;

  /* Navigation */
  --nav-bg: var(--bg);
  --nav-text: var(--text);
  --nav-hover: var(--bg-soft);

  background: var(--bg);
  color: var(--text);
}

/* ---------- Dark mode ---------- */
body.dark {
  --bg: #010620;
  --bg-soft: #06114E;
  --card: #15286D;
  --text: #edf2f1;
  --border: #16205C;

  --primary: #edf2f1;
  --primary-contrast: #060E27;
  --secondary: #248290;
  --secondary-contrast: #06114A;

  /* Navigation */
  --nav-bg: var(--bg);
  --nav-text: var(--text);
  --nav-hover: var(--bg-soft);

  background: var(--bg);
  color: var(--text);
}


/* =========================================================
   BASE DEFAULTS
   ========================================================= */
.elementor,
.elementor * { box-sizing: border-box; }

/* Global links */
.elementor a { color: var(--primary); }
.elementor a:hover { color: var(--secondary); }

/* Dividers follow border */
.elementor-divider-separator { border-color: var(--border) !important; }


/* =========================================================
   ICONS (Social + Hamburger/Close)
   ========================================================= */
.elementor-social-icon i,
.elementor-social-icon svg {
  color: var(--text) !important;
  fill: var(--text) !important;
  transition: color .2s ease;
}
.elementor-social-icon {
  background: transparent !important;
  border: none !important;
}

/* Burger / Close icon */
.elementor-menu-toggle {
  background: transparent !important;
  border: none !important;
  transition: color .2s ease;
}
.elementor-menu-toggle,
.elementor-menu-toggle i,
.elementor-menu-toggle svg,
.elementor-menu-toggle .eicon,
.elementor-menu-toggle .eicon-menu-bar,
.elementor-menu-toggle .eicon-close,
.elementor-menu-toggle .elementor-screen-only {
  color: var(--text) !important;
  fill: var(--text) !important;
  stroke: var(--text) !important;
}
.elementor-menu-toggle i:before,
.elementor-menu-toggle .eicon-menu-bar:before,
.elementor-menu-toggle .eicon-close:before {
  color: var(--text) !important;
}
.elementor-menu-toggle:hover { color: var(--primary) !important; }


/* =========================================================
   BUTTONS (Global, subtle hover)
   ========================================================= */
.elementor-button,
button,
.mode-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.elementor-button:hover,
button:hover,
.mode-toggle:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.elementor-button:focus,
.elementor-button:active,
button:focus,
button:active,
.mode-toggle:focus,
.mode-toggle:active {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
  outline: none;
}
.elementor-button:focus-visible,
button:focus-visible,
.mode-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* =========================================================
   NAVIGATION — Global pill hover (desktop + dropdown)
   ========================================================= */

/* Header bar background */
.elementor-location-header { background: var(--nav-bg); }

/* Desktop/Tablet: all Elementor nav menus */
.elementor-nav-menu--main .elementor-item {
  align-items: center;
  padding: 10px 24px;              /* pill size */
  border-radius: 9999px;           /* pill shape */
  background: transparent;         /* no bg by default */
  color: var(--nav-text);          /* follows mode */
  transition: background .2s ease, color .2s ease;
}

/* Disable Elementor pointer overlays globally */
.elementor-nav-menu .elementor-item:before,
.elementor-nav-menu .elementor-item:after {
  display: none !important;
}

/* Hover + Active (desktop/tablet) */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  background: var(--border);
  color: var(--nav-text) !important;
}

/* Mobile/Dropdown */
.elementor-nav-menu--dropdown .elementor-item {
  display: block;
  text-align: center;
  padding: 14px 18px;
  border-radius: 9999px;           /* soft hover highlight */
  color: var(--nav-text);
  transition: background .15s ease, color .15s ease;
}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background: var(--bg);
  color: var(--nav-text) !important;
}


/* =========================================================
   MOBILE DROPDOWN CONTAINER (card style width & spacing)
   ========================================================= */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-nav-menu--dropdown {
    background: var(--nav-hover) !important;
    border: 1px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    width: calc(100% - 32px);      /* 16px side padding */
    margin: 8px 16px;              /* small top gap */
    animation: mf-menu-slide .18s ease-out;
    
.no-pills .elementor-item {
    border-radius: 0;
    padding: 0;
    background: none;
  }
  .no-pills .elementor-item:hover,
  .no-pills .elementor-item.elementor-item-active {
    background: none;
    color: var(--primary);
  }
  }
  

  .elementor-location-header .elementor-nav-menu--dropdown a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }
}

/* Slide-in animation */
@keyframes mf-menu-slide {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* =========================================================
   UTILITIES (add as CSS classes)
   ========================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.section-soft { background: var(--bg-soft); }


/* =========================================================
   ELEMENTOR TOKEN MAPPING → map Elementor globals to vars
   ========================================================= */
:root,
[class*="elementor-kit"] {
  --e-global-color-primary: var(--primary);
  --e-global-color-secondary: var(--secondary);
  --e-global-color-text: var(--text);
  --e-global-color-accent: var(--secondary);
  --e-global-color-background: var(--bg);
}

/* Optional: center footer menu items while keeping pills */
.elementor-location-footer .elementor-nav-menu ul.elementor-nav-menu {
  justify-content: center;
  text-align: center;
}

/* Optional: slightly smaller pills in footer */
.elementor-location-footer .elementor-nav-menu--main .elementor-item {
  padding: 8px 16px;
}/* End custom CSS */