@extends('site.layout.app')
@section('keywords')
<meta name="description" content="{!!$serviceConfig->meta_description!!}">
@endsection
@section('style')
<link rel="stylesheet" type="text/css" href="/css/service.css">
@endsection
@section('content')
<section id="service">
    <div class="container">
        <div class=" text-spacing">
            <div class="">
                <div class="col-lg-12 text-center ">
                    <h3 class="font-color-blue">{{$mainConfig['fieldJson']['service-title']}}</h3>
                    <div class="row-div"></div>
                    <h6 class="font-color-gray">{{$mainConfig['fieldJson']['service-content']}}</h6>
                </div>
                <!-- ./col -->
            </div>
        </div>
        <!--   ./row -->
        <div class="row design " id="service-first-row">
            <div class="col-sm-5 col-md-5 ">
                <div class="design-detail ">
                    <img class="img-responsive  service-img" src="{{$serviceConfig['fieldJson']['service-img1']}}"
                         >
                </div>
            </div>
            <!--/.col-->
            <div class="col-sm-7 col-md-7 bq-detail">
                <h4 class="img-title">{{$serviceConfig['fieldJson']['first-img-title']}}</h4>
                <h5 class="font-h5">{{$serviceConfig['fieldJson']['first-img-subtitle']}}</h5>
                <h5 class="service-content">{{$serviceConfig['fieldJson']['first-img-content']}}
                </h5>
            </div>
            <!--/.col-->
        </div>
        <!--/.row-->
        <div class="col-sm-7 col-md-7 bq-detail">
            <h4 class="img-title">{{$serviceConfig['fieldJson']['second-img-title']}}</h4>
            <h5 class="font-h5">{{$serviceConfig['fieldJson']['second-img-subtitle']}}</h5>
            <h5 class="service-content">{{$serviceConfig['fieldJson']['second-img-content']}}
            </h5>
        </div>
        <!--/.col-->
        <div class="row design">
            <div class="col-sm-5 col-md-5">
                <div class="design-detail ">
                    <img class="img-responsive service-img" src="{{$serviceConfig['fieldJson']['service-img2']}}" alt=""
                        id="service-img" >
                </div>
            </div>
            <!--/.col-->
        </div>
        <!--/.row-->
        <div class="row design" id="service-first-row">
            <div class="col-sm-5 col-md-5">
                <div class="design-detail ">
                    <img class="img-responsive service-img" src="{{$serviceConfig['fieldJson']['service-img3']}}" alt=""
                         >
                </div>
            </div>
            <!--/.col-->
            <div class="col-sm-7 col-md-7 bq-detail">
                <h4 class="img-title">{{$serviceConfig['fieldJson']['third-img-title']}}</h4>
                <h5 class="font-color-blue font-h5">{{$serviceConfig['fieldJson']['third-img-subtitle']}}</h5>
                <h5 class="service-content">{{$serviceConfig['fieldJson']['third-img-content']}}
                </h5>
            </div>
            <!--/.col-->
        </div>
        <!--/.row-->
        <div class="col-lg-12 col-md-12 col-xs-12 text-center">
            <a href="/zh-hk/connection">
                <button  class="btn btn-default btn-lg " id="made-button">
                    {{$mainConfig['fieldJson']['made-button']}}
                </button>
            </a>
        </div>
    </div>
    </div>
</section>
@endsection