.socialContainer {
  width: 30px;
  height: 30px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
  border-radius: 50%;
}
/* instagram*/
.containerOne:hover {
  background-color: #E1306C ;
  transition-duration: .5s;
}

/* x-media */
.containerTwo:hover{
  background-color: #000000;
  transition-duration: .5s;
}

/* linkdin*/
.containerThree:hover {
  background-color: #0A66C2 ;
  transition-duration: .5s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #25D366 ;
  transition-duration: .5s;
}

/* facebook */
.containerFive:hover {
  background-color: #1877F2  ;
  transition-duration: .5s;
}

/* Youtube*/
.containerSix:hover {
  background-color: #FF0000   ;
  transition-duration: .5s;
}
.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .5s;
}
.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.5s both;
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}