body{
  font-family: "Poppins", serif;
}

nav{
  padding: 15px 0;
}

.brand{
  text-decoration: none;
  color: #00afd8;
  font-size: 22px;
  font-weight: 700;
}

.nav-link{
  display: flex;
  gap: 40px;
}

.nav-link .link{
  text-decoration: none;
  color: black;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  padding: 0;
}

.nav-link .link-active{
  color: #1a8ed6;
}

.sub-link{
  position: relative;
}

.sub-link .arrow{
  margin-left: 5px;
  rotate: 90deg;
  transition: transform .5s;
}

.box-sub{
  background-color: rgb(255, 255, 255);
  position: absolute;
  width: max-content;
  top: 45px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
  z-index: 9999;
}

.box-sub .link{
  padding: 15px 20px;
  transition: all ease-in .1s;
}

.box-sub .sub-link-active{
  background-color: #1a8ed6;
  color: white;
}

.sub-link:hover .box-sub{
  max-height: 1000px;
}

.sub-link:hover .arrow{
  transform: rotate(180deg);
}

.box-sub .link:hover{
  background-color: #1a8ed6;
  color: white;
}

.button-login{
  text-decoration: none;
  background-color: #1AA1F5;
  color: #FFFFFF;
  padding: 8px 25px;
  border-radius: 20px;
  font-weight: 500;
  transition: background-color ease-in-out .3s;
}

.button-login:hover{
  background-color: #1a8ed6;
}