@extends('frontend.layouts.master')

@section('meta_title', $seo_setting['service_page']['seo_title'])
@section('meta_description', $seo_setting['service_page']['seo_description'])

@section('header')
    @include('frontend.layouts.header-layout.three')
@endsection

@section('contents') 
<!-- Breadcumb Area -->
<section id="hero" class="hero section dark-background">
  <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-item active"> <img src="{{ $setting?->service_page_breadcrumb_image }}" alt="">
      <div class="carousel-container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb text-white">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active  text-white" aria-current="page">{{ __('Services') }}</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">{{ __('Services') }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="" class="open-peronalacc">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="text-center  border-bottom mb-5 pb-4" data-aos="fade-left" data-aos-delay="200">
          {!! replaceImageSources($servicetext?->description) !!}
        </div>
      </div>
    </div>
  </div>
</section>


<section id="teller-services" class="open-peronalacc" style="background: #EFEFFB;">
  <div class="container card container-sm p-5 border-0" id="teller">
    <div class="row gx-5" >
      <div class="col-12">
        <div class="wrap-box mb-4 text-center px-lg-5" data-aos="fade-up" data-aos-delay="350">
          <h4  class="fw-bold">{{ $teller->translation->title }}</h4>
          <p class="px-lg-5">{{ $teller->translation->short_description }}</p>
        </div>
      </div>
      {!! replaceImageSources($teller?->description) !!}
    </div>
  </div>
</section>
<section id="dds" class="open-peronalacc paraimg">
  <div class="container  card bg-smligh container-sm p-5 border-0  align-items-center">
    <div class="row gx-5 align-items-center">
      <div class="col-12 text-center" data-aos="fade-left" data-aos-delay="350">
        <div class="wrap-box mb-4">
          <h4 id="dds"  class="fw-bold">{{ $dds->translation->title }}</h4>
          <p>{{ $dds->translation->short_description }}</p>
        </div>
      </div>
      {!! replaceImageSources($dds?->description) !!}
      <div class="col-md-6 text-md-end"  data-aos="fade-right" data-aos-delay="400">
        <div class="img-wrap"> <img src="{{ $dds->image }}" alt="" class="img-fluid rounded-4"> </div>
      </div>
    </div>
  </div>
</section>
<section id="wps-st" class="open-peronalacc" style="background: #EFEFFB;">
  <div class="container card p-5 border-0  align-items-center">
    {!! replaceImageSources($wps?->description) !!}
  </div>
</section>
<section  id="iccs" class="corporsate-acc">
  <div class="container container-sm">
    <div class="row gx-0 align-items-center">
      <div class="col-12">
        <div class="wrap-box border-bottom mb-5 text-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="350">
          <h4 class="fw-bold py-3">{{ $iccs->translation->title }}</h4>
          <p>{{ $iccs->translation->short_description }}</p>
        </div>
      </div>
    </div>
    <div class="row gx-0 align-items-center">
      <div class="col-md-5 text-md-end my-4 my-md-0">
        <div class="img-wrap aos-init aos-animate" data-aos="fade-up" data-aos-delay="300"> <img src="{{ $iccs->image }}" alt="" class="img-fluid rounded-4"> </div>
      </div>
      {!! replaceImageSources($iccs?->description) !!}
    </div>
  </div>
</section>
<section id="chequebook" class="open-peronalacc paraimg">
  <div class="container container-sm  card bg-smlight p-5 border-0 ">
    <div class="row gx-5">
      <div class="col-12">
        <div id="book-issurance" class="row gx-5 align-items-center">
          <div class="img-wrap mb-3 rt-cor-img"> <img src="{{ $chequebook->image }}" alt="" class="img-fluid rounded-4"> </div>
          <div class="col-md-7"  data-aos="fade-left" data-aos-delay="300">
            <div class="wrap-box mb-4">
              <h5 class="fw-bold" id="chequebook">{{ $chequebook->translation->title }}
</h5>
              <p>{{ $chequebook->translation->short_description }}</p>
            </div>
            {!! replaceImageSources($chequebook?->description) !!}
          </div>
          <div class="col-md-5 text-md-end"  data-aos="fade-right" data-aos-delay="400"> </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="post-dated-cheque" class="corporsate-acc">
  <div class="container container-sm">
    <div class="row gx-0 align-items-center">
      <div class="col-12">
        <div class="wrap-box border-bottom mb-5 text-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="350">
          <h4 class="fw-bold py-3">{{ $postdated->translation->title }}</h4>
          <p>{{ $postdated->translation->short_description }}</p>
        </div>
      </div>
    </div>
    {!! replaceImageSources($postdated?->description) !!}
  </div>
</section>
<section id="fts" class="open-peronalacc px-5">
  <div class="container  card p-5 container-md border-0 bg-smlight">
    <div class="row gx-5 mb-5 align-items-center">
      <div class="col-12">
        <div class="wrap-box mb-4 text-center  mb-5">
          <h4 id="tradefinance" class="fw-bold">{{ $fts->translation->title }}</h4>
          <p>{{ $fts->translation->short_description }}</p>
        </div>
      </div>
      </div>
      {!! replaceImageSources($fts?->description) !!}
  </div>
</section>
<!--  Marquee Area --> 
@include('frontend.partials.marquee')
@endsection
@section('footer')
    @include('frontend.layouts.footer-layout.two')
@endsection