@extends('inculdes.main')
@section('content')
    

    {{-- <div class="container-fluid mt-5 wow fadeInUp" data-wow-delay="0.1s"
        style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="container ">
            <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
                <h5 class="fw-bold text-primary text-uppercase">OUR SERVICES</h5>
                <h1 class="mb-0">Custom CPA Solutions for Your Successful Business</h1>
            </div>
            <div class="row g-5">
                @foreach ($services as $service)
                <div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s"
                    style="visibility: visible; animation-delay: 0.3s; animation-name: zoomIn;">
                    <div class="service3-item bg-light rounded">
                        <div class="position-relative d-flex p-5">
                            <div class="service-icon flex-shrink-0">
                                <img class="mb-3" style="height: 75px" src="{{ asset($service->icon) }}"
                                    alt="{{ $service->name }}" srcset="">
                                
                            </div>
                            <div class="ps-4">
                                <h4 class="mb-3">{{ $service->name }}</h4>
                                {!! $service->short_description !!}
                                <a class="text-uppercase" href="{{ route('service', ['slug' => $service->slug]) }}">Read More<i class="bi bi-arrow-right ms-2"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                
            </div>
        </div>
    </div> --}}
<style>
    .service-card {
  width: 100%;
  height: 100%;
  padding: 2em 1.5em;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
}
.service-card::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(#0dcaf0, #06A3DA);
  position: absolute;
  left: 0%;
  top: -98%;
  z-index: -2;
  transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
}
.icon-wrapper {
  
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  
}
.service-card:hover:after {
  top: 0%;
}

.service-card:hover .icon-wrapper {
  color: #0dcaf0;
}
.service-card:hover  {
  color: #ffffff;
}
.service-card:hover a {
  color: #ffffff;
}
.service-card:hover h3 {
  color: #f0f0f0;
}
</style>
    <div class="container-fluid mt-5 wow fadeInUp" data-wow-delay="0.1s"
        style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="container ">
            <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
                <h5 class="fw-bold text-primary text-uppercase">OUR SERVICES</h5>
                <h1 class="mb-0">Custom CPA Solutions for Your Successful Business</h1>
            </div>
            <div class="row g-5">
                @foreach ($services as $servicee)
                
                <div class="col-lg-4 wow zoomIn" data-wow-delay="0.3s"
                    style="visibility: visible; animation-delay: 0.3s; animation-name: zoomIn;">
                    <a href="{{ route('service', ['slug' => $servicee->slug]) }}">
                    <div class="service-card">
                        <div class="icon-wrapper">
                            <img class="mb-3" style="height: 75px" src="{{ asset($servicee->icon) }}"
                                    alt="{{ $servicee->name }}" >
                          {{-- <i class="fa-solid fa-chart-line"></i> --}}
                        </div>
                        <h3 class="mt-2 text-center">{{ $servicee->name }}</h3>
                        <p>
                            {!! $servicee->short_description !!}
                            
                        </p>
                        <a class="text-uppercase d-block text-center" href="{{ route('service', ['slug' => $servicee->slug]) }}">Read More<i class="bi bi-arrow-right ms-2"></i></a>
                      </div>
                    </a>
                </div>
                
                @endforeach
                
            </div>
        </div>
    </div>

    @include('inculdes.contact_form')
@endsection