easy-elements / widgets / service-list / css / service-list.css

service-list.css in Easy Elements for Elementor – Addons & Website Templates 1.3.0, at widgets/service-list/css/service-list.css

322 lines 6.9 KB

Raw Download Zip

1	:root {
2	--e-global-color-primary: #EAA638;
3	--e-global-color-text: #7A8986;
4	}
5
6	.elementor-widget-eel-service-list > .elementor-widget-container {
7	position: relative;
8	border: 1px solid rgba(238, 238, 238, 0.7215686275);
9	padding: 30px;
10	border-radius: 16px;
11	overflow: hidden;
12	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.0196078431);
13	background: #fff;
14	}
15
16	.eel-service-list {
17	display: flex;
18	justify-content: space-between;
19	flex-wrap: wrap;
20	}
21	.eel-service-list .eel-service-media {
22	max-width: 55%;
23	flex: 0 0 55%;
24	display: flex;
25	gap: 80px;
26	padding-right: 20px;
27	}
28	.eel-service-list .eel-icon-img-wrap {
29	max-width: 128px;
30	min-width: 128px;
31	border-radius: 16px;
32	background: var(--e-global-color-primary);
33	padding: 30px;
34	max-height: 128px;
35	min-height: 128px;
36	display: grid;
37	place-content: center;
38	}
39	.eel-service-list .eel-icon-img-wrap img {
40	border-radius: 2px;
41	display: block;
42	-o-object-fit: cover;
43	object-fit: cover;
44	}
45	.eel-service-list .eel-icon-img-wrap.eel-image-only {
46	padding: 0;
47	background: none;
48	border-radius: 0;
49	}
50	.eel-service-list .eel-service-icon {
51	line-height: 0;
52	}
53	.eel-service-list .eel-service-des {
54	max-width: 45%;
55	flex: 0 0 45%;
56	display: flex;
57	gap: 20px;
58	flex-wrap: wrap;
59	}
60	.eel-service-list .eel-service-des .eel-des {
61	max-width: 70%;
62	flex: 0 0 70%;
63	}
64	.eel-service-list .eel-service-des .eel-readmore-area {
65	max-width: 30%;
66	flex: 0 0 30%;
67	text-align: right;
68	flex: 1;
69	}
70	.eel-service-list .eel-service-des .eel-readmore-area .eel-readmore i {
71	top: 3px;
72	position: relative;
73	}
74	.eel-service-list .eel-service-icon svg {
75	width: 60px;
76	}
77	.eel-service-list .eel-service-title {
78	margin-bottom: 0;
79	}
80	.eel-service-list .eel-readmore {
81	transition: all 0.3s ease;
82	}
83	.eel-service-list .eel-readmore svg {
84	height: 1em;
85	fill: currentColor;
86	vertical-align: middle;
87	margin-left: 5px;
88	}
89	.eel-service-list.eel-service-list-skin3 .eel-service-media {
90	gap: 40px;
91	align-items: center;
92	max-width: 45%;
93	flex: 0 0 45%;
94	padding-right: 0;
95	}
96	.eel-service-list.eel-service-list-skin3 .eel-service-des {
97	max-width: 55%;
98	flex: 0 0 55%;
99	gap: 0px;
100	align-items: center;
101	}
102	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
103	max-width: 70%;
104	flex: 0 0 70%;
105	padding-right: 30px;
106	}
107	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-readmore-area {
108	max-width: 30%;
109	flex: 0 0 30%;
110	}
111
112	.eel-only-icon span {
113	width: 100px;
114	height: 100px;
115	display: inline-grid;
116	place-content: center;
117	background: #fff;
118	align-items: center;
119	border-radius: 100%;
120	font-size: 34px;
121	}
122	.eel-only-icon span svg {
123	width: 25px;
124	}
125
126	.eel-service-list .eel-service-des .eel-readmore.eel-only-icon svg {
127	width: 25px;
128	}
129
130	.eel-service-list-skin2 {
131	display: block;
132	padding-bottom: 40px;
133	margin-bottom: 40px;
134	transition: all 0.3s ease;
135	position: relative;
136	}
137	.eel-service-list-skin2 .eel-service-media {
138	max-width: 100%;
139	flex: 0 0 100%;
140	padding-right: 0;
141	gap: 16px;
142	align-items: center;
143	}
144	.eel-service-list-skin2 .eel-icon-img-wrap {
145	max-width: 40px;
146	min-width: 40px;
147	border-radius: 50%;
148	padding: 0;
149	max-height: 40px;
150	min-height: 40px;
151	display: grid;
152	place-content: center;
153	transition: all 0.3s ease;
154	}
155	.eel-service-list-skin2 .eel-icon-img-wrap svg {
156	width: 20px;
157	}
158	.eel-service-list-skin2 .eel-des {
159	margin-top: 20px;
160	}
161	.eel-service-list-skin2 .eel-readmore-area {
162	display: inline-flex;
163	justify-content: flex-end;
164	flex: 1;
165	align-items: center;
166	}
167	.eel-service-list-skin2:before {
168	content: "";
169	display: block;
170	width: 100%;
171	height: 1px;
172	border-bottom: 1px solid rgba(238, 238, 238, 0.7215686275);
173	position: absolute;
174	bottom: 0;
175	left: 0;
176	}
177	.eel-service-list-skin2:after {
178	content: "";
179	display: block;
180	width: 0;
181	height: 1px;
182	border-bottom: 1px solid var(--e-global-color-primary);
183	position: absolute;
184	bottom: 0;
185	left: 0;
186	opacity: 0;
187	transition: all 0.3s ease;
188	}
189	.eel-service-list-skin2:hover:after {
190	opacity: 1;
191	width: 50%;
192	}
193	.eel-service-list-skin2:hover .eel-icon-img-wrap {
194	background: var(--e-global-color-primary) !important;
195	border-color: var(--e-global-color-primary) !important;
196	}
197	.eel-service-list-skin2 .eel-only-icon i {
198	font-size: 22px;
199	}
200	.eel-service-list-skin2 .eel-only-icon svg {
201	width: 20px;
202	}
203
204	.eel-service-list-wrapper-skin2 > .elementor-widget-container {
205	padding: 0;
206	margin: 0;
207	}
208
209	.screen-reader-text {
210	position: absolute;
211	width: 1px;
212	height: 1px;
213	padding: 0;
214	overflow: hidden;
215	clip: rect(0, 0, 0, 0);
216	white-space: nowrap;
217	border: 0;
218	}
219
220	@media only screen and (max-width: 1024px) {
221	.eel-service-list .eel-service-media {
222	max-width: 50%;
223	flex: 0 0 50%;
224	}
225	.eel-service-list .eel-service-des {
226	max-width: 50%;
227	flex: 0 0 50%;
228	gap: 30px;
229	}
230	}
231	@media only screen and (max-width: 991px) {
232	.eel-service-list {
233	display: block;
234	}
235	.eel-service-list.eel-service-list-skin3 .eel-service-des,
236	.eel-service-list.eel-service-list-skin3 .eel-service-media {
237	max-width: 100%;
238	flex: 0 0 100%;
239	}
240	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
241	max-width: 100%;
242	flex: 0 0 100%;
243	padding-right: 0px;
244	}
245	.eel-service-list .eel-service-media {
246	display: block;
247	padding-right: 0;
248	max-width: 100%;
249	text-align: center;
250	}
251	.eel-service-list .eel-icon-img-wrap {
252	margin: 0 auto 20px;
253	}
254	.eel-service-list .eel-service-des {
255	max-width: 100%;
256	display: block;
257	text-align: center;
258	}
259	.eel-service-list .eel-service-des .eel-des {
260	max-width: 100%;
261	margin: 20px 0;
262	}
263	.eel-service-list .eel-service-title br {
264	display: none;
265	}
266	}
267	@media only screen and (max-width: 767px) {
268	.eel-service-list.eel-service-list-skin3 .eel-service-media {
269	gap: 0;
270	align-items: center;
271	max-width: 100%;
272	flex: 0 0 100%;
273	padding-right: 0;
274	}
275	.eel-service-list .eel-service-media {
276	max-width: 100%;
277	flex: 0 0 100%;
278	display: grid;
279	gap: 0;
280	padding-right: 0;
281	}
282	.eel-service-list .eel-icon-img-wrap {
283	margin: 0 auto;
284	}
285	.eel-service-list .eel-service-title {
286	margin: 20px 0 20px;
287	}
288	.eel-service-list {
289	display: grid;
290	text-align: center;
291	}
292	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
293	max-width: 100%;
294	flex: 0 0 100%;
295	padding-right: 0;
296	}
297	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-readmore-area {
298	max-width: 100%;
299	flex: 0 0 100%;
300	text-align: center;
301	}
302	.eel-service-list.eel-service-list-skin3 .eel-service-media {
303	gap: 0;
304	align-items: center;
305	max-width: 100%;
306	flex: 0 0 100%;
307	padding-right: 0;
308	}
309	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
310	margin-bottom: 38px;
311	}
312	.eel-service-list.eel-service-list-skin3 .eel-service-des {
313	max-width: 100%;
314	flex: 0 0 100%;
315	}
316	.eel-service-list .eel-service-des .eel-des {
317	margin-top: 0;
318	}
319	.eel-service-list-skin2 .eel-readmore-area {
320	display: none;
321	}
322	}