@extends('user.layouts.index')

@section('default')

    <style>
        .bookbg {
            background: #daecf4;
            margin-bottom: 20px;
            padding: 20px 0px;
            /* margin-left: 6px; */
            padding-left: 48px;
        }

        audio.myaudio {
            width: 69%;
        }

        .see {
            background: #333333;
            border-color: #333333;
        }

        .bookimgone img {
            margin: 0 auto;
            border: 1px solid;
        }

        .bookimgone img {
            height: 145px;
        }

        .bookimgone {}

        .bookgb {
            background: #daecf4;
            margin-bottom: 20px;
        }

        .bookbgs {
            background: #daecf4;
        }

        .books h3 {
            font-size: 25px;
            color: black;
            font-weight: 700;
            margin-top: 0px;
        }

        .books p {
            text-align: left;
            word-spacing: 2px;
            line-height: 25px;
            font-size: 16px;
            color: #333333;
            font-weight: 400;
        }

        .innerPageContact {
            padding: 0px 0px;
        }

        /* .install {
                                                                    width: 20%;
                                                                    height: 35px;
                                                                }
                                                                .see {
                                                                    width: 20%;
                                                                    height: 35px;
                                                                    margin-left: 15px;
                                                                    background: #333333;
                                                                    border-color: #333333;
                                                                } */
        .see:hover {
            background: #0f96e7;
            border-color: #0f96e7;
        }

        .innerPageContact p {
            text-align: left;
            margin-bottom: 0px;
            min-height: 75px;
        }

        .clickone {
            float: right;
        }

        .see {
            padding: 6px 27px;
        }

        @media only screen and (max-width : 768px) {

            .books h3 {
                font-size: 20px;
                color: black;
                font-weight: 500;
                text-align: initial;
                margin-top: 20px;
            }

            .clickone {
                text-align: center;
                float: none;
                margin-top: 20px;
            }

            .bookbg {
                background: #daecf4;
                margin-bottom: 20px;
                padding: 20px 0px;
                height: auto;
            }

            .bookimgone {
                height: auto;
                width: 100%;
                border: 1px solid;
            }

            .books {
                margin-left: 90px;
            }

        }

    </style>
    <section>
        <div class="innerPageContact">
            @foreach ($recitations as $recitations_key => $recitation)
            {{-- {!!dd($key)!!} --}}
                <div class="bookbg row">
                    @foreach ($recitation as $recitation_key => $r)
                    {{-- {!!dd($keys)!!} --}}
                        @include('user.quranrecitation.partial.surha')
                    @endforeach
                </div>
            @endforeach
        </div>
    </section>
@endsection
{{-- ---------------Home Page ------------ --}}