@extends('includes.master')
@section('title', 'About Deities')

@section('style-section')
    <style type="text/css">
        /* Style the Headings that are used to open and close the accordion panel */
        .accordion {
            background-color: #621A1D;
            color: #fff;
            ;
            cursor: pointer;
            padding: 10px;
            margin: 0;
            font-weight: 500;
            border: 0.01rem solid lightgray;

        }


        /* Add "plus" sign (+) after Accordion */
        .plus-sign::after {
            content: '\002B';
            color: #fff;
            font-weight: bold;
            float: right;
        }

        /* Add "minus" sign (-) after Accordion (when accordion is active) */
        .minus-sign::after {
            content: "\2212";
            color: #fff;
        }

        /* Style the accordion panel */
        .accordion-panel {
            padding: 0 10px;
            overflow: hidden;
            background-color: white;
            max-height: 0;
            transition: max-height 0.5s ease-out;
        }

        .list-style li {
            background: url({{ asset('assets/img/flower.png') }}) left 8px no-repeat;
            padding-left: 36px;
            padding-bottom: 40px;
            background-size: 15px;
            width: auto;
            color: #ee1543;
        }

        .list-pn {
            list-style-type: none;
        }

        .l-h18 {
            line-height: 33px;
        }

        .font13 {
            font-size: 16px;
        }

        .font16 {
            font-size: 16px;
        }

        .m0 {
            margin: 0px;
        }

        .poppinsregular {
            font-family: 'poppinsregular';
        }

        ul {
            padding-left: 0rem;
        }

        b {
            color: #864F5E !important;
        }
    </style>
@section('content')
    <!-- ======= About Committee Section ======= -->
    <section
        style="background-image: url({{ asset('assets/img/elegant-background-with-mandala.png') }});background-size: auto;">
        <div class="responsive-container">
            <center>
                <h2 class="bottomborder p-4" style="font-weight:bold!important;font-size: 35px!important;">ABOUT DEITIES</h2>
            </center>
            <div class="px-3">

                
            </div>
        </div>
    </section><!-- End About Committee Section -->
@endsection
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<script type="text/javascript">
    // Get all Accordion and Panel

    $(function() {
        let accHeading = document.querySelectorAll(".accordion");
        let accPanel = document.querySelectorAll(".accordion-panel");

        // alert('dd');
        for (let i = 0; i < accHeading.length; i++) {
            // Execute whenever an accordion is clicked
            accHeading[i].onclick = function() {
                if (this.nextElementSibling.style.maxHeight) {
                    hidePanels(); // Hide All open Panels
                } else {
                    showPanel(this); // Show the panel
                }
            };
        }



        // Function to Show a Panel
        function showPanel(elem) {
            hidePanels();
            elem.classList.add("active");
            elem.classList.add("minus-sign");
            elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px";
        }

        // Function to Hide all shown Panels
        function hidePanels() {
            for (let i = 0; i < accPanel.length; i++) {
                accPanel[i].style.maxHeight = null;
                accHeading[i].classList.remove("active");
                accHeading[i].classList.remove("minus-sign");
            }
        }
    });


    $(document).ready(function() {
        $(".accordionFirst").click();

        window.scrollTo({
            top: 225,
            behavior: 'smooth'
        });

    })
</script>