.top-navbar{
  background:#fff;
  border-bottom:1px solid var(--border-light);
  padding:14px 0;
  position:relative;
  z-index:1050;
}
.brand-logo{
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:.5px;
  color:var(--text-dark);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-logo span.accent{color:var(--brand-purple);}
.brand-logo .tagline{
  font-size:.55rem;
  letter-spacing:2px;
  color:var(--text-muted);
  font-weight:500;
  margin-top:2px;
}
.main-nav{
  list-style:none;
  display:flex;
  gap:36px;
  margin:0;
  padding:0;
}
.main-nav > li{position:relative;}
.main-nav > li > a{
  color:var(--text-dark);
  text-decoration:none;
  font-weight:500;
  font-size:1rem;
  padding:8px 2px;
  display:inline-block;
  position:relative;
}
.main-nav > li > a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:2px;
  background: linear-gradient(135deg, #FF3F8E 0%, #FF6B00 100%);
  transition:width .25s ease;
}
.main-nav > li:hover > a::after,
.main-nav > li.mega-open > a::after{
  width:100%;
}
.main-nav > li:hover > a,
.main-nav > li.mega-open > a{
  background: linear-gradient(135deg, #FF3F8E 0%, #FF6B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.nav-icons{
  display:flex;
  align-items:center;
  gap:18px;
}
.icon-btn{
  background:none;
  border:none;
  font-size:1.2rem;
  color:var(--text-dark);
  cursor:pointer;
}
.btn-contact{
  background: linear-gradient(135deg, #FF3F8E 0%, #FF6B00 100%);
  color:#fff;
  border:none;
  padding:10px 22px;
  border-radius:4px;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .2s ease;
}
.btn-contact:hover{background:var(--brand-purple-dark); color:#fff;}

/* ============ MEGA MENU (DESKTOP) ============ */
.mega-panel{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  background:#fff;
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  box-shadow:0 18px 28px -12px rgba(0,0,0,.12);
  padding:36px 0;
  z-index:1040;
}
.main-nav > li.mega-open .mega-panel{display:block;}
.mega-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  gap:60px;
  flex-wrap:wrap;
}
.mega-col{min-width:200px;}
.mega-col-heading{
  font-weight:600;
  font-size:1.02rem;
  color:var(--text-dark);
  border-left:3px solid var(--brand-purple);
  padding-left:12px;
  margin-bottom:18px;
  display:block;
}
.mega-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.mega-col ul li{margin-bottom:14px;}
.mega-col ul li a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:.95rem;
  transition:color .15s ease;
}
.mega-col ul li a:hover{color:var(--brand-purple);}

/* different accent colors per column, like screenshot */
.mega-col:nth-child(1) .mega-col-heading{border-color:#2aa198; color:#2aa198;}
.mega-col:nth-child(2) .mega-col-heading{border-color:#7a7a7a; color:#7a7a7a;}
.mega-col:nth-child(3) .mega-col-heading{border-color:#5a5a5a; color:#5a5a5a;}
.mega-col:nth-child(4) .mega-col-heading{
  border-color:var(--brand-purple);
  background: linear-gradient(135deg, #FF3F8E 0%, #FF6B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ============ NESTED SUBMENU (DESKTOP FLYOUT) ============ */
.mega-col ul li.has-submenu{
  position:relative;
}
.mega-col ul li.has-submenu > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.submenu-arrow{
  font-size:.7rem;
  opacity:.6;
}
.mega-col ul li.has-submenu .submenu{
  display:none;
  position:absolute;
  top:-8px;
  left:100%;
  min-width:200px;
  background:#fff;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.18);
  border:1px solid var(--border-light);
  border-radius:6px;
  padding:12px 16px;
  list-style:none;
  margin:0;
  z-index:1060;
}
.mega-col ul li.has-submenu:hover > .submenu{
  display:block;
}
.mega-col ul li.has-submenu .submenu li{
  margin-bottom:10px;
}
.mega-col ul li.has-submenu .submenu li:last-child{
  margin-bottom:0;
}

/* ============ MOBILE OFFCANVAS / ACCORDION ============ */
.offcanvas-body h6{
  font-weight:600;
  color:var(--text-dark);
  margin:18px 0 10px;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:1px;
}
.offcanvas-body h6:first-of-type{margin-top:6px;}
.offcanvas-body ul{
  list-style:none;
  padding:0;
  margin:0 0 6px;
}
.offcanvas-body ul li{margin-bottom:10px;}
.offcanvas-body ul li a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:.95rem;
}
.offcanvas-body ul li a:hover{color:var(--brand-purple);}
.accordion-button:not(.collapsed){
  color:var(--text-dark);
  background:#fff;
  box-shadow:none;
}
.accordion-button:focus{box-shadow:none;}

/* ============ MOBILE SUBMENU (nested, tap-to-expand) ============ */
.has-submenu-mobile > .submenu-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.has-submenu-mobile .submenu-mobile{
  display:none;
  list-style:none;
  padding-left:16px;
  margin-top:8px;
}
.has-submenu-mobile.submenu-open .submenu-mobile{
  display:block;
}
.has-submenu-mobile.submenu-open > .submenu-toggle i{
  transform:rotate(180deg);
}
.has-submenu-mobile .submenu-toggle i{
  transition:transform .2s ease;
}

/* ============ RESPONSIVE ============ */
.desktop-only{display:inline-flex;}
.mobile-only{display:none;}

@media (max-width: 991.98px){
  .desktop-only{display:none !important;}
  .mobile-only{display:inline-flex !important;}
}
@media (min-width: 992px){
  .mobile-only{display:none !important;}
}

@media (max-width: 575.98px){
  .brand-logo{font-size:1.3rem;}
  .btn-contact{padding:8px 16px; font-size:.9rem;}
}