<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<?php
session_start();
// if have session user..then
if( isset($_SESSION['memname']))
{
session_write_close();
die("<script>window.location.href='faq_al.php';</script>");
}
?>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>


<title>Frequently Asked Questions</title>

<style>
    html{
        scroll-behavior: smooth;
    }
    .curved{
        background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/faq.jpg);
        background-size: cover;
        background-attachment: fixed;
        color:white !important;
        text-align: center;
    }
    .curved h1{
        padding-top: 70px;
        font-family: 'Teko', sans-serif;
        font-size: 65px;
    }
    .curved svg{
        display: block;
        margin-top: -250px;
    }
    section{
        width: 100%;
        height: 105vh;
        background: url(images/faq_bg.png);
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Acme', sans-serif;
    }
    .html{
        box-sizing: border-box;

    }
    .container1{
        width: 100%;
        max-width: 70rem;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    .accordion-item{
        background-color: #283042;
        border-radius: .4rem;
        margin-bottom: 1rem;
        padding: 0.6rem;  
        box-shadow: .5rem 2px .5rem rgba(0, 0, 0, .1);
    }
    .accordion-link{
        font-size: 1.3rem;
        color: rgba(255, 255, 255, .8);
        text-decoration: none;
        background-color: #283042;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
    }
    .accordion-link:hover{
        text-decoration: none;
    }
    .accordion-link ion-icon{
        color: #e7d5ff;
        padding: .5rem;
    }
    .accordion-link .remove-outline{
        display: none;
    }
    .answer{
        max-height: 0;
        overflow: hidden;
        position: relative;
        background-color: #212838;
        transition: max-height 650ms;
    }
    .answer::before{
        content: "";
        position: absolute;
        width: .6rem;
        height: 90%;
        background-color: #8fc460;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .answer p{
        color: rgba(255, 255, 255, .6);
        font-size: 1.0rem;
        padding: 1.5rem;
    }
    .accordion-item:target .answer{
        max-height: 20rem;

    }
    .accordion-item:target .accordion-link .add-outline{
        display: none;
    }
    .accordion-item:target .accordion-link .remove-outline{
        display: block;
    }
    @media only screen and (min-width: 1101px) and (max-width: 1400px) {
        .curved h1{
        padding-top: 60px;
        font-size: 55px;
        }
        .curved svg{
            margin-top: -200px;
        }
    }
    @media only screen and (min-width: 931px) and (max-width: 1100px) {
        .curved h1{
        padding-top: 35px;
        font-size: 45px;
        }
        .curved svg{
            margin-top: -160px;
        }
    }
    @media only screen and (min-width: 700px) and (max-width: 930px) {
        .curved h1{
        padding-top: 35px;
        font-size: 45px;
        }
        .curved svg{
            margin-top: -100px;
        }
    }
    @media only screen and (min-width: 500px) and (max-width: 699px) {
        .curved h1{
        padding-top: 35px;
        font-size: 40px;
        }
        .curved svg{
            margin-top: -70px;
        }
        section{
            height: 118vh;
        }
    }
    @media only screen and (max-width: 500px) {
        .curved h1{
        padding-top: 25px;
        font-size: 30px;
        }
        .curved svg{
            margin-top: -40px;
        }
        section{
            height: 135vh;
        }
    }
    @media only screen and (max-width: 400px) {
        section{
            height: 150vh;
        }
    }
</style>
</head>

<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <a class="navbar-brand" href="home.php"><img alt="Brand" src="images/logo.png"
            style="width: 80px; height: 80px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto" style="padding-right: 50px;">
            <li class="nav-item">
                <a class="nav-link" href="home.php">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Arena
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="arena_facilities.php">Arena Facilities</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="badminton_court_booking.php">Badminton Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="volleyball_court_booking.php">Volleyball Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="squash_court_booking.php">Squash Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="futsal_court_booking.php">Futsal Court Booking</a>
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="shop.php">Shop</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about_us.php">About Us</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="faq.php">FAQ</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="login.html">Login</a>
            </li>
        </ul>
    </div>
</nav>

<div class="curved">
    <h1>Frequently Asked Question</h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 319">
        <path fill="#fff" fill-opacity="1"
            d="M0,128L80,154.7C160,181,320,235,480,266.7C640,299,800,309,960,298.7C1120,288,1280,256,1360,240L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z">
        </path>
    </svg>
</div>
    <!--Content here-->
    <section>
        <div class="container1">
            <div class="accordion">
                <div class="accordion-item" id="question1">
                    <a class="accordion-link" href="#question1">
                        What kind of sports courts and facilities does the Sports Arena have?
                        <ion-icon name="add-outline" class="add-outline"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-outline"></ion-icon>
                    </a>
                    <div class="answer">
                        <p>
                            Supreme Sports Arena provides 4 main sports court which included badminton, volleyball, squash and futsal 
                            with reasonable price. In addition, high-class facilities are provided for the member to improve the cosy environment. 
                            All the facilities details can be read from the <a href="arena_facilities.php.php" style="text-decoration: none; color: darkred;">Facilities</a> page.
                        </p>
                    </div>
                </div>

                <div class="accordion-item" id="question2">
                    <a class="accordion-link" href="#question2">
                        How if my orders haven't delivered after a long time period from the order date?
                        <ion-icon name="add-outline" class="add-outline"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-outline"></ion-icon>
                    </a>
                    <div class="answer">
                        <p>
                            Usually the orders placed will take around maximum 7 days to be delivered. However, if 
                            the orders take too long of time to be delivered, you may contact the Sports Arena to ask for the 
                            problems. The contact info is available on the footer of <a href="home.php" style="text-decoration: none; color: darkred;">Home</a> page. We will try our best to respond 
                            as soon as possible. Sorry for the inconvenient.
                        </p>
                    </div>
                </div>

                <div class="accordion-item" id="question3">
                    <a class="accordion-link" href="#question3">
                        How can I book for the courts?
                        <ion-icon name="add-outline" class="add-outline"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-outline"></ion-icon>
                    </a>
                    <div class="answer">
                        <p>
                            If you are planning to book courts from us, you may visit Court Booking page under the navigation bar for the particular sports to book for the courts. 
                            Before you book for the courts, you must log in first so that our system can get your personal information for record purpose. To avoid troublesome, 
                            please make sure with your court booking information before you booked the courts.
                        </p>
                    </div>
                </div>

                <div class="accordion-item" id="question4">
                    <a class="accordion-link" href="#question4">
                        How if I didn't go for the court booking session that I booked?
                        <ion-icon name="add-outline" class="add-outline"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-outline"></ion-icon>
                    </a>
                    <div class="answer">
                        <p>
                            Sports Arena Manager will contact you if you didn't come for the booking session.
                            There was no penalty will be charged.
                            The court booking record will automatically change to absent status which meant you didn't come for the booking period.
                        </p>
                    </div>
                </div>

                <div class="accordion-item" id="question5">
                    <a class="accordion-link" href="#question5">
                        How can I get know more about the information regarding the Sports Arena?
                        <ion-icon name="add-outline" class="add-outline"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-outline"></ion-icon>
                    </a>
                    <div class="answer">
                        <p>
                            Feel free to surf to our <a href="about_us.php" style="text-decoration: none; color: darkred;">About Us</a>
                            page to get in touch with your curiousity. Futhurmore, you can contact us with your questions by email
                            us at <a href="mailto:supremesportsarena@gmail.com">supremesportsarena@gmail.com</a> or through the social media links provided. 
                            Our team will reply your questions with full effort as soon as possible.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>


<!--Footer-->
<footer>
    <p class="footer-bottom-text">All Right reserved by &copy;Supreme Sports Arena 2020</p>
</footer>


<!--Bootstrap js-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

<!--To make dropdown menu become hover accross-->
<script>
    const $dropdown = $(".dropdown");
        const $dropdownToggle = $(".dropdown-toggle");
        const $dropdownMenu = $(".dropdown-menu");
        const showClass = "show";

        $(window).on("load resize", function () {
            if (this.matchMedia("(min-width: 768px)").matches) {
                $dropdown.hover(
                    function () {
                        const $this = $(this);
                        $this.addClass(showClass);
                        $this.find($dropdownToggle).attr("aria-expanded", "true");
                        $this.find($dropdownMenu).addClass(showClass);
                    },
                    function () {
                        const $this = $(this);
                        $this.removeClass(showClass);
                        $this.find($dropdownToggle).attr("aria-expanded", "false");
                        $this.find($dropdownMenu).removeClass(showClass);
                    }
                );
            } else {
                $dropdown.off("mouseenter mouseleave");
            }
        });

    //let the nvbar stick on top
        // When the user scrolls the page, execute myFunction
        window.onscroll = function () { myFunction() };

        // Get the navbar
        var navbar = document.getElementById("navbar");

        // Get the offset position of the navbar
        var sticky = navbar.offsetTop;

        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }

</script>
</body>

</html>