.isolation-mode-icon {
  position: absolute;
  top: -187px;
  left: 626px;
  width: 1012px;
  height: 1174px;
  overflow: hidden;
}
.biomedmdx-logo-fulllockup-1-icon {
  position: absolute;
  top: 37px;
  left: 100px;
  width: 154px;
  height: 52px;
  object-fit: cover;
}
.this-website-is {
  margin: 0;
}
.please-contact-us {
  margin: 0;
  font-size: 32px;
  color: var(--color-gray-200);
}
.this-website-is-container {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 602px;
}
.resources-child {
  position: absolute;
  top: 15px;
  left: 1px;
  border-radius: 80px;
  border: 2px solid var(--color-darkslateblue);
  box-sizing: border-box;
  width: 143px;
  height: 42px;
}
.frame-child,
.rectangle-wrapper {
  position: absolute;
  width: 412px;
  height: 288px;
}
.frame-child {
  top: 0;
  left: 0;
  background-color: var(--color-gray-100);
}
.rectangle-wrapper {
  top: 8px;
  left: 9px;
}


.frame-parent {
  position: absolute;
  top: 2px;
  left: -12px;
  width: 384px;
  height: 296px;
  display: none;
}

.this-website-is-under-construc-parent {
  position: absolute;
  top: 350px;
  left: 100px;
  width: 502px;
  height: 505px;
}
.frame-inner,
.frame-item {
  position: absolute;
  height: 23px;
}
.frame-item {
  top: 0;
  left: 107px;
  width: 130px;
}
.frame-inner {
  top: calc(50% - 11.5px);
  left: 0;
  border-radius: 4px;
  background-color: var(--color-darkslateblue);
  width: 18px;
}
.rectangle-icon {
  position: absolute;
  top: calc(50% - 10.5px);
  left: 5.5px;
  border-radius: 1px;
  width: 7px;
  height: 2px;
}
.rectangle-parent {
  position: absolute;
  top: 0;
  left: 8px;
  width: 18px;
  height: 23px;
}
.div {
  position: absolute;
  top: 2px;
  left: 50px;
}
.vector-icon {
  width: 26px;
  height: 18px;
}
.infobiomedmdxcom,
.vector-icon {
  position: relative;
}
.vector-parent {
  position: absolute;
  top: 39px;
  left: 4px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px;
}
.subtract-icon {
  position: absolute;
  top: 80px;
  left: 8px;
  width: 18px;
  height: 20px;
}
.frame-group,
.no-8-jalan {
  position: absolute;
  top: 79px;
  left: 41px;
}
.frame-group {
  top: 882px;
  left: 103px;
  width: 669px;
  height: 103px;
  font-size: var(--font-size-base);
  color: var(--color-gray-200);
}
.homepage {
  width: 100%;
  position: relative;
  background: linear-gradient(#fefefe, #fefefe), #fff;
  height: 1024px;
  overflow: hidden;
  text-align: left;
  font-size: 48px;
  color: var(--color-darkslateblue);
  font-family: var(--font-dm-sans);
}


.menu {
 
  font-size: large;
  /* // define the height of the menu */
  --menu-height: 40px;
  /* // holder and ul general style */
  box-sizing: border-box;
  position: relative;
  top: 35%;
  left: 0;
  width: min-content;
  ul {
    list-style: none;
    padding: 1px;
    margin: 0;
    li, li a {
      position: relative;
      left: 0;
      opacity: .8;
      color:grey;      
      cursor: pointer;
      transition: 200ms;
      text-decoration: none;
      white-space: nowrap;
      font-weight: 700;
      &:hover {
        opacity: 1;
      }
      a {
        display: flex;
        align-items: center;
        font-weight: 500;
        height: 100%;
        width: 100%;     
        font-size:smaller; 
      }      
    }
    /* // lets put an arrow down 
    // to the li`s with dropdown */
    li {
      padding-right: 36px;
      &::before {
        content: '';
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #71CBF2;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .link {
      /* // links dont need arrow */
      &::before {
        left:0;
        padding: 0;
        display: none;
      }    
      
      
    }
  }
  /* // the first ul inside the container
  // is the menu, so must be visible 
  // and have its own style */
  > ul {
    display: flex;
    height: var(--menu-height);
    align-items: center;
    background-color: #fffdfd;
    /* // the first ul elements can be a
    // link or an li with a nested ul. 
    // the nested ul will be a dropdown */
    li {
      position: relative;
      margin: 0 ;
      /* // the dropdown style */
      ul {
        
        visibility: hidden;
        opacity: 0;        
        padding: 0;
        min-width: 160px;
        background-color: #ffffff;
        position: absolute;
        top: calc(var(--menu-height) + 5px);
        left: 150px;
        transform: translateX(-50%);
        transition: 200ms;
        transition-delay: 200ms;
        /* // the dropdown items style */
        li {
          margin: 0;
          padding:0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 30px;
          padding-right: 40px;
          /* // lets put an arrow right
          // to the inner li`s with
          // dropdowns */
          &::before {
            width: 0; 
            height: 0; 
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #71CBF2;
          }
          /* // every dropdown after the
          // first must open to the right */
          ul {
            top: -2%;
            left: 100%;
            transform: translate(0)
          }
          &:hover {
            background-color: #f1efef;
          }
        }
      }
      /* // on hover an li (not an <a>)
      // must show its ul (dropdown) */
      &:hover {
        > ul {
          opacity: 1;
          visibility: visible;
          transition-delay: 0ms;
        }
      }
    }
  }
}