/* ==========================================================
   DIVI MEGA MENU — Premium Dark Blue Six-Column Mega Menu
   Usage: add class "six-col-mega" to a top-level menu item
   ========================================================== */

/* ----------------------------------------------------------
   1. HEADER SCROLL TRANSITIONS
   ---------------------------------------------------------- */
.pa-header {
    background: transparent;
    transition: background-color 2s ease-out;
}

.pa-fixed-header {
    color: #fff !important;
    background-color: #1FBFAF !important;
    transition: background-color 2s ease-out;
}

/* ----------------------------------------------------------
   2. OVERFLOW — prevent clipping at every Divi wrapper level
   ---------------------------------------------------------- */
.et_pb_menu__wrap,
.et_pb_menu__menu,
.et-menu-nav,
nav.et-menu-nav,
.et-l--header,
.et_pb_section,
.et_pb_row,
.et_pb_column {
    overflow: visible !important;
}

/* ----------------------------------------------------------
   3. MEGA MENU PANEL
   ---------------------------------------------------------- */

/* Keep the parent li positioned so JS hover state attaches correctly */
.et_pb_menu .six-col-mega,
#top-menu  .six-col-mega,
.et-menu   .six-col-mega {
    position: relative !important;
}

/* Panel — hidden by default */
.et_pb_menu .six-col-mega > ul.sub-menu,
#top-menu  .six-col-mega > ul.sub-menu,
.et-menu   .six-col-mega > ul.sub-menu {
    position: fixed !important;
    top: 110px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;

    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 24px !important;
    margin: 0 !important;

    background: linear-gradient(
        180deg,
        rgba(6,18,38,0.98)  0%,
        rgba(4,12,28,0.98) 100%
    ) !important;

    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;

    box-shadow:
        0 28px 70px rgba(0,0,0,0.50),
        0 0 40px rgba(60,120,255,0.10),
        0 0 90px rgba(40,90,220,0.08) !important;

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

    z-index: 99999 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Top accent line */
.et_pb_menu .six-col-mega > ul.sub-menu::after,
#top-menu  .six-col-mega > ul.sub-menu::after,
.et-menu   .six-col-mega > ul.sub-menu::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 24px !important;
    right: 24px !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(140,190,255,0.45) 50%,
        rgba(255,255,255,0) 100%
    ) !important;
    pointer-events: none !important;
}

/* Ambient cursor glow (JS adds .js-mega-enhanced) */
.six-col-mega > ul.sub-menu.js-mega-enhanced::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 20px;
    background: radial-gradient(
        260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(110,170,255,0.12),
        rgba(110,170,255,0.05) 28%,
        rgba(110,170,255,0.00) 60%
    );
    z-index: 0;
}

/* Panel visible — JS adds .et-hover */
.et_pb_menu .six-col-mega.et-hover > ul.sub-menu,
#top-menu  .six-col-mega.et-hover > ul.sub-menu,
.et-menu   .six-col-mega.et-hover > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    display: grid !important;
    pointer-events: auto !important;
}

/* ----------------------------------------------------------
   4. COLUMN ITEMS (top-level li inside the panel)
   ---------------------------------------------------------- */
.et_pb_menu .six-col-mega > ul.sub-menu > li,
#top-menu  .six-col-mega > ul.sub-menu > li,
.et-menu   .six-col-mega > ul.sub-menu > li {
    position: relative !important;
    z-index: 1;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    transform: translateY(8px);
}

/* Staggered reveal animation */
.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li,
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li,
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li,
.et_pb_menu .six-col-mega:hover  > ul.sub-menu > li,
#top-menu  .six-col-mega:hover  > ul.sub-menu > li,
.et-menu   .six-col-mega:hover  > ul.sub-menu > li {
    animation: megaFadeUp 0.35s ease forwards;
}

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(1),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(1),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(1) { animation-delay: 0.02s; }

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(2),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(2),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(2) { animation-delay: 0.05s; }

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(3),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(3),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(3) { animation-delay: 0.08s; }

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(4),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(4),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(4) { animation-delay: 0.11s; }

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(5),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(5),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(5) { animation-delay: 0.14s; }

.et_pb_menu .six-col-mega.et-hover > ul.sub-menu > li:nth-child(6),
#top-menu  .six-col-mega.et-hover > ul.sub-menu > li:nth-child(6),
.et-menu   .six-col-mega.et-hover > ul.sub-menu > li:nth-child(6) { animation-delay: 0.17s; }

/* ----------------------------------------------------------
   5. COLUMN HEADER LINKS
   ---------------------------------------------------------- */
.et_pb_menu .six-col-mega > ul.sub-menu > li > a,
#top-menu  .six-col-mega > ul.sub-menu > li > a,
.et-menu   .six-col-mega > ul.sub-menu > li > a,
.six-col-mega > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 0 13px 0 !important;
    margin: 0 0 10px 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: "Inter", "Montserrat", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.2em !important;
    font-weight: 800 !important;
    font-style: italic !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(180,210,255,0.20) !important;
    background: transparent !important;
    white-space: normal !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.45),
        0 0 8px rgba(120,170,255,0.18) !important;
    position: relative !important;
}

/* Also force white on span/strong/em children */
.et_pb_menu .six-col-mega > ul.sub-menu > li > a span,
.et_pb_menu .six-col-mega > ul.sub-menu > li > a strong,
.et_pb_menu .six-col-mega > ul.sub-menu > li > a em,
#top-menu  .six-col-mega > ul.sub-menu > li > a span,
#top-menu  .six-col-mega > ul.sub-menu > li > a strong,
#top-menu  .six-col-mega > ul.sub-menu > li > a em,
.et-menu   .six-col-mega > ul.sub-menu > li > a span,
.et-menu   .six-col-mega > ul.sub-menu > li > a strong,
.et-menu   .six-col-mega > ul.sub-menu > li > a em,
/* Divi-specific header override */
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a,
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item a {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    fill: #fff !important;
}

/* Divider glow under header link */
.six-col-mega > ul.sub-menu > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(140,190,255,0.45),
        rgba(180,220,255,0.35),
        rgba(140,190,255,0.45),
        rgba(255,255,255,0)
    ) !important;
}

/* Header icon badge (::before) */
.six-col-mega > ul.sub-menu > li > a::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Per-column icon colours */
.six-col-mega > ul.sub-menu > li:nth-child(1) > a::before {
    content: "💻" !important;
    background: linear-gradient(180deg, #2261ff, #122c70) !important;
    border: 1px solid rgba(116,166,255,.45) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(74,132,255,.28) !important;
}
.six-col-mega > ul.sub-menu > li:nth-child(2) > a::before {
    content: "🧠" !important;
    background: linear-gradient(180deg, #784aff, #361c80) !important;
    border: 1px solid rgba(170,140,255,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(150,110,255,.26) !important;
}
.six-col-mega > ul.sub-menu > li:nth-child(3) > a::before {
    content: "🧼" !important;
    background: linear-gradient(180deg, #14a896, #0a4e46) !important;
    border: 1px solid rgba(96,220,200,.40) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(56,210,190,.24) !important;
}
.six-col-mega > ul.sub-menu > li:nth-child(4) > a::before {
    content: "🚀" !important;
    background: linear-gradient(180deg, #ff7c29, #84380c) !important;
    border: 1px solid rgba(255,178,120,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(255,146,74,.26) !important;
}
.six-col-mega > ul.sub-menu > li:nth-child(5) > a::before {
    content: "🎓" !important;
    background: linear-gradient(180deg, #e6b82c, #6e520c) !important;
    border: 1px solid rgba(255,223,124,.44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(244,206,84,.26) !important;
}
.six-col-mega > ul.sub-menu > li:nth-child(6) > a::before {
    content: "📦" !important;
    background: linear-gradient(180deg, #2ab05c, #105226) !important;
    border: 1px solid rgba(124,230,160,.40) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25), 0 0 14px rgba(84,214,126,.24) !important;
}

/* ----------------------------------------------------------
   6. SECOND-LEVEL SUB-MENUS (inline, not flyout)
   ---------------------------------------------------------- */
.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

/* Card wrapper li */
.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu > li,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu > li,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu > li {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

/* Glass shimmer sweep */
.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu > li::before,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu > li::before,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu > li::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -140% !important;
    width: 65% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transform: skewX(-24deg) !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.05) 45%,
        rgba(170,210,255,0.14) 50%,
        rgba(255,255,255,0.05) 55%,
        rgba(255,255,255,0) 100%
    ) !important;
    opacity: 0.8 !important;
    animation: megaGlassShimmer 6s ease-in-out infinite !important;
}

/* Per-card spotlight overlay (JS sets --card-x / --card-y) */
.six-col-mega > ul.sub-menu > li > ul.sub-menu > li::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 14px;
    background: radial-gradient(
        120px circle at var(--card-x, 50%) var(--card-y, 50%),
        rgba(170,210,255,0.16),
        rgba(170,210,255,0.06) 35%,
        rgba(170,210,255,0.00) 70%
    );
    opacity: 0;
    transition: opacity 0.22s ease;
    z-index: 1;
}

.six-col-mega > ul.sub-menu > li > ul.sub-menu > li.card-active::after {
    opacity: 1;
}

/* ----------------------------------------------------------
   7. CARD LINKS
   ---------------------------------------------------------- */
.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: linear-gradient(
        180deg,
        rgba(14,24,44,0.95) 0%,
        rgba(9,16,32,0.95) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.45em !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 18px rgba(0,0,0,0.28) !important;
    /* Magnetic hover uses CSS custom props from JS */
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) !important;
    transition:
        transform 0.18s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
    will-change: transform;
}

.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    transform: translateY(-2px) scale(1.015) !important;
    background: linear-gradient(
        180deg,
        rgba(20,34,60,0.98) 0%,
        rgba(12,22,42,0.98) 100%
    ) !important;
    border-color: rgba(170,210,255,0.22) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 14px 28px rgba(0,0,0,0.30),
        0 0 18px rgba(100,160,255,0.18) !important;
}

/* Card icon badge */
.et_pb_menu .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a::before,
#top-menu  .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a::before,
.et-menu   .six-col-mega > ul.sub-menu > li > ul.sub-menu > li > a::before {
    content: "✦" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px !important;
    background: linear-gradient(
        180deg,
        rgba(26,42,72,0.95) 0%,
        rgba(14,24,44,0.95) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 4px 10px rgba(0,0,0,0.20),
        0 0 10px rgba(120,170,255,0.16) !important;
}

/* ----------------------------------------------------------
   8. MISC
   ---------------------------------------------------------- */

/* Existing real icons */
.et_pb_menu .six-col-mega a i,
.et_pb_menu .six-col-mega a .menu-icon,
.et_pb_menu .six-col-mega a .et-pb-icon,
#top-menu  .six-col-mega a i,
#top-menu  .six-col-mega a .menu-icon,
#top-menu  .six-col-mega a .et-pb-icon,
.et-menu   .six-col-mega a i,
.et-menu   .six-col-mega a .menu-icon,
.et-menu   .six-col-mega a .et-pb-icon {
    color: #fff !important;
}

/* Hide Divi's expand arrows inside the mega panel */
.et_pb_menu .six-col-mega ul.sub-menu .menu-item-has-children > a::after,
#top-menu  .six-col-mega ul.sub-menu .menu-item-has-children > a::after,
.et-menu   .six-col-mega ul.sub-menu .menu-item-has-children > a::after {
    display: none !important;
}

/* ----------------------------------------------------------
   9. VERTICAL COLUMN DIVIDERS
   ---------------------------------------------------------- */
.et_pb_menu .six-col-mega > ul.sub-menu > li:not(:last-child)::after,
#top-menu  .six-col-mega > ul.sub-menu > li:not(:last-child)::after,
.et-menu   .six-col-mega > ul.sub-menu > li:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    bottom: 6px !important;
    right: -9px !important;
    width: 1px !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(120,170,255,0.10) 18%,
        rgba(170,210,255,0.08) 50%,
        rgba(120,170,255,0.10) 82%,
        rgba(255,255,255,0) 100%
    ) !important;
}

/* ----------------------------------------------------------
   10. ANIMATIONS
   ---------------------------------------------------------- */
@keyframes megaGlassShimmer {
    0%   { left: -140%; }
    55%  { left: -140%; }
    100% { left:  160%; }
}

@keyframes megaFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   11. RESPONSIVE
   ---------------------------------------------------------- */

/* ≤ 1400px — 5 columns */
@media (max-width: 1400px) {
    .et_pb_menu .six-col-mega > ul.sub-menu,
    #top-menu  .six-col-mega > ul.sub-menu,
    .et-menu   .six-col-mega > ul.sub-menu {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ≤ 1200px — 3 columns; soften dividers */
@media (max-width: 1200px) {
    .et_pb_menu .six-col-mega > ul.sub-menu,
    #top-menu  .six-col-mega > ul.sub-menu,
    .et-menu   .six-col-mega > ul.sub-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .et_pb_menu .six-col-mega > ul.sub-menu > li:not(:last-child)::after,
    #top-menu  .six-col-mega > ul.sub-menu > li:not(:last-child)::after,
    .et-menu   .six-col-mega > ul.sub-menu > li:not(:last-child)::after {
        opacity: 0.65 !important;
        right: -8px !important;
    }
}

/* ≤ 980px — 2 columns */
@media (max-width: 980px) {
    .et_pb_menu .six-col-mega > ul.sub-menu,
    #top-menu  .six-col-mega > ul.sub-menu,
    .et-menu   .six-col-mega > ul.sub-menu {
        width: 94vw !important;
        min-width: 94vw !important;
        max-width: 94vw !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 18px !important;
        top: 100px !important;
    }
}