@extends('template.main-emka')

@section('css')
@endsection

@section('content')
<section id="service" class="pos-r o-hidden text-center">
    <div class="bg-animation">
      <img class="zoom-fade" src="{{ asset('soft/images/pattern/03.png') }}" alt="">
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-12 ml-auto mr-auto">
          <div class="section-title">
            <div class="title-effect title-effect-2">
              <div class="ellipse"></div> <i class="la la-cubes"></i>
            </div>
            <h2 class="title">{!! $content->section_feature_big_title !!}</h2>
            <p>{!! $content->section_feature_small_title !!}</p>
          </div>
        </div>
      </div>
      <div class="row">
        @if(!empty($features))
        @php
            $no = 1;
        @endphp
        @foreach($features as $f)
        <div class="col-lg-4 col-md-6  {{ $no <= 3 ? '' : 'mt-5' }}">
          <div class="featured-item style-4">
            <div class="featured-icon">
              <img class="img-center" loading="lazy" style="height: 100px; width:100px;" src="{{ $f->image ? asset('media/' . $f->image) : asset('soft/images/feature/06.png') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($f->image) }}">
            </div>
            <div class="featured-title">
              <h5>{!! $f->title !!}</h5>
            </div>
            <div class="featured-desc">
              <p>{!! $f->description !!}</p>
            </div>
          </div>
        </div>
        @php
            $no++;
        @endphp
        @endforeach
        @endif
      </div>
    </div>
  </section>
@endsection

@section('js')
@endsection