<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>Events</title>
        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- Favicons -->
        <!--<link href="assets/img/favicon.png" rel="icon">
        <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">-->

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com" rel="preconnect">
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

        <!-- Vendor CSS Files -->
        <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
        <link href="assets/vendor/aos/aos.css" rel="stylesheet">

        <!-- Main CSS File -->
        <link href="assets/css/main.css" rel="stylesheet">

    </head>

    <body class="events-page">

        <?php include 'header.php'; ?>

        <main class="main">

            <!-- Page Title -->
            <div class="page-title dark-background position-relative" data-aos="fade" style="background-image: url(assets/img/bg/bg-2.webp);">
                <div class="container position-relative">
                    <h1>EVENTS AT SOUTHSIDE</h1>
                </div>
            </div>

            <!-- Events 3 Section -->
            <section id="events-3" class="events-3 section light-background">

                <div class="container" data-aos="fade-up" data-aos-delay="100">

                    <div class="row mb-5">
                        <div class="col-lg-7" data-aos="fade-right" data-aos-delay="150">
                            <div class="event-intro">
                                
                                <h2>Spring Garden Celebration</h2>
                                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                                <div class="event-meta">
                                    <div class="meta-item">
                                        <i class="bi bi-calendar3"></i>
                                        <span>March 20 - May 15, 2025</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="bi bi-geo-alt"></i>
                                        <span>Main Dining Hall &amp; Terrace</span>
                                    </div>
                                </div>
                                <a href="#" class="event-cta-btn">Reserve Your Spot <i class="bi bi-arrow-right-circle-fill"></i></a>
                            </div>
                        </div>
                        <div class="col-lg-5" data-aos="fade-left" data-aos-delay="200">
                            <div class="event-hero-img">
                                <img src="assets/img/restaurant/event-4.webp" alt="Spring Celebration" class="img-fluid">
                                <div class="floating-label">
                                    <i class="bi bi-stars"></i>
                                    <span>Annual Event</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="highlight-cards" data-aos="fade-up" data-aos-delay="200">
                        <div class="highlight-card" data-aos="fade-up" data-aos-delay="250">
                            <div class="row g-0 align-items-center">
                                <div class="col-md-5">
                                    <div class="highlight-img">
                                        <img src="assets/img/restaurant/misc-5.webp" alt="Tasting Menu" class="img-fluid">
                                        <span class="img-tag"><i class="bi bi-fire"></i> Featured</span>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="highlight-body">
                                        <h3>Curated Tasting Journey</h3>
                                        <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat.</p>
                                        <ul class="perks-list">
                                            <li><i class="bi bi-patch-check-fill"></i> Handpicked Seasonal Flavors</li>
                                            <li><i class="bi bi-patch-check-fill"></i> Artisan Crafted Dishes</li>
                                        </ul>
                                        <a href="#" class="card-action">View Tasting Menu <i class="bi bi-chevron-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Highlight Card -->

                        <div class="highlight-card reversed" data-aos="fade-up" data-aos-delay="300">
                            <div class="row g-0 align-items-center flex-md-row-reverse">
                                <div class="col-md-5">
                                    <div class="highlight-img">
                                        <img src="assets/img/restaurant/misc-9.webp" alt="Cocktail Evening" class="img-fluid">
                                        <span class="img-tag"><i class="bi bi-award"></i> Premium</span>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="highlight-body">
                                        <h3>Signature Cocktail Soirée</h3>
                                        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint.</p>
                                        <ul class="perks-list">
                                            <li><i class="bi bi-patch-check-fill"></i> Expert Mixologists</li>
                                            <li><i class="bi bi-patch-check-fill"></i> Exclusive Blends</li>
                                        </ul>
                                        <a href="#" class="card-action">Schedule a Visit <i class="bi bi-chevron-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Highlight Card -->
                    </div>

                    <div class="accolades-strip" data-aos="zoom-in" data-aos-delay="200">
                        <div class="row g-0">
                            <div class="col-lg-3 col-md-6">
                                <div class="accolade-tile" data-aos="fade-up" data-aos-delay="200">
                                    <div class="tile-icon">
                                        <i class="bi bi-trophy-fill"></i>
                                    </div>
                                    <h4>Top Dining Spot 2025</h4>
                                    <span>Metro Culinary Awards</span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="accolade-tile" data-aos="fade-up" data-aos-delay="250">
                                    <div class="tile-icon">
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                    <h4>Platinum Standard</h4>
                                    <span>Regional Taste Guide</span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="accolade-tile" data-aos="fade-up" data-aos-delay="300">
                                    <div class="tile-icon">
                                        <i class="bi bi-gem"></i>
                                    </div>
                                    <h4>Outstanding Quality</h4>
                                    <span>Gastronomy Society</span>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="accolade-tile" data-aos="fade-up" data-aos-delay="350">
                                    <div class="tile-icon">
                                        <i class="bi bi-heart-fill"></i>
                                    </div>
                                    <h4>Diners' Favorite</h4>
                                    <span>Neighborhood Pick</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="values-section" data-aos="fade-up" data-aos-delay="200">
                        <div class="row g-4 align-items-stretch">
                            <div class="col-lg-6" data-aos="fade-right" data-aos-delay="250">
                                <div class="values-panel engagement-panel">
                                    <div class="panel-badge"><i class="bi bi-people-fill"></i></div>
                                    <h3>Neighborhood Roots</h3>
                                    <p>Championing local growers and giving back since 2016</p>
                                    <div class="counter-grid">
                                        <div class="counter-box">
                                            <strong>$65K+</strong>
                                            <span>Raised for Local Causes</span>
                                        </div>
                                        <div class="counter-box">
                                            <strong>30+</strong>
                                            <span>Regional Farm Allies</span>
                                        </div>
                                        <div class="counter-box">
                                            <strong>120+</strong>
                                            <span>Gatherings Organized</span>
                                        </div>
                                        <div class="counter-box">
                                            <strong>700+</strong>
                                            <span>Service Hours Given</span>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- End Engagement Panel -->

                            <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
                                <div class="values-panel green-panel">
                                    <div class="panel-badge"><i class="bi bi-recycle"></i></div>
                                    <h3>Sustainable Approach</h3>
                                    <p>Dedicated to responsible gastronomy and minimal footprint</p>
                                    <div class="green-list">
                                        <div class="green-item">
                                            <div class="green-icon"><i class="bi bi-leaf-fill"></i></div>
                                            <div class="green-text">
                                                <strong>Fully Biodegradable Materials</strong>
                                                <span>All packaging returns to nature</span>
                                            </div>
                                        </div>
                                        <div class="green-item">
                                            <div class="green-icon"><i class="bi bi-droplet-fill"></i></div>
                                            <div class="green-text">
                                                <strong>Water Stewardship Initiative</strong>
                                                <span>Reduced consumption by 40%</span>
                                            </div>
                                        </div>
                                        <div class="green-item">
                                            <div class="green-icon"><i class="bi bi-sun-fill"></i></div>
                                            <div class="green-text">
                                                <strong>Clean Energy Operations</strong>
                                                <span>Solar-powered kitchen facilities</span>
                                            </div>
                                        </div>
                                        <div class="green-item">
                                            <div class="green-icon"><i class="bi bi-basket-fill"></i></div>
                                            <div class="green-text">
                                                <strong>Proximity Sourcing First</strong>
                                                <span>90% ingredients from within 50 miles</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- End Green Panel -->
                        </div>
                    </div>

                </div>

            </section><!-- /Events 3 Section -->

        </main>

        <?php include 'footer.php'; ?>

        <!-- Scroll Top -->
        <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

        <!-- Preloader -->
        <div id="preloader"></div>

        <!-- Vendor JS Files -->
        <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/vendor/php-email-form/validate.js"></script>
        <script src="assets/vendor/aos/aos.js"></script>
        <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>

        <!-- Main JS File -->
        <script src="assets/js/main.js"></script>

    </body>

</html>