@extends('layouts.app')

@push('header')
    <!-- Header Start -->
    <div class="container-fluid position-relative bg-breadcrumb">
        <div class="overlay-gradient position-absolute w-100 h-100"
            style="background: rgba(0, 0, 0, 0.6); top: 0; left: 0; z-index: 1;"></div>
        <div class="container text-center py-5 position-relative" style="max-width: 900px; z-index: 2;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s"
                style="font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 2px;">
                How Do We Help?
            </h4>
            <p class="text-white wow fadeInUp" data-wow-delay="0.3s"
                style="font-size: 18px; max-width: 800px; margin: 0 auto;">
                We provide cutting-edge solutions to help your business thrive in the digital age.
            </p>
        </div>
    </div>
    <!-- Header End -->
@endpush

@section('content')
    <section id="particles-js">
        <!-- Service Start -->
        <div class="container-fluid py-5 bg-light">
            <div class="container py-5">
                <div class="text-center mb-5">
                    <p class="lead text-muted">"Empowering businesses with innovative strategies <br>and cutting-edge
                        technologies."</p>
                </div>

                <div id ="konsul"></div>
                <div id="content-aboutus" class="row mb-5 align-items-center">
                    <div class="col-md-6 mb-4">
                        <div class="position-relative overflow-hidden shadow-sm rounded">
                            <img src="{{ asset('asset/img/Consulting.webp') }}" class="img-fluid rounded" alt="Consulting"
                                loading="lazy">
                            <div
                                class="position-absolute top-0 left-0 w-100 h-100 d-flex align-items-center justify-content-center bg-overlay">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h2 class="display-6 fw-bold text-primary mb-3">{{ $data[0]->name }}</h2>
                        <ul class="list-unstyled">
                            @forelse ($data[0]->detail as $v)
                                <li><i class="fas fa-check-circle text-primary px-2"></i>{{ $v->name }}</li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>

                <div id ="digi"></div>
                <!-- Digitalization Section -->
                <div id="content-aboutus" class="row mb-5 align-items-center">
                    <div class="col-md-6 order-md-2 mb-4">
                        <div class="position-relative overflow-hidden shadow-sm rounded">
                            <img src="{{ asset('asset/img/Digitalization.webp') }}" class="img-fluid rounded"
                                alt="Digitalization" loading="lazy">
                            <div
                                class="position-absolute top-0 left-0 w-100 h-100 d-flex align-items-center justify-content-center bg-overlay">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 order-md-1">
                        <h2 class="display-6 fw-bold text-primary mb-3">{{ $data[1]->name }}</h2>
                        <ul class="list-unstyled">
                            @forelse ($data[1]->detail as $v)
                                <li><i class="fas fa-check-circle text-primary px-2"></i>{{ $v->name }}</li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>

                <div id ="learn"></div>
                <!-- Learning Center Section -->
                <div id="content-aboutus" class="row mb-5 align-items-center">
                    <div class="col-md-6 mb-4">
                        <div class="position-relative overflow-hidden shadow-sm rounded">
                            <img src="{{ asset('asset/img/Learning.webp') }}" class="img-fluid rounded"
                                alt="Learning Center" loading="lazy">
                            <div
                                class="position-absolute top-0 left-0 w-100 h-100 d-flex align-items-center justify-content-center bg-overlay">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h2 class="display-6 fw-bold text-primary mb-3">{{ $data[2]->name }}</h2>
                        <ul class="list-unstyled">
                            @forelse ($data[2]->detail as $v)
                                <li><i class="fas fa-check-circle text-primary px-2"></i>{{ $v->name }}</li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>

                <div id ="research"></div>
                <!-- Research Center Section -->
                <div id="content-aboutus" class="row mb-5 align-items-center">
                    <div class="col-md-6 order-md-2 mb-4">
                        <div class="position-relative overflow-hidden shadow-sm rounded">
                            <img src="{{ asset('asset/img/Research.webp') }}" class="img-fluid rounded"
                                alt="Research Center" loading="lazy">
                            <div
                                class="position-absolute top-0 left-0 w-100 h-100 d-flex align-items-center justify-content-center bg-overlay">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 order-md-1">
                        <h2 class="display-6 fw-bold text-primary mb-3">{{ $data[3]->name }}</h2>
                        <ul class="list-unstyled">
                            @forelse ($data[3]->detail as $v)
                                <li><i class="fas fa-check-circle text-primary px-2"></i>{{ $v->name }}</li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>

                <div id ="compe"></div>
                <!-- Competition & Awards Section -->
                <div id="content-aboutus" class="row mb-5 align-items-center">
                    <div class="col-md-6 mb-4">
                        <div class="position-relative overflow-hidden shadow-sm rounded">
                            <img src="{{ asset('asset/img/Competitions.webp') }}" class="img-fluid rounded"
                                alt="Competitions & Awards" loading="lazy">
                            <div
                                class="position-absolute top-0 left-0 w-100 h-100 d-flex align-items-center justify-content-center bg-overlay">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h2 class="display-6 fw-bold text-primary mb-3">{{ $data[4]->name }}</h2>
                        <ul class="list-unstyled">
                            @forelse ($data[4]->detail as $v)
                                <li><i class="fas fa-check-circle text-primary px-2"></i>{{ $v->name }}</li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Service End -->
@endsection

@push('script')
    <script src="{{ asset('asset/js/particles.js') }}"></script>
    <script src="{{ asset('asset/js/particles-config.js') }}"></script>
@endpush