1.card-client {
2  background: #2cb5a0;
3  width: 13rem;
4  padding-top: 25px;
5  padding-bottom: 25px;
6  padding-left: 20px;
7  padding-right: 20px;
8  border: 4px solid #7cdacc;
9  box-shadow: 0 6px 10px rgba(207, 212, 222, 1);
10  border-radius: 10px;
11  text-align: center;
12  color: #fff;
13  font-family: "Poppins", sans-serif;
14  transition: all 0.3s ease;
15}
16
17.card-client:hover {
18  transform: translateY(-10px);
19}
20
21.user-picture {
22  overflow: hidden;
23  object-fit: cover;
24  width: 5rem;
25  height: 5rem;
26  border: 4px solid #7cdacc;
27  border-radius: 999px;
28  display: flex;
29  justify-content: center;
30  align-items: center;
31  margin: auto;
32}
33
34.user-picture svg {
35  width: 2.5rem;
36  fill: currentColor;
37}
38
39.name-client {
40  margin: 0;
41  margin-top: 20px;
42  font-weight: 600;
43  font-size: 18px;
44}
45
46.name-client span {
47  display: block;
48  font-weight: 200;
49  font-size: 16px;
50}
51
52.social-media:before {
53  content: " ";
54  display: block;
55  width: 100%;
56  height: 2px;
57  margin: 20px 0;
58  background: #7cdacc;
59}
60
61.social-media a {
62  position: relative;
63  margin-right: 15px;
64  text-decoration: none;
65  color: inherit;
66}
67
68.social-media a:last-child {
69  margin-right: 0;
70}
71
72.social-media a svg {
73  width: 1.1rem;
74  fill: currentColor;
75}
76
77/*-- Tooltip Social Media --*/
78.tooltip-social {
79  background: #262626;
80  display: block;
81  position: absolute;
82  bottom: 0;
83  left: 50%;
84  padding: 0.5rem 0.4rem;
85  border-radius: 5px;
86  font-size: 0.8rem;
87  font-weight: 600;
88  opacity: 0;
89  pointer-events: none;
90  transform: translate(-50%, -90%);
91  transition: all 0.2s ease;
92  z-index: 1;
93}
94
95.tooltip-social:after {
96  content: " ";
97  position: absolute;
98  bottom: 1px;
99  left: 50%;
100  border: solid;
101  border-width: 10px 10px 0 10px;
102  border-color: transparent;
103  transform: translate(-50%, 100%);
104}
105
106.social-media a .tooltip-social:after {
107  border-top-color: #262626;
108}
109
110.social-media a:hover .tooltip-social {
111  opacity: 1;
112  transform: translate(-50%, -130%);
113}