nav ul{
  list-style:none;
  display:flex;
  gap:25px;
  align-items:center;
}

nav a,
.logo .brand-name a {
  color:#444444;
  text-decoration:none;
  font-weight:700;
  transition:0.3s;
}

nav a:hover{
  color:#1abc9c;
}

nav ul li{ position:relative; }

.mega-menu{
  position:absolute;
  left:0;
  top:100%;
  width:100vw;
  background:#ffffff;
  padding:40px 10%;
  display:flex;
  gap:60px;
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
  border-top:3px solid #1abc9c;

  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:all 0.3s ease;
}

nav ul li:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ===============================
   2-ROW MEGA MENU (ENTERPRISE)
=================================*/

/* ===============================
   TRUE FULL-WIDTH MEGA MENU
=================================*/

.mega-menu{
  position:absolute;
  top:calc(100% + 25px);
  left:50%;
  transform:translateX(-50%) translateY(15px);

  width:80vw;
  background:#ffffff;
  border-top:0px solid #1abc9c;
  box-shadow:0 15px 35px rgba(0,0,0,0.08);

  padding:50px 0;

  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;

  z-index:999;
}

.mega-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 80px;
}

nav ul li:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.mega-menu h4{
  margin-bottom:15px;
  color:#1abc9c;
  font-size:16px;
}

.mega-menu p{
  font-size:12px;
}

.mega-menu ul{
  list-style:none;
}

.mega-menu ul li{
  margin-bottom:8px;
}

.mega-menu a{
  color:#333;
  text-decoration:none;
  font-size:14px;
  transition:0.2s;
}

.mega-menu a:hover{
  color:#1abc9c;
}

.menu-toggle{
  display:none;
  font-size:24px;
  cursor:pointer;
}

@media(max-width:768px){

  .nav-left{
    width:100%;
    justify-content:space-between;
  }

  nav ul{
    display:none;
    flex-direction:column;
    background:#ffffff;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    padding:20px;
    border-top:1px solid #eee;
  }

  nav ul.active{
    display:flex;
  }

  nav a{
    color:#000;
  }

  .menu-toggle{
    display:block;
    color:#000;
  }

  .enquire-btn{
    display:none; /* mobile uses floating CTA */
  }

  .mega-menu{
    position:static;
    width:100%;
    display:block;
  }
}