1.card {
2  width: fit-content;
3  height: fit-content;
4  background-color: rgb(238, 238, 238);
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  padding: 25px 25px;
9  gap: 20px;
10  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
11}
12
13/* for all social containers*/
14.socialContainer {
15  width: 52px;
16  height: 52px;
17  background-color: rgb(44, 44, 44);
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  overflow: hidden;
22  transition-duration: .3s;
23}
24/* instagram*/
25.containerOne:hover {
26  background-color: #d62976;
27  transition-duration: .3s;
28}
29/* twitter*/
30.containerTwo:hover {
31  background-color: #00acee;
32  transition-duration: .3s;
33}
34/* linkdin*/
35.containerThree:hover {
36  background-color: #0072b1;
37  transition-duration: .3s;
38}
39/* Whatsapp*/
40.containerFour:hover {
41  background-color: #128C7E;
42  transition-duration: .3s;
43}
44
45.socialContainer:active {
46  transform: scale(0.9);
47  transition-duration: .3s;
48}
49
50.socialSvg {
51  width: 17px;
52}
53
54.socialSvg path {
55  fill: rgb(255, 255, 255);
56}
57
58.socialContainer:hover .socialSvg {
59  animation: slide-in-top 0.3s both;
60}
61
62@keyframes slide-in-top {
63  0% {
64    transform: translateY(-50px);
65    opacity: 0;
66  }
67
68  100% {
69    transform: translateY(0);
70    opacity: 1;
71  }
72}
73
74