/* ===== Eternity Studio Mega Menu (FINAL) ===== */

.mega-menu{
    background: #0b0f1c; /* opaque dark */
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);

    box-shadow:
        0 25px 70px rgba(0,0,0,.65),
        0 0 0 1px rgba(140,110,255,.05);

    padding: 26px;

    /* Needed because you use ::before */
    position: relative;

    /* ===== Enterprise animation (Y-only, no X jump) ===== */
    opacity: 0;
    transition: opacity .14s ease, margin-top .14s ease;
    will-change: opacity, margin-top;

    z-index: 9999;
}

/* subtle top glow */
.mega-menu::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(140,110,255,.6),
        transparent
    );
}

/* titles */
.mega-title{
    color:#ffffff;
    font-weight:700;
    text-decoration: none;
}
.mega-title:hover{
    color:#a78bfa;
}

/* description */
.mega-desc{
    color:rgba(255,255,255,.60);
}

/* links */
.mega-list{
  list-style:none;
  padding:0;
  margin:0;
}

.mega-list a{
    color:rgba(255,255,255,.80);
    transition:.2s ease;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mega-list a:hover{
    color:#ffffff;
    transform:translateX(3px);
}
.mega-list a:hover::after{
  content: "→";
  opacity: .85;
  transform: translateX(2px);
}

/* Active link highlight */
.mega-list a.is-active{
  color: #ffffff !important;
  position: relative;
  padding-left: 10px;
}
.mega-list a.is-active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: rgba(167,139,250,.9);
}

/* column divider (desktop) */
@media(min-width:992px){
  .mega-col:not(:last-child){
      border-right:1px solid rgba(255,255,255,.05);
      padding-right:18px;
  }
}

/* mobile keep clean */
@media(max-width:991px){
  .mega-desc{ display:none!important; }
}


/* ===== Apple/Webflow style backdrop behind mega menu ===== */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9980;
}
.nav-backdrop.is-on{
  opacity: 1;
  pointer-events: auto;
}

/* Ensure navbar is positioning context */
.navbar{ position: relative; z-index: 9990; }

/* ===== Desktop: centered, smooth slide, adaptive width (JS) ===== */
@media (min-width: 992px){
  .mega-dropdown{ position: static !important; }

  .mega-dropdown .dropdown-menu.mega-menu{
    position: absolute !important;
    top: 100%;
    left: 50% !important;
    width: min(1100px, 92vw);
    margin-top: 0 !important;

    /* Center + animation in one transform (no sideways jump) */
    transform: translateX(-50%) translateY(14px) scale(.985);
    opacity: 0;
    visibility: hidden;

    transition: opacity .18s ease, transform .18s ease;
    will-change: opacity, transform;
  }

  .mega-dropdown.show > .mega-menu,
  .mega-dropdown .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px) scale(1);
  }
}

/* ===== Mobile: accordion menu (no mega dropdown floating) ===== */
@media (max-width: 991px){
  .mega-dropdown{ display:none !important; }
  .mob-services{
    background: rgba(11,15,28,.65);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 10px 14px;
  }
  .mob-service-link{
    display:block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration:none;
    color: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
  }
  .mob-service-link:hover{
    color:#fff;
    background: rgba(167,139,250,.10);
    border-color: rgba(167,139,250,.25);
  }
  .accordion-button{ font-weight: 700; }
  .accordion-button::after{ filter: invert(1); opacity:.9; }
  .accordion-button:focus{ box-shadow:none; }
  .accordion-item{ border:0; }
  .nav-caret{ opacity:.8; font-size: 12px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mega-menu, .nav-backdrop{ transition:none !important; }
}