@extends('layouts.app')

@section('content')

<style>
    @media (max-width: 992px) {
        .site-header .main-menu>ul>li a {
            font-size: 17px;
        }
    }
    .site-content {
        padding: 0;
    }
    .heading-title{
    }
</style>
<div class="site-content ">
    <div class="section-banner ratio" style="--bs-aspect-ratio: 30%; position: relative;">
        <img src="{{ Storage::disk('s3')->url('website/gallery-04.jpg') }}" alt="Team" class="full-w" style="position: absolute; width: 100%; height: 100%; object-fit: cover;">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);"></div>
     <div class="container d-flex align-items-center " style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        <div class="col-lg-6">
            <div class="heading heading-alway-white wow animate__fadeInLeft">
                <h2 class="heading-title size-xl">Accountants</h2>
                <p style="color: white; font-size: 16px; font-weight: 100;">Track expenses, customise invoices, run reports <br> and even more all from one place.
                </p>
            </div>
        </div>
    </div>
    </div>

    <section class="section-team section has-icon icon-bottom-left spdtb">
        <div class="container">
            <div class="heading align-center">
                <h2 class="heading-title">Meet Our Accountants</h2>
                <p>A creative agency like no other</p>
            </div>
            <div class="block-team layout-01">
                <div class="row">
                    @if($accountants->count() > 0)
                    @foreach($accountants as $accountant)
                    <div class="col-lg-4">
                        <div class="member-box align-center">
                            <div class="inner">
                                <div class="member-avatar">
                                    <div class="avatar-inner">
                                        <img src="{{ Storage::disk('s3')->url('avatar/'.$accountant->avatar) }}" alt="Member">
                                        <img src="{{ Storage::disk('s3')->url('website/stick-01.png') }}" alt="Stick"
                                            class="stick stick-top-right">
                                    </div>
                                </div>
                                <div class="member-content">
                                    <h4 class="name">{{ $accountant->first_name }} {{ $accountant->last_name }}</h4>
                                    <div class="position">Accountant</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
        <img class="icon" src="{{ Storage::disk('s3')->url('website/asc6.png') }}" alt="Image">
    </section>
</div>

@endsection