navbar.css

body {
  margin: 0px;
  padding: 0px;
}

#navbar {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
}
#box1 {
  display: flex;
  /* justify-content: space-around; */
  gap: 80px;
  width: 70%;
}
#module {
  display: flex;
  gap: 20px;
  margin-left: -50px;
}
#module > div > button {
  font-size: 16px;
  line-height: 40px;
  font-weight: 600;
  background-color: #ffffff;
  color: #181d26;
  border: 0px;
}
#module > div {
  margin: auto;
}
#img {
  display: flex;
  margin-left: 40px;
  font-size: 20px;
  color: #333333;
}
#img > img {
  width: 38px 32px;
  height: 30px;
  margin: auto;
}
#box2 {
  display: flex;
  width: 30%;
  /* gap: 200px; */
}
#box2 > div {
  width: 50%;
  margin: auto;
}
#box2 > div > button {
  font-size: 16px;
  line-height: 40px;
  padding: 0px 40px;
  font-weight: 600;
  border: 0px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #181d26;
}
#box2 > div:nth-child(1) > button {
  background-color: #0768f8;
  color: white;
}

#navbar {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
}

#box1 {
  display: flex;
  /* justify-content: space-around; */
  gap: 80px;
  width: 70%;
}

#module {
  display: flex;
  gap: 20px;
  margin-left: -50px;
}

#module > div > button {
  font-size: 16px;
  line-height: 40px;
  font-weight: 600;
  background-color: #ffffff;
  color: #181d26;
  border: 0px;
}

#module > div {
  margin: auto;
}

#img {
  display: flex;
  margin-left: 40px;
  font-size: 20px;
  color: #333333;
}

#img > img {
  width: 38px 32px;
  height: 30px;
  margin: auto;
}

#box2 {
  display: flex;
  width: 30%;
  /* gap: 200px; */
}

#box2 > div {
  width: 50%;
  margin: auto;
}

#box2 > div > button {
  font-size: 16px;
  line-height: 40px;
  padding: 0px 40px;
  font-weight: 600;
  border: 0px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #181d26;
}

#box2 > div:nth-child(1) > button {
  background-color: #0768f8;
  color: white;
}

#nav {
  display: flex;
}

.drop {
  display: none;
  position: absolute;
  font-family: sans-serif;
  /* border: 1px solid; */
  width: 50%;
  top: 70px;
  left: 10px;
  /* list-style: none; */
  background-color: whitesmoke;
  z-index: 1200;
}

li {
  list-style: none;
  margin-top: 20px;
  font-size: 17px;
}

.drop h2 {
  font-size: 20px;
  /* margin-bottom: -50px; */
}

.drop p {
  font-size: 17px;
  color: gray;
}

.drop div {
  margin-bottom: 40px;
  margin-left: 20px;
}

.drop img {
  width: 100%;
}

#module li:hover .drop {
  display: block;
}
a {
  text-decoration: none;
  color: black;
}