@extends('User.layouts.app')
@section('content')
{{--
<div class="main_header position-relative ltr">
    <div id="sliders" class="carousel slide" data-bs-ride="carousel">
        @if ($sliders && count($sliders) > 1)
            <div class="carousel-indicators" style="bottom: -20px">
                @if(count($sliders->where('country',$countryCode)))
                    @foreach (array_values($sliders->where('country',$countryCode)->toArray()) as $key => $slider)
                        <button type="button" data-bs-target="#sliders" data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $key + 1 }}"></button>
                    @endforeach
                @else
                    @foreach ($sliders->where('country','BH') as $key => $slider)
                        <button type="button" data-bs-target="#sliders" data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $key + 1 }}"></button>
                    @endforeach
                @endif
            </div>
        @endif
        <div class="carousel-inner">
            @if(count($sliders->where('country',$countryCode)))
                @foreach (array_values($sliders->where('country',$countryCode)->toArray()) as $key => $slider)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <div class="disc position-relative">
                            <img src="{{ asset($slider['image']) }}" class="img-fluid" alt="image">
                            <div class="description w-100 mx-auto" style="background: {{ $slider['color'] }};text-align: center;height: 250px !important;">
                                <div class="h-100 d-flex align-items-center">
                                    <div class="row w-100 ">
                                        <div class="col-12">
                                            <h5 class="more_bold text-white">{!! $slider['title_' . lang()] !!}</h5>
                                            <h6 class="more_bold text-white py-2">{!! $slider['desc_' . lang()] !!}</h6>
                                            <span class=" point second_bt px-4 py-2 m-3 rounded mx-auto tiny_font more_bold text-white" 
                                            onclick="window.location.href = '{{ $slider['link']  }}';">{{ trans('messages.contact_us') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                @foreach ($sliders->where('country','BH') as $key => $slider)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <div class="disc position-relative">
                            <img src="{{ asset($slider->image) }}" class="img-fluid" alt="image">
                            <div class="description w-100 mx-auto" style="background: {{ $slider['color'] }};text-align: center;height: 250px !important;">
                                <div class="h-100 d-flex align-items-center">
                                    <div class="row w-100 ">
                                        <div class="col-12">
                                            <h5 class="more_bold text-white">{!! $slider['title_' . lang()] !!}</h5>
                                            <h6 class="more_bold text-white py-2">{!! $slider['desc_' . lang()] !!}</h6>
                                            <span class=" point second_bt px-4 py-2 m-3 rounded mx-auto tiny_font more_bold text-white" 
                                            onclick="window.location.href = '{{ $slider['link']  }}';">{{ trans('messages.contact_us') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        @if ($sliders && count($sliders) > 1)
            <div class="container">
                <button class="carousel-control-prev" type="button" data-bs-target="#sliders" data-bs-slide="prev" style="margin: 0px 10px;">
                    <i class="icon-chevron-left1 main_color h1"></i>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#sliders" data-bs-slide="next" style="margin: 0px 10px;">
                    <i class="icon-chevron-right1 main_color h1"></i>
                </button>
            </div>
        @endif
    </div>

</div> 
--}}
<h1 class="text-center my-3">
    {{ $SEO['home']['title_'.lang()]['value'] }}
</h1>

<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>
@if (isset($Services) && count($Services))
    <div class="services my-5">
        <div class="container">
            <div class="title">
                <h2 class="pb-3" >{{ trans('messages.Services') }}</h2>
            </div>
            <div class="pt-4 text-center">
                {!! $setting['services_desc_'.lang()] !!}
            </div>
            <div class="service">
                <div class="row">              
                    @foreach($Services as $Service)
                        <div class="col-6 col-md-4 col-lg-3 my-0 p-0 Service {{ ($loop->iteration % 3) >= 2 ? 'transform__item_left' : 'transform__item_right' }}">
                           <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() }} front">
                                            </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() }} back">
                                            </div>
                                            <div class="txt_desc">
                                                <span>{{ $Service->title() }}</span>
                                            </div>
                                        </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endif

{{--
@if (count($PortfolioCategories))
    <div class="portfolio my-2">
        <div class="container">
            <div class="title my-4">
                <h2 class="pb-3" >{{ trans('messages.portfolio') }}</h2>
            </div>
            <div class="py-4 text-center">
                {!! $setting['main_portfolio_desc_'.lang()] !!}
            </div>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-all-tab" data-bs-toggle="tab" data-bs-target="#nav-all" type="button" role="tab" aria-controls="nav-all" aria-selected="false">{{ trans('messages.all') }}</button>
                    @foreach ($PortfolioCategories as $Category)
                        @php($CategoryTitle = $Category['title_'.lang()])
                        <button class="nav-link" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ str_replace(' ', '-', $CategoryTitle) }}" type="button" role="tab" aria-controls="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" aria-selected="false">{{ ($Category['title_'.lang()]) }}</button>
                    @endforeach
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane fade show active" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab">
                   <div class="row mt-4">
                        @foreach ($PortfolioCategories as $Category)
                            @foreach ($Category->Projects->take(3) as $Project)
                            @php($title = $Project['title_'.lang()])
                            <div class="col-12 col-lg-4 my-2">
                                <div class="position-relative point shadow rounded overflow-hidden  Portfoliomedia" >
                                    <img onclick="window.location.href = '{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}';" loading="lazy" src="{{ asset($Project['image']) }}" class="img-fluid  w-100"   alt="image">
                                    <div class="in_port transition-me">
                                        <div class="w-100 h-100 d-flex align-items-center justify-content-center">
                                            <div onclick="window.location.href = '{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}';">
                                                <span class="second_color more_bold text-center">{{ ($title) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>
                @foreach ($PortfolioCategories as $Category)
                    @php($CategoryTitle = $Category['title_'.lang()])
                    <div class="tab-pane fade" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" role="tabpanel" aria-labelledby="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab">
                        <div class="row mt-4">
                            @foreach ($Category->Projects->take(18) as $Project)
                                @php($title = $Project['title_'.lang()])
                                <div class="col-12 col-lg-4 my-2">
                                    <div class="position-relative point shadow rounded overflow-hidden  Portfoliomedia" >
                                        <img onclick="window.location.href = '{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}';" loading="lazy" src="{{ asset($Project['image']) }}" class="img-fluid  w-100"   alt="image">
                                        <div class="in_port transition-me">
                                            <div class="w-100 h-100 d-flex align-items-center justify-content-center">
                                                <div onclick="window.location.href = '{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}';">
                                                    <span class="second_color more_bold text-center">{{ ($title) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <form method="GET" action="{{route('user.portfolio', ['lang' => app()->getLocale()])}}">
                <div class="my-3 p-2 d-flex justify-content-center">
                    <button class="main_bt border-0 py-3 px-1 rounded w-50 transition-me main_bold" style="width: 40% !important;">{{ trans('messages.seeMore') }}</button>
                </div>
            </form>
        </div>
    </div>
@endif
--}}

@if (count($Products))
    <div class="services my-5">
        <div class="container">
            <div class="title">
                <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('messages.Products') }}</h2>
            </div>
            <div class="pt-4 text-center">
                {!! $setting['products_desc_'.lang()] !!}
            </div>
            <div class="service">
                <div class="row">
                    @foreach ($Products as $Product)
                    <div class="col-12 col-lg-4 p-0 {{ ($loop->iteration % 4) < 2 ? 'transform__item_left' : 'transform__item_right' }}" onclick="window.open('{{ route('user.product_details',['title' => str_replace(' ', '-', ($Product['title_'.lang()])),'lang' => app()->getLocale()]) }}','_self')">
                        <div class="item_serv shadow transition-me point">
                            <div class=" second_bg">
                                <img loading="lazy" width="400px" height="400px" src="{{ asset($Product['image']) }}" class="img-fluid " alt="{{ $Product['title_'.lang()] }}">
                            </div>
                            <div class="txt_desc">
                                <span>{{ $Product['title_'.lang()] }}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <form method="GET" action="{{route('user.contact', ['lang' => app()->getLocale()])}}">
                <div class="my-3 p-2 d-flex justify-content-center">
                    <button class="main_bt border-0 py-3 px-1 rounded w-50 transition-me main_bold" style="width: 40% !important;">{{ trans('messages.orderNow') }}</button>
                </div>
            </form>
        </div>
    </div>
@endif


@if (count($Main_Clients) && $setting['clients'])
    <div class="portfolio">
        <div class="container">
            <div class="title my-2">
                <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('messages.clients') }}</h2>
            </div>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-allC-tab" data-bs-toggle="tab" data-bs-target="#nav-allC" type="button" role="tab" aria-controls="nav-allC" aria-selected="false">{{ trans('messages.all') }}</button>
                    @foreach ($Main_Clients as $Category)
                        @php($CategoryTitle = $Category['title_'.lang()])
                        <button class="nav-link" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ str_replace(' ', '-', $CategoryTitle) }}" type="button" role="tab" aria-controls="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" aria-selected="false">{{ ($Category['title_'.lang()]) }}</button>
                    @endforeach
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-allC" role="tabpanel" aria-labelledby="nav-allC-tab">
                    @foreach ($Main_Clients->take(5) as $Category)
                        <div class="row">
                            @foreach ($Category->Clients as $Project)
                                @php($title = $Project['title_'.lang()])
                                <div class="col-12 col-lg-4 p-0 my-3">
                                    <div class="position-relative point shadow rounded overflow-hidden " >
                                        <img loading="lazy" src="{{ asset($Project['image']) }}" class="rotate img-fluid  w-100" alt="{{ $title }}">
                                        <div class="in_port transition-me">
                                            <div class="w-100 h-100 d-flex align-items-center">
                                                <div onclick="window.open('{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}','_self')">
                                                    <span class="second_color more_bold tiny_font">{{ ($title) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div>
                @foreach ($Main_Clients->take(5) as $Category)
                    @php($CategoryTitle = $Category['title_'.lang()])
                    <div class="tab-pane fade" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" role="tabpanel" aria-labelledby="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab">
                        <div class="row mt-4">
                            @foreach ($Category->Clients as $Project)
                                @php($title = $Project['title_'.lang()])
                                <div class="col-12 col-lg-4 p-0">
                                    <div class="position-relative point shadow rounded overflow-hidden " >
                                        <img loading="lazy" src="{{ asset($Project['image']) }}" class="rotate img-fluid  w-100" alt="{{ $title }}">
                                        <div class="in_port transition-me">
                                            <div class="w-100 h-100 d-flex align-items-center">
                                                <div onclick="window.open('{{ route('user.project_details',['title' => str_replace(' ', '-', ($title)),'lang' => app()->getLocale()]) }}','_self')">
                                                    <span class="second_color more_bold tiny_font">{{ ($title) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif



{{--
@if (count($PackageCategories))
    <div class="package">
        <div class="container">
            <div class="title my-5">
                <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('messages.Packages') }}</h2>
            </div>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    @foreach ($PackageCategories as $Category)
                        @php($CategoryTitle = $Category['title_'.lang()])
                        <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ str_replace(' ', '-', $CategoryTitle) }}" type="button" role="tab" aria-controls="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" aria-selected="false">{{ ($Category['title_'.lang()]) }}</button>
                    @endforeach
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                @foreach ($PackageCategories as $Category)
                    @php($CategoryTitle = $Category['title_'.lang()])
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="nav-{{ str_replace(' ', '-', $CategoryTitle) }}" role="tabpanel" aria-labelledby="nav-{{ str_replace(' ', '-', $CategoryTitle) }}-tab">
                        <div class="row mt-4">
                            @foreach ($Category->Packages as $Package)
                            <div class="col-12 col-md col-lg p-0">
                                <div class="package in_package rounded my-4">
                                    <div class="head py-4 d-flex align-items-center justify-content-center">
                                        <div class="in_head" style="background-color: {{$Package->color}};">
                                            <h5 class="text-center">{{ ($Package['title_'.lang()]) }}</h5>
                                        </div>
                                    </div>
        
                                    <div class="body">
                                        @if($Category->id != 4)
                                        @php($selected_Descriptions = $Package->Descriptions->pluck('id')->toarray())
                                        
                                        @foreach ($Category->PackageDesc as $Detail)
                                        <div class="d-flex align-items-center ">
                                            <div class="row w-100">
                                                <div class="col-12 third_color" style="font-weight: bold !important">
                                                    - {{ ($Detail['title_'.lang()]) }}
                                                </div>
                                                <div class="col-12 tiny_font mx-3">
                                                    @if(in_array($Detail['id'] ,$selected_Descriptions ))
                                                        @if($Package->Descriptions->where('id',$Detail->id)->first()->pivot['desc_'.lang()])
                                                            {{ $Package->Descriptions->where('id',$Detail->id)->first()->pivot['desc_'.lang()] }}
                                                        @else
                                                            <i class="fa-solid fa-circle-check text-success h6" aria-hidden="true"></i>
                                                        @endif
                                                    @else
                                                        <i class="fa-solid fa-circle-xmark text-danger h6" aria-hidden="true"></i>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                        @endforeach
                                        @else
                                        @foreach ($Package->Descriptions as $Detail)
                                        <div class="d-flex align-items-center my-2">
                                            - {{ ($Detail['title_'.lang()]) }}
                                        </div>
                                        <br>
                                        @endforeach
                                        @endif
                                    </div>
                                    <div class="foot py-4">
                                        <div class="in_footer py-3 h-100">
                                            <div class=" text-center">
                                                @if($Category->id != 4)
                                                <h5 class="mb-0 py-2">{{ $Package['countryPrice'] }} {{ $Package->PriceText ?  ($Package->PriceText['title_'.lang()]) : '' }}</h6>
                                                    @else
                                                    <h5 class="mb-0 py-2">{{ $Package->PriceText ?  ($Package->PriceText['title_'.lang()]) : '' }} {{ $Package['countryPrice'] }} BD</h6>
                                                        @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <form method="GET" action="{{route('user.contact', ['lang' => app()->getLocale()])}}">
                <div class="my-3 p-2 d-flex justify-content-center">
                    <button class="main_bt border-0 py-3 px-1 rounded w-50 transition-me main_bold" style="width: 40% !important;">{{ trans('messages.orderNow') }}</button>
                </div>
            </form>
        </div>
    </div>
@endif
--}}

@if (count($Testimonials) && $setting['testimonials'])
    <div class="testimonial position-relative">
        <div class="in_testimoial">
            <div class="container">
                <div class="title my-5">
                    <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('website.testimonials') }}</h2>
                </div>
                <div class="position-relative">
                    <div id="carouselExampleControls_test" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach ($Testimonials as $Testimonial)
                            <div class="carousel-item {{ $loop->first ? 'active' : '' }} mt-5 pt-5">
                                <div class="d-flex justify-content-center align-items-center">
                                    <div class="our_testimonial position-relative rounded">
                                        <div class="in_test_img">
                                            <img loading="lazy" src="{{ $Testimonial['image'] }}" class="img-fluid " alt="{{ $Testimonial['title_'.lang()] }}">
                                        </div>
                                        <div class="my-4 py-4"></div>
                                        <div class="text-center">
                                            <h3 class="bold_font">{{ ($Testimonial['title_'.lang()]) }}</h3>
                                            <p class="tiny_font">{!! $Testimonial['desc_'.lang()] !!}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @if (count($Testimonials) > 1)
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls_test" data-bs-slide="prev">
                            <div class="to_left_and_right">
                                <i class="icon-angle-left"></i>
                            </div>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls_test" data-bs-slide="next">
                            <div class="to_left_and_right">
                                <i class="icon-angle-right"></i>
                            </div>
                        </button>
                        @endif
                    </div>
    
                </div>
            </div>
        </div>
    </div>
@endif

@if($Brands->count())
    <style>
        .slick-track {
          display: flex;
        }
        .slick-track .slick-slide {
          display: flex;
          height: auto;
          align-items: center;
          justify-content: center;
        }
        .brandsImg:hover {
          opacity: 70%;
          transition: all 0.5s;
        }
        .slick-track{
            float: left !important;
        }
        
        

    </style>

    <div class="statistics position-relative mb-4">
        <div class="in_statistics">
            <div class="container h-100 d-flex align-items-center">
                <div class="w-100">
                    <div class="title my-5">
                        <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('messages.topClients') }}</h2>
                    </div>
                    <div class="SlickSlider mb-4" data-slick='{"slidesToShow": 4, "slidesToScroll": 1}'>
                        @foreach($Brands as $key => $brand)
                            @php($BrandImagesize = getimagesize(asset($brand->image)))
                            @php($width = (isset($BrandImagesize) && isset($BrandImagesize[0])) ? $BrandImagesize[0] : 150 )
                            @php($height = (isset($BrandImagesize) && isset($BrandImagesize[1])) ? $BrandImagesize[1] : 150 )
                            <a href="{{$brand->link ?? '#'}}" style="text-decoration: none; cursor: pointer;">
                                <div class="brandsImg">
                                    <img loading="lazy" src="{{asset($brand->image)}}" style="width: 150px;max-height:200px" width="150px" height="{{ (int)(150 * $height / $width) }}px" alt="Emcan">
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<style>

    .skills_flip_card img , .skills_flip_card_title {
      margin: 0;
    }
    .skills_flip_card {
        cursor: pointer;
        position: relative;
        text-align: center;
        line-height: 100px;
        margin: 20px;
        height: 80px;
        transition: all 0.6s ease;
        transform-style: preserve-3d;
        transform: perspective(700px);
        border: 1px red solid;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .skills_flip_card_front, .skills_flip_card_back {
      position: absolute;
      backface-visibility: hidden;
    }
    
    .skills_flip_card_back {
        transform: rotateX(180deg);
        overflow: hidden;
    }
    
    .skills_flip_card:hover {
        transform: perspective(700px) rotateX(180deg);
        background: linear-gradient(90deg, rgba(204,42,42,1) 0%, rgba(148,24,24,1) 57%, rgba(94,28,28,1) 100%);
        color: white;
    }
    .skills_flip_card img{
        height: 60px;
    }

</style>

<div class="container skills my-5">
    <div class="title">
        <h2 class="pb-3" >{{ trans('messages.skills') }}</h2>
    </div>
    
    <div class="row my-5">
        @foreach(\App\Models\Skills::orderBy('position')->get() as $Skill)
            @php($SkillImagesize = getimagesize(asset($Skill->image)))
            @php($width = (isset($SkillImagesize) && isset($SkillImagesize[0])) ? $SkillImagesize[0] : 60 )
            @php($height = (isset($SkillImagesize) && isset($SkillImagesize[1])) ? $SkillImagesize[1] : 60 )
            <div class="col-6 col-md-4 col-lg-3 col-xl-2 {{ ($loop->iteration % 4) < 1 ? 'transform__item_left' : 'transform__item_right' }}">
                <div class="skills_flip_card">
                    <div class="skills_flip_card_front">
                      <img loading="lazy" src="{{ asset($Skill->image) }}" class=""  style="max-width: 100%;" height="60px" width="{{ (int)(60 * $width / $height) }}px"  alt="{{ $Skill->title }}" />
                    </div>
                    
                    <div class="skills_flip_card_back">
                        <div class="skills_flip_card_title" style="font-size: 26px;font-weight: bold;">{{ $Skill->title }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

@if (count($Statistics))
    <div class="statistics position-relative">
        <div class="in_statistics">
            <div class="container h-100 d-flex align-items-center">
                <div class="w-100">
                    <div class="title my-5">
                        <h2 class="pb-3 animate__animated animate__rollIn" >{{ trans('messages.statics') }}</h2>
                    </div>
                    <div class="row">
                        @foreach ($Statistics as $Statistic)
                            <div class="col-6 col-lg-3 p-0 my-3 {{ ($loop->iteration % 4) < 2 ? 'transform__item_left' : 'transform__item_right' }}">
                                <div class="my-4 text-center">
                                    <img loading="lazy" src="{{ asset($Statistic['image']) }}" class="img-fluid " style="width: 150px" width="150px" height="150px" alt="{{ $Statistic['title_'.lang()] }}">
                                    <h2 class="main_color py-3 animate__animated animate__zoomInUp">{{ ($Statistic['title_'.lang()]) }}</h2>
                                    <h3 class="counter" data-count="{{ $Statistic->count }}">{{ $Statistic->count }}</h3>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

@endsection





@section('SEO')
    <title>{{ $SEO['home']['title_'.lang()]['value'] }}</title>
    <link rel="canonical" href="{{ url()->full() }}">
    <link rel="sitemap" href="/sitemap.xml" title="Sitemap" type="application/xml">
    <link href="https://emcan-group.com/emcan.webp" rel="shortcut icon">
    <meta name="robots" content="max-snippet:-1,max-image-preview:large,max-video-preview:-1">
    <meta name="description" content="{{ $SEO['home']['desc_'.lang()]['value'] }}">
    <meta name="keywords" content="{{ $SEO['home']['keywords_'.lang()]['value'] }}">
    <meta name="author" content="Emcan Solutions">
    <meta name="image" content="https://emcan-group.com/emcan.jpg">
    <meta property="og:title" content="{{ $SEO['home']['title_'.lang()]['value'] }}">
    <meta property="og:description" content="{{ $SEO['home']['desc_'.lang()]['value'] }}">
    <meta property="og:locale" content="en">
    <meta property="og:image" content="https://emcan-group.com/emcan.webp">
    <meta property="og:url" content="{{ url()->full() }}">
    <meta property="og:site_name" content="Emcan Solutions">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="{{ $SEO['home']['title_'.lang()]['value'] }}">
    <meta name="twitter:title" content="{{ $SEO['home']['title_'.lang()]['value'] }}">
    <meta name="twitter:description" content="{{ $SEO['home']['desc_'.lang()]['value'] }}">
    <meta name="twitter:site" content="@EmcanSolutions">
@endsection