@extends('layouts.base')

@section('content')
    <div class="fluid-container h-100">
        <div class="row h-100">
            <div class="col bg-primary-light no-padding d-none d-md-block" style=" background-image: url({{asset('images/shipping_bg.jpeg')}}); background-size: cover; background-blend-mode: multiply; ">
                <div class="row h-100 m-auto text-right">
                    <div class="col-3"></div>
                    <div class="col d-flex align-items-end flex-column">
                        <div class="row">
                            <div class="col-auto p-l-0 p-r-0 ml-auto" style="background-color: rgba(255, 255, 255, 0.2);">
                                <div class="text-white font-lato lightest animated fadeInDownBig" style="font-size: 150px;font-weight: 100;margin-right: -7px;margin-left: -183px;">CIEF</div>
                                <div class="text-white font-lato lightest animated fadeInDownBig all-caps" style="font-size: 15px;font-weight: 100;margin-right: 7px;margin-left: 5px;margin-top: -48px;margin-bottom: 3px;">Powered By IZYIM</div>
                            </div>
                        </div>
                        <div class="row mt-auto animated fadeInUpBig slow">
                            <div class="col all-caps p-r-50">
                                <h3 class="text-white font-lato lightest" style=" line-height: 50px; letter-spacing: 5px; ">Logistic's tough.<br> Luckily you've just<br> found your wingman.</h3>
                            </div>
                        </div>
                        <div class="row mt-auto text-white m-b-25 animated fadeInLeftBig">
                            <div class="col font-lato p-r-50">
                                <div class="row">
                                    <div class="col">
                                        <p class="all-caps fs-10 light m-b-5" style=" letter-spacing: 3px; ">Browser Recommendations:</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <p class="light all-caps no-margin fs-8 lh-18" style="letter-spacing: 3px;">To use IZYIM portal, we presently require<br>Microsoft Internet Explorer 7.x or higher</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col bg-master-lightest no-padding h-100">
                <div class="row h-100">
                    <div class="col h-100" style="padding-bottom: 120px;">
                        <div class="page-container">
                            <div class="page-content-wrapper">
                                <div class="content p-t-0 overflow-hidden">
                                    @yield('inner_content')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row m-l-0 m-r-0 w-100 p-b-25 p-t-15 animated fadeInRightBig bg-master-lightest absolute" style="bottom: 0;">
                    <div class="col font-lato p-l-50">
                        <div class="row">
                            <div class="col">
                                <p class="all-caps fs-10 m-b-5" style="letter-spacing: 2px;">Support:</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="all-caps no-margin fs-8 lh-18" style="letter-spacing: 2px;">To obtain access to this site or for any questions about its<br>Please contact our customer service: <span class="text-success">011-5648 9252 / 018-290 9252</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection