Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque cupiditate magni quas fugiat aperiam repudiandae nostrum, alias, animi consectetur porro necessitatibus tempore soluta dolores ut atque corporis aliquam distinctio, ullam excepturi quidem! Exercitationem quibusdam cum sunt voluptatibus saepe, minus maiores alias neque assumenda, incidunt aliquam labore! Aperiam, veniam accusantium! Qui.
<style>
.perspect1 {
perspective: 1200px;
}
.perspect12 {
perspective: 70px;
}
.rota {
transform-style: preserve-3d;
transition: 0.5s;
transform: rotateY(-30deg);
}
#about:hover .toro {
transform-style: preserve-3d;
transition: 1s;
transform: rotateY(0deg);
}
#about:hover .rota {
transform-style: preserve-3d;
transition: 1s;
transform: rotateX(0deg);
}
.toro {
transform-style: preserve-3d;
transition: 0.5s;
transform: rotateY(30deg);
}
.perspect:hover .rota {
transform-style: preserve-3d;
transition: 0.5s;
transform: rotateX(0deg);
}
</style>
<section class=" body-font md:px-32" id="about">
<div class="container mx-auto flex px-5 py-12 lg:flex-row flex-col items-center ">
<div
class="boxZ lg:flex-grow w-full lg:w-1/2 lg:pr-36 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-3xl text-3xl mb-9 font-medium text-gray-900">Lorem ipsum dolor sit amet consectetur dicta.
</h1>
<p x-show="!openReadMore" class=" leading-relaxed text-read">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Cumque cupiditate magni quas fugiat aperiam repudiandae nostrum, alias, animi
consectetur porro necessitatibus tempore soluta dolores ut atque corporis aliquam distinctio,
ullam excepturi quidem! Exercitationem quibusdam cum sunt voluptatibus saepe, minus maiores
alias neque assumenda, incidunt aliquam labore! Aperiam, veniam accusantium! Qui.
</p>
</div>
<div class="lg:perspect lg:max-w-lg mt-10 lg:mt-0 lg:w-1/2 relative w-72 left-10 -z-10">
<img class="object-cover lg:rota object-center rounded-2xl -left-20 shadow-xl"
alt="hero" src="https://dummyimage.com/600x400">
<div class="lg:perspect1 w-full h-full -left-20 top-0 absolute -z-50">
<div
class="lg:toro bg-gray-400 rounded-xl w-full h-full border-b-2 border-gray-400 shadow-xl">
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-600 w-full group relative body-font object-cover flex overflow-hidden items-center">
<section class="text-gray-600 group w-full h-screen lg:mt-20 relative body-font object-cover flex overflow-hidden items-center">
<div class="w-full h-full z-10">
<div class="container md:flex md:flex-row flex-col-reverse flex w-full pt-24 lg:pt-0 z-10">
<div class="md:w-3/5 h-4/5 pt-10 lg:pt-20 md:pl-40 px-10 bg-opacity-90 font-Mon js-show-on-scroll" data-animate-type="animate-enter-fade-r">
<h1 class="title-font text-4xl font-bold text-blu border-b-2 border-gray-200">ACL Specialists</h1>
<div class="py-8">
<h1 class="text-xl font-medium pb-5">What to expect?</h1>
<ul class="underline-offset-1 list-outside list-disc">
<li class="font-light text-lg leading-8">Full return to sport/play testing monthly.</li>
<li class="font-light text-lg leading-8">Treatment on an Isokinetic for treatment for fast progress.</li>
<li class="font-light text-lg leading-8">Blood flow restriction therapy!</li>
<li class="font-light text-lg leading-8">Coordination of care with coaches, physicians, and schools.</li>
<li class="font-light text-lg leading-8">Treatment on an isokinetic machine for fast progress.</li>
</ul>
</div>
</div>
<div class="sm:w-2/5 bg-gradient-to-t from-gray-700 via-gray-600 to-gray-500 transition-all duration-700 sm:absolute lg:h-[30em] rounded-3xl p-3 lg:p-7 lg:group-hover:p-8 -right-10">
<img class="object-cover lg:w-4/5 lg:mt-6 sm:h-5/6 lg:m-10 left-0 lg:absolute shadow-xl lg:group-hover:-left-24 transition-all duration-700 rounded-3xl" alt="hero" src="https://dummyimage.com/600x400">
</div>
</div>
</div>
</section>
</section>