@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Modern and stylish CSS for social media icons with primary color #6c5ce7 */

.social-icons {
 display: flex;
 justify-content: center;
 align-items: center;
 list-style: none;
 padding: 0;
 margin: 2rem 0;
}

.social-icons li {
 margin: 0 15px;
}

.social-icons a {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 60px;
 height: 60px;
 background-color: #6c5ce7;
 border-radius: 50%;
 color: white;
 text-decoration: none;
 font-size: 24px;
 transition: all 0.3s ease;
 box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
}

.social-icons a:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(108, 92, 231, 0.6);
 background-color: #5344c7;
}

@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
}

.social-icons a:hover i {
 animation: pulse 1s infinite;
}

@media (max-width: 768px) {
 .social-icons a {
  width: 50px;
  height: 50px;
  font-size: 20px;
 }

 .social-icons li {
  margin: 0 10px;
 }
}