Card by Admin12121

1.section_our_solution .row {
2  align-items: center;
3}
4
5.our_solution_category {
6  display: flex;
7  flex-direction: row;
8  flex-wrap: wrap;
9}
10
11.our_solution_category .solution_cards_box {
12  display: flex;
13  flex-direction: column;
14  justify-content: center;
15}
16
17.solution_cards_box .solution_card {
18  flex: 0 50%;
19  background: #fff;
20  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
21    0 5px 15px 0 rgba(37, 44, 97, 0.15);
22  border-radius: 15px;
23  margin: 8px;
24  padding: 10px 15px;
25  position: relative;
26  z-index: 1;
27  overflow: hidden;
28  min-height: 265px;
29  transition: 0.7s;
30}
31
32.solution_cards_box .solution_card:hover {
33  background: #309df0;
34  color: #fff;
35  transform: scale(1.1);
36  z-index: 9;
37}
38
39.solution_cards_box .solution_card:hover::before {
40  background: rgb(85 108 214 / 10%);
41}
42
43.solution_cards_box .solution_card:hover .solu_title h3,
44.solution_cards_box .solution_card:hover .solu_description p {
45  color: #fff;
46}
47
48.solution_cards_box .solution_card:before {
49  content: "";
50  position: absolute;
51  background: rgb(85 108 214 / 5%);
52  width: 170px;
53  height: 400px;
54  z-index: -1;
55  transform: rotate(42deg);
56  right: -56px;
57  top: -23px;
58  border-radius: 35px;
59}
60
61.solution_cards_box .solution_card:hover .solu_description button {
62  background: #fff !important;
63  color: #309df0;
64}
65
66.solution_card .so_top_icon {
67}
68
69.solution_card .solu_title div {
70  color: #212121;
71  font-size: 1.3rem;
72  margin-top: 13px;
73  margin-bottom: 13px;
74}
75
76.solution_card .solu_description p {
77  font-size: 15px;
78  margin-bottom: 15px;
79}
80
81.solution_card .solu_description button {
82  border: 0;
83  border-radius: 15px;
84  background: linear-gradient(
85    140deg,
86    #42c3ca 0%,
87    #42c3ca 50%,
88    #42c3cac7 75%
89  ) !important;
90  color: #fff;
91  font-weight: 500;
92  font-size: 1rem;
93  padding: 5px 16px;
94}
95
96.our_solution_content div {
97  text-transform: capitalize;
98  margin-bottom: 1rem;
99  font-size: 2.5rem;
100}
101
102.our_solution_content p {
103}
104
105.hover_color_bubble {
106  position: absolute;
107  background: rgb(54 81 207 / 15%);
108  width: 100rem;
109  height: 100rem;
110  left: 0;
111  right: 0;
112  z-index: -1;
113  top: 16rem;
114  border-radius: 50%;
115  transform: rotate(-36deg);
116  left: -18rem;
117  transition: 0.7s;
118}
119
120.solution_cards_box .solution_card:hover .hover_color_bubble {
121  top: 0rem;
122}
123
124.solution_cards_box .solution_card .so_top_icon {
125  width: 60px;
126  height: 60px;
127  border-radius: 50%;
128  background: #fff;
129  overflow: hidden;
130  display: flex;
131  align-items: center;
132  justify-content: center;
133}
134
135.solution_cards_box .solution_card .so_top_icon img {
136  width: 40px;
137  height: 50px;
138  object-fit: contain;
139}
140
141/*start media query*/
142@media screen and (min-width: 320px) {
143  .sol_card_top_3 {
144    position: relative;
145    top: 0;
146  }
147
148  .our_solution_category {
149    width: 100%;
150    margin: 0 auto;
151  }
152
153  .our_solution_category .solution_cards_box {
154    flex: auto;
155  }
156}
157
158@media only screen and (min-width: 768px) {
159  .our_solution_category .solution_cards_box {
160    flex: 1;
161  }
162}
163
164@media only screen and (min-width: 1024px) {
165  .sol_card_top_3 {
166    position: relative;
167    top: -3rem;
168  }
169
170  .our_solution_category {
171    width: 80%;
172    margin: 0 auto;
173  }
174}