-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
619 lines (390 loc) · 25.4 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="/style.css">
<script defer type="module" src="/main.js"></script>
<!--font Montserrat -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<!-- Favicon Start -->
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/ico" href="/assets/favicon.ico">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">
<!-- Android Chrome Icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon/android-chrome-512x512.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Favicon End -->
<!-- Chat Option -->
<script>(function(w, d) { w.CollectId = "65b8337572474ab9834ea02c"; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement("script"); s.setAttribute("type", "text/javascript"); s.async=true; s.setAttribute("src", "https://collectcdn.com/launcher.js"); h.appendChild(s); })(window, document);</script>
</head>
<body class=" selection:text-customGreen selection:bg-white">
<!-- Preloader Start -->
<!-- Spinner container -->
<div class="absolute top-1/2 left-1/2 -mt-4 -ml-2 h-8 w-4 text-customGreen spinner-container z-50">
<!-- White overlay for full-screen background -->
<div class="fixed top-0 left-0 w-full h-full bg-white "></div>
<div class="absolute z-10 -ml-2 h-10 w-10 animate-bounce">
<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 16 16">
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 4c2.209 0 4 1.791 4 4s-1.791 4-4 4-4-1.791-4-4 1.791-4 4-4zM12.773 12.773c-1.275 1.275-2.97 1.977-4.773 1.977s-3.498-0.702-4.773-1.977-1.977-2.97-1.977-4.773c0-1.803 0.702-3.498 1.977-4.773l1.061 1.061c0 0 0 0 0 0-2.047 2.047-2.047 5.378 0 7.425 0.992 0.992 2.31 1.538 3.712 1.538s2.721-0.546 3.712-1.538c2.047-2.047 2.047-5.378 0-7.425l1.061-1.061c1.275 1.275 1.977 2.97 1.977 4.773s-0.702 3.498-1.977 4.773z"></path>
</svg>
</div>
<div class="absolute top-4 h-7 w-6 animate-bounce border-l-2 border-gray-200" style="rotate: -90deg"></div>
<div class="absolute top-4 h-7 w-6 animate-bounce border-r-2 border-gray-200" style="rotate: 90deg"></div>
</div>
<!-- Preloader End -->
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hero Page -->
<section id="Home" class="relative h-80 lg:h-96 font-Montserrat over overflow-x-hidden ">
<!-- For Prallax -->
<div class="absolute bg-fixed inset-0 bg-cover bg-center z-[-1] bg-image1"></div>
<div class="absolute inset-0 bg-black bg-opacity-30 z-[-1]"></div>
<div class="relative w-full h-full ">
<div class="absolute inset-0 flex flex-col items-center justify-center">
<h1 class="text-3xl md:text-6xl text-white font-bold
font-Montserrat mt-5 text-center mx-auto "> Contact Us
<hr class="border-customGreen border-2 ">
</h1>
</div>
</div>
</section>
<!-- Horizontal Text Scroll START -->
<div class="whitespace-nowrap overflow-x-hidden overflow-y-hidden relative z-10 -mt-20 pb-4 ">
<div
class=" inline-block whitespace-nowrap animation-scroll font-Montserrat text-customGreen text-4xl md:text-4xl font-bold">
<!-- Scroller content (duplicate for seamless scrolling) -->
<h4 class="inline-block md:hover:scale-105 mr-11 hover:text-customGreen hover:duration-700 transition">
Tailored Packages
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Hassle-Free Travel
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Competitive Rates
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Reliable Vehicles
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Memorable Experiences
</h4>
<!-- Duplicate the content to make scrolling seamless -->
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Tailored Packages
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Hassle-Free Travel
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Competitive Rates
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Reliable Vehicles
</h4>
<h4 class="inline-block mr-11 hover:text-customGreen hover:duration-700 transition">
Memorable Experiences
</h4>
</div>
</div>
<!-- Horizontal Text Scroll END -->
<!-- Contact Us Section Start -->
<section class="min-h-screen bg-slate-50 ">
<div class="container px-6 py-20 mx-auto ">
<div class="lg:flex lg:items-center mt-0 ">
<!-- Form -->
<div
class="lg:w-1/2 lg:mx-10 font-Montserrat rounded-lg p-4 border-2 shadow-xl shadow-slate-600 bg-slate-50">
<h1 class=" text-2xl md:text-3xl lg:text-4xl
font-bold text-center text-white capitalize bg-customGreen rounded-lg p-4 md:p-6 ">Contact Us
</h1>
<p class="hidden md:block mt-4 text-center text-customBlue font-medium text-sm md:text-base ">
Ask us everything and we would love to hear from you
</p>
<form class="mt-12" action="https://formspree.io/f/xwkgvjlb" method="POST" autocomplete="off">
<div class="-mx-2 md:items-center md:flex ">
<div class="flex-1 px-2 ">
<label for="name" class="block mb-2 text-customBlue font-semibold">Full Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"
class="block w-full px-5 py-3 mt-2 text-customBlue placeholder-customBlue shadow-customGreen shadow-sm border-2 rounded-md focus:border-customGreen focus:outline-none "
required>
</div>
<div class="flex-1 px-2 mt-4 md:mt-0">
<label for="email" class="block mb-2 font-semibold text-customBlue">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email"
class="block w-full px-5 py-3 mt-2 text-customBlue placeholder-customBlue shadow-customGreen shadow-sm border-2 rounded-md focus:border-customGreen focus:outline-none "
required>
</div>
</div>
<div class="-mx-2 md:items-center md:flex mt-4">
<div class="flex-1 px-2">
<label for="phone" class="block mb-2 text-customBlue font-semibold">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Phone Number"
class="block w-full px-5 py-3 mt-2 text-customBlue placeholder-customBlue shadow-customGreen shadow-sm border-2 rounded-md focus:border-customGreen focus:outline-none"
required>
</div>
<div class="flex-1 px-2 mt-4 md:mt-0">
<label for="subject" class="block mb-2 font-semibold text-customBlue">Subject</label>
<input id="subject" name="subject" placeholder="Subject"
class="block w-full px-5 py-3 mt-2 text-customBlue placeholder-customBlue shadow-customGreen shadow-sm border-2 rounded-md focus:border-customGreen focus:outline-none "
required>
</div>
</div>
<div class="w-full mt-4">
<label for="Message" class="block mb-2 font-semibold text-customBlue">Message</label>
<textarea id="Message" name="Message"
class="block w-full h-32 px-5 py-3 mt-2 text-customBlue placeholder-customBlue shadow-customGreen shadow-sm border-2 rounded-md md:h-56 focus:border-customGreen focus:outline-none "
placeholder="Message" required></textarea>
</div>
<button
class="w-full px-6 py-3 mt-4 text-base tracking-wide text-white capitalize transform bg-customGreen rounded-md transition ease-in-out duration-100 font-bold active:scale-95 ">
get in touch
</button>
</form>
</div>
<!-- FAQ Start -->
<div class=" flex flex-col justify-center px-4 py-8 mt-10 lg:mt-0 mx-auto md:p-8 lg:w-1/2 font-Montserrat ">
<div class=" ">
<h2 class="text-3xl md:text-3xl lg:text-5xl
font-bold text-customGreen mb-5 ">Frequently Asked Questions</h2>
<p class="flex mb-8 font-medium text-justify md:text-center text-customBlue text-sm md:text-base ">Read our
FAQs and clear away all your queries
</p>
</div>
<!-- Question-1 -->
<div class="space-y-4 text-customBlue ">
<details
class="bg-white w-full cursor-pointer rounded-lg font-medium text-sm md:text-base shadow-md shadow-slate-600 hover:border-customGreen border hover:scale-105 transition ease-in duration-300">
<summary class="px-4 py-5 md:py-6 text-customBlue font-bold ">
Is A Car Rental Deposit Required?
</summary>
<p class="px-4 py-6 pt-0 ml-4 -mt-4 text-xs md:text-sm ">Yes, a deposit is required to rent a car from
Enterprise. The deposit amount varies by location. To find out how much a deposit would be for your
trip, start booking now!
</p>
</details>
<!-- Question-2 -->
<details
class="bg-white w-full cursor-pointer rounded-lg font-medium text-sm md:text-base shadow-md shadow-slate-600 hover:border-customGreen border hover:scale-105 transition ease-in duration-300">
<summary
class="px-4 py-5 md:py-6 focus:outline-none focus-visible:ring-gray-950 text-customBlue font-bold ">How
Do I Rent A Car?
</summary>
<p class="px-4 py-6 pt-0 ml-4 -mt-4 text-xs md:text-sm">To rent a car, visit our home page and fill-up the
form or else, you can directly contact us at (09425925474) and book the car.</p>
</details>
<!-- Question-3 -->
<details
class="bg-white w-full cursor-pointer rounded-lg font-medium text-sm md:text-base shadow-md shadow-slate-600 hover:border-customGreen border hover:scale-105 transition ease-in duration-300">
<summary class="px-4 py-5 md:py-6 text-customBlue font-bold">What is the payment process for booking
rental cars in Indore?
</summary>
<p class="px-4 py-6 pt-0 ml-4 -mt-4 text-xs md:text-sm">For taxi services in Indore, the payment process
will be through UPI. Contact us to know about the payment method in detail.
</p>
</details>
<!-- Question-4 -->
<details
class="bg-white w-full cursor-pointer rounded-lg font-medium text-sm md:text-base shadow-md shadow-slate-600 hover:border-customGreen border hover:scale-105 transition ease-in duration-300">
<summary class="px-4 py-5 md:py-6 text-customBlue font-bold">
What kind of rental cars you can book from MR Tour & Travels?
</summary>
<p class="px-4 py-6 pt-0 ml-4 -mt-4 text-xs md:text-sm">As leading car rentals in Indore, our motive is to
fulfill our customer’s requirements. You can book a taxi in Indore for all your needs. We have cars on
rent for local tours, outstations, sightseeing, wedding events, corporate travels, and business tours.
</p>
</details>
<!-- Question-5 -->
<details
class="bg-white w-full cursor-pointer rounded-lg font-medium text-sm md:text-base shadow-md shadow-slate-600 hover:border-customGreen border hover:scale-105 transition ease-in duration-300">
<summary class="px-4 py-5 md:py-6 text-customBlue font-bold">
What are the options available at MR Tour & Travels for car rentals in Indore?
</summary>
<p class="px-4 py-6 pt-0 ml-4 -mt-4 text-xs md:text-sm">We have a wide collection of car rentals in Indore
where you can choose rental cars according to your need. We offer cars for rent like Toyota Innova,
Innova Crysta, Ertiga, Amaze, Traveler, Maruti Swift Dzire, and more.
</p>
</details>
</div>
</div>
<!-- FAQ END -->
</div>
</div>
</section>
<!-- Contact Us Section End -->
<!-- Terms and Condition , Contact Detail -->
<section id="terms" class="min-h-screen text-white font-Montserrat relative ">
<!-- For Prallax -->
<div class="absolute bg-fixed inset-0 bg-cover bg-center z-[-1] bg-image1"></div>
<div class="absolute inset-0 bg-black bg-opacity-60 z-[-1]"></div>
<div class="container flex flex-col lg:px-6 px-8 lg:py-4 py-12 mx-auto ">
<div class="min-h-screen flex-1 lg:flex lg:-mx-5 lg:ml- items-center ">
<!-- Terms & Conditions -->
<div class=" text-white lg:w-1/2 lg:mx-6 ">
<h1 class="text-2xl font-semibold capitalize lg:text-4xl ">Terms and Conditions
</h1>
<ul class=" mb-5 flex flex-col mt-6 space-y-7 ">
<!-- 1 -->
<li class="flex items-center flex-grow ">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">
The mentioned rates might get updated in case of fuel cost increments.
</span>
</li>
<!-- 2 -->
<li class="flex items-center flex-grow">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">Minimum 250 km average per day.</span>
</li>
<!-- 3 -->
<li class="flex items-center flex-grow">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">Extra charges will be levied upon parking and toll taxes.</span>
</li>
<!-- 4 -->
<li class="flex items-center flex-grow">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">If applicable, extra charges would be levied.
</span>
</li>
<!-- 5 -->
<li class="flex items-center flex-grow">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">Extra Rs.500 will be charged after 11:30 PM.
</span>
</li>
<!-- 6 -->
<li class="flex items-center flex-grow">
<span
class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-customGreen text-white rounded-full flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
class="w-3 h-3" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
<span class="text-left ">Kilometer will be ascertained from our Garage to Garage.
</span>
</li>
</ul>
</div>
<!-- Contact info -->
<div class="text-white lg:w-1/2 lg:mx-3 lg:pl-6 pt-7 lg:pt-0 ">
<h1 class="text-2xl font-semibold capitalize lg:text-4xl ">Get a quote</h1>
<p class="max-w-xl mt-6">Have questions or need a quote for our services? Feel free to reach out! We're here
to assist you.
</p>
<div class="mt-6 space-y-8 md:mt-8">
<p class="flex items-start -mx-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-customGreen" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="mx-2 text-white truncate w-72">
Indore Madhya Pradesh - 452018
</span>
</p>
<p class="flex items-start -mx-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-customGreen" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span class="mx-2 text-white truncate w-72">(+91) 74005-85003
</span>
</p>
<p class="flex items-start -mx-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-customGreen" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span href="mailto:contactmrgroups@gmail.com" class="mx-2 text-white
truncate w-72">contactmrgroups@gmail.com</span>
</p>
</div>
<div class="mt-6 md:mt-8">
<h3 class="text-white font-bold">Follow us</h3>
<div class="flex mt-4 -mx-1.5 ">
<!-- twitter Old Logo -->
<!-- <a class="mx-1.5 text-customGreen transition-colors duration-300 transform hover:text-white" href="#">
<svg class="w-11 h-9 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6668 6.67334C18.0002 7.00001 17.3468 7.13268 16.6668 7.33334C15.9195 6.49001 14.8115 6.44334 13.7468 6.84201C12.6822 7.24068 11.9848 8.21534 12.0002 9.33334V10C9.83683 10.0553 7.91016 9.07001 6.66683 7.33334C6.66683 7.33334 3.87883 12.2887 9.3335 14.6667C8.0855 15.498 6.84083 16.0587 5.3335 16C7.53883 17.202 9.94216 17.6153 12.0228 17.0113C14.4095 16.318 16.3708 14.5293 17.1235 11.85C17.348 11.0351 17.4595 10.1932 17.4548 9.34801C17.4535 9.18201 18.4615 7.50001 18.6668 6.67268V6.67334Z" />
</svg>
</a> -->
<!-- linkedin -->
<a class="mx-1.5 text-customGreen transition-colors duration-300 transform hover:text-white" href="#">
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.2 8.80005C16.4731 8.80005 17.694 9.30576 18.5941 10.2059C19.4943 11.1061 20 12.327 20 13.6V19.2H16.8V13.6C16.8 13.1757 16.6315 12.7687 16.3314 12.4687C16.0313 12.1686 15.6244 12 15.2 12C14.7757 12 14.3687 12.1686 14.0687 12.4687C13.7686 12.7687 13.6 13.1757 13.6 13.6V19.2H10.4V13.6C10.4 12.327 10.9057 11.1061 11.8059 10.2059C12.7061 9.30576 13.927 8.80005 15.2 8.80005Z"
fill="currentColor" />
<path d="M7.2 9.6001H4V19.2001H7.2V9.6001Z" fill="currentColor" />
<path
d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z"
fill="currentColor" />
</svg>
</a>
<!-- Facebook -->
<a class="mx-1.5 text-customGreen transition-colors duration-300 transform hover:text-white" href="#">
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 10.2222V13.7778H9.66667V20H13.2222V13.7778H15.8889L16.7778 10.2222H13.2222V8.44444C13.2222 8.2087 13.3159 7.9826 13.4826 7.81591C13.6493 7.64921 13.8754 7.55556 14.1111 7.55556H16.7778V4H14.1111C12.9324 4 11.8019 4.46825 10.9684 5.30175C10.1349 6.13524 9.66667 7.2657 9.66667 8.44444V10.2222H7Z"
fill="currentColor" />
</svg>
</a>
<!-- Instagram -->
<a class="mx-1.5 text-customGreen transition-colors duration-300 transform hover:text-white" href="#">
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.9294 7.72275C9.65868 7.72275 7.82715 9.55428 7.82715 11.825C7.82715 14.0956 9.65868 15.9271 11.9294 15.9271C14.2 15.9271 16.0316 14.0956 16.0316 11.825C16.0316 9.55428 14.2 7.72275 11.9294 7.72275ZM11.9294 14.4919C10.462 14.4919 9.26239 13.2959 9.26239 11.825C9.26239 10.354 10.4584 9.15799 11.9294 9.15799C13.4003 9.15799 14.5963 10.354 14.5963 11.825C14.5963 13.2959 13.3967 14.4919 11.9294 14.4919ZM17.1562 7.55495C17.1562 8.08692 16.7277 8.51178 16.1994 8.51178C15.6674 8.51178 15.2425 8.08335 15.2425 7.55495C15.2425 7.02656 15.671 6.59813 16.1994 6.59813C16.7277 6.59813 17.1562 7.02656 17.1562 7.55495ZM19.8731 8.52606C19.8124 7.24434 19.5197 6.10901 18.5807 5.17361C17.6453 4.23821 16.51 3.94545 15.2282 3.88118C13.9073 3.80621 9.94787 3.80621 8.62689 3.88118C7.34874 3.94188 6.21341 4.23464 5.27444 5.17004C4.33547 6.10544 4.04628 7.24077 3.98201 8.52249C3.90704 9.84347 3.90704 13.8029 3.98201 15.1238C4.04271 16.4056 4.33547 17.5409 5.27444 18.4763C6.21341 19.4117 7.34517 19.7045 8.62689 19.7687C9.94787 19.8437 13.9073 19.8437 15.2282 19.7687C16.51 19.708 17.6453 19.4153 18.5807 18.4763C19.5161 17.5409 19.8089 16.4056 19.8731 15.1238C19.9481 13.8029 19.9481 9.84704 19.8731 8.52606ZM18.1665 16.5412C17.8881 17.241 17.349 17.7801 16.6456 18.0621C15.5924 18.4799 13.0932 18.3835 11.9294 18.3835C10.7655 18.3835 8.26272 18.4763 7.21307 18.0621C6.51331 17.7837 5.9742 17.2446 5.69215 16.5412C5.27444 15.488 5.37083 12.9888 5.37083 11.825C5.37083 10.6611 5.27801 8.15832 5.69215 7.10867C5.97063 6.40891 6.50974 5.8698 7.21307 5.58775C8.26629 5.17004 10.7655 5.26643 11.9294 5.26643C13.0932 5.26643 15.596 5.17361 16.6456 5.58775C17.3454 5.86623 17.8845 6.40534 18.1665 7.10867C18.5843 8.16189 18.4879 10.6611 18.4879 11.825C18.4879 12.9888 18.5843 15.4916 18.1665 16.5412Z"
fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Foootar -->
<div id="footer-placeholder"></div>
</body>
</html>