@extends('client.topCargo.layouts.layout')

@section('title','Our Team')

@section('content')

<style>
    .team-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /* Adjust as needed */
    }

    .team-member {
        flex: 0 0 23%;
        /* Adjust the width of each item */
        margin-bottom: 20px;
        /* Add some space between items */
    }
</style>

<!--Page Header-->
<div class="page-header title-area">
    <div class="header-title">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1 class="page-title">Our Team</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-12 col-xs-12 site-breadcrumb">
                    <nav class="breadcrumb">
                        <a class="home" href="{{ route('home') }}"><span>Home</span></a>
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                        <span>Our Team</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Page Header end-->

<!--About us-->

<!--About us end-->

<!-- Feature sec -->

<!-- Feature sec end -->

<!-- featured sec -->
<!-- featured sec end -->

<!--Our Team section-->
<section class="hometeam-1.secpadd graybg">
    <div class="container">
        <div class="fh-section-title clearfix f30 text-left version-dark">
            <h2>Meet Our Team</h2>
        </div>
        <div class="fh-team">
            <div class="team-list">
                @forelse ($teams as $team)
                    <div class="team-member">
                        <div class="team-header">
                            <img src="{{asset($team->thumb)}}" class="attachment-full" alt="Profile Picture" />
                        </div>
                        <div class="team-info">
                            <h4 class="name">{{ $team->title }}</h4>
                            <span class="job">{{ $team->designation }}</span>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
</section>
<!--Our Team section end-->


@endsection