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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--

    - custom css link
  -->
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/media_queries.css">
    <link rel="stylesheet" href="./assets/css/animation.css">

    <!--
    - google font link
  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700;800;900&family=Roboto:wght@400;500&display=swap"
        rel="stylesheet">
    <style>
        /* style of faq  */
        .faqs-container {
            font-family: "Roboto", sans-serif;
            max-width: 700px;
            margin: 150px auto;
        }
        .faqs-container ul li {
            list-style-type: disc;
        }

        .faqs-container .questions-container {
            box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.3);
        }

        .faqs-container h2 {
            padding: 4px 32px;
            font-size: 28px;
        }

        .faqs-container .faq-header {
            display: flex;
            background: #7c04a1;
            color: #f1faee;
            align-items: center;
            position: relative;
            cursor: pointer;
        }

        .faqs-container .faq-header .open,
        .faqs-container .faq-header .close {
            position: absolute;
            right: 0;
            padding: 0 32px;
            font-size: 22px;
            font-weight: bold;
            transform: translateY(-8px);
            opacity: 0;
            transition: all 500ms;
        }

        .faqs-container .faq-header .open.active,
        .faqs-container .faq-header .close.active {
            opacity: 1;
            transform: translateY(0);
        }

        .faqs-container .faq-header h3 {
            font-size: 20px;
            padding: 0 32px;
        }

        .faqs-container .content {
            padding: 0 32px;
            background: #fdfffc;
            line-height: 2;
            max-height: 0;
            overflow: hidden;
            transition: all 500ms;
        }

        .faqs-container .content.active {
            max-height: 600px;
        }

        .faq-header {
            border-bottom: 1px solid white;
            height: 60px;
        }

        .faq-header:hover {
            background: #6b038a;
        }
        .questions-container{
            margin: 20px 10px;
        }
    </style>
</head>

<body>
    <!--
      - #HEADER
    -->

    <header>

        <nav class="navbar">

            <div class="navbar-brand">
                <span><img src="./assets/images/logo.png" height="75em" alt="Educator Logo"></span>
                <span>
                    <h1>ABHYUDAYA</h1>
                </span>
            </div>

            <ul class="navbar-nav">

                <li class="nav-item">
                    <a href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a href="course">Courses</a>
                </li>
                <li class="nav-item">
                    <a href="community">Community</a>
                </li>
                <li class="nav-item">
                    <a href="contact">Contact Us</a>
                </li>

            </ul>

            <!-- <button class="btn btn-primary">
            <p class="btn-text">Try for free</p>
            <span class="square"></span>
          </button> -->

            <div class="btn1">
                <a href="login">
                    <button><span>LOGIN</span></button>
                </a>
            </div>

            <button class="nav-toggle-btn">
                <span class="one"></span>
                <span class="two"></span>
                <span class="three"></span>
            </button>

        </nav>
    </header>


    <div class="faqs-container">
        <h2 style="text-align: center;">Class 7th Exams</h2>

        <div class="questions-container">
            <div class="content-container">
                <div class="faq-header">
                    <h3>1. How do I purchase a membership?</h3>
                    <span class="open active">+</span>
                    <span class="close">-</span>
                </div>

                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet,
                        veniam!
                    </p>

                    <p>
                    <ul>
                        <li>list item 1 : Lorem ipsum dolor sit amet consectetur adipisicing elit. A, nobis.</li>
                        <li>list item 2 : Lorem ipsum dolor sit amet consectetur adipisicing elit. A, nobis.</li>
                        <li>list item 3 : Lorem ipsum dolor sit amet consectetur adipisicing elit. A, nobis.</li>
                        <li>list item 4 : Lorem ipsum dolor sit amet consectetur adipisicing elit. A, nobis.</li>
                        <li>list item 5 : Lorem ipsum dolor sit amet consectetur adipisicing elit. A, nobis.</li>
                    </ul>
                    </p>
                </div>
            </div>

            <div class="content-container">
                <div class="faq-header">
                    <h3>2. Which platforms are supported?</h3>
                    <span class="open active">+</span>
                    <span class="close">-</span>
                </div>

                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
                        voluptatem voluptatibus temporibus nemo amet tempore aperiam
                        pariatur laboriosam qui vel!
                    </p>
                </div>
            </div>

            <div class="content-container">
                <div class="faq-header">
                    <h3>3. How to cancel the subscription?</h3>
                    <span class="open active">+</span>
                    <span class="close">-</span>
                </div>

                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet,
                        veniam!
                    </p>

                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
                        voluptatem voluptatibus temporibus nemo amet tempore aperiam
                        pariatur laboriosam qui vel!
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const faqHeaders = document.querySelectorAll(".faqs-container .faq-header");

        faqHeaders.forEach((header, i) => {
            header.addEventListener("click", () => {
                header.nextElementSibling.classList.toggle("active");

                const open = header.querySelector(".open");
                const close = header.querySelector(".close");

                if (header.nextElementSibling.classList.contains("active")) {
                    open.classList.remove("active");
                    close.classList.add("active");
                } else {
                    open.classList.add("active");
                    close.classList.remove("active");
                }
            });
        });
    </script>
</body>

</html>