/* ABOUT SECTION */

.about-wrapper{
	margin-top: 90px;
	width:100%;
	background-color: var(--darkg);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom:120px;

}

.about-wrapper > * {
  overflow: hidden;
}

.about-wrapper > .exception {
  overflow: visible;
}


.about-container{
	padding: 0px 90px 30px;
	max-width:1000px;

}

/*BEGINNING OF CARDS*/



.skills-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	margin-top: 30px;
  

}

.skill-label{
	color: white;
	font-size: 1.7rem;
	margin-bottom:30px;
	font-weight: bold;

}

.cards-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center incomplete rows */
  gap: 20px;
  max-width: 900px;
  width: 80%;

}

.card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--lightg);
  color: white;
  border-radius: 10px;
  text-align: center;

  box-shadow: 2px 2px 5px var(--shadow);

  height: 180px;
  flex: 1 1 170px; /* grows and shrinks, min width 120px */
  max-width: 170px; /* optional: max width */
  transition: transform 0.3s, box-shadow 0.3s;

}


.card:hover {
  transform: translateY(-10px);
  cursor: pointer;
  box-shadow: 4px 4px 7px var(--shadow);
}

.cardIcon{
  width: auto;
  height: 40px;
  display: inline-block;
  margin-bottom:20px;

}



@media(max-width: 1050px){



}

  



  @media (max-width: 800px) {

      .about-container{
  padding: 0px 50px 0px;
  max-width:1000px;
  }


    .card {
      flex: 1 1 150px;
      height:190px;
    }

    .cardIcon{
	width: 40px;
  height: auto;
  display: inline-block;
	margin-bottom:17px;

}

.cardText{
	font-size: 1rem;
}
  }


   @media (max-width: 700px) {
    .card {
      flex: 1 1 130px;
      height:160px;
    }

    .cardIcon{
  width: 35px;
  height: auto;
  display: inline-block;
  margin-bottom:17px;

}

.cardText{
  font-size: 1rem;
}

}



 @media (max-width: 500px) {

  .cards-container{
    gap:15px;
  }

  .card {
    padding:5px;
      flex: 0 0 120px;
      height:120px;
    }

        .cardIcon{
  width: 30px;
  height: auto;
  display: inline-block;
  margin-bottom:17px;

}

    .cardText{
  font-size: 1rem;
}

 }


  @media (max-width: 375px) {

  .cards-container{
    gap:10px;
  }

  .card {
    padding:5px;
      flex: 0 0 100px;
      height:100px;
    }

        .cardIcon{
  width: 25px;
  height: auto;
  display: inline-block;
  margin-bottom:17px;

}

    .cardText{
  font-size: 0.9rem;
}

 }