@extends('master')



@section('header')


<style>


    .section-title {
      font-weight: 800;
      color: #0b0c39;
    }
    .desc-text {
      color: #555;
    }
    .stat-card {
      background: #fff;
      border: 1px solid #dee2e6;
      padding: 30px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.03);
      transition: 0.3s ease;
    }
    .stat-number {
      font-size: 32px;
      font-weight: bold;
      color: #32c36c;
    }
    .support-card {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 10px;
      padding: 30px;
      text-align: center;
      transition: 0.3s ease;
    }
    .support-card:hover {
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .support-card h5 {
      font-weight: 700;
      color: #0b0c39;
    }
    .support-card p {
      color: #555;
    }
    .support-btn {
      margin-top: 15px;
    }



    i.fas.fa-phone-alt {
    transform: none !important;
}






    .section-title {
      font-weight: 800;
      color: #0b0c39;
    }
    .desc-text {
      color: #555;
    }
    .feature-card {
      border: 1px solid #dce0e6;
      border-radius: 8px;
      padding: 25px;
      background-color: #fff;
      text-align: center;
      height: 100%;
      position: relative;
    }
    .feature-card::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      border-top: 6px solid #32c36c;
      border-right: 6px solid #32c36c;
      border-top-right-radius: 8px;
    }
    .feature-card h6 {
      font-weight: 700;
      margin-top: 15px;
      color: #0b0c39;
    }
    .form-container {
      background: #fff;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }











.mt-10{margin-top:10px;}
    .section-title {
      text-align: center;
      margin-bottom: 30px;
    }

    .section-title h2 {
      font-weight: bold;
      color: #00003b;
    }

    .plugin-box {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
      padding: 30px;
      margin-bottom: 30px;
      position: relative;
      height: 100%;
      border-bottom: 4px solid #22c55e;
      transition: all 0.3s ease-in-out;
    }

    .plugin-box:hover {
      transform: translateY(-5px);
    }

    .plugin-box h5 {
      font-weight: bold;
      color: #09023d;
    }

    .plugin-box p {
      font-size: 14px;
      color: #555;
    }

    .plugin-icon {
      font-size: 32px;
      color: #22c55e;
      margin-bottom: 15px;
      display: block;
    }

    .plugin-number {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 50px;
      color: #f3f3f3;
      font-weight: bold;
    }

    .plugin-box>p{
        font-size: 16px;
    }

    .process-card {
      border: 1px solid #c6f4d3;
      border-radius: 10px;
      padding: 20px;
      position: relative;
      transition: box-shadow 0.3s;
    }

    .process-card:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    .process-icon {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ffffff;
      border: 1px solid #c6f4d3;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-icon img {
      width: 20px;
      height: 20px;
    }

    .process-card h5 {
      font-weight: 700;
      color: #0b002b;
    }

    .process-card p {
      color: #666;
      margin-top: 10px;
      font-size: 0.95rem;
    }
  </style>






@endsection






@section('content')



<div
    style="background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
           url('{{ asset('frontend/img/bac.jpg') }}') no-repeat center center;
           background-size: cover;
           padding: 115px;"
    class="page-header">




		<div class="container">
			<div class="row align-items-center justify-content-center">
				<div class="col-lg-12">
					<!-- Page Header Box Start -->

						<h1 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;text-align: center;color: white;">Customer Service Management


</h1>



					<!-- Page Header Box End -->
				</div>
			</div>
		</div>
	</div>






<div class="page-service-single">
        <div class="container-fluid desktop_padding">
            <div class="row">
                <div class="col-lg-4">
                    <!-- Service Sidebar Start -->
@include('components.service_sidebar')
                    <!-- Service Sidebar End -->
                </div>

                <div class="col-lg-8">
                    <!-- Service Single Content Start -->
                    <div class="service-single-content">
                        <!-- Service Feature Image Start -->
                        <div class="service-feature-image">
                            <figure class="image-anime reveal" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
                                     <figure class="image-anime reveal" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
<img src="{{ asset('frontend/img/customerservicemanagement.jpg') }}" alt="Service Image" class="float-animation">
                            </figure>
                            </figure>
                        </div>
                        <!-- Service Feature Image End -->

                        <!-- Service Entry Start -->
                        <div class="service-entry">
                            <p class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">


                            Customer Service Management (CSM) is a series of workflows, tools, and best practices for developing, optimizing, and delivering excellent customer experiences. ServiceNow CSM delivers powerful customer service solutions for businesses of all sizes. Improve service operations and engage customers with digital workflows. Solve customer problems by bringing front, middle, and back offices together.

<br>
<br>

Customer service management is the orchestration of tasks between customers, customer service, and other teams to quick resolving issues and requests. CSM goes beyond traditional solutions to elevate your customer service from issue to resolution. With CSM, you can solve customer problems by bringing front, middle, and back offices together, proactively.
                            </p>


                            <!-- Service Entry Process End -->
                        </div>
                        <!-- Service Entry Start -->


                        <!-- Page Single FAQs End -->
                    </div>
                    <!-- Service Single Content End -->
                </div>
            </div>
        </div>
    </div>

@include('components.servicecommon')






@endsection