HTML/CSS - Mega Menu Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elead solutions</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <nav>
    <div class="wrapper">
      <div class="logo"><a href="#"><img src="https://res.cloudinary.com/dzz7ru52x/image/upload/v1685353875/eLead_Logo_mbdjec.png" width="150px" height="20px"></a></div>
      <div>
      <input type="radio" name="slider" id="menu-btn">
      <input type="radio" name="slider" id="close-btn">
      <ul class="nav-links">
        <label for="close-btn" class="btn close-btn"><i class="fas fa-times"></i></label>
        <li><a href="#">Solutions</a>
          <input type="checkbox" id="showMega">
          <label for="showMega" class="mobile-item">Mega Menu</label>
          <div class="mega-box">

css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins,sans-serif;
}
.watch-button {
  background-color:  #4E4788;
  color:  #fff;
  border: none;
  padding: 4px 5px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.watch-button:hover{
  background-color:  #443f74;
}
nav{
  position: relative;
  z-index: 99;
  width: 100%;
  
  background:  #ffffff;

BROWSER

Console