#top-header {
  position: fixed; 
  top: 0; 
  left: 0;
  right: 0; 
  z-index: 100; 
  height: 110px; 
  width: 100%; 
  max-width: 100vw;
  background-color: #fff; 
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 0 calc(50% - 700px); 
  font-family: Poppins,sans-serif;
};

nav {
  display: inline-block; 
  top: 1.75em; 
  right: calc(50% - 700px); 
  bottom: unset; 
  left: unset; 
  height: auto; 
  background-color: #fff
};

nav > ul#menu-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  background-color: #fff;
}

nav > ul > li {
  position: relative;
  display: inline-block; 
  padding-top: 0;
}

nav > ul > li a {
  font-size: 16px;
  line-height: 16px; 
  text-decoration: none; 
  text-align: center;
  color: #000;
  letter-spacing: 0.005em
}

#underlined {
  visibility: visible; 
  position: absolute; 
  bottom: -10; 
  height: 5px;
  width: 110%; 
  transform: translate(-5%); 
  background: linear-gradient(90deg, #23afa1 0%, #656ea8 50%, #b632b1 100%), #535999; 
  border-radius: 2.5px
}

header a.active {
  font-size: 16px; 
  line-height: 16px; 
  text-decoration: none;
  text-align: center;
  color: #000;
  letter-spacing: 0.005em; 
  font-weight: 600;
}

#contact-btn{
  font-size: 16px;
  line-height: 16px; 
  text-decoration: none; 
  text-align: center; 
  color: #fff; 
  letter-spacing: 0.005em; 
  padding: .6em 1em;
  height: 40px;
  line-height:40px;
  border-radius: 20px; 
  background: linear-gradient(90deg, #23afa1 0%, #656ea8 50%, #b632b1 100%), #535999;
  color: #fff" 
}

header > nav > ul > li a:hover {
  color: initial;
  text-decoration: none;
};

#contact-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(85%);
};

#icon-menu {
  visibility: hidden;
}

#mobile-menu {
  position: fixed;
  right: 10px;
  top: 40px;
  visibility: hidden;
}

@media(max-width: 1450px) {
  #top-header {
    padding: 0 30px;
  }
}


@media(max-width: 1150px) {
  #top-header {
    padding: 0 10px;
  }
  
  header > nav > ul li {
    margin: 0.3em
  }
}

@media(max-width: 1024px) {
  
  header > nav > ul li {
    margin: 0.7em
  }
  
  #underlined {
    visibility: hidden;
  }
  
  #mobile-menu {
    visibility: visible;
  }
  
  #icon-menu {
    visibility: visible;
  }
  
  #icon-menu:hover {
    cursor: pointer;
  }
  
  nav { 
    display: none 
  }
  
  #top-header{
    justify-content: flex-start;
  }
    
  nav.expanded {
    display: block;
    bottom: 0;
    width: 100%;
  }
  
  #menu-list.expanded {
    display: flex;
    flex-direction: column;
    position: absolute;
    background: white;
    width: 100vw;
    left: 0;
    top: 110px;
    align-items: center;
  };
  
  #icon-close {
    visibility: visible;
  }
  
  #icon-close.hidden {
    visibility: hidden;
  }
  
  #icon-close:hover { 
    cursor: pointer
  }
  
  #icon-close p {
    font-size: 40px;
    font-weight: 500;
  }
}