@extends('layout.layout')

@section('content')
<section class="hero-wrap js-fullheight" style="background-image: url('images/bg_3.jpg');">
    <div class="overlay"></div>
    <div class="container">
    <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center">
        <div class="text-center col-md-9 ftco-animate">
        <h1 class="mb-3 bread">Yoga Classes</h1>
        <p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home</a></span> <span>Classes</span></p>
        </div>
    </div>
    </div>
</section>


    <section class="ftco-section">
    <div class="container">
        <div class="pb-3 mb-5 row justify-content-center">
        <div class="text-center col-md-12 heading-section ftco-animate">
        <h3 class="subheading">Yoga Classes</h3>
        <h2 class="mb-1">Choose Your Level &amp; Focus</h2>
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-1.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Group Lessons</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-2.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Yoga For Beginners</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-3.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Yoga For Pregnant</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-4.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Yoga For Couples</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-5.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Bikram Yoga</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="package-program ftco-animate">
                <a href="#" class="img d-flex justify-content-center align-items-center" style="background-image: url(images/program-6.jpg);">
                    <div class="p-5 text-center text">
                        <h3>Yoga Barre</h3>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    </div>
    </section>



    <section class="ftco-gallery ftco-section">
    <div class="container">
        <div class="pb-3 mb-5 row justify-content-center">
        <div class="text-center col-md-7 heading-section ftco-animate">
        <h3 class="subheading">Gallery</h3>
        <h2 class="mb-1">See the latest photos</h2>
        </div>
    </div>
        <div class="row">
        <div class="col-md-3 ftco-animate">
            <a href="images/gallery-1.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(images/gallery-1.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                <span class="icon-instagram"></span>
            </div>
            </a>
        </div>
        <div class="col-md-3 ftco-animate">
            <a href="images/gallery-2.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(images/gallery-2.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                <span class="icon-instagram"></span>
            </div>
            </a>
        </div>
        <div class="col-md-3 ftco-animate">
            <a href="images/gallery-3.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(images/gallery-3.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                <span class="icon-instagram"></span>
            </div>
            </a>
        </div>
        <div class="col-md-3 ftco-animate">
            <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center" style="background-image: url(images/gallery-4.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                <span class="icon-instagram"></span>
            </div>
            </a>
        </div>
    </div>
    </div>
</section>
@endsection