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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <link rel="stylesheet" href="./assets/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <script src="./assets/js/bootstrap.bundle.min.js"></script>
    <link rel="shortcut icon" href="./assets/images/nav-logo.png" type="image/x-icon">
</head>

<body>
    <!-- navbar here -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid res-nav">
            <a class="navbar-brand nav-logo" href="./index.php">
                <img src="./assets/images/nav-logo.png" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse nav-gap" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="./index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./about.php">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./menu.php">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./contact.php">Contact</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="./feedback.php">Feedback</a>
                    </li>
                </ul>
                <button class="nav-btn" type="button"><i class="fa-solid fa-cart-shopping"></i> | <i
                        class="fa-solid fa-user"></i></button>
            </div>
        </div>
    </nav>
    <!-- navbar here -->

    <!-- header here  -->
    <!-- header here  -->
    <div class="header">
        <div class="header-content">
            <h1>WHO A<span class="bg-white">RE WE</span></h1>
            <div class="header-btn d-flex">
                <button class="header-btn-1">Delivery</button>
                <button class="header-btn-2">Online , Call-in , Walk- in <img
                        src="./assets/images/left-arrow.png"></button>
            </div>
        </div>
    </div>
    <!-- header here  -->
    <!-- header here  -->

    <!-- our star gyros section here  -->
    <div class="main-gyros">
        <div class="gyros-img">
            <img src="./assets/images/pizza.jpg">
        </div>

        <div class="gyros-content">
            <h1>Our Star Gyros</h1>
            <p>Established in 1993, Star Gyros has been a cornerstone of the Chicago food scene for over three decades. Our commitment to quality, taste, and customer satisfaction has made us a beloved institution in the
                community. We pride ourselves on using the freshest ingredients to create a diverse menu that caters to
                all tastes.</p>
            <button class="button-tr">Learn More <img src="./assets/images/arrow-2.png"></button>
        </div>
    </div>
    <!-- our star gyros section here  -->

    <div class="about-content">
        <h1>Services</h1>
        <p><span>Takeway: For your Convenience Hate</span> sticking around forever for your meal when you place an
            order. Don’t worry, you can place order ahead of time and when it is ready, take it away and enjoy. </p>

        <p>
            <span>Delivery: Fast and Reliable Service</span>
            Craving Star Gyros but prefer to dine at home? No problem! Our fast and reliable delivery service ensures
            that your favorite dishes are brought straight to your door, hot and fresh. We understand the importance of
            convenience and speed, especially on busy days or relaxing nights in. Simply place your order online or over
            the phone, and our team will ensure your meal arrives promptly, maintaining the same high quality as if you
            were dining with us.
        </p>

        <p>
            <span>Catering: Perfect for Parties and Special Occasions</span>
            Planning an event? Let Star Gyros handle the food, so you can focus on enjoying your special occasion. Our
            catering services are ideal for parties, corporate events, weddings, and any gathering where great food is a
            must. We offer a diverse selection of dishes to please every palate, from our famous gyros and subs to
            delectable appetizers and rice platters. Our catering team works closely with you to customize a menu that
            fits your needs and budget, ensuring a memorable dining experience for your guests. With Star Gyros
            catering, you get the same delicious food and exceptional service that you enjoy in our restaurant,
            delivered and set up wherever you are.
        </p>

        <span>Our Catering Services Include:</span>
        <ul>
            <li> <span>Customized Menus:</span> Tailored to meet the specific tastes and dietary needs of your guests.
            </li>
            <li><span>Full-Service Setup:</span> From delivery to setup, we handle all the details to make your event
                stress-free.</li>
            <li><span>Professional Staff:</span> Our experienced team is on hand to ensure everything runs smoothly.
            </li>
            <li><span>Variety of Options:</span> Choose from our extensive menu, including vegetarian and gluten-free
                options.</li>
        </ul>
        <p>Let us bring the delicious flavors of Star Gyros to your next event and make it truly special.</p>
    </div>

    <div class="our-team">
        <div class="team-content">
            <h1>Our Team</h1>
            <h2>Meet the People Behind the Flavor</h2>
            <p>Our team of dedicated chefs and friendly staff are passionate about providing the best dining experience
                possible. From the kitchen to your table, we work tirelessly to ensure every meal is perfect.</p>
            <p>Owner, Chef, Manager, Staff</p>
        </div>

        <div class="mama">
            <img src="./assets/images/mama.jpg" alt="">
        </div>
    </div>

    <!-- footer here  -->
    <footer>
        <div class="footer-logo">
            <img src="./assets/images/Footer.png">
        </div>

        <form class="footer-content footer-form">
            <h3>Sign up for Pita Inn promos, news and more delivered straight to your inbox.</h3>
            <input type="email" placeholder="Email Address" required>
            <button>Subscribe</button>
        </form>

        <div class="footer-content">
            <ul>
                <li><a href="#">ORDER NOW</a></li>
                <li><a href="#">BUY A GIFT CARD</a></li>
                <li><a href="#">FIND OUR HUMMUS</a></li>
            </ul>
        </div>

        <div class="footer-content">
            <p><a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i
                        class="fa-brands fa-facebook"></i></a></p>
            <h3>Star Gyros 2024 
                Site by BatesMeron</h3>
        </div>
    </footer>
    <!-- footer here  -->

    <!-- faq js Here -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const faqItems = document.querySelectorAll('.faq-item');

            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');

                question.addEventListener('click', function() {
                    const answer = item.querySelector('.faq-answer');
                    const isVisible = answer.style.display === 'block';

                    // Hide all answers
                    document.querySelectorAll('.faq-answer').forEach(answer => {
                        answer.style.display = 'none';
                    });
                    document.querySelectorAll('.faq-item').forEach(item => {
                        item.classList.remove('active');
                    });

                    // Toggle the clicked answer
                    if (!isVisible) {
                        answer.style.display = 'block';
                        item.classList.add('active');
                    }
                });
            });
        });
    </script>
    <!-- faq js Here -->

    

</body>

</html>