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

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>Media - 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="media-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>MEDIA MINISTRY</h1>
                </div>
            </div>

            <section id="media-ministry" class="media-ministry section light-background">

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

                    <div class="text-center mb-5">
                        <h2 class="fw-bold">Watch, Listen, and Grow</h2>
                        <p class="text-muted mx-auto" style="max-width: 700px;">
                            Stay connected with Southside Baptist Church through sermons, worship services,
                            audio messages, and podcast episodes available wherever you are.
                        </p>
                    </div>

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

                        <div class="col-lg-4 col-md-6">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-4 text-center">

                                    <div class="mb-4">
                                        <i class="bi bi-camera-video fs-1"></i>
                                    </div>

                                    <h3 class="h4 fw-bold mb-3">Video Messages</h3>

                                    <p class="text-muted mb-4">
                                        Watch recent worship services, sermons, and special messages from Southside Baptist Church.
                                    </p>

                                    <a href="#" class="btn btn-primary">
                                        <i class="bi bi-play-circle me-2"></i>
                                        Watch Videos
                                    </a>

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

                        <div class="col-lg-4 col-md-6">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-4 text-center">

                                    <div class="mb-4">
                                        <i class="bi bi-volume-up fs-1"></i>
                                    </div>

                                    <h3 class="h4 fw-bold mb-3">Audio Sermons</h3>

                                    <p class="text-muted mb-4">
                                        Listen to Bible-centered preaching and teaching from past services and sermon series.
                                    </p>

                                    <a href="#" class="btn btn-primary">
                                        <i class="bi bi-headphones me-2"></i>
                                        Listen Now
                                    </a>

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

                        <div class="col-lg-4 col-md-6">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-4 text-center">

                                    <div class="mb-4">
                                        <i class="bi bi-mic fs-1"></i>
                                    </div>

                                    <h3 class="h4 fw-bold mb-3">Podcast</h3>

                                    <p class="text-muted mb-4">
                                        Subscribe to our podcast and receive encouraging messages and biblical teaching throughout the week.
                                    </p>

                                    <a href="#" class="btn btn-primary">
                                        <i class="bi bi-broadcast me-2"></i>
                                        View Podcast
                                    </a>

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