.group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center; /* Center the group */
  padding-bottom: 30px;
  padding-top: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  }

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(4, 34, 151);
  border-radius: 90px 5px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.instagram {
  margin-top: 1.5em;
  margin-left: 1.2em;
  fill: #cc39a4;
}

.card2 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(4, 34, 151);
  border-radius: 5px 90px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.twitter {
margin-top: 1.5em;
  margin-left: -.9em;
  fill: #03A9F4;
}

.card3 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(4, 34, 151);
  border-radius: 5px 5px 5px 90px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.github {
  margin-top: -.6em;
  margin-left: 1.2em;
}

.card4 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: rgb(4, 34, 151);
  border-radius: 5px 5px 90px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.discord {
margin-top: -.9em;
  margin-left: -1.2em;
margin-top: -.9em;
  margin-left: -1.2em;
  fill: #8c9eff;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
}

.card1:hover .instagram {
  fill: white;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03A9F4;
}

.card2:hover .twitter {
  fill: white;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
}

.card3:hover .github {
  fill: white;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
}

.card4:hover .discord {
  fill: white;
}

@media (max-width: 921px) {
  .card1, .card2, .card3, .card4 {
    width: 50px;
    height: 50px;
    border-radius: 60px 5px 5px 5px; /* Keep the unique shape */
    display: flex;
    justify-content: center;
    align-items: center; /* Centers content properly */
  }

  .card2 {
    border-radius: 5px 60px 5px 5px;
  }

  .card3 {
    border-radius: 5px 5px 5px 60px;
  }

  .card4 {
    border-radius: 5px 5px 60px 5px;
  }

  .instagram {
    width: 24px; 
    height: 24px;
    margin-left: 0.1em;
    margin-bottom: 0.6em;
  }
  .twitter {
    width: 24px; 
    height: 24px;
    margin-left: 0.1em;
    margin-bottom: 0.6em;
    
  }
  .github {
    width: 24px; 
    height: 24px;
    margin-bottom: 0.1em; 
    margin-right: 0.6em; 
  }
  .discord {
    width: 24px; 
    height: 24px;
    margin-bottom: 0.1em; 
    margin-left: 0.1em; 
  }
}