@section('meta')
<title>{{__('message.creative design')}}</title>
    <meta property="og:title" content="{{__('message.creative design')}}" />
    <meta property="og:description" content="{{__('message.creative desc')}}" />
    <meta name="twitter:title" content="{{__('message.creative design')}}" />
    <meta name="twitter:description" content="{{__('message.creative desc')}}" />
@endsection

@push('header')
    <x-header />
@endpush

<div class="main-content">
    <section class="career creative-bg">
        <div class="bg-rgba d-flex justify-content-center align-items-center w-100 h-100">
            <div class="p-3 rounded car-desc">
                <h1 class="text-center fw-bolder text-uppercase text-warning font-title" data-aos="zoom-in">
                    {{ __('message.creative design') }}</h1>
                <p class="text-white text-center" data-aos="zoom-in">{{__('message.creative desc')}}</p>
            </div>
        </div>
    </section>

    <section class="py-50">
        <div class="container">
            <h1 class="text-warning font-title text-center text-uppercase fw-bold" data-aos="zoom-in"><i
                    class='bx bx-bar-chart-alt-2'></i>{{__('message.our graphic design process')}}<i class='bx bx-bar-chart-alt-2'></i>
            </h1>
            <p class="text-center text-capitalize" data-aos="zoom-in">{{__('message.our graphic design process desc')}}</p>

            <div class="row m-0">
                <div class="px-1 my-1 col-md-4 col-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/logo.png') }}" class="card-img-top rounded-0" alt="logo">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.banner')}}</h6>
                            <small class="card-text">{{__('message.banner desc')}}</small>
                        </div>
                    </div>
                </div>
                <div class="px-1 my-1 col-md-4 col-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/poster.jpg') }}" class="card-img-top rounded-0" alt="poster">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.poster')}}</h6>
                            <small class="card-text">{{__('message.poster desc')}}</small>
                        </div>
                    </div>
                </div>
                <div class="px-1 my-1 col-md-4 col-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/menu-leaflet.jpg') }}" class="card-img-top rounded-0" alt="menu-leaflet">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.flyer')}}</h6>
                            <small class="card-text">{{__('message.flyer desc')}}</small>
                        </div>
                    </div>
                </div>
                
                <div class="px-1 my-1 col-md-4 col-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/flyer.jpg') }}" class="card-img-top rounded-0" alt="flyer">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.x-stand')}}</h6>
                            <small class="card-text">{{__('message.x-stand desc')}}</small>
                        </div>
                    </div>
                </div>

                <div class="px-1 my-1 col-md-4 col-lg-3 offset-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/x-stand.jpg') }}" class="card-img-top rounded-0" alt="x-stand">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.stationary design')}}</h6>
                            <small class="card-text">{{__('message.stationary design desc')}}</small>
                        </div>
                    </div>
                </div>
                <div class="px-1 my-1 col-md-4 col-lg-3" data-aos="zoom-in">
                    <div class="card bg-switch border-0 rounded-0">
                        <img src="{{ asset('img/creative/stationary.jpg') }}" class="card-img-top rounded-0" alt="stationary">
                        <div class="card-body p-2">
                            <h6 class="card-title position-relative after-border">{{__('message.menu')}}</h6>
                            <small class="card-text">{{__('message.menu desc')}}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>