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

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>Service Times - SSBC Main</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="service-times-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>WORSHIP WITH US</h1>
                </div>
            </div>

            <section id="service-times" class="section light-background">

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

                    <div class="text-center mb-5">
                        <h2 class="fw-bold">Service Times</h2>
                        <p class="text-muted">
                            Join us as we worship, grow in God's Word, and connect with one another throughout the week.
                        </p>
                    </div>

                    <div class="row g-4 justify-content-center">

                        <!-- Sunday -->
                        <div class="col-lg-5">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-4">

                                    <div class="d-flex align-items-center mb-4">
                                        <i class="bi bi-sunrise fs-2 me-3"></i>
                                        <h3 class="mb-0">Sunday</h3>
                                    </div>

                                    <div class="mb-3">
                                        <strong>9:00 AM</strong><br>
                                        <span class="text-muted">Sunday School & Bible Study</span>
                                    </div>

                                    <div class="mb-3">
                                        <strong>10:15 AM</strong><br>
                                        <span class="text-muted">Morning Worship Service</span>
                                    </div>

                                    <div>
                                        <strong>6:00 PM</strong><br>
                                        <span class="text-muted">Evening Worship Service</span>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- Wednesday -->
                        <div class="col-lg-5">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-4">

                                    <div class="d-flex align-items-center mb-4">
                                        <i class="bi bi-book fs-2 me-3"></i>
                                        <h3 class="mb-0">Wednesday</h3>
                                    </div>

                                    <div class="mb-3">
                                        <strong>6:15 PM</strong><br>
                                        <span class="text-muted">AWANA Clubs</span>
                                    </div>

                                    <div class="mb-3">
                                        <strong>6:15 PM</strong><br>
                                        <span class="text-muted">Southside Teens</span>
                                    </div>

                                    <div>
                                        <strong>6:30 PM</strong><br>
                                        <span class="text-muted">Mid-Week Prayer Meeting & Worship</span>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                ```

            </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>