<template>
	<section class="relative pb-20">
		<div class="container mx-auto px-4">
			<div class="items-center flex flex-wrap">
				<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
					<img alt="..." class="max-w-full rounded-lg shadow-lg"
						:src="require(`@/assets/img/landing/clinic/mental.png`)" />
				</div>
				<div class="w-full md:w-7/12 ml-auto mr-auto px-4">
					<div class="md:pr-12">
						<div class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
							<i class="fas fa-rocket text-xl"></i>
						</div>
						<h3 class="text-xl font-semibold">Treat the mind before treating the disease.</h3>
						<p class="mt-4 text-lg leading-relaxed text-dark-grey">Please keep this sentence in mind. Every
							disease comes from the mind, Only you can treat yourself. We just help you to overcome your
							disease.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="pb-20">
		<div class="container mx-auto px-4">
			<div class="items-center flex flex-wrap">
				<div class="w-full md:w-7/12 ml-auto mr-auto px-4">
					<div class="md:pr-12">
						<div
							class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
							<i class="fas fa-rocket text-xl"></i>
						</div>
						<h3 class="text-xl font-semibold">Acupuncture for Mental Health:</h3>
						<p class="mt-4 text-lg leading-relaxed text-dark-grey">This is eastern medical theory mental
							disorder occurs when there is imbalance within the body. Imbalance can come from an excess
							or deficiency of COLD and HOT that disrupts the flow of Qi or energy through the body.</p>
					</div>
				</div>
				<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
					<img alt="..." class="max-w-full rounded-lg shadow-lg"
						:src="require(`@/assets/img/landing/clinic/mentalletter.jpg`)" />
				</div>
			</div>
		</div>
	</section>
	<section class="pb-20">
		<div class="container mx-auto px-4">
			<div class="items-center flex flex-wrap">
				<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
					<img alt="..." class="max-w-full rounded-lg shadow-lg"
						:src="require(`@/assets/img/landing/clinic/mentalletter22.jpg`)" />
				</div>
				<div class="w-full md:w-7/12 ml-auto mr-auto px-4">
					<div class="md:pr-12">
						<div
							class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
							<i class="fas fa-rocket text-xl"></i>
						</div>
						<h3 class="text-xl font-semibold">The Five Elements and Seven Emotions:</h3>
						<ul class="list-none mt-6">
							<li class="py-2">
								<div class="flex items-center">
									<div><span
											class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3"><i
												class="fas fa-fingerprint"></i></span></div>
									<div>
										<h4 class="text-dark-grey"><span class="text-lg">Five Elements:</span> Heart
											(Fire), Spleen (Earth), Lung (Metal), Kidney (Water), Liver (Wood)</h4>
									</div>
								</div>
							</li>
							<li class="py-2">
								<div class="flex items-center">
									<div><span
											class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3"><i
												class="fas fa-fingerprint"></i></span></div>
									<div>
										<h4 class="text-dark-grey"><span class="text-lg">Seven Emotions:</span>
											Happiness, Worry, Pensive Mood, Grief, Fear, Astonishment, Anger</h4>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="pb-20">
		<div class="container mx-auto px-4">
			<div class="items-center flex flex-wrap">
				<div class="w-full md:w-6/12 ml-auto mr-auto px-4">
					<img alt="..." class="max-w-full rounded-lg shadow-lg"
						:src="require(`@/assets/img/landing/clinic/mentalletter4.jpg`)" />
				</div>
				<div class="w-full md:w-6/12 ">
					<div
						class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
						<i class="fas fa-rocket text-xl"></i>
					</div>
					<h3 class="text-xl font-semibold">Acupuncture Treatment for Mental Health Disorders:</h3>

					<div class="lg:pt-12 pt-6 w-full md:w-12/12 px-4 text-center">
						<div
							class="relative flex flex-col min-w-0 break-words bg-violet-medium w-full mb-8 shadow-lg rounded-lg">
							<div class="px-4 py-5 flex-auto">
								<div
									class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-medium">
									<i class="fas fa-award"></i>
								</div>
								<h6 class="text-xl font-semibold">Mental Health Disorders</h6>
								<div class="flex items-center mt-2 mb-4 text-medium-grey">
									<div
										class="p-5 bg-light-grey rounded-lg border border-light-grey dark:bg-dark-grey dark:border-dark-grey">
										<time class="text-lg font-semibold text-dark-grey dark:text-white">
											<span
												class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
												<i class="fas fa-fingerprint"></i>
											</span>Common mental disorders
										</time>
										<div class="mb-4 p-3 text-medium-grey dark:text-gray-400">
											<div class="text-base font-normal">
												<span class="font-medium text-dark-grey dark:text-white">Anger /
													Happiness / Worry / Pensive Mood / Grief / Sadness / Fear /
													Astonishment / Depression / Anxiety / Insomnia</span>
											</div>
										</div>
										<time class="text-lg font-semibold text-dark-grey dark:text-white">
											<span
												class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3">
												<i class="fas fa-fingerprint"></i>
											</span>Serious mental illnesses include major
										</time>
										<div class="mb-4 p-3 text-medium-grey dark:text-gray-400">
											<div class="text-base font-normal"><span
													class="font-medium text-dark-grey dark:text-white">Depressions /
													Schizophrenia / Bipolar disorder / Obsessive Compulsive Disorder
													/ Panic Disorder / PTSD</span></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex flex-wrap">
					<div class="w-full md:w-6/12 px-4 text-center">
						<div
							class="relative flex flex-col min-w-0 break-words bg-violet-medium w-full mb-8 shadow-lg rounded-lg">
							<div class="px-4 py-5 flex-auto">
								<div
									class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-medium">
									<i class="fas fa-retweet"></i>
								</div>
								<h6 class="text-xl font-semibold">Korean Traditional Acupuncture (SAAM) Korean 4 needles
									technique</h6>
								<p
									class="p-5 mt-2 mb-4 text-dark-grey bg-light-grey rounded-lg border border-light-grey dark:bg-dark-grey dark:border-dark-grey">
									SAAM acupuncture is limitless, for it can be applied according to the physical and
									psychological state of the patient. Because SAAM acupuncture uses powerful healing
									Acupoints is very safety and free of the danger of injuring the organs.
								</p>
							</div>
						</div>
					</div>
					<div class="w-full md:w-6/12 px-4 text-center ">
						<div
							class="relative flex flex-col min-w-0 break-words bg-violet-medium w-full mb-8 shadow-lg rounded-lg">
							<div class="px-4 py-5 flex-auto">
								<div
									class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-medium">
									<i class="fas fa-fingerprint"></i>
								</div>
								<h6 class="text-xl font-semibold">Healing Your Mind Excellent results acupuncture for
									mental disorders</h6>
								<p
									class="p-5 mt-2 mb-4 text-dark-grey bg-light-grey rounded-lg border border-light-grey dark:bg-dark-grey dark:border-dark-grey">
									Acupuncture points to treat the emotional and physical effects of mental health
									disorders are located all over body.
								</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</section>
</template>

<script>
import AOS from "aos";

export default {
	name: "MentalHealth",
	mounted() {
		AOS.init();
	},
};
</script>
