@extends('User.layouts.layout')
@section('contents')
<style>

.Service{
  min-height: 230px;;
}

.services_flip_card {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.services_flip_card_inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.services_flip_card:hover .services_flip_card_inner {
    transform: rotateY(180deg);
}

.services_flip_card_front, .services_flip_card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}



.services_flip_card_back {
    border-radius: 3%;
    background-color: #000;
    transform: rotateY(180deg);
}
.services_flip_card_back .txt_desc{
    color: #fff;
}

</style>
<div class="container Services my-5">
    <div class="title">
        <h2 class="pb-3" >{{ trans('messages.Services') }}</h2>
    </div>
    
    <div class="row my-5">
        @foreach(\App\Models\Service::orderBy('position')->get() as $Service)
            <div class="col-6 col-md-4 col-lg-3 my-5 Service">
               <div class="services_flip_card">
                  <div class="services_flip_card_inner">
                     <div class="services_flip_card_front">
                        <a style="text-decoration: none; color: black; cursor: pointer;" href="{{route('user.serviceDetails',['title' => $Service->title_en, 'lang' => app()->getLocale()])}}">
                            <div class="item_serv shadow transition-me point ">
                                <div class="out_img second_bg">
                                    <img loading="lazy" width="200px" height="200px" src="{{ asset($Service['image']) }}" class="img-fluid" alt="{{ $Service->title() }}">
                                </div>
                                <div class="txt_desc">
                                    <span>{{ $Service->title() }}</span>
                                </div>
                            </div>
                        </a>
                     </div>
                     <div class="services_flip_card_back">
                        <a style="text-decoration: none; color: black; cursor: pointer;" href="{{route('user.serviceDetails',['title' => $Service->title_en, 'lang' => app()->getLocale()])}}">
                            <div class="item_serv shadow transition-me point ">
                                <div class="out_img second_bg">
                                    <img loading="lazy" width="200px" height="200px" src="{{ asset($Service['image']) }}" class="img-fluid" alt="{{ $Service->title() }}">
                                </div>
                                <div class="txt_desc">
                                    <span>{{ $Service->title() }}</span>
                                </div>
                            </div>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
        @endforeach
    </div>
</div>
    


@endsection