@extends('client.aarav.partials.layout')
@section('header')
<title>Demand Countries - {{env("APP_NAME")}}</title>
@endsection

@section('content')


<section class="banner-background d-flex align-items-center text-center">
    <div class="container position-relative" uk-scrollspy="cls: uk-animation-slide-top-medium; repeat: true">
        <div class="square" style="left:0%; z-index:2;"></div>
        <p class="text-light">Home / Demand Countries</p>
        <p class="medium-text text-light">Countries on Demand</p>
    </div>
</section>

<section class="clients section-padding custom-background position-relative">
    <div class="vstack gap-5" uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 300;  repeat: true">
        <div class="container">
            <p class="fw-bold"></p>
            <div class="thumb"></div>
            <p class="fs-4 custom-text">List of countries having Job Demands</p>
            <div class="vstack gap-5 pt-3">
                <div class="row g-5 text-center">
                    @foreach(MPCMS::getCountries() as $country)
                    <div class="col-md-4">
                        <a href="country/{{$country->alias}}">
                                <img class="img-fluid custom-img-job" src="{{$country->image_thumb}}" alt="flag">
                        </a>
                        <p class="custom-text2 mt-3">{{$country->title}}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection