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

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

324 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	}
133	.eel-service-list-skin2 .eel-service-media {
134	max-width: 100%;
135	flex: 0 0 100%;
136	padding-right: 0;
137	gap: 16px;
138	align-items: center;
139	}
140	.eel-service-list-skin2 .eel-icon-img-wrap {
141	max-width: 40px;
142	min-width: 40px;
143	border-radius: 50%;
144	padding: 0;
145	max-height: 40px;
146	min-height: 40px;
147	display: grid;
148	place-content: center;
149	transition: all 0.3s ease;
150	}
151	.eel-service-list-skin2 .eel-icon-img-wrap svg {
152	width: 20px;
153	}
154	.eel-service-list-skin2 .eel-des {
155	margin-top: 20px;
156	}
157	.eel-service-list-skin2 .eel-readmore-area {
158	display: inline-flex;
159	justify-content: flex-end;
160	flex: 1;
161	align-items: center;
162	}
163	.eel-service-list-skin2 {
164	padding-bottom: 40px;
165	margin-bottom: 40px;
166	transition: all 0.3s ease;
167	position: relative;
168	}
169	.eel-service-list-skin2:before {
170	content: "";
171	display: block;
172	width: 100%;
173	height: 1px;
174	border-bottom: 1px solid rgba(238, 238, 238, 0.7215686275);
175	position: absolute;
176	bottom: 0;
177	left: 0;
178	}
179	.eel-service-list-skin2:after {
180	content: "";
181	display: block;
182	width: 0;
183	height: 1px;
184	border-bottom: 1px solid var(--e-global-color-primary);
185	position: absolute;
186	bottom: 0;
187	left: 0;
188	opacity: 0;
189	transition: all 0.3s ease;
190	}
191	.eel-service-list-skin2:hover:after {
192	opacity: 1;
193	width: 50%;
194	}
195	.eel-service-list-skin2:hover .eel-icon-img-wrap {
196	background: var(--e-global-color-primary) !important;
197	border-color: var(--e-global-color-primary) !important;
198	}
199	.eel-service-list-skin2 .eel-only-icon i {
200	font-size: 22px;
201	}
202	.eel-service-list-skin2 .eel-only-icon svg {
203	width: 20px;
204	}
205
206	.eel-service-list-wrapper-skin2 > .elementor-widget-container {
207	padding: 0;
208	margin: 0;
209	}
210
211	.screen-reader-text {
212	position: absolute;
213	width: 1px;
214	height: 1px;
215	padding: 0;
216	overflow: hidden;
217	clip: rect(0, 0, 0, 0);
218	white-space: nowrap;
219	border: 0;
220	}
221
222	@media only screen and (max-width: 1024px) {
223	.eel-service-list .eel-service-media {
224	max-width: 50%;
225	flex: 0 0 50%;
226	}
227	.eel-service-list .eel-service-des {
228	max-width: 50%;
229	flex: 0 0 50%;
230	gap: 30px;
231	}
232	}
233	@media only screen and (max-width: 991px) {
234	.eel-service-list {
235	display: block;
236	}
237	.eel-service-list.eel-service-list-skin3 .eel-service-des,
238	.eel-service-list.eel-service-list-skin3 .eel-service-media {
239	max-width: 100%;
240	flex: 0 0 100%;
241	}
242	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
243	max-width: 100%;
244	flex: 0 0 100%;
245	padding-right: 0px;
246	}
247	.eel-service-list .eel-service-media {
248	display: block;
249	padding-right: 0;
250	max-width: 100%;
251	text-align: center;
252	}
253	.eel-service-list .eel-icon-img-wrap {
254	margin: 0 auto 20px;
255	}
256	.eel-service-list .eel-service-des {
257	max-width: 100%;
258	display: block;
259	text-align: center;
260	}
261	.eel-service-list .eel-service-des .eel-des {
262	max-width: 100%;
263	margin: 20px 0;
264	}
265	.eel-service-list .eel-service-title br {
266	display: none;
267	}
268	}
269	@media only screen and (max-width: 767px) {
270	.eel-service-list.eel-service-list-skin3 .eel-service-media {
271	gap: 0;
272	align-items: center;
273	max-width: 100%;
274	flex: 0 0 100%;
275	padding-right: 0;
276	}
277	.eel-service-list .eel-service-media {
278	max-width: 100%;
279	flex: 0 0 100%;
280	display: grid;
281	gap: 0;
282	padding-right: 0;
283	}
284	.eel-service-list .eel-icon-img-wrap {
285	margin: 0 auto;
286	}
287	.eel-service-list .eel-service-title {
288	margin: 20px 0 20px;
289	}
290	.eel-service-list {
291	display: grid;
292	text-align: center;
293	}
294	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
295	max-width: 100%;
296	flex: 0 0 100%;
297	padding-right: 0;
298	}
299	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-readmore-area {
300	max-width: 100%;
301	flex: 0 0 100%;
302	text-align: center;
303	}
304	.eel-service-list.eel-service-list-skin3 .eel-service-media {
305	gap: 0;
306	align-items: center;
307	max-width: 100%;
308	flex: 0 0 100%;
309	padding-right: 0;
310	}
311	.eel-service-list.eel-service-list-skin3 .eel-service-des .eel-des {
312	margin-bottom: 38px;
313	}
314	.eel-service-list.eel-service-list-skin3 .eel-service-des {
315	max-width: 100%;
316	flex: 0 0 100%;
317	}
318	.eel-service-list .eel-service-des .eel-des {
319	margin-top: 0;
320	}
321	.eel-service-list-skin2 .eel-readmore-area {
322	display: none;
323	}
324	}