@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

$link-color: #2bbc8a; // slateblue
@font-face {
  font-style: normal;
  font-family: "Meslo LG";
  src: local("Meslo LG S"), url("./MesloLGS-Regular.ttf") format("truetype");
  font-display: swap;
}

.logo {
  max-width: 45px;
  max-height: 60px;
  object-fit: contain;
  transition: all .3s ease-in-out;
  margin: 5px;
  vertical-align: middle;
  -webkit-filter: grayscale(100%);
  filter: grayscale(0%);

  &:hover {
    filter: grayscale(0%);
  }

  @media only screen and (max-width: 600px) {
    width: 60px;
    padding: 0px;
    margin: 5px;
  }
}

//  filter: sepia(100%) hue-rotate(190deg) saturate(500%);

.heading_1{
  margin-top: 120px;
  margin-left: 10px;
  color: #2bbc8a;
  font-size: 1.8rem;

  @media only screen and (max-width: 600px) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-size: 1.4rem;
  }
}

.about-me-bold1 {
  // font-family: "Source Sans Pro", sans-serif;
  font-family: "Source Sans Pro", sans-serif;
  color: #ffffff;
  margin-left: 50px;
  font-size: 1.3rem;
  max-width: 1000px;
  margin-inline-end: 150px;
  font-weight: 400;

  @media only screen and (max-width: 600px) {
      font-size: 1.05rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
  }
}

.logo-container {
  max-width: 1300px;
//  margin-left: 50px;
  margin-bottom: 250px;
  // text-align: center;

  @media only screen and (max-width: 600px) {
    margin-bottom: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
  }
}

.skill-top {
  margin-top: 100px;
  // text-align: center;
  // justify-content: center;

  @media only screen and (max-width: 600px) {
    margin-top: 0px;
  }
}

.logo-name {
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  font-size: 1rem;
}

.arrow {
  color: #2bbc8a;
}