@push("style")
<style>
    .service{
        background:url('/assets/b2c_img/home_bimg.png');
        background-attachment: fixed;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
        padding:50px 0px;
        position: relative;
    }
    .service::before{
        content:"";
        inset:0;
        position: absolute;
        background:rgba(0,0,0,0.5);
    }
    .service ul li{
        list-style:none;
        padding: 15px 0px;
        margin:10px;
    }
    @media screen and (max-width:400px){
        .service h1{
            line-height:1.7;
        }
    }
</style>
@endpush 
<div class="service" data-aos="fade-up" data-aos-delay="200">
    <div class="container text-center" style='position: relative'>
        <div class="content"></div>
        @php
            $title = json_decode($home_overview['title'] ?? '');
            $description = json_decode($home_overview['description'] ?? '');
        @endphp
       <h1 class="text-center text-lg font-bold mb-5">{{ $title[0] ?? ''}} <span class="text-primary title_style">{{ $title[1] ?? ''}}</span></h1>
       <ul class="dt-bg dt-p-w pt-5 pb-5 bg-white text-start container">
        
        <!-- <li class="row" data-aos="fade-right">
            <svg class="me-2 col-lg-1 col-sm-5" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="var(--color-secondary)">
                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>
            </svg>
            <p class="col-lg-10 col-sm-5">
            {{ $description[0] ?? '' }}
            </p>
        </li>
        <li class="row" data-aos="fade-right" data-aos-delay="100">
            <svg class="dt-p-w me-2 col-lg-1 col-sm-5" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="var(--color-secondary)">
                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>
            </svg>
            <p class="col-lg-10 col-sm-5">
            {{ $description[1] ?? '' }}
            </p>
        </li>
        <li class="row" data-aos="fade-right" data-aos-delay="200">
            <svg class="me-2 col-lg-1 col-sm-5" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="var(--color-secondary)">
                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>
            </svg>
            <p class="col-lg-10 col-sm-5">
            {{ $description[2] ?? '' }}
            </p>
        </li>
        <li class="row" data-aos="fade-right" data-aos-delay="250">
            <svg class="me-2 col-lg-1 col-sm-5" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="var(--color-secondary)">
                <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>
            </svg>
            <p class="col-lg-10 col-sm-5">
            {{ $description[3] ?? '' }}
            </p>
        </li> -->
        <div class="p-5">
        @if(!empty($description))
            @foreach(array_filter($description) as $item)
            <!-- <li class="d-flex row" data-aos="fade-right" data-aos-delay="250">
                <svg class="me-2 col-1" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 512 512" fill="var(--color-secondary)">
                    <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>
                </svg>
                {!! $item !!}
            </li> -->
            {!! $item !!}
            @endforeach
        @endif
        </div>
       </ul>
    </div>
</div>