:root { color-scheme: light; }

body { margin: 0; }
img { max-width: 100%; height: auto; }


/* ============================================================
   PRIMARY NAV (STABLE BASE)
   Matches your markup:
   <nav class="site-nav"> ... <ul id="primary-menu" class="primary-menu">
   JS hooks assumed:
   - .site-nav.is-open toggles mobile panel
   - .menu-item-open toggles submenu open on <li>
   ============================================================ */

/* Base reset */
.site-nav, .site-nav * { box-sizing: border-box; }
.site-nav ul, .site-nav li { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ----------------------------
   DESKTOP LAYOUT
   ---------------------------- */
.site-nav > ul#primary-menu.primary-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;            /* prevents wrapping */
  width: 100%;
}

.site-nav > ul#primary-menu.primary-menu > li{
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;          /* keeps labels on one line */
}

.site-nav > ul#primary-menu.primary-menu > li > a{
  color: #162f31;
  font-size: 17px;
  display: inline-block;
  padding: 0;
  margin: 0 10px;
  font-family: "Karla", sans-serif;
  font-weight: 600;
  position: relative;
  text-decoration: none;
  transition: all linear 300ms;
  text-transform: uppercase;
}

/* Hide hamburger on desktop */
@media (min-width: 992px){
  .site-nav .nav-toggle{ display: none !important; }
}

/* ----------------------------
   DESKTOP DROPDOWNS
   ---------------------------- */
@media (min-width: 992px){

  .site-nav ul#primary-menu ul.sub-menu{
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 230px;
    background: #343434;
    z-index: 99999;
  }

  /* Force vertical stacking (prevents horizontal submenu leaks) */
  .site-nav ul#primary-menu ul.sub-menu > li{
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  .site-nav ul#primary-menu ul.sub-menu > li > a{
    width: 100% !important;
  }

  .site-nav ul#primary-menu > li:hover > ul.sub-menu,
  .site-nav ul#primary-menu > li:focus-within > ul.sub-menu{
    display: block !important;
  }

  .site-nav ul#primary-menu ul.sub-menu a{
    display: block;
    padding: 12px 14px;
    white-space: nowrap;
    text-align: left;
  }

  /* 2nd-level flyout */
  /* Caret for top-level parents */
  .site-nav li.menu-item-has-children > a::after{
    content: "";
    display: inline-block;
    margin-left: 8px;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(22,47,49,0.85);
    border-bottom: 2px solid rgba(22,47,49,0.85);
    transform: rotate(45deg);
    vertical-align: middle;
  }

  /* Right chevron for submenu parents */

  /* Keep JS-injected arrow buttons hidden on desktop */
  .site-nav button.submenu-toggle{ display: none; }
}

/* ============================================================
   MOBILE NAV (keeps your old patched behavior)
   - fixed panel with vertical scroll
   - consistent row heights (no "taller parent items")
   ============================================================ */
@media (max-width: 991.98px){

  /* Mobile panel offset is controlled by --nav-mobile-top (defined in NAV VARIABLES at bottom) */

  /* Hamburger button (you already use this pattern) */
  .site-nav .nav-toggle{
    display: block !important;
    width: 56px;
    height: 56px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    background: #f7e62b !important;
border-radius: 8px !important;
    border: 0 !important;
    font: inherit;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    position: relative;
  }

  .site-nav .nav-toggle-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 3px;
  background: #14893c;
  transform: translate(-50%, -50%);
  box-shadow: 0 -9px 0 #14893c, 0 9px 0 #14893c;
  }

  .site-nav.is-open .nav-toggle-icon{
    background: transparent;
    box-shadow: none;
  }

.site-nav.is-open .nav-toggle-icon::before,
.site-nav.is-open .nav-toggle-icon::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 3px;
  background: #14893c;
}

  .site-nav.is-open .nav-toggle-icon::before{ transform: rotate(45deg); }
  .site-nav.is-open .nav-toggle-icon::after{ transform: rotate(-45deg); }

  /* UL: hidden until opened */
  .site-nav > ul#primary-menu.primary-menu{
    display: none !important;
    background: #343434;
  }

  /* Open state: fixed panel with scroll */
  .site-nav.is-open > ul#primary-menu.primary-menu,
  .site-nav .nav-toggle[aria-expanded="true"] + ul#primary-menu.primary-menu{
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-mobile-top);
    max-height: calc(100vh - var(--nav-mobile-top));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 9998;
  }

  /* Consistent rows (border at bottom, uniform height) */
  .site-nav > ul#primary-menu.primary-menu > li{
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .site-nav > ul#primary-menu.primary-menu > li > a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 64px 18px 18px;  /* space for arrow button on right */
    line-height: 22px;
    min-height: 64px;              /* keeps rows even */
  }

  /* Submenu toggle button (JS injected) */
  .site-nav li.menu-item-has-children{ position: relative; }

  .site-nav button.submenu-toggle{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile submenus (animated, stable layout) */
  .site-nav ul#primary-menu ul.sub-menu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;          /* required for max-height animation */
    max-height: 0 !important;
    overflow: hidden !important;

    opacity: 0 !important;
    transition: max-height 220ms ease, opacity 220ms ease;
    z-index: auto;
    background: var(--nav-submenu-bg);
    border-left: 4px solid var(--nav-submenu-border);
    border-top: 2px solid var(--nav-submenu-border);
  }

  /* Open state (supports common JS patterns) */
  .site-nav ul#primary-menu li.menu-item-open > ul.sub-menu,
  .site-nav ul#primary-menu li.open > ul.sub-menu,
  .site-nav ul#primary-menu li.active > ul.sub-menu,
  .site-nav ul#primary-menu li.submenu-open > ul.sub-menu,
  .site-nav ul#primary-menu li.menu-item-has-children > button.submenu-toggle[aria-expanded="true"] ~ ul.sub-menu{
    max-height: 1400px !important;
    opacity: 1 !important;
  }

  /* Force each submenu item to stack */
  .site-nav ul#primary-menu ul.sub-menu > li{
    display: block !important;
    width: 100% !important;
    float: none !important;
    flex: none !important;
    border-top: 1px solid var(--nav-submenu-divider);
  }

  .site-nav ul#primary-menu ul.sub-menu > li:first-child{
    border-top: 0;
  }

  .site-nav ul#primary-menu ul.sub-menu > li > a{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 14px 18px 14px 34px;
    white-space: normal !important;
  }

  .site-nav ul#primary-menu ul.sub-menu ul.sub-menu > li > a{
    padding-left: 48px;
  }

  /* If anything is forcing flex on submenus, kill it */
  .site-nav ul#primary-menu ul.sub-menu,
  .site-nav ul#primary-menu ul.sub-menu *{
    flex-direction: column !important;
  }
}


/* ============================================================
   MOBILE: FORCE-REMOVE HEADER MENU PADDING (OVERRIDE THEME)
   ============================================================ */
@media (max-width: 991.98px) {

  /* Your rule that is currently causing the gap */
  .header-area .main-header-area .main-menu {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Common wrappers that also add vertical spacing */
  .header-area .main-header-area,
  .header-area,
  .main-header-area,
  .main-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* If the nav itself has padding, kill it too */
  .site-nav {
    padding: 0 !important;
    margin: 0 !important;
  }
}


/* ============================================================
   DESKTOP: ENABLE RIGHT-FLYOUT SUBMENUS (FIX ALIGNMENT + ARROW)
   ============================================================ */
@media (min-width: 992px) {

  /* 1) Make sure first-level dropdown items are NOT centered */
  .site-nav ul#primary-menu ul.sub-menu {
    text-align: left !important;
  }

  .site-nav ul#primary-menu ul.sub-menu > li > a {
    display: block !important;      /* prevents flex centering */
    text-align: left !important;
  }

  /* 2) Each dropdown LI must be positioning context for flyouts */
  .site-nav ul#primary-menu ul.sub-menu > li {
    position: relative !important;
  }

  /* 3) Position second-level submenus to the right */
  .site-nav ul#primary-menu ul.sub-menu ul.sub-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    display: none !important;
    min-width: 230px;
    background: #343434;
    z-index: 100000;
  }

  /* 4) SHOW flyout on hover / focus (ONLY for second level) */
  .site-nav ul#primary-menu ul.sub-menu > li:hover > ul.sub-menu,
  .site-nav ul#primary-menu ul.sub-menu > li:focus-within > ul.sub-menu {
    display: block !important;
  }

  /* 5) Right-pointing arrow for items that have a submenu */
  .site-nav ul#primary-menu ul.sub-menu li.menu-item-has-children > a {
    position: relative;
  }

  .site-nav ul#primary-menu ul.sub-menu li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
  }
}

/* ============================================================
   DESKTOP: CLEAN RIGHT-CHEVRON FOR 2ND-LEVEL ITEMS
   (Overrides the weird looking arrow)
   ============================================================ */
@media (min-width: 992px) {

  /* SPACE FOR ARROW (CHANGE THIS IF YOU WANT MORE/LESS ROOM) */
  .site-nav ul#primary-menu ul.sub-menu li.menu-item-has-children > a{
    padding-right: 40px !important;
  }

  /* CHEVRON (SIZE + POSITION) */
  .site-nav ul#primary-menu ul.sub-menu li.menu-item-has-children > a::after{
    width: 8px !important;                 /* ← chevron size */
    height: 8px !important;
    right: 14px !important;                /* ← distance from right edge */
    top: 50% !important;                   /* keep centered */
    transform: translateY(-50%) rotate(45deg) !important;

    border-top: 2px solid rgba(255,255,255,0.85) !important;
    border-right: 2px solid rgba(255,255,255,0.85) !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }
}


/* ============================================================
   COLORS ONLY PATCH (SAFE)
   - No layout changes
   - Theme accent: green #14893c
   - Dark panel: #031518
   ============================================================ */

/* Top-level link color */
.site-nav #primary-menu > li > a { color: #162f31; }

/* Desktop hover + active/current */
@media (min-width: 992px) {
  .site-nav #primary-menu > li:hover > a,
  .site-nav #primary-menu > li:focus-within > a,
  .site-nav #primary-menu > li.current-menu-item > a,
  .site-nav #primary-menu > li.current-menu-ancestor > a,
  .site-nav #primary-menu > li.current-menu-parent > a,
  .site-nav #primary-menu > li.current_page_parent > a,
  .site-nav #primary-menu > li.current_page_item > a,
  .site-nav #primary-menu > li.current_page_ancestor > a {
    color: #14893c !important;
  }

  /* Parent caret color on hover/open */
  .site-nav li.menu-item-has-children:hover > a::after,
  .site-nav li.menu-item-has-children:focus-within > a::after {
    border-right-color: #14893c;
    border-bottom-color: #14893c;
  }
}

/* Dropdown panel + links */
.site-nav #primary-menu ul.sub-menu { background: #031518; }
.site-nav #primary-menu ul.sub-menu a { color: rgba(255,255,255,0.92); }
.site-nav #primary-menu ul.sub-menu li:hover > a,
.site-nav #primary-menu ul.sub-menu li:focus-within > a {
  color: #fff;
  background: rgba(20,137,60,0.18);
}

/* Mobile menu panel */
@media (max-width: 991.98px) {
  .site-nav > ul#primary-menu { background: #031518; }

  /* Current item color */
  .site-nav #primary-menu li.current-menu-item > a,
  .site-nav #primary-menu li.current-menu-ancestor > a {
    color: #14893c;
  }

}
/* ============================================================
   MOBILE DROPDOWN FIX (COLORS + STOP SIDE SHIFT)
   - Fix submenu background to match theme
   - Keep accent green border
   - Remove the left offset that makes it look “off to the side”
   ============================================================ */
@media (max-width: 991.98px) {

  /* Submenu panel background (was #343434 / gray) */

  /* Submenu links */
  .site-nav #primary-menu ul.sub-menu a {
    color: rgba(255,255,255,0.92) !important;
  }

  /* Remove the sideways “push” on submenu blocks */
  .site-nav #primary-menu ul.sub-menu {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Keep indentation on the links instead (cleaner) */
  .site-nav #primary-menu ul.sub-menu > li > a { padding-left: 28px !important; }
  .site-nav #primary-menu ul.sub-menu ul.sub-menu > li > a { padding-left: 42px !important; }
}


/* ============================================================
   START: FINAL SUBMENU LINK SPACING OVERRIDE
   Purpose:
   - Controls padding and spacing for DROPDOWN items only
   - Does NOT affect top-level navigation
   - Overrides earlier theme / nav rules safely
   ============================================================ */

.header-area .main-header-area .main-menu ul.sub-menu > li > a {
  color: #fff;
  font-size: 14px;
  display: block;
  padding: 0 10px;
  margin: 0;
}

/* ============================================================
   END: FINAL SUBMENU
   ============================================================ */

/* ============================================================
   NAV FINAL: MOBILE HEADER LOCK + TOGGLES (KEEP AT VERY BOTTOM)
   - Keeps logo + hamburger layout consistent on mobile
   - Hamburger position tunable via --nav-toggle-top
   - Does NOT control the mobile menu panel (handled by nav module)
   ============================================================ */

:root{
  --nav-submenu-bg: #2e2e2e;
  --nav-submenu-border: #14893c;
  --nav-submenu-divider: rgba(255,255,255,0.10);
 /* mobile hamburger vertical position */
}

:root{
  --nav-toggle-top: 0px;
}

@media (max-width: 767.98px){
  :root{
    --nav-toggle-top: -77px;
  }
}

/* Mobile submenu colors: final authority */
@media (max-width: 991.98px){
  .site-nav ul#primary-menu ul.sub-menu{
    background: var(--nav-submenu-bg) !important;
    border-left-color: var(--nav-submenu-border) !important;
    border-top-color: var(--nav-submenu-border) !important;
  }
  .site-nav ul#primary-menu ul.sub-menu > li{
    border-top-color: var(--nav-submenu-divider) !important;
  }
}

/* Mobile header layout lock */
@media (max-width: 991.98px){

  .header-area,
  #sticky-header,
  .menu_outer{
    height: 108.5px !important;
  }

  .menu_outer{
    display: flex !important;
    align-items: center !important;
  }



  .short_contact_list{
    display: none !important;
  }

  .site-nav{
    position: relative !important;
  }

  .site-nav .nav-toggle{
    position: absolute !important;
    right: 18px !important;
    top: var(--nav-toggle-top) !important;
    transform: none !important;
    z-index: 10000 !important;
  }
}




/* =========================
   PATCH (REPLACE CURRENT): Mobile menu scroll + chevrons never drift (all levels) + styled close X
   Core idea:
   - Every "row" (the <a>) has a fixed min-height
   - Toggle button is pinned to top:0 and has the same height as the row
   - Submenu expansion does not affect toggle position
   ========================= */

@media (max-width: 991.98px){

  /* Menu panel scroll + safe top padding */
  .site-nav.is-open > ul#primary-menu.primary-menu{
    top: 0 !important;
    bottom: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 72px !important;
  }

  /* LI context */
  .site-nav #primary-menu li.menu-item-has-children{
    position: relative;
  }

  /* ROW HEIGHT: apply to ALL parents with children (top level + submenu level) */
  .site-nav #primary-menu li.menu-item-has-children > a{
    display: flex !important;
    align-items: center !important;
    min-height: 72px !important;     /* row height */
    padding-right: 64px !important;  /* room for toggle */
  }

  /* Toggle pinned to row top, never centered against expanded LI */
  .site-nav #primary-menu li.menu-item-has-children > button.submenu-toggle{
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;

    width: 56px !important;
    height: 72px !important;         /* must match the row min-height */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    z-index: 3;

    transform: none !important;      /* prevents drift from older patches */
  }

  /* Kill any theme icon on ::before, keep ours clean */
  .site-nav #primary-menu li.menu-item-has-children > button.submenu-toggle::before{
    content: none !important;
  }

  /* Draw chevron (visible + stable) */
  .site-nav #primary-menu li.menu-item-has-children > button.submenu-toggle::after{
    content: "" !important;
    display: block !important;

    width: 12px !important;
    height: 12px !important;

    border-right: 3px solid #ffffff !important;
    border-bottom: 3px solid #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: rotate(45deg) !important; /* down */
    transform-origin: center !important;
    transition: transform 160ms ease !important;
  }

  .site-nav #primary-menu li.menu-item-has-children > button.submenu-toggle[aria-expanded="true"]::after{
    transform: rotate(-135deg) !important; /* up */
  }

  /* Close X */
  .site-nav.is-open > button.nav-toggle{
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100000 !important;

    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;

    background: #f7e62b !important;
    border: 0 !important;
    border-radius: 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    -webkit-tap-highlight-color: transparent;
  }

  .site-nav.is-open > button.nav-toggle{
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .site-nav.is-open > button.nav-toggle::before,
  .site-nav.is-open > button.nav-toggle::after{
  content: "" !important;
  position: absolute !important;
  width: 26px !important;
  height: 3px !important;
  background: #14893c !important;
  border-radius: 2px !important;
  }
  .site-nav.is-open > button.nav-toggle::before{ transform: rotate(45deg) !important; }
  .site-nav.is-open > button.nav-toggle::after{ transform: rotate(-45deg) !important; }

  .site-nav.is-open > button.nav-toggle .nav-toggle-icon{
    display: none !important;
  }
}


/* =========================================================
   FIX: Sticky header traps the mobile menu panel
   Plus: remove weird sticky transition when opening menu
   ========================================================= */

@media (max-width: 991.98px){

  /* When nav is open, remove sticky transforms only on wrappers,
     and disable transitions so nothing "slides" when you tap */
  body:has(.site-nav.is-open) #sticky-header,
  body:has(.site-nav.is-open) .header-area,
  body:has(.site-nav.is-open) .main-header-area,
  body:has(.site-nav.is-open) .menu_outer{
    transform: none !important;
    filter: none !important;
    overflow: visible !important;

    transition: none !important;
    animation: none !important;
  }

  /* Menu overlay: high, but BELOW the close button */
  body:has(.site-nav.is-open) .site-nav.is-open > ul#primary-menu.primary-menu,
  body:has(.site-nav.is-open) .site-nav .nav-toggle[aria-expanded="true"] + ul#primary-menu.primary-menu{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: none !important;
    z-index: 999999 !important; /* below close button */

    transition: none !important;
    animation: none !important;
  }

  /* Close button: always on top and clickable */
  body:has(.site-nav.is-open) .site-nav.is-open > button.nav-toggle,
  body:has(.site-nav.is-open) .site-nav .nav-toggle[aria-expanded="true"]{
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 1000001 !important; /* above the menu overlay */

    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   FINAL PATCH: MOBILE MENU TEXT COLOR FIX
   Put this at the VERY BOTTOM of your CSS
   ========================================================= */
@media (max-width: 991.98px){

  /* Main mobile panel background */
  .site-nav.is-open > ul#primary-menu.primary-menu,
  .site-nav .nav-toggle[aria-expanded="true"] + ul#primary-menu.primary-menu{
    background: #031518 !important;
  }

  /* Top-level mobile links */
  .site-nav > ul#primary-menu.primary-menu > li > a{
    color: #ffffff !important;
  }

  /* Top-level current/active item */
  .site-nav > ul#primary-menu.primary-menu > li.current-menu-item > a,
  .site-nav > ul#primary-menu.primary-menu > li.current-menu-ancestor > a,
  .site-nav > ul#primary-menu.primary-menu > li.current_page_item > a,
  .site-nav > ul#primary-menu.primary-menu > li.current_page_ancestor > a{
    color: #f7e62b !important;
  }

  /* Submenu links */
  .site-nav ul#primary-menu ul.sub-menu > li > a{
    color: rgba(255,255,255,0.92) !important;
  }

  /* Optional hover/focus state for mobile tap feedback */
  .site-nav > ul#primary-menu.primary-menu > li > a:hover,
  .site-nav > ul#primary-menu.primary-menu > li > a:focus,
  .site-nav ul#primary-menu ul.sub-menu > li > a:hover,
  .site-nav ul#primary-menu ul.sub-menu > li > a:focus{
    color: #f7e62b !important;
    background: rgba(20,137,60,0.18) !important;
  }

  /* Chevron buttons stay visible */
  .site-nav #primary-menu li.menu-item-has-children > button.submenu-toggle::after{
    border-right-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
  }
}




/* =========================================================
   START: TOGGLE FIX
   Applies only between 768px and 991.98px
   ========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .site-nav .nav-toggle {
        margin-top: -28px;
    }
}
/* =========================================================
   END: TOGGLE FIX
   ========================================================= */


/* =========================================================
   FINAL SUBMENU COLOR REFINEMENT
   ========================================================= */
.site-nav #primary-menu ul.sub-menu{
  background: #031518;
}

:root{
  --nav-submenu-bg: #031518;
  --nav-submenu-border: #14893c;
  --nav-submenu-divider: rgba(255,255,255,0.08);
}

.site-nav #primary-menu ul.sub-menu li:hover > a,
.site-nav #primary-menu ul.sub-menu li:focus-within > a{
  color: #f7e62b;
  background: rgba(20,137,60,0.16);
}
/* =========================================================
   END: FINAL SUBMENU COLOR REFINEMENT
   ========================================================= */


/* =========================================================
   START: HEADER LOGO SIZING
   Purpose:
   - Keeps normal header logo larger
   - Shrinks sticky header more aggressively on scroll
   ========================================================= */

.header-area .main-header-area .logo img{
	width: 300px;
	height: auto;
	max-width: none;
	display: block;
}

.header-area .main-header-area.sticky .logo img{
	width: 180px;
	height: auto;
	max-width: none;
	display: block;
}

/* Mid desktop / narrower laptop */
@media (max-width: 1199.98px){
	.header-area .main-header-area .logo img{
		width: 250px;
		height: auto;
	}

	.header-area .main-header-area.sticky .logo img{
		width: 170px;
		height: auto;
	}
}

/* Tablet */
@media (max-width: 991.98px){
	.header-area .main-header-area .logo img,
	.header-area .main-header-area.sticky .logo img{
		width: 220px;
		height: auto;
	}
}

/* Mobile */
@media (max-width: 767.98px){
	.header-area .main-header-area .logo img,
	.header-area .main-header-area.sticky .logo img{
		width: 180px;
		height: auto;
	}
}

/* =========================================================
   END: HEADER LOGO SIZING
   ========================================================= */


/* =========================================================
   START: DESKTOP STICKY HEADER OFFSET FIX
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px){
  body.sticky-active{
    padding-top: 170px;
  }
}

@media (min-width: 1200px){
  body.sticky-active{
    padding-top: 199px;
  }
}
/* =========================================================
   END: DESKTOP STICKY HEADER OFFSET FIX
   ========================================================= */