.containerss {
  display: flex;
  gap: 30px;
  margin-top:20px;
  margin-left:10px;
}

.icon {
  position: relative;
  height: 30px;
  width: 30px;
  background-size: cover;
  border-radius: 50%;
  animation: wave 4s ease-in-out infinite;
  transition: transform 0.3s ease, background-image 0.3s ease;
}



.icon:hover {
  transform: scale(1.1);
}

.facebook {
  background-image: url("../images/facebook.svg");
  animation-delay: 1s;
}

.x {
  background-image: url("../images/twitter.svg");
 
  animation-delay: 2s;
  
}

.instagram {
  background-image: url("../images/instagram.svg");
  animation-delay: 1.5s;
  
  
}



.whatsapp {
  background-image: url("../images/whatsapp.webp");
  animation-delay: 2.5s;
}

/*
.github {
  background-image: url("https://cdn-icons-png.freepik.com/512/11376/11376339.png?ga=GA1.1.2025074602.1718813500");
  animation-delay: 3s;
}*/

@keyframes wave {
  0%, 100% {
    transform: translate(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(10px);
  }
  75% {
    transform: translateY(-20px);
  }
}

@media screen and (max-width: 800px) {
  .icon::before {
    top: -500px;
    height: 500px;
  }
}

@media screen and (max-width: 450px) {
  .container {
    align-items: center;
    gap: 10px;
  }
  .icon {
    height: 60px;
    width: 60px;
  }
  .icon::before {
    top: -500px;
    height: 500px;
  }
}

@media screen and (max-width: 400px) {
  .icon {
    height: 50px;
    width: 50px;
  }
}

@media screen and (max-width: 330px) {
  .icon {
    height: 40px;
    width: 40px;
  }
}