@charset "UTF-8";

/* ===============================
   STICKY HEADER – FINAL FIX
================================ */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Prevent parents from killing sticky */
.site,
#page,
.site-container,
.header-container {
  overflow: visible !important;
}


/* =====================================================
   HEADER (DESKTOP — UNCHANGED)
===================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-container {
  display: flex;
  align-items: center;
  min-height: 90px;
}

.logo img {
  max-height: 80px;
  max-width: 160px;
}

/* =====================================================
   DESKTOP NAV — DO NOT TOUCH
===================================================== */
nav {
  display: flex;
  align-items: center;
- margin-right: auto;
+ margin-left: auto;
  gap: 50px;
}


.main-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu > li > a {
  font-family: "Arimo", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-menu > li > a:hover {
  color: #ff6600;
}

/* Desktop Mega Menu */
.main-menu li.menu-item-has-children {
  position: relative;
}

.main-menu li .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 1200px;
  background: #67bcbf;
  border-radius: 10px;
  border: 15px solid #fff;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
  list-style: none;
  padding: 10px 0;
  z-index: 9999;
}

.main-menu li.menu-item-has-children:hover > .sub-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sub-menu li a {
  display: flex;
  gap: 12px;
  padding: 10px 3px 10px 10px;
  text-decoration: none;
  color: #000;
}

.menu-icon {
  width: 34px;
  height: 34px;
}

.dropdown-item-text h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.dropdown-item-text p {
  margin: 0;
  font-size: 13px;
  opacity: .85;
}

/* Contact button desktop */
.contact-btn {
  background: #ff6600;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-size: 15px;
  margin-left: 0px;
}

/* =====================================================
   DESKTOP SUBMENU – FORCE HOVER BEHAVIOR
   (Overrides mobile rules safely)
===================================================== */
@media (min-width: 993px) {

  .main-menu li .sub-menu {
    display: none;
    position: absolute;
  }

  .main-menu li.menu-item-has-children:hover > .sub-menu {
    display: grid;
	  	  width: 650px;
    grid-template-columns: 1fr 1fr;
  }

}

/* =====================================================
   BURGER (DESKTOP HIDDEN)
===================================================== */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.burger span {
  width: 25px;
  height: 3px;
  background: #000;
  transition: .3s;
}

.burger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* =====================================================
   MOBILE MENU (ONLY BELOW 992px)
===================================================== */
@media (max-width: 992px) {

  /* Burger visible */
  .burger {
    display: flex;
    margin-left: auto;
    z-index: 1100;
  }

  /* Hide desktop nav until opened */
  nav {
    display: none;
  }

  nav.active {
    display: flex;
    position: fixed;
    inset: 0;
    background: #e6e6e6;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
    z-index: 9999;
  }

  /* Menu layout */
  .main-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
    margin-top: 60px;
  }

  .main-menu > li {
    width: 100%;
  }

  .main-menu > li > a {
    font-size: 20px;
    font-weight: 500;
    justify-content: space-between;
    width: 100%;
  }

  /* Services submenu */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none;
    position: static;
    width: 100%;
    background: #66c2c2;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
  }

  .menu-item-has-children.open > .sub-menu {
    display: block;
  }

  /* Service items */
  .sub-menu li a {
    display: flex;
    gap: 14px;
    padding: 12px 0;
  }

  /* Rotate arrow */
  .services-arrow {
    transition: transform .3s;
  }

  .menu-item-has-children.open .services-arrow {
    transform: rotate(180deg);
  }

  /* Contact button */
  .contact-btn {
    margin-top: 40px;
    align-self: flex-start;
  }

  .contact-btn.hidden {
    display: none;
  }
}
/* =====================================================
   MOBILE MENU – FINAL VERSION (DESKTOP UNAFFECTED)
===================================================== */
@media (max-width: 992px) {

  /* Lock background scroll */
  body.menu-open {
    overflow: hidden;
  }

  /* ===============================
     Fullscreen mobile menu
  =============================== */
  header nav {
    position: fixed;
    inset: 0;
    background: #e6e6e6;
    padding: 24px 20px 40px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    z-index: 9999;
  }

  header nav.active {
    display: flex;
  }

  /* ===============================
     Burger (X stays top-right)
  =============================== */
  .burger {
    z-index: 10001;
  }

  /* ===============================
     Main menu layout
  =============================== */
  .main-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin: 60px 0 0;
    padding: 0;
    width: 100%;
    list-style: none;
  }

  .main-menu > li {
    width: 100%;
    text-align: left;
  }

  .main-menu > li > a {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ===============================
     Services toggle arrow
  =============================== */
  .services-arrow {
    transition: transform 0.3s ease;
  }

  li.open > a .services-arrow {
    transform: rotate(180deg);
  }

  /* ===============================
     Services submenu (CARD)
  =============================== */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    background: #6fc2c3;
    border-radius: 8px;
  }

  .menu-item-has-children.open > .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ===============================
     Service item row
  =============================== */
  .sub-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    color: #000;
    text-decoration: none;
  }

  .sub-menu img.menu-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .dropdown-item-text {
    display: flex;
    flex-direction: column;
  }

  .dropdown-item-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .dropdown-item-text p {
    font-size: 14px;
    margin: 4px 0 0;
    opacity: 0.85;
  }

  /* ===============================
     Contact button (bottom)
  =============================== */
  .contact-btn {
    margin-top: 40px;
    align-self: flex-start;
    background: #ff6600;
    color: #fff;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: 16px;
    text-decoration: none;
  }

  /* Hide contact button in header when menu open */
  .contact-btn.hidden {
    display: none !important;
  }
}
/* =====================================================
   MOBILE SERVICES SUBMENU – FINAL FIX
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Services submenu container */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none;
    grid-template-columns: none !important; /* kill desktop grid */
    flex-direction: column;
    
    background: #67bcbf;
    border: 10px solid #ffffff;   /* visible border like design */
    border-radius: 10px;

    padding: 16px;
    margin-top: 14px;

    width: 100%;
    box-sizing: border-box;
  }

  /* Open state */
  .menu-item-has-children.open > .sub-menu {
    display: flex;
  }

  /* Each service item */
  .sub-menu li {
    width: 100%;
  }

  /* Service link layout */
  .sub-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 12px 8px;
    text-align: left;

    border-radius: 6px;
  }

  /* Hover (optional but nice) */
  .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  /* Icon */
  .sub-menu img.menu-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  /* Text */
  .dropdown-item-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .dropdown-item-text p {
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.85;
  }
}
/* =====================================================
   FINAL MOBILE SUBMENU CLEANUP
   DESKTOP 100% UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  /* Submenu container (Services panel) */
  .main-menu li.menu-item-has-children > .sub-menu {
    background: #66c2c2;     /* teal stays */
    border: none !important; /* REMOVE border */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 16px 8px;
    margin: 16px 0;
    display: none;
  }

  /* Open state */
  .main-menu li.menu-item-has-children.open > .sub-menu {
    display: flex;
    flex-direction: column; /* ONE BY ONE */
    gap: 16px;
  }

  /* Each service item */
  .sub-menu li {
    width: 100%;
  }

  .sub-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    background: transparent;
  }

  /* Icon */
  .sub-menu img.menu-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  /* Text */
  .dropdown-item-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .dropdown-item-text p {
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.85;
  }

}
/* =====================================================
   FINAL MOBILE MENU FIXES (DESKTOP UNAFFECTED)
===================================================== */
@media (max-width: 992px) {

  /* -----------------------
     Fullscreen mobile menu
  ----------------------- */
  header nav.active {
    position: fixed;
    inset: 0;
    background: #e6e6e6;

    overflow-y: auto;
	display: flex;
  	flex-direction: column;
  }
 -----------------------
     Main menu layout
  ----------------------- */
  .main-menu {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .main-menu > li {
    width: 100%;
  }

  .main-menu > li > a {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    width: 100%;
    justify-content: space-between;
  }

  /* -----------------------
     Services submenu panel
     (NO BORDER, NO CARD)
  ----------------------- */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none;
    margin-top: 16px;
    padding: 20px;
    background: #66c2c2;   /* teal */
    border: none;          /* remove white border */
    border-radius: 0;      /* no card look */
    box-shadow: none;      /* remove shadow */
  }

  /* Open state */
  .main-menu li.menu-item-has-children.open > .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* -----------------------
     Submenu items
     Vertical (one by one)
  ----------------------- */
  .sub-menu li {
    width: 100%;
  }

  .sub-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    color: #000;
  }

  .sub-menu img.menu-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  .dropdown-item-text h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .dropdown-item-text p {
    margin: 4px 0 0;
    font-size: 14px;
    opacity: 0.85;
  }

  /* -----------------------
     Contact button
  ----------------------- */
  .contact-btn {
    margin-top: 40px;
    align-self: flex-start;
  }

  /* -----------------------
     Arrow rotation
  ----------------------- */
  .services-arrow {
    transition: transform 0.3s ease;
  }

  li.open > a .services-arrow {
    transform: rotate(180deg);
  }
}
/* =====================================================
   HIDE MOBILE CLOSE BUTTON ON DESKTOP
===================================================== */
.mobile-close {
  display: none;
}

@media (max-width: 992px) {
  .mobile-close {
    display: block;
  }
}
/* =====================================================
   MOBILE MENU – MOVE CONTACT CTA INSIDE MENU FLOW
   DESKTOP UNAFFECTED
===================================================== */
@media (max-width: 992px) {

  /* Make nav a column container */
  header nav.active {
    display: flex;
    flex-direction: column;
  }

  /* Ensure menu items come first */
  .main-menu {
    order: 1;
    width: 100%;
  }

  /* Move Contact Us below menu */
  .contact-btn {
    order: 2;
    margin-top: 32px;
    align-self: flex-start;

    /* Visual match */
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 24px;
  }

}
/* =====================================================
   MOBILE MENU – FINAL CLEAN VERSION
   DESKTOP COMPLETELY UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  /* ---------------------------------
     Burger
  --------------------------------- */
  .burger {
    display: flex;
    margin-left: auto;
    z-index: 1100;
  }

  /* ---------------------------------
     Fullscreen mobile nav
  --------------------------------- */
  header nav {
    display: none;
  }

  header nav.active {
    position: fixed;
    inset: 0;
    background: #e6e6e6;
    padding: 24px 20px 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 9999;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* ---------------------------------
     Main menu layout
  --------------------------------- */
  .main-menu {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    width: 100%;
    padding: 0;
    list-style: none;
  }

  .main-menu > li {
    width: 100%;
  }

  .main-menu > li > a {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    color: #000;
  }

  /* ---------------------------------
     Services submenu (VERTICAL)
  --------------------------------- */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none;
    margin-top: 16px;
    padding: 20px;
    background: #66c2c2;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
  }

  .menu-item-has-children.open > .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sub-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    color: #000;
  }

  .sub-menu img.menu-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  .dropdown-item-text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .dropdown-item-text p {
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.85;
  }

  /* ---------------------------------
     Services arrow rotation
  --------------------------------- */
  .services-arrow {
    transition: transform 0.3s ease;
  }

  li.open > a .services-arrow {
    transform: rotate(180deg);
  }

  /* ---------------------------------
     Contact CTA (inside menu)
  --------------------------------- */
  header nav .contact-btn {
    margin-top: 40px;
    align-self: flex-start;
    background: #ff6600;
    color: #fff;
    padding: 12px 24px;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
}

/* ---------------------------------
   Hide mobile close on desktop
--------------------------------- */
.mobile-close {
  display: none;
}

/* =====================================================
   FORCE MOBILE CLOSE BUTTON VISIBILITY
   (DEBUG + FINAL FIX)
===================================================== */
@media (max-width: 992px) {
  .mobile-close {
    display: block !important;
    position: fixed !important;
    top: 16px !important;
    right: 10px !important;
    font-size: 20px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10001 !important;
  }
}
/* =====================================================
   MOBILE HEADER ALIGNMENT FIX
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Header row layout */
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo left, burger right */
  }

  /* Logo stays left */
  .logo {
    margin-right: auto;
  }

  .logo img {
    max-width: 140px;
    height: auto;
  }

  /* Burger stays right */
  .burger {
    margin-left: auto;
  }

}
/* =====================================================
   MOBILE HEADER – FORCE LOGO LEFT / BURGER RIGHT
   DESKTOP UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  header .header-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100% !important;
  }

  header .logo {
    flex: 0 0 auto;
  }

  header .logo img {
    max-width: 140px;
    height: auto;
  }

  header .burger {
    flex: 0 0 auto;
    margin-left: auto !important;
  }

}
/* =====================================================
   MOBILE HEADER – HARD LEFT LOGO / HARD RIGHT BURGER
   DESKTOP COMPLETELY UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  header {
    padding: 0;
  }
/* =====================================================
   DESKTOP MEGA MENU — FINAL WORKING FIX
   Mobile untouched
===================================================== */
@media (min-width: 993px) {

  /* Parent positioning */
  header nav .main-menu li.menu-item-has-children {
    position: relative;
  }

  /* Base hidden state */
  header nav .main-menu li.menu-item-has-children > .sub-menu {
    display: grid !important;              /* ALWAYS render */
    grid-template-columns: 1fr 1fr;
    position: absolute;
    top: 100%;
    left: 0;
    width: 600px;
    background: #67bcbf;
    border-radius: 10px;
    border: 15px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,.15);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.25s ease;
    z-index: 9999;
  }

  /* Hover state */
  header nav .main-menu li.menu-item-has-children:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

  header .site-container.header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* LOGO – FORCE LEFT */
  header .logo {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    text-align: left !important;
  }

  header .logo img {
    display: block !important;
    margin: 0 !important;
    max-width: 140px;
    height: auto;
  }

  /* BURGER – FORCE RIGHT */
  header .burger {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  /* NAV MUST NOT PUSH LOGO */
  header nav {
    margin-left: 0 !important;
  }

}

/* =====================================================
   FINAL MOBILE HEADER FIX (AUTHORITATIVE)
   DESKTOP COMPLETELY UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  /* Kill inherited container spacing */
  header .site-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Header row */
  header .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Logo: HARD LEFT */
  header .logo {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  header .logo img {
    display: block !important;
    margin: 0 !important;
    max-width: 140px !important;
    height: auto !important;
  }

  /* Burger: HARD RIGHT */
  header .burger {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  /* Nav must NOT affect header layout */
  header nav {
    position: fixed;
    left: 0;
    top: 0;
  }
}

/* =====================================================
   DESKTOP SUBMENU — HARD OVERRIDE (FINAL FIX)
   This MUST be last in the file
===================================================== */
@media (min-width: 993px) {

  header nav .main-menu li.menu-item-has-children {
    position: relative;
  }

  header nav .main-menu li.menu-item-has-children > .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;

    width: 600px;
    background: #67bcbf;
    border-radius: 10px;
    border: 15px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,.15);
    padding: 10px 0;
    z-index: 9999;
  }

  header nav .main-menu li.menu-item-has-children:hover > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================
   DESKTOP MEGA MENU — BULLETPROOF HOVER FIX
   (Ignores mobile CSS completely)
===================================================== */
@media (min-width: 993px) {

  header nav .main-menu li.menu-item-has-children {
    position: relative;
  }

  header nav .main-menu li.menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;

    width: 600px;
    background: #67bcbf;
    border-radius: 10px;
    border: 15px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,.15);

    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition: opacity 0.25s ease;
    z-index: 9999;
  }

  header nav .main-menu li.menu-item-has-children:hover > .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}
/* =====================================================
   DESKTOP MEGA MENU — ABSOLUTE FINAL FIX
   (Overrides ALL previous rules)
===================================================== */
@media (min-width: 993px) {

  /* Parent must anchor submenu */
  header nav .main-menu > li.menu-item-has-children {
    position: relative;
  }

  /* Base state */
  header nav .main-menu > li.menu-item-has-children > .sub-menu {
    display: none !important;

    position: absolute;
    top: 100%;
    left: 0;

    width: 600px;
    background: #67bcbf;
    border-radius: 10px;
    border: 15px solid #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,.15);

    padding: 10px 0;
    z-index: 9999;
  }

  /* Hover = SHOW */
  header nav .main-menu > li.menu-item-has-children:hover > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}
/* =====================================================
   DESKTOP SUBMENU ITEM HOVER – FIX
   Mobile untouched
===================================================== */
@media (min-width: 993px) {

  header nav .sub-menu li a {
    border-radius: 6px;
    transition: background-color 0.25s ease;
  }

  header nav .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.35);
  }

}
/* =====================================================
   MOBILE CONTACT CTA – PLACE JUST UNDER STORIES
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Remove excess space below menu */
  header nav.active .main-menu {
    margin-bottom: 8px !important;
  }

  /* Pull CTA close to menu */
  header nav.active .contact-btn {
    margin-top: 8px !important;
    align-self: flex-start;
  }
}
/* =====================================================
   MOBILE CTA – FORCE IT UNDER STORIES (REAL FIX)
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Prevent menu from pushing CTA down */
  header nav.active .main-menu {
    flex: 0 0 auto !important;
    margin-bottom: 8px !important;
  }

  /* Keep CTA immediately after menu */
  header nav.active .contact-btn {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    align-self: flex-start;
  }

  /* Ensure nav does NOT distribute space */
  header nav.active {
    justify-content: flex-start !important;
  }
}
/* =====================================================
   MOBILE CTA POSITION – FINAL FIX
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Reduce gap below menu */
  header nav.active .main-menu {
    margin-bottom: 12px !important;
  }

  /* Pull CTA closer to Stories */
  header nav.active .contact-btn {
    margin-top: 0 !important;
  }

}
/* =====================================================
   MOBILE MENU – REMOVE GAP BEFORE CTA
   DESKTOP UNAFFECTED
===================================================== */
@media (max-width: 992px) {

  /* Remove artificial spacing under menu */
  header nav.active .main-menu {
    margin-top: 40px !important;   /* keep top spacing */
    margin-bottom: 0 !important;   /* REMOVE gap before CTA */
  }

  /* Ensure CTA sits right under Stories */
  header nav.active .contact-btn {
    margin-top: 12px !important;
  }

}
/* =====================================================
   MOBILE CONTACT CTA – ALIGN UNDER STORIES
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  header nav .contact-btn {
    margin-top: 6px !important; /* closer to Stories */
    align-self: flex-start;
  }

  /* Remove extra gap from menu */
  .main-menu {
    margin-bottom: 0 !important;
  }
}
/* =====================================================
   MOBILE MENU – REMOVE EXTRA GAP ABOVE CONTACT CTA
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Kill bottom gap from last menu item */
  .main-menu > li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Reduce menu spacing before CTA */
  .main-menu {
    gap: 16px !important;
    margin-bottom: 0 !important;
  }

  /* Pull Contact Us closer */
  header nav .contact-btn {
    margin-top: 12px !important;
  }
}
/* =====================================================
   MOBILE CONTACT CTA – FINAL AUTHORITATIVE FIX
   Desktop completely untouched
===================================================== */
@media (max-width: 992px) {

  /* Menu spacing control */
  header nav.active {
    justify-content: flex-start !important;
  }

  /* Remove hidden space under menu */
  header nav.active .main-menu {
    margin-bottom: 8px !important;
    gap: 18px !important;
  }

  /* Kill spacing from last menu item */
  header nav.active .main-menu > li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Contact CTA – sits right under Stories */
  header nav.active .contact-btn {
    margin-top: 8px !important;
    align-self: flex-start !important;
  }
}
/* =====================================================
   MOBILE CONTACT CTA – FINAL CLEAN FIX
   Desktop completely untouched
===================================================== */
@media (max-width: 992px) {

  /* Ensure vertical stacking */
  header nav.active {
    justify-content: flex-start;
  }

  /* Remove artificial spacing from menu */
  header nav.active .main-menu {
    margin-bottom: 8px;
  }

  /* Contact Us CTA – sits right under Stories */
  header nav.active .contact-btn {
    margin-top: 8px;
    align-self: flex-start;
  }
}

/* =====================================================
   MOBILE MENU – FIX CTA SPACING (REAL CAUSE)
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Reduce menu top spacing */
  header nav.active .main-menu {
    margin-top: 32px;   /* was 60px */
    margin-bottom: 8px;
  }

  /* CTA sits right after Stories */
  header nav.active .contact-btn {
    margin-top: 8px;
  }
}

@media (max-width: 992px) {

  /* REMOVE extra space below menu */
  header nav.active .main-menu {
    margin-top: 32px;   /* was 60px */
    margin-bottom: 0;
    gap: 16px;
  }

  /* CTA sits right after Stories */
  header nav.active .contact-btn {
    margin-top: 12px;
    align-self: flex-start;
  }

}
@media (max-width: 992px) {

  /* Fix the REAL cause of the gap */
  header nav.active .main-menu {
    margin-top: 32px;   /* reduce from 60px */
    margin-bottom: 0;   /* remove space before CTA */
    gap: 16px;          /* tighter menu spacing */
  }

  /* CTA sits right under Stories */
  header nav.active .contact-btn {
    margin-top: 12px;
    align-self: flex-start;
  }

}
/* =====================================================
   MOBILE CONTACT CTA – FINAL REAL FIX
   NO HTML CHANGES REQUIRED
   DESKTOP UNTOUCHED
===================================================== */
@media (max-width: 992px) {

  /* Nav must stack naturally */
  header nav.active {
    display: block !important;   /* ← key fix */
    padding-bottom: 24px;        /* reduce dead space */
  }

  /* Remove forced menu push-down */
  header nav.active .main-menu {
    margin-top: 40px !important;   /* keep top spacing */
    margin-bottom: 8px !important; /* close to CTA */
  }

  /* CTA sits directly under Stories */
  header nav.active .contact-btn {
    display: inline-block;
    margin-top: 8px !important;
  }

}
/* =====================================================
   MOBILE HEADER – HARD FIX (REAL ISSUE)
===================================================== */
@media (max-width: 992px) {

  header .site-container {
    max-width: 100% !important;   /* 🔥 THIS is the key */
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  header .header-container {
    width: 100% !important;
  }

}
/* =====================================================
   MOBILE HEADER – GRID LOCK (LOGO LEFT / BURGER RIGHT)
   Desktop completely untouched
===================================================== */
@media (max-width: 992px) {

  /* Header container becomes a grid */
  header .header-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto; /* logo | spacer | burger */
    align-items: center !important;

    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Logo: locked to left column */
  header .logo {
    grid-column: 1;
    margin: 0 !important;
    padding: 0 !important;
  }

  header .logo img {
    max-width: 140px;
    height: auto;
    display: block;
  }

  /* Burger: locked to right column */
  header .burger {
    grid-column: 3;
    justify-self: end;   /* 🔑 this replaces margin-left:auto */
    margin: 0 !important;
    padding: 0;
  }
}

/* =====================================================
   MOBILE MENU – REDUCED WIDTH (CLEAN FIX)
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  header nav.active {
    max-width: 360px;          /* 👈 adjust (320–380px ideal) */
    width: 100%;
    margin: 0 auto;            /* center menu */
	margin-top:25px;
    left: 0;
    right: 0;

    border-radius: 16px;       /* optional – nice look */
  }
}

/* =========================================
   MOBILE SUBMENU – AUTHORITATIVE RULE
   Desktop untouched
========================================= */
@media (max-width: 992px) {

  /* CLOSED state */
  .main-menu li.menu-item-has-children > .sub-menu {
    display: none !important;
  }

  /* OPEN state */
  .main-menu li.menu-item-has-children.open > .sub-menu {
    display: flex !important;
    flex-direction: column;
  }

}
/* =====================================================
   MOBILE CLOSE (X) BUTTON – ABSOLUTE FINAL
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Ensure nav is the positioning context */
  header nav.active {
    position: fixed;
  }

  .mobile-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;   /* correct */
    top: 12px !important;
    right: 12px !important;
	padding-top:5px;
    width: 16px;
    height: 16px;
    line-height: 1;
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    z-index: 10003 !important;
  }
}

/* =====================================================
   MOBILE MENU – PUSH MENU BELOW HEADER
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Header height reference (70px from your header) */
  header nav.active {
    padding-top:10px !important; /* header height + breathing space */
  }

  /* Keep menu content clearly below header */
  header nav.active .main-menu {
    margin-top: 0 !important;
  }

  /* Close (X) stays inside header area */
  header nav.active .mobile-close {
    top: 18px !important;
  }
}
/* =====================================================
   MOBILE MENU – HEADER SAFE OFFSET + SPACING FIX
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Height of your header (logo + burger area) */
  :root {
    --mobile-header-height: 70px;
  }

  /* Mobile menu should START BELOW HEADER */
  header nav.active {
    top: var(--mobile-header-height);
    height: calc(100vh - var(--mobile-header-height));

    /* Side spacing */
    padding-left: 24px;
    padding-right: 12px;

    /* Ensure content scrolls, header stays visible */
    overflow-y: auto;
  }

  /* Push menu items down a bit for breathing room */
  header nav.active .main-menu {
    margin-top: 100px !important;
  }

  /* Contact CTA spacing stays tight */
  header nav.active .contact-btn {
    margin-top: 25px !important;
  }

  /* Close (X) button spacing from right */
  .mobile-close {
    right: 24px !important;
  }
}

/* =====================================================
   MOBILE MENU – AUTHORITATIVE POSITION & SIZE
   Desktop untouched
===================================================== */
@media (max-width: 992px) {

  /* Mobile menu panel */
  header nav.active {
    position: fixed;
    top: 65px;                 /* 👈 PUSH BELOW HEADER */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);  /* 👈 side spacing */
    max-width: 100%;          /* 👈 control menu width */
    height: calc(100vh - 90px);/* 👈 control height */
    background: #e6e6e6;
    border-radius: 0px;
    padding: 24px 20px;
    overflow-y: auto;
    z-index: 9999;
  }
}
@media (max-width: 992px) {
  header nav.active .main-menu {
    margin-top: 10px; /* adjust */
  }
}

/* =========================================
   MOBILE: Disable burger -> X animation
   Keep only mobile-close button
========================================= */
@media (max-width: 992px) {

  /* Prevent burger lines from morphing into X */
  .burger.open span:nth-child(1),
  .burger.open span:nth-child(2),
  .burger.open span:nth-child(3) {
    transform: none !important;
    opacity: 1 !important;
  }
}
/* =====================================
   MOBILE MENU – TOP SPACING FIX (FINAL)
===================================== */
@media (max-width: 992px) {

  /* Reduce menu distance from header */
  header nav.active .main-menu {
    margin-top: 24px !important;   /* try 16px–32px */
  }

  /* Remove any extra padding influence */
  header nav.active {
    padding-top: 16px !important;
  }
}

/* =========================================
   HEADER ALIGNMENT — USE GLOBAL GRID
   CSS ONLY | NO PHP | NO JS
========================================= */

/* Desktop */
@media (min-width: 1200px) {

  header .site-container {
    max-width: none; /* escape 1280px clamp */
    padding-left: var(--grid-desktop) !important;
    padding-right: var(--grid-desktop) !important;
  }

  header nav {
    margin-left: auto; /* keep menu right */
  }

}

/* Tablet */
@media (max-width: 1199px) and (min-width: 769px) {

  header .site-container {
    padding-left: var(--grid-tablet) !important;
    padding-right: var(--grid-tablet) !important;
  }

}

/* Mobile */
@media (max-width: 768px) {

  header .site-container {
    padding-left: var(--grid-mobile) !important;
    padding-right: var(--grid-mobile) !important;
  }

}
/* =====================================================
   GLOBAL GRID ALIGNMENT FIX
   Align header with hero / sections (160px grid)
   NO PHP / JS changes
===================================================== */

/* Desktop only */

@media (min-width: 993px) {
 header > .site-container.header-container {
    padding-left: 170px !important;
    padding-right: 170px !important;
    box-sizing: border-box;
    width: 100%;
  }

  header > .site-container.header-container nav {
    margin-left: auto;
  .site-container.header-container {
    padding-left: 170px;
    padding-right: 170px;
    box-sizing: border-box;
    width: 100%;
  }

}

  /* Ensure logo has no extra offset */
  header .logo {
    margin: 0 !important;
  }

  /* Nav stays right-aligned correctly */
  header nav {
    margin-left: auto;
  }
}
/* =====================================================
   MOBILE MENU – FIX FOR FULL-WIDTH PAGES (TEAM + INSIGHTS)
===================================================== */

@media (max-width: 992px) {

  .page-template-page-team header nav.active,
  .page-template-page-blogs header nav.active {
    left: 0;
    right: 0;
    transform: none;

    width: 100%;
    max-width: 100%;
  }

}
/* =====================================================
   HEADER – BULLETPROOF FIXED HEADER
   Replaces sticky (sticky is impossible here)
===================================================== */

/* Reserve space so content does not jump */
body {
  padding-top: 90px; /* must match header height */
}

/* Header is now fixed (100% reliable) */
header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;

  height: 90px;
  background: #fff;
  z-index: 10000;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Header container alignment preserved */
.header-container {
  min-height: 90px;

  display: flex;
  align-items: center;
}


/* =====================================================
   SUBMENU ICON – HARD SIZE LOCK
   Prevent page CSS (works.css etc.) from shrinking icons
===================================================== */

header nav .sub-menu li a .menu-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;

  flex:0 0 36px !important; /* prevents flex shrink */

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

  object-fit:contain;
}