.my-portfolio-header{
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 9%;
  width: 100%;
  background: var(--bg-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  transition: .3s;
}

.portfolio-logo{
  position: relative;
}

.my-portfolio-header a{
  font-size: 25px;
  color: var(--text-color);
  font-weight: 500;
  transition: 0.5s;
  font-family: 'Poppins', sans-serif;
}

.my-portfolio-header.sticky{
  background: var(--bg-color);
}

.my-portfolio-header img{
  width: 250px;
  height: 60px;
  margin-left: 0;
  padding-left: 0%;
}


@media (max-width: 899px) and (min-width: 768px){
  .my-portfolio-header {
    padding: 2rem 4%;
    font-size: 15px;
     color: var(--text-color);
    font-weight: 500;
    transition: 0.5s;
  }

  .my-portfolio-header a{
    font-size: 20px;
}
}



@media screen and (max-width: 768px) {
  .my-portfolio-header {
    margin: 8px;
    padding: 8px;
    padding-right: 7%;
  }

  .my-portfolio-header a{
    font-size: 20px;
    color: var(--text-color);
    font-weight: 700;
    margin-left: 20px;
    transition: 0.5s;
    font-family: 'Poppins', sans-serif;
  }
}

/* Mobile phones */
@media screen and (max-width: 480px) {
  .my-portfolio-header {
    padding: 10px 4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    }

    .my-portfolio-header a{
      font-size: 17px;
      color: var(--text-color);
      font-weight: 700;
      margin-left: 20px;
      transition: 0.5s;
      font-family: 'Poppins', sans-serif;
    }

  .my-portfolio-header img {
    width: 250px;
  }
}