/* =====================================================================
   MEGA MENU STYLES (Services / Products) — FINAL, FIXED VERSION
   Paste this AFTER your existing theme CSS (so it wins on conflicts).
   Uses your existing theme variables (--theme-color, --title-color, etc.)

   FIX NOTES (why the previous version looked broken):
   - Your theme has global list/flex rules that were leaking into the
     mega menu's <ul>/<li> tags and squashing them side-by-side.
     Every list element below is now hard-reset with !important so
     nothing from the theme can override it.
   - The panel is now a FULL WIDTH block anchored to the header bar
     (.menu-area), not a small floating box under the word "SERVICES".
   ===================================================================== */

/* ---------- Containing block for the full-width panel ---------- */
/* IMPORTANT: .mega-menu-parent (the <li>) must NOT have position:relative.
   If it does, it becomes the containing block for the absolutely
   positioned panel below, and the panel shrinks to the width of the
   word "SERVICES" instead of spanning the header. We deliberately let
   the positioning bubble up to .header-layout2 .menu-area, which
   already has position:relative in your theme CSS and spans the full
   header bar — that's what the mega panel centers itself against. */

.main-menu .mega-menu-parent {
	position: static;
}

.main-menu .mega-menu-parent .mega-menu-wrap {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: calc(100% - 40px);
	max-width: 1180px;
	margin: 0 auto;

	background: #fff;
	border-radius: 16px;
	box-shadow: 0 25px 60px rgb(20 10 40 / .18);
	border: 1px solid rgba(131, 66, 246, .08);

	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	flex-wrap: nowrap !important;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
	z-index: 9999;
	overflow: hidden;
}

/* Visibility is now driven by JS (adds/removes .mega-open) instead of
   raw :hover, so we can add a short close-delay buffer — this stops
   the panel from vanishing the instant the mouse crosses the small
   gap between the nav link and the panel itself. */
.main-menu .mega-menu-parent.mega-open .mega-menu-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Fallback: still support plain :hover for keyboard/no-JS cases */
.main-menu .mega-menu-parent:hover .mega-menu-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* small pointer arrow so it visually connects to the nav item */
.main-menu .mega-menu-parent .mega-menu-wrap::before {
	content: '';
}
/* ---------- Hard reset: kill any inherited theme list/flex rules ---------- */
.mega-menu-wrap,
.mega-menu-wrap * {
	box-sizing: border-box;
}

.mega-menu-wrap ul,
.mega-menu-wrap ol {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.mega-menu-wrap ul li,
.mega-menu-wrap ol li {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	list-style: none !important;
}

.mega-menu-wrap a {
	text-decoration: none !important;
}

/* ---------- Column 1: category list ---------- */
.mega-menu-categories {
	flex: 0 0 280px;
	max-width: 280px;
	background: var(--smoke-color, #f7f5ff);
	padding: 20px 0;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: auto; /* safety net for this plain single-column list — scrolls if ever needed, never hides content */
	border-right: 1px solid var(--th-border-color, #ece7fb);
}

/* NOTE: the category column always stays a single column (with scroll
   if needed) — only the side panel (.mega-links) splits into columns.
   See the .mega-links.auto-two-col rule further below. */

.mega-cat-list li a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 13px 24px !important;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--title-color, #17012c);
	transition: all .22s ease;
	white-space: nowrap;
}

.mega-cat-list li a i {
	font-size: 12px;
	opacity: .55;
	flex-shrink: 0;
	margin-left: 12px;
}

.mega-cat-list li:hover a,
.mega-cat-list li.active a {
	background: var(--theme-color, #8342f6);
	background-image: linear-gradient(90deg, var(--theme-color, #8342f6) 0%, var(--theme-color3, #ff5fa2) 100%);
	color: #fff !important;
}

.mega-cat-list li:hover a i,
.mega-cat-list li.active a i {
	opacity: 1;
	color: #fff;
}

/* ---------- Column 2: active item panel ---------- */
.mega-menu-items {
	position: relative;
	flex: 1 1 auto;
	padding: 30px 20px;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	/* column-count: 2 above guarantees content always fits this width, so hiding overflow-x is now safe — only vertical scroll (overflow-y) can ever trigger; */
}

.mega-item-panel {
	display: none !important;
}

.mega-item-panel.active {
	display: block !important;
	animation: megaFadeIn .25s ease;
}

@keyframes megaFadeIn {
	from { opacity: 0; transform: translateX(6px); }
	to   { opacity: 1; transform: translateX(0); }
}

.mega-item-panel h4 {
	font-size: 21px;
	font-weight: 700;
	color: var(--title-color, #17012c);
	margin: 0 0 20px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--th-border-color, #ece7fb);
	display: flex !important;
	align-items: center;
	gap: 10px;
}

.mega-item-panel h4 i {
	font-size: 14px;
	color: var(--theme-color, #8342f6);
}

/* single column list */
.mega-links {
	display: block !important;
}

.mega-links li a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 9px 0px 9px 6px !important;
	font-size: 16px;
	color: #4b4657;
	border-bottom: 1px dashed transparent;
	transition: color .2s ease;
	position: relative;
}

.mega-links li a:hover {
	color: var(--theme-color, #8342f6);
}

/* Per-item icon — one <i> per link, matched to that link's title in the
   markup. Visible by default (not hidden/hover-only) and gently animates
   on hover so it still feels alive when the user scans the list. */
.mega-links li a i {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	font-size: 16px;
	color: var(--theme-color, #8342f6);
	opacity: .75;
	transition: all .25s ease;
}

.mega-links li a:hover i {
	opacity: 1;
	transform: translateX(3px) scale(1.12);
}
.mega-links li a svg {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	font-size: 26px;
	color: var(--theme-color, #8342f6);
	opacity: .75;
	transition: all .25s ease;
}

.mega-links li a:hover svg {
	opacity: 1;
	transform: translateX(3px) scale(1.12);
}
/* ---------- Promo panel: fills leftover empty space with a banner ---------- */
/* Third column of the mega menu — always visible, gives the panel a
   finished look instead of blank whitespace. Replace the image path
   with your own banner (recommended size ~ 260x170px, landscape).

   IMPORTANT: align-self: flex-start stops this panel from stretching
   to match the height of the categories/items column next to it —
   that stretching was why the image kept growing/shrinking every
   time you switched menus. Now it always keeps the same fixed height,
   no matter which category panel is open. */
.mega-menu-promo {
	flex: 0 0 260px;
	max-width: 260px;
	align-self: flex-start;
}

.mega-menu-promo-card {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgb(131 66 246 / .18);
	background: #fff;
	border: 1px solid var(--th-border-color, #ece7fb);
}

/* image on top — fixed height, never changes size */
.mega-menu-promo-card img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

/* content below the image — plain background, no dark overlay */
.mega-menu-promo-content {
	padding: 22px 20px;
	background: #fff;
}

.mega-menu-promo-badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--smoke-color, #f7f5ff);
	border: 1px solid var(--th-border-color, #ece7fb);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--theme-color, #8342f6);
	font-size: 15px;
	margin-bottom: 14px;
}

.mega-menu-promo-badge i {
	color: var(--theme-color, #8342f6);
}

.mega-menu-promo-content h5 {
	color: var(--title-color, #17012c) !important;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px !important;
}

.mega-menu-promo-content p {
	color: #6b6775;
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 16px !important;
}

.mega-menu-promo-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--theme-color, #8342f6);
	background-image: linear-gradient(90deg, var(--theme-color, #8342f6) 0%, var(--theme-color3, #ff5fa2) 100%);
	color: #fff !important;
	padding: 10px 18px !important;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	width: fit-content;
	transition: all .25s ease;
}

.mega-menu-promo-btn:hover {
	gap: 12px;
	box-shadow: 0 10px 22px rgb(131 66 246 / .35);
}

/* ---------- AUTOMATIC COLUMN SPLIT: max 6 items per column ---------- */
/* JS (in the header file) counts each list's <li> items. If there are
   more than 6, it adds the .auto-two-col class here. CSS multi-column
   then fills the first column with 6 items and automatically flows
   the rest into additional side-by-side columns — no manual class
   needed per menu, and it scales to 3+ columns for very long lists. */

.mega-links.auto-two-col {
	column-count: 2; /* always exactly 2 columns, evenly split (like 6-6) */
	column-gap: 40px;
	/* no fixed width/height here on purpose — this guarantees the split
	   NEVER overflows sideways. If a list is long, the two columns just
	   grow taller instead, and .mega-menu-items (its scrollable parent)
	   handles that with a plain VERTICAL scrollbar. */
}

.mega-links.auto-two-col li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.mega-links.auto-two-col li a {
	white-space: normal;
}

/* ---------- Flat mega menu (COMPANY / HIRE US — no category column) ---------- */
/* Same look as Services/Products (full width, rounded, shadow, promo
   banner) but sized down since there's only one list + a promo panel,
   no left category column — keeps it proportioned instead of leaving
   a big empty gap between the list and the banner. */
.mega-menu-wrap-flat {
	max-width: 900px !important;
	justify-content: space-between;
}

/* .mega-menu-wrap-flat .mega-menu-items {
	flex: 0 0 480px;
	max-width: 480px;
} */

/* ---------- Scrollbars inside mega menu columns ---------- */
.mega-menu-categories::-webkit-scrollbar,
.mega-menu-items::-webkit-scrollbar {
	width: 5px;
}

.mega-menu-categories::-webkit-scrollbar-thumb,
.mega-menu-items::-webkit-scrollbar-thumb {
	background: var(--theme-color, #8342f6);
	border-radius: 10px;
}

/* ---------- Mobile: nested level2 / level3 accordion ---------- */
.th-mobile-menu .level3 > li > a {
	padding-left: 20px !important;
	font-size: 14px;
	color: #5c5867;
}

.th-mobile-menu li.th-active > a {
	color: var(--theme-color, #8342f6);
}

/* ---------- Responsive scaling for smaller desktop widths ---------- */
@media (max-width: 1400px) {
.main-menu .mega-menu-parent .mega-menu-wrap {
		max-width: 100%;
		
	}
}

@media (max-width: 1200px) {
	.main-menu .mega-menu-parent .mega-menu-wrap {
		width: calc(100% - 24px);
		max-width: 900px;
	}
	.mega-menu-categories {
		flex: 0 0 240px;
		max-width: 240px;
	}
	.mega-menu-items {
		padding: 26px 28px;
	}
	.mega-links.auto-two-col {
		column-gap: 28px;
	}
	/* not enough room for the promo banner at this width — hide it and
	   let the links panel use the freed-up space instead */
	.mega-menu-promo {
		display: none;
	}
}