@extends('layouts.app')

@section('content')
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">Our Services</h4>
            <ol class="breadcrumb d-flex justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Pages</a></li>
                <li class="breadcrumb-item active text-primary">Service</li>
            </ol>
        </div>
    </div>
    <!-- Header End -->

<br>
<br>
<br>
    <!-- Blog Start -->
    <div class="container-fluid blog py-5"
        style="background: rgba(0, 0, 255, 0.3) url('{{ asset('img/serv.jpg') }}') no-repeat center center; background-size: cover;">
        <div class="container py-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 style="color:white;">Our services</h4>
                <h1 class="display-4 mb-4" style="color:white;">What we do</h1>
            </div>

            <!-- Row 1 -->
            <div class="row g-4 justify-content-center" style="display: flex; flex-wrap: wrap;">
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s6.jpg') }}" class="img-fluid" alt="River Sand Production">
                        </div>
                        <br><br>
                        <div class="p-4 text-center">
                            <h3 style="color:white;">OIL AND GAS MARKET</h3>
                            <a href="{{ route('oil') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s1.jpg') }}" class="img-fluid" alt="Green Power Energy">
                        </div>
                        <br>
                        <div class="p-4 text-center">
                            <h3 style="color:white;">AGRO INDUSTRIE & PRODUCTS</h3>
                            <a href="{{ route('agro') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s2.jpg') }}" class="img-fluid"
                                alt="Maritimes Logistics Chartering/Sale & Purchase">
                        </div>
                        <div class="p-4 text-center">
                            <h4 style="color:white;">MARITIMES LOGISTICS CHARTERING/ SALE & PURCHASE</h4>
                            <a href="{{ route('shipping') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
            <br>

            <!-- Row 2 -->
            <div class="row g-4 justify-content-center" style="display: flex; flex-wrap: wrap;">
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s3.jpg') }}" class="img-fluid" alt="Eco Tourisme">
                        </div>
                        <div class="p-4 text-center">
                            <h3 style="color:white;">ECO TOURISME</h3>
                            <a href="{{ route('eco') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s4.jpg') }}" class="img-fluid" alt="Renewable Energy Solutions">
                        </div>
                        <div class="p-4 text-center">
                            <h3 style="color:white;">GREEN POWER ENERGY</h3>
                            <a href="{{ route('green') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="blog-item"
                        style="background-color: #034EA2; border-radius: 10px; padding: 20px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div class="blog-img">
                            <img src="{{ asset('img/s5.jpg') }}" class="img-fluid" alt="Sustainable Development">
                        </div>
                        <div class="p-4 text-center">
                            <h4 style="color:white;">RIVER SAND PRODUCTION</h4>
                            <a href="{{ route('river') }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
    .blog-img img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    </style>
    
<br>
<br>
<br>
@endsection