1.card {
2  width: 300px;
3  height: fit-content;
4  background: rgb(255, 255, 255);
5  border-radius: 20px;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  justify-content: center;
10  gap: 20px;
11  padding: 30px;
12  position: relative;
13  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
14}
15.card-content {
16  width: 100%;
17  height: fit-content;
18  display: flex;
19  flex-direction: column;
20  gap: 5px;
21}
22.card-heading {
23  font-size: 20px;
24  font-weight: 700;
25  color: rgb(27, 27, 27);
26}
27.card-description {
28  font-weight: 100;
29  color: rgb(102, 102, 102);
30}
31.card-button-wrapper {
32  width: 100%;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  gap: 10px;
37}
38.card-button {
39  width: 50%;
40  height: 35px;
41  border-radius: 10px;
42  border: none;
43  cursor: pointer;
44  font-weight: 600;
45}
46.primary {
47  background-color: rgb(255, 114, 109);
48  color: white;
49}
50.primary:hover {
51  background-color: rgb(255, 73, 66);
52}
53.secondary {
54  background-color: #ddd;
55}
56.secondary:hover {
57  background-color: rgb(197, 197, 197);
58}
59.exit-button {
60  display: flex;
61  align-items: center;
62  justify-content: center;
63  border: none;
64  background-color: transparent;
65  position: absolute;
66  top: 20px;
67  right: 20px;
68  cursor: pointer;
69}
70.exit-button:hover svg {
71  fill: black;
72}
73.exit-button svg {
74  fill: rgb(175, 175, 175);
75}
76