:root{ --brand:#e66a00; --brand-2:#ffb066; --ink:#0e0f16; --muted:#6b7280; --surface:#ffffff; --bg:#0a0c12; --text:#eef2ff; }
*{box-sizing:border-box} html,body{height:100%}
body{ font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#121526; background:#f7fafc; }
.bg-gradient{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.navbar{ background: linear-gradient(135deg, #1a1f2f 0%, #121726 100%) !important; border-bottom:1px solid rgba(230,106,0,.25); }
.navbar .brand{ display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; }
.navbar .brand-logo{ width:28px; height:28px; }
.navbar .brand-name{ font-weight:800; letter-spacing:.1px; }
.hero{ position:relative; color:var(--text);
  background: radial-gradient(800px 400px at 10% -10%, rgba(230,106,0,.20), transparent 60%),
             radial-gradient(900px 500px at 90% -20%, rgba(255,176,102,.28), transparent 60%),
             linear-gradient(180deg, #0a0c12 0%, #11162a 60%, #0a0c12 100%);
  overflow:hidden; }
.hero .grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:28px 28px,28px 28px; mask-image: radial-gradient(1200px 600px at 60% -10%, rgba(0,0,0,1), rgba(0,0,0,0)); pointer-events:none; }
.hero .blob{ position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(70px); opacity:.55; pointer-events:none; animation: float 10s ease-in-out infinite; }
.hero .blob.b1{ background: radial-gradient(circle at 30% 30%, rgba(230,106,0,.7), transparent 60%); top:-120px; left:-140px;}
.hero .blob.b2{ background: radial-gradient(circle at 60% 40%, rgba(255,176,102,.6), transparent 60%); top:-160px; right:-120px; animation-delay: -3s;}
.hero .blob.b3{ background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 60%); bottom:-200px; left:30%; animation-delay: -6s;}
@keyframes float{ 0%,100%{ transform: translateY(0) translateX(0) scale(1);} 50%{ transform: translateY(18px) translateX(-8px) scale(1.03);} }
.hero h1{ font-weight:800; letter-spacing:-0.02em; background: linear-gradient(90deg,#fff, #ffeacc 60%, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .tag{ display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .7rem; border-radius:999px; font-weight:700; letter-spacing:.02em; background: rgba(230,106,0,.16); color:#ffd699; border:1px solid rgba(255,176,102,.35); text-transform:uppercase; font-size:.75rem; }
.hero .btn-cta{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#111; border:none; border-radius: 14px; padding:12px 20px; font-weight:800; box-shadow: 0 10px 30px rgba(230,106,0,.35); }
.hero .btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:12px 18px; font-weight:700; }
.section-title{ font-weight:800; letter-spacing:-.02em; }
.card-soft{ border:1px solid #eaeef3; border-radius:20px; box-shadow:0 14px 38px rgba(17,24,39,0.06); background:#fff; }
.badge-soft{ background: rgba(230,106,0,.12); color: var(--brand); font-weight:700; border-radius:999px; padding:.35rem .6rem; }
.kpi{ background:linear-gradient(180deg,#fff, #fff6ed); border:1px solid #ffd7ba; border-radius:18px; }
.tech-badges .badge{ background:#1b2238; color:#ffd7ba; border:1px solid rgba(255,215,186,.25); font-weight:700; letter-spacing:.2px; border-radius:999px; padding:.5rem .75rem; margin:.25rem; }
.footer{ background:#0f1426; color:#c7d2fe; } .footer a{ color:#ffe0c2; } .footer .divider{ border-color: rgba(255,224,194,.2) !important; }
/* ===== AI "living graphics" showcase ===== */
.ai-showcase{
  background: radial-gradient(1000px 300px at 10% 0%, rgba(255,176,102,.18), transparent 60%),
              radial-gradient(800px 280px at 90% 10%, rgba(139,92,246,.18), transparent 60%),
              linear-gradient(180deg,#0f1426,#0b0f21);
  color:#eaf2ff;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ai-showcase .lead { color:#cbd5ff; }
.ai-showcase .frame{
  border-radius:24px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}

/* ===== Live Hero ===== */
.hero-live{
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(230,106,0,.18), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, #0a0c12 0%, #11162a 60%, #0a0c12 100%);
  color:#eaf2ff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%;}
.glow{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.45; }
.glow-1{ width:380px; height:380px; background:#e66a00; top:-120px; left:-120px; animation:float 12s ease-in-out infinite; }
.glow-2{ width:420px; height:420px; background:#8b5cf6; top:-160px; right:-160px; animation:float 14s ease-in-out infinite reverse; }
.glow-3{ width:360px; height:360px; background:#22d3ee; bottom:-160px; left:30%; animation:float 16s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(18px) } }

.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background: #ffd7ba; color:#111; border-radius:999px; padding:.35rem .7rem;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:.75rem;
}
.hero-title{ font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.brand-grad{
  background: linear-gradient(90deg,#fff, #ffeacc 60%, #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-cta{
  background: linear-gradient(135deg, #e66a00, #ffb066);
  color:#111; border:none; border-radius: 14px; padding:12px 20px; font-weight:800;
  box-shadow: 0 10px 30px rgba(230,106,0,.35);
}
.btn-ghost{
  color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:12px 18px; font-weight:700; background: transparent;
}
.kpi-live{
  background:linear-gradient(180deg,#fff, #fff6ed);
  border:1px solid #ffd7ba; border-radius:16px; padding:12px; text-align:center; color:#111;
}
.kpi-live .kpi-num{ font-weight:900; font-size:1.6rem; line-height:1; }
.kpi-live .kpi-cap{ font-size:.8rem; color:#7a7a7a; }

.hero-visual{ position:relative; }
.orb{ position:absolute; top:-30px; right:-20px; width:130px; height:130px; opacity:.7; }
.device-frame{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.device-top{
  display:flex; gap:6px; padding:10px; background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.device-top .dot{ width:10px; height:10px; border-radius:50%; background:#ffd7ba; opacity:.9; }
.device-body{ padding:14px; background:rgba(10,12,20,.5) }
.ticker{ overflow:hidden; white-space:nowrap; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); margin-bottom:10px; }
.ticker-track{ display:inline-block; padding:8px 0; animation: ticker 18s linear infinite; color:#ffd7ba; font-weight:700; letter-spacing:.1px; }
.ticker-track span{ display:inline-block; padding:0 18px; }
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.marquee-wrap{ overflow:hidden; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.marquee{ position:relative; }
.marquee-track{ display:flex; gap:48px; padding:16px 0; animation: marquee 20s linear infinite; color:#cbd5ff; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.marquee-track span{ opacity:.9 }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
/* ===== Cinematic Banner ===== */
.hero-cine{position:relative;padding:clamp(60px,9vw,120px) 0;color:#eaf2ff;background:#0a0c12;}
.cine-media{position:absolute;inset:0;overflow:hidden;}
.cine-video,.cine-fallback{position:absolute;min-width:100%;min-height:100%;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(1.1) contrast(1.05);}
.cine-fallback{display:none;}
.cine-overlay{position:absolute;inset:0;background:
  radial-gradient(1000px 420px at 10% -10%, rgba(230,106,0,.28), transparent 60%),
  radial-gradient(900px 520px at 90% -20%, rgba(139,92,246,.22), transparent 60%),
  linear-gradient(180deg,rgba(10,12,18,.35),rgba(10,12,18,.65) 60%, rgba(10,12,18,.9));}
.cine-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;opacity:.15;mix-blend:overlay;animation:gridMove 18s linear infinite;}
@keyframes gridMove{ from{background-position:0 0,0 0} to{background-position:0 28px,28px 0} }
.cine-noise{position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');mix-blend:soft-light;}

.cine-canvas{position:absolute;inset:0;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;transform:translateZ(0);}
.blob.b1{width:380px;height:380px;background:#e66a00;top:-120px;left:-120px;}
.blob.b2{width:420px;height:420px;background:#8b5cf6;top:-160px;right:-160px;}
.blob.b3{width:360px;height:360px;background:#22d3ee;bottom:-160px;left:30%;}

.cine-badge{display:inline-flex;align-items:center;gap:.5rem;background:#ffd7ba;color:#111;border-radius:999px;padding:.35rem .7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:.75rem;}
.cine-title{font-weight:900;letter-spacing:-.02em;line-height:1.05;}
.brand-glow{background:linear-gradient(90deg,#fff,#ffeacc 60%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(255,224,180,.15);}

.btn-cta{background:linear-gradient(135deg,#e66a00,#ffb066);color:#111;border:none;border-radius:14px;padding:12px 20px;font-weight:800;box-shadow:0 10px 30px rgba(230,106,0,.35);}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px 18px;font-weight:700;background:transparent;}

.kpi-live{background:linear-gradient(180deg,#fff,#fff6ed);border:1px solid #ffd7ba;border-radius:16px;padding:12px;text-align:center;color:#111;}
.kpi-live .kpi-num{font-weight:900;font-size:1.6rem;line-height:1;}
.kpi-live .kpi-cap{font-size:.8rem;color:#7a7a7a;}

.cine-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);transform-style:preserve-3d;transition:transform .15s ease;}
.card-ring{position:absolute;inset:0;border-radius:18px;border:1px dashed rgba(255,255,255,.12);pointer-events:none;animation:ringSpin 16s linear infinite;}
@keyframes ringSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.card-head{display:flex;gap:6px;padding:10px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.12);}
.card-head .dot{width:10px;height:10px;border-radius:50%;background:#ffd7ba;opacity:.9;}
.card-body{padding:14px;background:rgba(10,12,20,.45)}
.ticker{overflow:hidden;white-space:nowrap;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);margin-bottom:10px;}
.ticker-track{display:inline-block;padding:8px 0;animation:ticker 18s linear infinite;color:#ffd7ba;font-weight:800;letter-spacing:.3px;}
.ticker-track span{display:inline-block;padding:0 18px;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.marquee-wrap{overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.marquee{position:relative;}
.marquee-track{display:flex;gap:48px;padding:16px 0;animation:marq 20s linear infinite;color:#cbd5ff;font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Responsive tweaks */
@media (max-width: 992px){
  .blob{filter:blur(40px);opacity:.5;}
  .cine-card{margin-top:8px;}
}
/* ===== Glass Brand Header (Bootstrap compatible) ===== */
:root{
  --brand:#e66a00; --brand-2:#ffb066; --ink:#0f1426; --text:#eaf2ff;
  --glass: rgba(17, 22, 42, .62); --glass-bd: rgba(255,255,255,.14);
}

/* Thin gradient line above navbar */
.nav-border{ height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2),#8b5cf6,#22d3ee,var(--brand)); }

/* Blurred glass navbar */
.navglass{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--glass);
  border-bottom:1px solid var(--glass-bd);
  transition: box-shadow .2s ease, background .2s ease;
}
.navglass.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.28); background: rgba(17,22,42,.78); }

/* Brand block */
.brand-logo{ border-radius:8px; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.brand-name{ line-height:1; color:#fff; }
.brand-strong{
  display:inline-block;
  font-weight:900; letter-spacing:-.02em; font-size:1.1rem;
  background:linear-gradient(90deg,#fff,#ffeacc 60%,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-soft{
  display:inline-block;
  margin-left:.35rem;
  font-weight:800; font-size:1.06rem;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{ font-size:.68rem; letter-spacing:.18em; color:#cbd5ff; opacity:.95; margin-top:.2rem; }

/* Links: luxe underline on hover/active */
.navbar-dark .navbar-nav .nav-link{
  position:relative; font-weight:700; color:#eaf2ff; opacity:.95;
}
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff; }
.navbar-dark .navbar-nav .nav-link::after{
  content:""; position:absolute; left:0; bottom:.35rem; height:2px; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .25s ease;
}
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after{ width:100%; }

/* CTA button */
.btn-cta{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#111;
  font-weight:900; border-radius:12px; padding:10px 14px; border:0;
  box-shadow:0 10px 30px rgba(230,106,0,.35);
}

/* Improve toggler visibility on glass */
.navbar-dark .navbar-toggler{ border-color:rgba(255,255,255,.35); }
.navbar-dark .navbar-toggler:focus{ box-shadow:none; }
/* ===== Top contact strip ===== */
.topstrip{
  background:#0c1122; color:#cfe3ff; font-size:.9rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.topstrip .top-link{ color:#cfe3ff; text-decoration:none; opacity:.95; }
.topstrip .top-link:hover{ color:#fff; text-decoration:underline; }
.topstrip .divider{ color:rgba(255,255,255,.35); }

/* Small pill buttons in strip */
.btn-xs{ padding:.25rem .55rem; border-radius:999px; font-weight:700; font-size:.8rem; line-height:1; }
.btn-whatsapp{ background:#25D366; color:#0b1b12; }
.btn-outline-light{ border:1px solid rgba(255,255,255,.35); color:#fff; }

/* ===== Mega menu (final, stable) ===== */
.navbar { position: relative; z-index: 2000; }
.navbar .dropdown-menu { z-index: 2050; }

.dropdown-mega .dropdown-menu{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(20,24,42,.98);
  color:#eaf2ff;
  width:min(100%, 980px);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  margin-top:0;
}

/* Desktop hover behavior (no display toggling) */
@media (min-width: 992px){
  .navbar .dropdown-mega{ position: relative; }

  /* Invisible hover bridge removes gap flicker between toggle and menu */
  .navbar .dropdown-mega::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:16px;
  }

  .navbar .dropdown-mega .dropdown-menu{
    position:absolute; top:100%; left:50%;
    transform: translate3d(-50%, 10px, 0);
    display:block !important;           /* do not flip display on desktop */
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: transform, opacity;
  }

  .navbar .dropdown-mega:hover > .dropdown-menu,
  .navbar .dropdown-mega.show > .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translate3d(-50%, 0, 0);
  }

  .navbar .dropdown-mega > .dropdown-toggle::after{ display:none; }
}

/* Ensure page sections never cover the menu */
section, .container, .row, .col, .py-5, .bg-light { position: relative; z-index: 1; }
/* ===== Mega menu v3 (stable, no jitter, no overlap) ===== */

/* Make sure nothing clips the dropdown */
.navbar,
.navbar .container,
.navbar .collapse {
  position: relative;
  overflow: visible;
  z-index: 2000;
}
.navbar .dropdown-menu { z-index: 2050; }

/* Base look */
.dropdown-mega .dropdown-menu{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(20,24,42,.98);
  color:#eaf2ff;
  max-width: 980px;           /* center by auto margins, no 50% math */
  width: calc(100vw - 2rem);  /* responsive */
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  margin-top:0;               /* prevent jump */
  padding: clamp(12px, 2vw, 24px);
}

/* Desktop behavior — no display flip, only opacity/transform */
@media (min-width: 992px){
  /* The LI is the hover container + anchor */
  .navbar .dropdown-mega{ position: relative; }

  /* BIGGER hover bridge to kill flicker between label and menu */
  .navbar .dropdown-mega::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:22px;
  }

  .navbar .dropdown-mega .dropdown-menu{
    position: absolute;
    /* Center under the whole navbar/container, not the toggle, to avoid jitter */
    left: 0; right: 0;        /* full row */
    margin-left: auto;
    margin-right: auto;       /* center */
    transform: translateY(10px);

    display: block !important;         /* never flip display on desktop */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: transform, opacity;
  }

  /* Show while hovering parent or when JS adds .show */
  .navbar .dropdown-mega:hover > .dropdown-menu,
  .navbar .dropdown-mega.show > .dropdown-menu{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }

  /* Cleaner label */
  .navbar .dropdown-mega > .dropdown-toggle::after{ display:none; }
}

/* Keep page content below so it never covers the menu */
section, .container, .row, .col, .py-5, .bg-light { position: relative; z-index: 1; }
@media (min-width: 992px){
  .navbar .dropdown-mega{ position: relative; }
  .navbar .dropdown-mega::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:22px;
  }
  .navbar .dropdown-mega .dropdown-menu{
    position:absolute; top:100%;
    left: 0;                     /* align to toggle’s left */
    right: auto;
    transform: translateY(10px);
    display:block !important;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: transform, opacity;
    width: 720px;                /* pick a width that fits your items */
    max-width: calc(100vw - 2rem);
  }
  .navbar .dropdown-mega:hover > .dropdown-menu,
  .navbar .dropdown-mega.show > .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0);
  }
  .navbar .dropdown-mega > .dropdown-toggle::after{ display:none; }
}

/* ===== Mega menu — LEFT aligned to container ===== */

/* Make sure nothing clips it */
.navbar,
.navbar .container,
.navbar .collapse {
  position: relative;
  overflow: visible;
  z-index: 2000;
}
.navbar .dropdown-menu { z-index: 2050; }

/* Base look */
.dropdown-mega .dropdown-menu{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(20,24,42,.98);
  color:#eaf2ff;
  width: 980px;                      /* adjust width as you like */
  max-width: calc(100vw - 2rem);     /* stay responsive on small screens */
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  margin-top:0;
  padding: clamp(12px, 2vw, 24px);
}

/* Desktop behavior — position relative to the NAVBAR CONTAINER */
@media (min-width: 992px){
  /* Make the LI static so the menu can anchor to the container, not the toggle */
  .navbar .dropdown-mega{ position: static; }

  /* Hover bridge to avoid flicker between label and menu */
  .navbar .dropdown-mega::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:22px;
  }

  .navbar .dropdown-mega .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;              /* <-- LEFT EDGE of the container/page */
    right: auto;
    transform: translateY(10px);

    display: block !important;          /* never flip display on desktop */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: transform, opacity;
  }

  .navbar .dropdown-mega:hover > .dropdown-menu,
  .navbar .dropdown-mega.show > .dropdown-menu{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
  }

  .navbar .dropdown-mega > .dropdown-toggle::after{ display:none; }
}

/* Keep page content below the menu */
section, .container, .row, .col, .py-5, .bg-light { position: relative; z-index: 1; }