/********************** MAIN CONTENT - SKILLS SECTION ***************************/
#skills-container {
  font-family: var(--font-body);
  width: 80%;
  justify-content: center;
  /* text-align: center; */
}

#skills-container>h2 {
  font-size: var(--size-skills-title);
}

.dev-icons {
  display: flex;
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-around;
}

.icon-container {
  margin-top: 20px;
  padding: 1px 1px;
  flex: 0 1 100%;
  border-radius: 2%;
}

.icon-container>h3 {
  color: var(--neon-green);
  margin: 0;
  margin-top: 2px;
  font-size: var(--size-skills-header);
  text-transform: uppercase;
}

.list-icons {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

#automation-skills,
#database-skills,
#other-skills,
#collaborative-skills {
  flex: 0 1 40%;
}

.icon-box {
  display: flex;
  justify-content: center;
  border-radius: 10%;
  max-width: 7rem;
  width: 20%;
  text-align-last: center;
  -webkit-text-size-adjust: center;
  /* margin: 1px 5px; */
  box-shadow: var(--dark-box-shadow);
}

#automation-skills .icon-box,
#database-skills .icon-box,
#other-skills .icon-box,
#collaborative-skills .icon-box{
  flex: 0 1 50%;
}

.icon-box>i {
  font-size: var(--size-skills-icons);
}

.icon-box>.mosaic>i {
  text-align: center;
  align-self: center;
  font-size: var(--size-skills-icons);
}

.icon-box>h4 {
  margin-top: 1px;
  font-family: 'Rajdhani';
  font-size: var(--size-skills-subheader);
}

.icon-box>.mosaic>h4 {
  margin-top: 1px;
  font-family: 'Rajdhani';
  font-size: var(--size-skills-subheader);
}

.icon-box>.mosaic {
  width: 100%;
  text-align: center;
  text-align-last: center;
  margin: auto;
  /* padding: 5px 5px; */
  /* border: 2px solid var(--white); */
  border-radius: 1rem;
  box-shadow: var(--dark-box-inside);
}

.png-icon {
  width: var(--size-skills-png-icons);
  filter: invert(1);
}

.hiptest-icon {
  width: var(--size-skills-png-icons);
  filter: grayscale();
}

.playwright-icon {
  filter: grayscale();
}

/* ------------------------------- MEDIA QUERIES SKILLS START ------------------------------------------ */
@media only screen and (min-width: 786px) {
  #skills-container {
    height: 100%;
    padding-block-start: 6rem;
  }

  #automation-skills,
  #database-skills,
  #other-skills,
  #collaborative-skills {
    flex: 1 1 15%;
  }

  .icon-box {
    border-radius: 10%;
    margin: 0px 40px;
    box-shadow: var(--dark-box-shadow);
  }

  .karate-icon,
  .postman-icon,
  .playwright-icon,
  .selenium-icon {
    min-width: 6rem;
  }

  #collaborative-skills .icon-box{
      min-width: 5rem;
  }
  

  /* .dev-icons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
  } */

  .dev-icons {
    justify-content: flex-start;
  }

  #collaborative-skills .skill-subheader,  
  #database-skills .skill-subheader {
    margin-left: 3rem;
  }

  /* .icon-container {
    margin-top: 3px;
    flex: 0 1 60%;
  } */

  .icon-container>h3 {
    margin-bottom: 1px;
  }

  .list-icons {
    flex-wrap: nowrap;
  }

  /* #automation-skills,
  #database-skills,
  #other-skills {
    flex: 0 1 22%;
  }

  #collaborative-skills {
    flex: 0 1 100%;
  } */
}

/********************** END MEDIA QUERIES - SKILLS SECTION ***************************/

/********************** END MAIN CONTENT - SKILLS SECTION ***************************/