1.card {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 320px;
7  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
8  padding: 32px;
9  overflow: hidden;
10  border-radius: 10px;
11  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
12}
13
14.content {
15  display: flex;
16  flex-direction: column;
17  align-items: flex-start;
18  gap: 20px;
19  color: #e8e8e8;
20  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
21}
22
23.content .heading {
24  font-weight: 700;
25  font-size: 32px;
26}
27
28.content .para {
29  line-height: 1.5;
30}
31
32.content .btn {
33  color: #e8e8e8;
34  text-decoration: none;
35  padding: 10px;
36  font-weight: 600;
37  border: none;
38  cursor: pointer;
39  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
40  border-radius: 5px;
41  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
42}
43
44.card::before {
45  content: "";
46  position: absolute;
47  left: 0;
48  bottom: 0;
49  width: 100%;
50  height: 5px;
51  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
52  z-index: -1;
53  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
54}
55
56.card:hover::before {
57  height: 100%;
58}
59
60.card:hover {
61  box-shadow: none;
62}
63
64.card:hover .btn {
65  color: #212121;
66  background: #e8e8e8;
67}
68
69.content .btn:hover {
70  outline: 2px solid #e8e8e8;
71  background: transparent;
72  color: #e8e8e8;
73}
74
75.content .btn:active {
76  box-shadow: none;
77}
78