<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About | Scallywags Boardwalk Seafood</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>

    <div id="header"></div>

    <main>
        <section id="about-hero" class="py-5">
            <div class="container text-center">
                <h1 class="mb-3">About Scallywags</h1>
                <p class="lead mb-0">
                    A pirate-themed seafood experience built for families, tourists, and hungry crews on the Ocean City boardwalk.
                </p>
            </div>
        </section>

        <section id="about-main" class="py-5">
            <div class="container">
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <div class="p-4 h-100">
                            <h2>The Experience</h2>
                            <p>
                                Scallywags is loud, lively, and packed with pirate spirit. From the moment guests walk through the door,
                                they are met with bold decor, a high-energy atmosphere, and the kind of boardwalk excitement that makes
                                dinner feel like part of the vacation.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="p-4 h-100">
                            <h2>The Food</h2>
                            <p>
                                The menu is centered around seafood platters, fried boardwalk favorites, and casual dishes made for
                                sharing. Whether guests are digging into a full table spread or just grabbing something smaller,
                                Scallywags serves food that feels fun, hearty, and built for the whole crew.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="p-4 h-100">
                            <h2>Who It’s For</h2>
                            <p>
                                Scallywags is designed for families, tourist groups, friend outings, and anyone looking for a memorable
                                boardwalk meal. It’s the kind of place where kids can have fun, adults can relax, and everybody leaves full.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row g-4 align-items-center">
                    <div class="col-lg-6">
                        <div class="p-4 h-100">
                            <h2>Visit the Crew</h2>
                            <p class="mb-3">
                                Located right on the Ocean City boardwalk, Scallywags is easy to spot and impossible to forget.
                                Stop in for a casual lunch, a family dinner, or a loud night out with the crew.
                            </p>

                            <p class="mb-1"><strong>Address:</strong> Ocean City Boardwalk, Maryland</p>
                            <p class="mb-1"><strong>Phone:</strong> (410) 555-7827</p>
                            <p class="mb-0"><strong>Hours</strong></p>
                            <p class="mb-0">
                                Monday – Thursday: 10:00 AM – 10:00 PM<br>
                                Friday: 10:00 AM – 12:00 AM<br>
                                Saturday: 10:00 AM – 12:00 AM (or later for special events 🏴‍☠️)<br>
                                Sunday: 10:00 AM – 10:00 PM
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <img src="../images/about-boardwalk.jpg" alt="Ocean City boardwalk restaurant atmosphere" class="img-fluid rounded-5">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="footer"></div>

    <script src="../js/includes.js"></script>
</body>
</html>