/* ===========================================================
   Echo Innovate IT — Header & Mega-Menu layout refinements
   Scoped CSS that tunes the existing Elementor/ElementsKit
   header (post 462) and mega-menu content to match the
   approved Webflow-style design.
   =========================================================== */

/* --- Logo: cap the giant header logo so it reads as a small lockup --- */
.elementor-462 .elementor-widget-image img,
.elementor-462 .elementor-widget-theme-site-logo img {
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* --- Centered Spread layout: logo LEFT / nav CENTER / phone+CTA RIGHT --- */
/* Make the visible main header row (a8b4a7e) a 3-column grid */
.elementor-462 .elementor-element-a8b4a7e {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 14px 40px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  width: 100% !important;
  max-width: none !important;
}

/* Logo column (first direct child) */
.elementor-462 .elementor-element-a8b4a7e > .e-con:nth-child(1),
.elementor-462 .elementor-element-ca03e12 {
  padding: 0 !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* Nav column (second direct child) */
.elementor-462 .elementor-element-a8b4a7e > .e-con:nth-child(2),
.elementor-462 .elementor-element-4d99165 {
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* CTA column (third direct child — the one we added) */
.elementor-462 .elementor-element-a8b4a7e > .e-con:nth-child(3),
.elementor-462 .elementor-element-a8b4a7e > .e-con:last-child {
  padding: 0 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* The nav UL itself — distribute items evenly */
.elementor-462 .elementskit-navbar-nav-default,
.elementor-462 .elementskit-menu-container,
.elementor-462 .ekit-wid-con.ekit_menu_responsive_tablet {
  background: #ffffff !important;
  padding: 0 !important;
  width: 100% !important;
}
.elementor-462 ul.elementskit-navbar-nav.elementskit-menu-po-center {
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Nav items typography + hover (clean underline on hover, no pill) */
.elementor-462 .elementskit-navbar-nav > li > a {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding: 10px 4px !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}
.elementor-462 .elementskit-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  background: #84cc16;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.elementor-462 .elementskit-navbar-nav > li:hover > a,
.elementor-462 .elementskit-navbar-nav > li.current-menu-item > a {
  color: #111827 !important;
  background: transparent !important;
}
.elementor-462 .elementskit-navbar-nav > li:hover > a::after,
.elementor-462 .elementskit-navbar-nav > li.current-menu-item > a::after {
  transform: scaleX(1);
}
.elementor-462 .elementskit-navbar-nav > li > a .elementskit-submenu-indicator {
  font-size: 10px;
  opacity: 0.55;
  margin-left: 4px;
}

/* --- Top bar (Blog / Contact Us / Our Work / About) --- */
.elementor-462 .elementor-element-1dde4b3 {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 6px 40px !important;
  min-height: 38px !important;
}
.elementor-462 .elementor-element-1dde4b3 ul.elementskit-navbar-nav.elementskit-menu-po-right {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-462 .elementor-element-1dde4b3 .elementskit-navbar-nav > li > a {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.elementor-462 .elementor-element-1dde4b3 .elementskit-navbar-nav > li > a::after {
  display: none !important;
}
.elementor-462 .elementor-element-1dde4b3 .elementskit-navbar-nav > li:hover > a,
.elementor-462 .elementor-element-1dde4b3 .elementskit-navbar-nav > li.current-menu-item > a {
  color: #65a30d !important;
  background: transparent !important;
}

/* =========================================================
   MEGA MENU PANEL — alignment + sizing
   ========================================================= */

/* Force the mega panel to sit tight under the nav, spanning
   nav width only — not full-bleed, no right gap. */
.elementor-462 .menu-item.elementskit-megamenu-has > .elementskit-megamenu-panel {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
  width: min(1200px, 96vw) !important;
  max-width: 96vw !important;
  padding: 0 !important;
  margin-top: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

/* The inner Elementor wrapper should fill the panel */
.elementor-462 .elementskit-megamenu-panel > .elementor {
  width: 100% !important;
  display: block !important;
}
.elementor-462 .elementskit-megamenu-panel .elementor-element.e-con.e-parent {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---- Force the root row to be a 2-column flex layout ---- */
.elementor-462 .elementskit-megamenu-panel > .elementor > .e-con.e-parent {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: #ffffff !important;
}

/* Left column fills remaining space */
.elementor-462 .elementskit-megamenu-panel > .elementor > .e-con.e-parent > .e-con:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 32px 36px !important;
  background: #ffffff !important;
}

/* Right column is a fixed 360px sidebar */
.elementor-462 .elementskit-megamenu-panel > .elementor > .e-con.e-parent > .e-con:last-child {
  flex: 0 0 360px !important;
  width: 360px !important;
  max-width: 360px !important;
  min-width: 360px !important;
  padding: 32px 28px !important;
  background: #f9fafb !important;
  border-left: 1px solid #e5e7eb !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Two-section left column (Web Dev & Hire Dev): side-by-side */
.elementor-462 .elementskit-megamenu-panel > .elementor > .e-con.e-parent > .e-con:first-child > .e-con {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
}
.elementor-462 .elementskit-megamenu-panel > .elementor > .e-con.e-parent > .e-con:first-child > .e-con:last-child {
  margin-bottom: 0 !important;
}

/* Items grid — stack vertically with small gap */
.elementor-462 .elementskit-megamenu-panel > .elementor .elementor-widget-image-box {
  margin-bottom: 4px !important;
}

/* Image-box items inside the mega: nicer spacing + pill hover */
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-img {
  width: 40px;
  height: 40px;
  margin: 0 !important;
  background: #0a0a0f;
  border-radius: 10px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-content {
  flex: 1;
  text-align: left;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-title {
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box .elementor-image-box-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-image-box:hover .elementor-image-box-title a {
  color: #65a30d !important;
}

/* Headings inside the mega: uppercase section labels */
.elementor-462 .elementskit-megamenu-panel .elementor-widget-heading h2.elementor-heading-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #84cc16 !important;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-heading h6.elementor-heading-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #6b7280 !important;
}

/* Stat card button */
.elementor-462 .elementskit-megamenu-panel .elementor-widget-button .elementor-button {
  background: #84cc16 !important;
  color: #0a0a0f !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
}
.elementor-462 .elementskit-megamenu-panel .elementor-widget-button .elementor-button:hover {
  background: #a3e635 !important;
}

/* Responsive guard — let the panel compress gracefully */
@media (max-width: 1024px) {
  .elementor-462 .menu-item.elementskit-megamenu-has > .elementskit-megamenu-panel {
    width: 96vw !important;
  }
}