@extends('layouts.default')

@section('content')
<!-- Home section -->
<div id="home" class="relative white height-100vh mnh-600 align-items-center d-flex">
    <!-- Slider - The parent section should have .relative class -->
    <div class="bg-slider has-details custom-slider controls-mouseover arrows-long arrows-dark" data-slick='{"speed": 900, "arrows": true, "autoplaySpeed": 5000, "autoplay": true }'>

        <!-- Slide -->
        @foreach ($sliders as $sliderItem)
        <div class="slide has-parallax">
            <!-- Background image - you can choose parallax ratio and offset -->
            <div class="parallax bg-soft-6 bg-soft-black" data-anchor-target="#home" data-bottom-top="transform:translate3d(0, -400px, 0px);" data-top-bottom="transform:translate3d(0px, 400px, 0px);" data-bg="{{asset('storage/slider/' . $sliderItem->image)}}"></div>
            <!-- Container for titles -->
            <div class="d-flex align-items-center justify-content-center">
                <!-- Start titles -->
                <div class="container t-center relative">
                    <!-- Title -->
                    <h1 class="font-custom fs-60 fs-30-sm lh-60 lh-40-sm semibold uppercase animate" data-animation="zoomIn" data-animation-delay="150">
                        {{ $sliderItem->title }}
                    </h1>
                    <!-- Description -->
                    <p class="font-custom fs-22 fs-18-sm gray3 lh-30 lh-25-sm mt-15 animate" data-animation="zoomIn" data-animation-delay="300">
                        {!!html_entity_decode($sliderItem->desc)!!}
                    </p>
                    <!-- External or internal link - you can add target="_blank" attribute for open with new tab -->
                    <div class="mt-25 animate" data-animation="zoomIn" data-animation-delay="450">
                        <a href="{{ $sliderItem->btn_name1_route }}" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow">
                            <span class="font-custom">{{ $sliderItem->btn_name1 }}</span>
                        </a>
                        <a href="{{ $sliderItem->btn_name2_route }}" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow">
                            <span class="font-custom">{{ $sliderItem->btn_name2 }}</span>
                        </a>
                    </div>
                </div>
                <!-- End titles -->
            </div>
            <!-- End container for titles -->
        </div>
        @endforeach
        <!-- End slide -->

    </div>
    <!-- End slider -->
</div>
<!-- End #home section -->




<!-- What We Do Section -->
<section id="history" class="py-100 has-parallax bg-soft-75">

    <!-- Background image - you can choose parallax ratio and offset -->
    <div class="parallax bg-top" data-anchor-target="#history" data-bottom-top="transform:translate3d(0, -200px, 0px);" data-top-bottom="transform:translate3d(0px, 200px, 0px);" data-bg="{{asset('assets/images/bg-white.jpg')}}"></div>

    <!-- Container for animated tabs and title -->
    <div class="container">

        <!-- Row start -->
        <div class="row">


            <!-- Column for title -->
            <div class="col-12 mb-40 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'history')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->


            <!-- Column for filters -->
            <div class="col-12">

                <!-- Extra row for side by side filters -->
                <div class="row font-custom uppercase fs-18 animated-container">
                    @foreach($historys as $value)
                    <!-- Filter column -->
                    <div class="col-lg-2 col-md-4 col-sm-4 col-6 my-20 d-flex justify-content-center" data-animation="zoomIn" data-animation-delay="100">
                        <!-- Filter item, customize data-filter and data-target-layout areas -->
                        <div data-filter=".cn{{ $value->id }}" data-target-layout="#wwd" class="active bg-soft-3 bg-soft-dark4 bg-gray8-active bg-gray8-hover white width-100 height-100 radius-md b-1 b-dashed b-gray6 d-flex align-items-center justify-content-center rotate-45 c-pointer slow">
                            <span class="gray3 d-block rotate--45 font-custom">{{ $value->title }}</span>
                        </div>
                    </div>
                    <!-- End filter column -->
                    @endforeach

                </div>
                <!-- End extra row for side by side filters -->

            </div>
            <!-- End column for filters -->


            <!-- Column for items -->
            <div class="col-12 mt-45 animated" data-animation="fadeIn" data-animation-delay="300">

                <!-- Container for items - Choose your default filter -->
                <div id="wwd" class="grid-layout isotope" data-default-filter=".cn{{ $firsthistory->id }}">

                    @foreach($historys as $value)
                    <!-- Item - you can set with class by filtering -->
                    <div class="cn{{ $value->id }} item py-30 px-25 fullwidth bg-soft-3 bg-soft-dark4 b-1 b-dashed b-gray7 radius-md white">
                        <!-- Item title -->
                        <h4 class="fs-22 uppercase dark font-custom">
                            {{ $value->title }}
                        </h4>
                        <p class="mt-15 dark lh-30 fs-17 font-custom" align="justify">
                            {!!html_entity_decode($value->desc)!!}
                        </p>
                    </div>
                    <!-- End item -->
                    @endforeach

                </div>

            </div>
            <!-- End column for items -->

            <!-- Column for bottom texts and png image -->
            <div class="col-12 mt-65">

                <!-- Row for both side -->
                <div class="row">
                    <!-- Column for left, texts -->
                    <div class="col-lg-6 col-12 order-lg-1 order-2 mt-50-sm animated" data-animation="fadeInLeft" data-animation-delay="300">
                        <!-- Title -->
                        @foreach ($label as $item)
                        @if ( $item->code == 'muktamar')
                        <h2 class="dark fs-30 font-custom"> {{ $item->title }}
                        </h2>
                        <!-- Header Description -->
                        <p class="fs-17 mt-15 lh-30 dark font-custom" align="justify">
                            {!!html_entity_decode($item->desc)!!}
                        </p>
                        @endif
                        @endforeach
                        <!-- List start -->
                        <div class="row">
                            <!-- Column for left, texts -->
                            <div class="col-lg-6 col-12 order-lg-1 order-2 mt-50-sm animated" data-animation="fadeInLeft" data-animation-delay="300">

                                <ul class="list list-sm px-0 list-disc fs-16 gray3 lh-30 mt-20">

                                    <!-- List item -->
                                    <div class="row">
                                        @foreach($historysmuktamar as $value)
                                        @if ( $value->id % 2 == 0)
                                        <li class="d-flex align-items-center">
                                            <span data-bg="{{asset('assets/images/list-style.png')}}" class="inline-block width-20 height-20 mr-15"></span>
                                            <p class="font-custom dark">{{ $value->title }} : {{ $value->desc }}</p>
                                        </li>
                                        @endif
                                        @endforeach
                                    </div>
                                    <!-- List end -->

                                </ul>
                            </div>
                            <!-- End column for left, texts -->

                            <!-- Column for left, texts -->
                            <div class="col-lg-6 col-12 order-lg-2 order-1 d-flex justify-content-center align-items-center animated" data-animation="fadeInRight" data-animation-delay="300">
                                <ul class="list list-sm px-0 list-disc fs-16 gray3 lh-30 mt-20">

                                    <!-- List item -->
                                    <div class="row">
                                        @foreach($historysmuktamar as $value)
                                        @if ( $value->id % 2 == 1)
                                        <li class="d-flex align-items-center">
                                            <span data-bg="{{asset('assets/images/list-style.png')}}" class="inline-block width-20 height-20 mr-15"></span>
                                            <p class="font-custom dark">{{ $value->title }} : {{ $value->desc }}</p>
                                        </li>
                                        @endif
                                        @endforeach
                                    </div>
                                    <!-- List end -->

                                </ul>
                            </div>
                            <!-- End column for left, texts -->
                        </div>
                    </div>
                    <!-- End column for left, texts -->

                    <!-- Column for right, image -->
                    <div class="col-lg-6 col-12 order-lg-2 order-1 d-flex justify-content-center align-items-center animated" data-animation="fadeInRight" data-animation-delay="300">
                        <img src="{{asset('assets/images/mac-loader.svg')}}" data-src="{{asset('assets/images/mac.png')}}" alt="mac image template" class="d-block width-percent-90 height-auto">
                    </div>
                    <!-- End column for right, image -->
                </div>
                <!-- End row for both side -->

            </div>

        </div>
        <!-- Row end -->

    </div>
    <!-- End container for animated tabs and title -->


</section>
<!-- End What We Do Section -->








<!-- Facts Section -->
<section id="about" class="py-100">
    <!-- Container for template -->
    <div class="container">
        <!-- Row for template -->
        <div class="row t-center">
            <!-- Column for title -->
            <div class="col-12 mb-10 d-flex flex-column align-items-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'about')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->

            @foreach ($about as $item)
            <!-- Fact col -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-6 hover-container c-info mt-30 c-default animated" data-animation="fadeIn" data-animation-delay="100">
                <!-- Icon box -->
                <div class="fullwidth mxw-250 d-inline-flex align-items-center justify-content-center b-1 b-dashed b-gray5 px-30 py-35">
                    <div>
                        <!-- Fact -->
                        <div class="fact medium font-custom fs-60 fs-50-sm lh-60 colored" data-source="{{ $item->count }}"><span class="factor">{{ $item->count }}</span></div>
                        <!-- Fact Tag -->
                        <h5 class="fs-20 font-custom dark2 uppercase mt-5">{{ $item->title }}</h5>
                    </div>
                </div>
            </div>
            <!-- End fact col -->
            @endforeach

        </div>
        <!-- End row for template -->
    </div>
    <!-- End container for template -->
</section>
<!-- End facts section -->



<!-- Team Section -->
<section id="team" class="py-100 bg-gray">

    <!-- Container for team members and title -->
    <div class="container">

        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'team')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
                <a href="{{ route('team') }}" class="btn-sm py-10 bg-white dark white-hover flex-column medium bg-colored-hover ml-15 mx-5-sm slow">
                    <span class="lh-20 fs-20 uppercase font-custom">Lihat</span>
                    <span class="fs-12 font-custom">Struktur Organisasi</span>
                </a>

            </div>
            <!-- End column for title -->

            <!-- Carousel arrows -->
            <div class="col-12 d-flex justify-content-center mt-20">
                <!-- Previous button -->
                <button type="button" class="icon-md mx-5 bg-gray6 circle white bg-gray7-hover" data-slider-control="#employee-carousel" data-slider-dir="prev">
                    <i class="ti-angle-left"></i>
                </button>
                <!-- Next button -->
                <button type="button" class="icon-md mx-5 bg-gray6 circle white bg-gray7-hover" data-slider-control="#employee-carousel" data-slider-dir="next">
                    <i class="ti-angle-right"></i>
                </button>
            </div>
            <!-- End carousel arrows -->

            <!-- Fullwidth column for slider -->
            <div class="col-12 mt-10">

                <!-- Slider -->
                <div id="employee-carousel" class="custom-slider block-img dots-strip dots-close row" data-slick='{"dots": false, "speed":600, "arrows": false, "fade": false, "draggable":false, "slidesToShow": 4, "slidesToScroll": 1, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2,"slidesToScroll": 2}},{"breakpoint": 768,"settings":{"slidesToShow": 1,"slidesToScroll": 1}}]}'>

                    @foreach ($team as $item)
                    <!-- Slide / Member start -->
                    <div class="p-3">

                        <!-- Keeper for member details -->
                        <div class="team-member p-0 b-1 b-gray1">

                            <!-- Team Member Image -->
                            <img src="{{ asset('storage/team/'. $item->image) }}" alt="Team Member" class="d-block fullwidth" />

                            <!-- Positioning supporter div -->
                            <div class="height-75"></div>

                            <!-- Team Member Details -->
                            <div class="member-details px-15 bg-white fullheight t-center slow-md">
                                <!-- Name and Position -->
                                <div class="fullwidth">
                                    <!-- Member Name -->
                                    <h1 class="font-custom fs-22 dark uppercase">
                                        {{ $item->name }}
                                    </h1>
                                    <!-- Member Position -->
                                    <h3 class="fs-16 mt-3 gray8 font-custom uppercase">
                                        {{ $item->position }}
                                    </h3>
                                </div>
                                <!-- End Team Member Details -->

                                <!-- Member Details -->
                                <div class="fullwidth mt-15">
                                    <!-- Description -->
                                    <p class="fs-16 gray8 mb-15 font-custom">
                                        {!!html_entity_decode($item->description)!!}
                                    </p>
                                    <!-- Member Socials, Facebook -->
                                    <!-- Instagram -->
                                    <a href="{{ $item->instagram }}" class="icon-xs circle white bg-gray6 bg-instagram-hover mx-2">
                                        <i class="ti-instagram"></i>
                                    </a>
                                    <!-- Button trigger modal -->
                                    <!-- <button type="button" class="d-block mx-auto mt-30 icon-lg b-1 b-gray4 gray4 circle bg-colored-hover white-hover" data-bs-toggle="modal" data-bs-target="#modal-01">
                                        <i class="ti-plus"></i>
                                    </button> -->

                                </div><!-- End Member Details -->
                            </div>
                            <!-- End Team Member Details -->

                        </div>
                        <!-- End keeper for member details -->

                    </div>
                    <!-- End slide / member -->
                    @endforeach

                </div>
                <!-- End Slider -->

                <!-- Button Unduh Modal-->
                <!-- <button type="button" class="d-block mx-auto mt-30 icon-lg b-1 b-gray4 gray4 circle bg-colored-hover white-hover" data-bs-toggle="modal" data-bs-target="#modal-struktur">
                    <i class="ti-fullscreen"></i>
                </button> -->

            </div>
            <!-- Slider end -->

        </div>
        <!-- Row end -->

    </div>
    <!-- End container for team members and title -->

</section>
<!-- End Team Section -->



<!-- Modal -->
<div id="modal-struktur" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Struktur
                    </h4>
                    <!-- Employee Name &amp;-->
                    <h6 class="gray6 fs-16 mt-5">
                        IDI Cabang Tangerang
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-import"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/1b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-01" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Jessica Doen
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Ceo &amp; Founder
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/1b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-02" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Barney Clore
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Director
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/2b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-03" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Adriana Doen
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Graphic Designer
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/3b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-04" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Sarah Tron
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Human Resources
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/4b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-05" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Matt Kollen
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Web Designer
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/5b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->



<!-- Modal -->
<div id="modal-06" class="modal fade fade-scale" tabindex="-1" role="dialog">
    <!-- Box template container -->
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <!-- Modal Details -->
        <div class="modal-content">
            <!-- Modal close button for mobile and large screens -->
            <button type="button" class="modal-close close visible-lg white right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <button type="button" class="modal-close close hidden-lg right-15" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
            <!-- Modal details -->
            <div class="row mx-0 row-eq-height">
                <div class="col-lg-7 col-12 px-50 px-30-sm py-60">
                    <!-- Employee Name -->
                    <h4 class="uppercase font-secondary medium fs-24 colored">
                        Ariella Davenport
                    </h4>
                    <!-- Employee Name -->
                    <h6 class="gray6 fs-16 mt-5">
                        Graphic Designer
                    </h6>
                    <!-- About -->
                    <p class="mt-30 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Curabitur vitae dignissim libero, sed lobortis sem. Vestibulum bibendum quis purus at eleifend. Curabitur ex est, vulputate vitae augue at, gravida ullamcorper justo. In fringilla hendrerit commodo. Duis id eleifend eros, in sodales turpis. Integer ultrices tellus lacinia, bibendum mi quis, convallis urna.
                    </p>
                    <p class="mt-15 dark1 fs-18 lh-30 fs-16-sm lh-30-sm">
                        Sed id viverra felis, a feugiat ipsum. Vivamus non purus eu neque aliquet sagittis. Duis vitae dolor interdum, cursus erat vel, dictum felis. Curabitur hendrerit placerat fermentum.
                    </p>
                    <!-- Networks -->
                    <div class="mt-40">
                        <a href="#" class="icon-sm opacity-8-hover bg-twitter white mr-5 slow-sm">
                            <i class="ti-twitter-alt"></i>
                        </a>
                        <a href="#" class="icon-sm opacity-8-hover bg-mail white mr-5 slow-sm">
                            <i class="ti-email"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 col-12 mnh-400" data-bg="{{asset('assets/images/team/6b.jpg')}}"></div>
            </div>
        </div>
        <!-- End Modal Details -->
    </div>
    <!-- End box template container -->
</div>
<!-- End Modal -->






<!-- Testimonials -->
<section id="news" class="has-parallax py-100 bg-soft-85 bg-soft-dark4">

    <!-- Background image - you can choose parallax ratio and offset -->
    <div class="parallax bg-top" data-anchor-target="#news" data-bottom-top="transform:translate3d(0, -200px, 0px);" data-top-bottom="transform:translate3d(0px, 200px, 0px);" data-bg="{{asset('assets/images/i3.jpg')}}"></div>


    <!-- Container -->
    <div class="container-fluid relative zi-10">

        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'news')
                <h1 class="fs-60 uppercase white animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 white animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->


            <!-- Column for slider -->
            <div class="col-12">

                <!-- Slider start -->
                <div id="news-slider" class="custom-slider fullwidth c-default block-img mt-40" data-slick='{ "autoplay": true, "autoplaySpeed":7000, "dots": false, "speed":600, "arrows": false, "fade": false, "draggable":false, "slidesToShow": 4, "slidesToScroll": 1, "responsive":[{"breakpoint": 1350,"settings":{"slidesToShow": 3}},{"breakpoint": 1024,"settings":{"slidesToShow": 2}},{"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>

                    @foreach ($news as $item)
                    <!-- Slide -->
                    <div class="px-10 hover-container animated-hover-container has-overlay-hover">
                        <!-- Image -->
                        <div class="opacity-5 opacity-hover-item slow-xl">
                            <img src="{{ asset('storage/news/'. $item->image) }}" alt="featured work image">
                        </div>
                        <!-- Overlay for title and tags -->
                        <div class="overlay px-35 py-20 align-items-start justify-content-start flex-column opacity-7 opacity-hover-item slow-xl">
                            <!-- Title -->
                            <h2 class="fs-30 uppercase white t-shadow font-custom">
                                {{ $item->title }}
                            </h2>
                            <!-- Desc -->
                            <!-- <p class="fs-16 white medium t-shadow font-custom">
                                {{ $item->desc }}
                            </p> -->
                        </div>
                        <!-- Icon container, you can find animations in css/style.css > .fw-icon-container -->
                        <div class="fw-icon-container overlay px-30 py-15 align-items-end justify-content-end">
                            <!-- Icon -->
                            <div class="fw-icon">
                                <a href="{{ asset('storage/news/'. $item->image) }}" data-fslightbox="news" data-type="image" class="fw-icon fs-18 icon-lg mr-10 circle bg-white dark white-hover bg-colored-hover slow">
                                    <i class="ti-zoom-in"></i>
                                </a>
                            </div>
                            <!-- Icon -->
                            <div class="fw-icon">
                                <a href="{{ route('news.show', $item->id) }}" class="fw-icon fs-18 icon-lg circle bg-white dark white-hover bg-colored-hover slow">
                                    <i class="ti-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- End icon container, you can find animations in css/style.css > .fw-icon-container -->
                    </div>
                    <!-- End slide -->
                    @endforeach

                </div>
                <!-- Slider end -->

            </div>
            <!-- End column for slider -->

            <!-- Carousel arrows -->
            <div class="col-12 d-flex justify-content-center mt-40">
                <!-- Previous button -->
                <button type="button" class="icon-md mx-5 bg-dark5 circle white bg-colored-hover" data-slider-control="#news-slider" data-slider-dir="prev">
                    <i class="ti-angle-left"></i>
                </button>
                <!-- Next button -->
                <button type="button" class="icon-md mx-5 bg-dark5 circle white bg-colored-hover" data-slider-control="#news-slider" data-slider-dir="next">
                    <i class="ti-angle-right"></i>
                </button>
            </div>
            <!-- End carousel arrows -->



            <!-- Bottom texts -->
            <!-- <div class="col-12 t-center mt-30 d-flex align-items-center flex-column"> -->

            <!-- @foreach ($label as $item)
                @if ( $item->code == 'news-detail') -->
            <!-- Title -->
            <!-- <h2 class="fs-30 white animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h2> -->
            <!-- Header Strip -->
            <!-- <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div> -->
            <!-- Header Description -->
            <!-- <p class="fs-16 gray3 mt-10 white animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach -->

            <!-- Buttons -->
            <!-- <div class="mt-50"> -->

            <!-- Button -->
            <!-- <a href="#portfolio" class="btn-sm py-10 bg-white dark white-hover flex-column medium bg-colored-hover ml-15 mx-5-sm slow">
                        <span class="lh-20 fs-20 uppercase font-custom">Lihat</span>
                        <span class="fs-12 font-custom">Lihat semua berita terkini</span>
                    </a> -->

            <!-- Button -->
            <!-- <a href="#contact" class="btn-sm py-10 bg-white dark white-hover flex-column medium bg-colored-hover ml-15 mx-5-sm slow">
                        <span class="lh-20 fs-20 uppercase font-custom">Pesan</span>
                        <span class="fs-12 font-custom">Kirim Pesan ke Kami</span>
                    </a> -->

            <!-- </div> -->
            <!-- End buttons -->
            <!-- </div> -->
            <!-- End bottom texts -->


        </div>
        <!-- Row end -->

    </div>
    <!-- End container for slider -->

</section>
<!-- End Testimonials -->






<!-- Portfolio Section -->
<section id="event" class="pt-100 pb-0 bg-gray bt-1 bb-1 b-gray1 b-solid">
    <!-- Container for template -->
    <div class="container-fluid">
        <!-- Row for template -->
        <div class="row t-center">
            <!-- Column for title -->
            <div class="col-12 mb-40 d-flex flex-column align-items-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'event')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->

            <!-- Column for filters -->
            <div class="col-12">

                <!-- Keeper for filters and global text options -->
                <div class="font-custom uppercase dark2">

                    <!-- Filter item -->
                    <button data-filter="*" data-target-layout="#works" class="bg-white active b-1 b-dark bg-dark-active bg-dark-hover white-hover white-active slow uppercase mx-5" type="button">
                        Lihat Semua
                    </button>

                    <!-- Filter item -->
                    <!-- @foreach ($eventcategory as $item)
                    <button data-filter=".event{{ $item->id }}" data-target-layout="#works" class="bg-white b-1 b-dark bg-dark-active bg-dark-hover white-hover white-active slow uppercase mx-5" type="button">
                        {{ $item->name }}
                    </button>
                    @endforeach -->

                </div>
                <!-- End keeper for filters and global text options -->

            </div>
            <!-- End column for filters -->


            <!-- Column for portfolio items -->
            <div class="col-12 mt-50">
                <!-- Works start -->
                <div id="works" class="isotope grid-layout row row-cols-xl-5 row-cols-lg-3 row-cols-md-3 row-cols-sm-3 row-cols-xs-1" data-default-filter="">

                    @foreach ($event as $item)
                    <!-- Your URL or image link -- portfolio item -->
                    <a href="{{ asset('storage/event/'. $item->image) }}" data-fslightbox="portfolio" data-type="image" class="event{{ $item->event_category_id }} item col p-0">
                        <!-- Figure for all -->
                        <figure class="has-overlay-hover hover-container m-0">
                            <!-- Your image -->
                            <img data-src="{{ asset('storage/event/'.$item->image) }}" src="{{asset('assets/images/event/portfolio-loader.svg')}}" alt="portfolio image template" class="zoom-in-hover-item slow-xl">
                            <!-- Caption -->
                            <figcaption class="overlay-hover bg-soft-9 bg-soft-dark5 slow-xl d-flex flex-column align-items-center justify-content-center">
                                <!-- Title with animation -->
                                <h2 class="font-custom slow uppercase white fs-30 animated-hover fast" data-animation="fadeInUp" data-animation-delay="0">{{ $item->title }}</h2>
                                <!-- Strips on the middle -->
                                <div class="width-30 height-5 mt-15 slow bg-transparent bt-1 bb-1 b-white animated-hover fast" data-animation="fadeIn" data-animation-delay="0"></div>
                                <a href="{{ route('event.show', $item->id) }}" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow" data-animation="fadeInDown" data-animation-delay="0">
                                    <span class="font-custom">Daftar</span>
                                </a>
                                <!-- #hashtag -->
                                <p class="font-custom slow uppercase gray3 fs-17 mt-15 animated-hover fast" data-animation="fadeInDown" data-animation-delay="0">{{ $item->hashtag }}</p>
                            </figcaption>
                            <!-- End caption -->
                        </figure>
                        <!-- End figure for all -->
                    </a>
                    <!-- End portfolio item -->
                    @endforeach
                </div>
                <!-- Works end -->

            </div>
            <!-- End column for portfolio items -->


        </div>
        <!-- End row for template -->
    </div>
    <!-- End container for template -->
</section>
<!-- End portfolio section -->




<!-- Gallery -->
<section id="gallery" class="has-parallax py-100 bg-soft-85 bg-soft-dark4">

    <!-- Background image - you can choose parallax ratio and offset -->
    <div class="parallax bg-top" data-anchor-target="#gallery" data-bottom-top="transform:translate3d(0, -200px, 0px);" data-top-bottom="transform:translate3d(0px, 200px, 0px);" data-bg="{{asset('assets/images/bg-gallery.jpg')}}"></div>


    <!-- Container -->
    <div class="container-fluid relative zi-10">

        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'gallery')
                <h1 class="fs-60 uppercase white animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 white animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->


            <!-- Column for slider -->
            <div class="col-12">

                <!-- Slider start -->
                <div id="gallery-slider" class="custom-slider fullwidth c-default block-img mt-40" data-slick='{ "autoplay": true, "autoplaySpeed":7000, "dots": false, "speed":600, "arrows": false, "fade": false, "draggable":false, "slidesToShow": 4, "slidesToScroll": 1, "responsive":[{"breakpoint": 1350,"settings":{"slidesToShow": 3}},{"breakpoint": 1024,"settings":{"slidesToShow": 2}},{"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
                    @foreach ($gallery as $item)
                    <!-- Slide -->
                    <div class="px-10 hover-container animated-hover-container has-overlay-hover">
                        <!-- Image -->
                        <div class="opacity-5 opacity-hover-item slow-xl">
                            <img src="{{ asset('storage/gallery/'. $item->image) }}" alt="gallery work image">
                        </div>
                        <!-- Overlay for title and tags -->
                        <div class="overlay px-35 py-20 align-items-start justify-content-start flex-column opacity-7 opacity-hover-item slow-xl">
                            <!-- Title -->
                            <h2 class="font-custom fs-30 uppercase white t-shadow">
                                {{ $item->title }}
                            </h2>
                            <!-- Desc -->
                            <p class="fs-16 white medium t-shadow font-custom">
                                {!! Str::words(html_entity_decode($item->desc), 15, ' ...') !!}
                            </p>
                        </div>
                        <!-- Icon container, you can find animations in css/style.css > .fw-icon-container -->
                        <div class="fw-icon-container overlay px-30 py-15 align-items-end justify-content-end">
                            <!-- Icon -->
                            <div class="fw-icon">
                                <a href="{{ asset('storage/gallery/'. $item->image) }}" data-fslightbox="gallery" data-type="image" class="fw-icon fs-18 icon-lg mr-10 circle bg-white dark white-hover bg-colored-hover slow">
                                    <i class="ti-zoom-in"></i>
                                </a>
                            </div>
                            <!-- Icon -->
                            <div class="fw-icon">
                                <a href="{{ route('gallery.show', $item->id) }}" class="fw-icon fs-18 icon-lg circle bg-white dark white-hover bg-colored-hover slow">
                                    <i class="ti-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- End icon container, you can find animations in css/style.css > .fw-icon-container -->

                    </div>
                    <!-- End slide -->
                    @endforeach
                </div>
                <!-- Slider end -->

            </div>
            <!-- End column for slider -->

            <!-- Carousel arrows -->
            <div class="col-12 d-flex justify-content-center mt-40">
                <!-- Previous button -->
                <button type="button" class="icon-md mx-5 bg-dark5 circle white bg-colored-hover" data-slider-control="#gallery-slider" data-slider-dir="prev">
                    <i class="ti-angle-left"></i>
                </button>
                <!-- Next button -->
                <button type="button" class="icon-md mx-5 bg-dark5 circle white bg-colored-hover" data-slider-control="#gallery-slider" data-slider-dir="next">
                    <i class="ti-angle-right"></i>
                </button>
            </div>
            <!-- End carousel arrows -->


        </div>
        <!-- Row end -->

    </div>
    <!-- End container for slider -->

</section>
<!-- End Gallery -->





<!-- Why we section -->
<section id="procedure" class="pt-100 pb-150">

    <!-- Clients Inner -->
    <div class="container">


        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'procedure')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->



            <!-- Col -->
            <div class="col-lg-6 col-12 t-left mt-100 mt-50-sm">
                <!-- Nav tabs -->
                <div>
                    <ul class="nav justify-content-center d-inline-flex width-auto bl-1 b-gray2" role="tablist">
                        <li role="presentation" class="d-flex">
                            <button type="button" data-bs-target="#tab10a" aria-selected="true" aria-controls="tab10b" role="tab" data-bs-toggle="pill" class="tab-filter show active  font-custom mr-3 btn-md px-15-sm bg-gray2 bg-gray3-hover bg-white-active dark4 fs-15 uppercase slow-sm">
                                IDI
                            </button>
                        </li>
                        @foreach ($procedure as $item)
                        <li role="presentation" class="d-flex">
                            <button type="button" data-bs-target="#tab{{ $item->id }}" aria-selected="false" aria-controls="tab{{ $item->id }}" role="tab" data-bs-toggle="pill" class="tab-filter font-custom mr-3 ml--1 btn-md px-15-sm bg-gray2 bg-gray3-hover bg-white-active fs-15 uppercase slow-sm">
                                {{ $item->title }}
                            </button>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <!-- Tab panes -->
                <div class="tab-content t-left px-30 py-30 fs-17 gray7 lh-30">
                    <!-- Tab -->
                    <div id="tab10a" role="tabpanel" class="tab-pane fade show active">
                        <div class="tab-container t-justify">
                            <img src="{{asset('assets/images/mini-phone.png')}}" alt="mini phone png" class="f-left mr-20">
                            Ikuti prosedur IDI Cabang Tangerang untuk mendapatkan pelayanan terbaik.
                        </div>
                    </div>
                    <!-- Tab -->
                    @foreach ($procedure as $item)
                    <!-- Tab -->
                    <div id="tab{{ $item->id }}" role="tabpanel" class="tab-pane fade">
                        <div class="tab-container t-justify">
                            <!-- <img src="images/mini-phone.png" alt="mini phone png" class="f-left mr-20"> -->
                            {!!html_entity_decode($item->desc)!!}
                        </div>
                    </div>
                    <!-- Tab -->
                    @endforeach
                </div>
                <!-- End Tab panes -->
            </div>
            <!-- End col -->


            <div class="col-lg-6 col-12 t-left mt-100 mt-50-sm">
                <!-- Accordion -->
                <div id="one">

                    @foreach ($download as $item)
                    <!-- Accordion bar -->
                    <div data-bs-target="#acc-{{ $item->id }}" aria-controls="acc-{{ $item->id }}" aria-expanded="false" data-bs-toggle="collapse" role="button" class="acc-bar b-1 b-solid b-gray2 d-flex align-items-center black bg-gray2-hover bg-gray2-active c-pointer flex-wrap slow mt-10">
                        <!-- Left icon and texts -->
                        <div class="py-20 px-30 px-20-sm">
                            <h4 class="font-custom uppercase gray8 fs-18 fs-14-sm"> {{ $item->title }}</h4>
                        </div>
                        <!-- Right icons -->
                        <div class="ml-auto px-40 px-20-sm">
                            <i class="ti-plus gray6"></i>
                            <i class="ti-minus gray6"></i>
                        </div>
                    </div>
                    <!-- End accordion bar -->
                    <!-- End left icon and texts -->
                    <!-- Card body -->
                    <div id="acc-{{ $item->id }}" class="collapse fullwidth b-1 b-gray2 bt-0 fs-14 gray7" data-bs-parent="#one">
                        <div class="px-30 py-20">
                            <!-- Paragraph -->
                            <p class="font-custom fs-17 fs-16-sm gray8 lh-30">
                                {!!html_entity_decode($item->desc)!!}
                            </p>
                            <a href="{{asset('storage/download/' . $item->path)}}" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow">
                                <span class="font-custom">Unduh</span>
                            </a>
                        </div>
                    </div>
                    <!-- End card body -->
                    @endforeach

                </div>
                <!-- End accordion -->
            </div>

        </div>
        <!-- Row end -->

    </div>
    <!-- Clients Inner end -->


</section>
<!-- End why we section -->






<!-- Contact Section -->
<section id="contact" class="py-100">

    <!-- Container for contact and title -->
    <div class="container">

        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">
                <!-- Header -->
                @foreach ($label as $item)
                @if ( $item->code == 'contact')
                <h1 class="fs-60 uppercase dark animated font-custom" data-animation="fadeIn" data-animation-delay="100">
                    {{ $item->title }}
                </h1>
                <!-- Header Strip -->
                <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                <!-- Header Description -->
                <p class="mxw-800 fs-16 lh-30 dark animated font-custom align=" center"" data-animation="fadeIn" data-animation-delay="100">
                    {!!html_entity_decode($item->desc)!!}
                </p>
                @endif
                @endforeach
            </div>
            <!-- End column for title -->


            <!-- Fullwidth column for contact form -->
            <div id="contact-form-container" class="col-12 mt-50 d-flex fullwidth flex-column align-items-center slow-cubic">

                <!-- Contact form wrapper -->
                <div class="contact-form-wrapper o-hidden fullwidth slow-cubic">

                    <!-- Contact Form -->
                    <form id="contact-form" class="contact-form validate-me" novalidate name="contact_form" method="post" action="php/mail.php">
                        <!-- Container for inputs -->
                        <div class="container-fluid px-0">
                            <!-- Row for cols -->
                            <div class="row row-eq-height">
                                <!-- Col for input -->
                                <div class="col-lg-6 col-12">
                                    <div class="row">
                                        <div class="col-12 relative">
                                            <input type="text" name="name" id="name" placeholder="Nama Kamu*" required class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mt-30 font-custom">
                                            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-custom">Silahkan masukan nama Kamu.</div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12 relative">
                                            <input type="email" name="email" id="email" placeholder="E-Mail*" required class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mt-30 font-custom">
                                            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-custom">Silahkan masukan e-mail Kamu.</div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12 relative">
                                            <input type="text" name="subject" id="subject" placeholder="Subyek" class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mt-30 font-custom">
                                        </div>
                                    </div>

                                </div>
                                <!-- End col for input -->
                                <!-- Col for input -->
                                <div class="col-lg-6 col-12 relative pt-30">
                                    <textarea name="message" id="message" placeholder="Pesan Kamu.*" required class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mnh-150 fullheight font-custom"></textarea>
                                    <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-custom">Silahkan masukan pesan Kamu.</div>
                                </div>
                                <!-- End col for input -->
                                <!-- Col for input -->
                                <div class="col-12 mt-30 d-flex justify-content-lg-end justify-content-center">
                                    <!-- Send Button -->
                                    <button type="submit" id="submit" class="xl-btn block b-1 b-gray2 fullwidth font-secondary uppercase bg-gray2 bg-colored-hover py-25 dark white-hover fs-17 slow font-custom">Kirim Pesan</button>
                                    <!-- End Send Button -->
                                </div>
                                <!-- End col for input -->
                            </div>
                            <!-- End row for cols -->
                        </div>
                        <!-- End container for inputs -->
                    </form>
                    <!-- End contact Form -->

                </div>
                <!-- End contact form wrapper -->


                <!-- Success message wrapper -->
                <div class="success-message-wrapper unselectable none px-100 py-150 py-80-sm mxw-600 bg-gray2 t-center d-flex flex-column align-items-center slow-md">

                    <!-- SVG for check icon -->
                    <svg width="54px" height="50px" viewBox="0 0 54 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <path d="M18.9526053,50 C17.0492133,50.0026165 15.2485978,49.1358819 14.0621508,47.6459509 L0.348067622,30.4593528 C-0.250279824,29.5582555 -0.0598946109,28.3486099 0.786242025,27.6753353 C1.63237866,27.0020608 2.85255542,27.0893162 3.59449702,27.876155 L17.3085802,45.0419209 C17.7187995,45.5777448 18.3629613,45.881359 19.0368836,45.8565261 C19.7108059,45.8316931 20.3309261,45.4814922 20.7006827,44.9169275 L50.189083,0.919236234 C50.6054349,0.3014969 51.3193752,-0.046964041 52.0619694,0.00511527446 C52.8045636,0.0571945899 53.462994,0.501902075 53.7892363,1.17172072 C54.1154786,1.84153937 54.0599688,2.6347078 53.6436169,3.25244713 L24.176027,47.2293061 C23.0638578,48.8938865 21.2221934,49.9241298 19.2231411,50 L18.9526053,50 Z" fill="#49D078" fill-rule="nonzero"></path>
                        </g>
                    </svg>
                    <!-- End SVG for check icon -->

                    <h1 class="font-secondary uppercase gray8 fs-40 mt-25 font-custom">
                        Terima kasih!
                    </h1>

                    <p class="fs-20 lh-30 gray6 mt-10 font-custom">
                        Pesan Anda telah sampai kepada kami. Kami akan menghubungi Anda sesegera mungkin.
                    </p>
                </div>
                <!-- End success message wrapper -->

            </div>
            <!-- Contact column end -->

        </div>
        <!-- Row end -->

    </div>
    <!-- End container for contact -->

</section>
<!-- End contact Section -->



<section class="py-100 background-white">
    <div class="container">
        <div class="row">

            <div class="col">
                <div class="container t-center relative">
                    <!-- Title -->
                    <h5 class="font-custom fs-60 fs-30-sm lh-60 lh-40-sm semibold uppercase animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="150">
                        Cari NPA Pusatmu
                    </h5>
                    <!-- Description -->
                    <p class="font-custom fs-22 fs-18-sm text-grey-2 lh-30 lh-25-sm mt-15 animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="300">
                        Caritahu NPA Pusatmu di Website IDI Online
                    </p>
                    <!-- External or internal link - you can add target="_blank" attribute for open with new tab -->
                    <div class="mt-25 animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="450">
                        <a href="https://idionline.org/direktori-anggota/" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow" tabindex="0">
                            <span class="font-custom">Cek Disini</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="container t-center relative">
                    <!-- Title -->
                    <h5 class="font-custom fs-60 fs-30-sm lh-60 lh-40-sm semibold uppercase animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="150">
                        Lengkapi SKP
                    </h5>
                    <!-- Description -->
                    <p class="font-custom fs-22 fs-18-sm text-grey-2 lh-30 lh-25-sm mt-15 animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="300">
                        Lengkapi SKPmu di Website IDI Online
                    </p>
                    <!-- External or internal link - you can add target="_blank" attribute for open with new tab -->
                    <div class="mt-25 animate zoomIn visibleme" data-animation="zoomIn" data-animation-delay="450">
                        <a href="https://anggota.idionline.org/login" target="_blank" class="btn-sm gray3 fs-15 bg-soft-5 mx-10 bg-soft-0-hover bg-soft-dark7 b-1 b-soft-white1 b-colored-hover uppercase medium font-secondary bg-colored-hover white slow" tabindex="0">
                            <span class="font-custom">Login Disini</span>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>





<!-- Address section -->
<section id="address" class="has-parallax unselectable py-100 bg-soft-85 bg-soft-dark4">

    <!-- Background image - you can choose parallax ratio and offset -->
    <div class="parallax bg-top" data-anchor-target="#address" data-bottom-top="transform:translate3d(0, -200px, 0px);" data-top-bottom="transform:translate3d(0px, 200px, 0px);" data-bg="images/i6.jpg"></div>


    <!-- Container -->
    <div class="container-sm relative zi-10">

        <!-- Row start -->
        <div class="row">

            <!-- Column for title -->
            <div class="col-12 d-flex flex-column align-items-center t-center">

                <div class="fullwidth bg-soft-05 bg-soft-white py-55 px-50 mxw-750 d-flex align-items-center justify-content-center flex-column">


                    @foreach ($label as $item)
                    @if ( $item->code == 'contact-footer')
                    <a href="tel:{{ $item->title }}" class="icon-xxl circle bg-soft-05 bg-soft-white bg-soft-0-hover bg-colored-hover slow dark2">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 418.135 418.135" style="enable-background:new 0 0 418.135 418.135;" xml:space="preserve">
                            <g>
                                <path style="fill:#7AD06D;" d="M198.929,0.242C88.5,5.5,1.356,97.466,1.691,208.02c0.102,33.672,8.231,65.454,22.571,93.536
		L2.245,408.429c-1.191,5.781,4.023,10.843,9.766,9.483l104.723-24.811c26.905,13.402,57.125,21.143,89.108,21.631
		c112.869,1.724,206.982-87.897,210.5-200.724C420.113,93.065,320.295-5.538,198.929,0.242z M323.886,322.197
		c-30.669,30.669-71.446,47.559-114.818,47.559c-25.396,0-49.71-5.698-72.269-16.935l-14.584-7.265l-64.206,15.212l13.515-65.607
		l-7.185-14.07c-11.711-22.935-17.649-47.736-17.649-73.713c0-43.373,16.89-84.149,47.559-114.819
		c30.395-30.395,71.837-47.56,114.822-47.56C252.443,45,293.218,61.89,323.887,92.558c30.669,30.669,47.559,71.445,47.56,114.817
		C371.446,250.361,354.281,291.803,323.886,322.197z" />
                                <path style="fill:#7AD06D;" d="M309.712,252.351l-40.169-11.534c-5.281-1.516-10.968-0.018-14.816,3.903l-9.823,10.008
		c-4.142,4.22-10.427,5.576-15.909,3.358c-19.002-7.69-58.974-43.23-69.182-61.007c-2.945-5.128-2.458-11.539,1.158-16.218
		l8.576-11.095c3.36-4.347,4.069-10.185,1.847-15.21l-16.9-38.223c-4.048-9.155-15.747-11.82-23.39-5.356
		c-11.211,9.482-24.513,23.891-26.13,39.854c-2.851,28.144,9.219,63.622,54.862,106.222c52.73,49.215,94.956,55.717,122.449,49.057
		c15.594-3.777,28.056-18.919,35.921-31.317C323.568,266.34,319.334,255.114,309.712,252.351z" />
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                            <g>
                            </g>
                        </svg>
                    </a>

                    <a href="https://wa.me/{{ $item->title }}">
                        <h1 class="fs-65 medium font-custom white mt-7 colored-hover" data-animation="fadeIn" data-animation-delay="100">
                            {{ $item->title }}
                        </h1>
                    </a>
                    <!-- Header Strip -->
                    <div class="width-70 height-1 my-20 bg-gray4 animated" data-animation="fadeIn" data-animation-delay="100"></div>
                    <!-- Header Description -->
                    <a href="mailto:{{ $item->desc }}" class="font-custom uppercase fs-25 white mt-5 colored-hover slow data-animation=" fadeIn" data-animation-delay="100">
                        {{ $item->desc }}
                    </a>
                    @endif
                    @endforeach

                    <div class="mt-25">

                        <a href="https://www.instagram.com/idi_cabangtangerang/" target="_blank" class="icon-lg circle bg-gray9 bg-facebook-hover white mx-5 slow">
                            <i class="ti-instagram fs-20"></i>
                        </a>

                        <!-- <a href="https://www.facebook.com/gldeyes/" target="_blank" class="icon-lg circle bg-gray9 bg-facebook-hover white mx-5 slow">
                            <i class="ti-facebook fs-20"></i>
                        </a> -->

                        <!-- <a href="https://www.twitter.com/gldeyes/" target="_blank" class="icon-lg circle bg-gray9 bg-twitter-hover white mx-5 slow">
                            <i class="ti-twitter-alt fs-20"></i>
                        </a>

                        <a href="https://www.linkedin.com/company/gold-eyes-studio" target="_blank" class="icon-lg circle bg-gray9 bg-linkedin-hover white mx-5 slow">
                            <i class="ti-linkedin fs-20"></i>
                        </a>

                        <a href="#" target="_blank" class="icon-lg circle bg-gray9 bg-youtube-hover white mx-5 slow">
                            <i class="ti-youtube fs-20"></i>
                        </a> -->

                    </div>


                </div>

            </div>
            <!-- End column for title -->


        </div>
        <!-- Row end -->

    </div>
    <!-- End container for slider -->

</section>
<!-- End address section -->






<!-- Container for template -->
<div id="hotspots_on_map" class="hotspots fullwidth">
    <!-- Your map image -->
    @foreach ($label as $item)
    @if ( $item->code == 'maps')
    <a href="{{ $item->title }}" target="_blank" class="d-block fullwidth c-plus">
        <!-- You can select your position with same map: https://snazzymaps.com/style/38/shades-of-grey -->
        <img src="{{asset('assets/images/map_loader.svg')}}" data-src="{{asset('assets/images/map_01.jpg')}}" alt="map image template" class="visible-lg fullwidth">
    </a>
    <!-- Items -->
    <div class="items pointer-events-none">
        <!-- Item -->
        <div style="right:41.2%; bottom:43.8%;" class="item animated fast" data-animation="blurIn" data-animation-delay="100">
            <div class="c-pointer pointer-events-all" data-bs-toggle="popover" data-bs-trigger="click" data-bs-placement="top" data-bs-html="true" data-show="true" title="<h4 class='fs-19'>Kantor IDI Tangerang</h4>" data-bs-content="<p class='mt-10 lh-25 fs-15'>{{ $item->desc }}</p>">
                <img src="{{asset('assets/images/pin_01.svg')}}" alt="pin design on map image">
            </div>
        </div>
    </div>
    <!-- End items -->
    @endif
    @endforeach
</div>
<!-- End container for template -->


@endsection