@extends('layout.master')
@section('meta_title',$service->meta_title)     
@section('meta_description',$service->meta_description)
@section('image',$service->getFirstMediaUrl('services'))
@section('content')
    <section>
      <div class="w-full h-[25vh] lg:h-[50vh] relative">
        <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
          <div class="text-white   text-center w-1/2">
            <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold">{{$service->title}}</h2>
          </div>
        </div>
        <div class="w-full h-full">
          <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
        </div>
      </div>


       {{-- content section --}}
       <div class="py-20 lg:px-20 px-5 !bg-no-repeat !bg-cover bg-center bg-blue-50">
        <div class="grid lg:grid-cols-2 gap-10 text-pwhite">
            <div>
              <div>
                <h2 class="text-2xl font-bold underline">{{$service->title}}</h2>
              </div>
                <p class="mt-5 text-justify text-lg font-semibold text-gray-700">
                  {!!$service->description!!}
                </p>
                
            </div>
            <div class="rounded-bl-[100px] rounded-tr-[100px] overflow-hidden">
                <img class="w-full h-full object-cover object-center" src="{{$service->getFirstMediaUrl('services')}}" alt="">
            </div>
        </div>
        
      </div>
      {{--end of content section --}}
    </section>
@endsection