@extends('frontend.layouts.app')

@section('title')
Customer Care
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('css/products.css') }}">

<div class="bg-product" style="background-image: url('{{ asset('img/product-main-bg.jpg') }}')">
  <br>

  <div class="container">
      <div>
        <p class="text-white product-title">Customer Care</p>
        <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="images">
      </div>
      <div class="container px-4 mt-5">
        <div class="row row-cols-lg-2 gx-2 gy-2">
          <div class="col-md">
            <a href="{{ url('/lost')}}" class="text-decoration-none">
           <div class="p-5 border boxed bg-light overflow-hidden product-cat rounded-4">
              <p class="product-cat ">Lost Your Combination</p>
    
            <div class="d-flex justify-content-end position-relative">
              <img src="{{ asset('img/icon-lyc.png') }}" class="img-fluid position-absolute img-product translate-middle" alt="images">
            </div>
        </div>
      </a>
          </div>
          <div class="col-md">
            <a href="{{ url('/duplicate')}}" class="text-decoration-none">
            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                <p class="product-cat">Need a Duplicate Key</p>
              <div class="d-flex justify-content-end position-relative">
                <img src="{{ asset('img/icon-ndk.png') }}" class="img-fluid position-absolute img-product translate-middle" alt="images">
              </div>
          </div>
        </a>
          </div>
          <div class="col-md">
            <a href="{{ url('/technicalService')}}" class="text-decoration-none">
           <div class="p-5 border boxed bg-light overflow-hidden product-cat rounded-4">
              <p class="product-cat ">Need Technical Service</p>
            <div class="d-flex justify-content-end position-relative">
              <img src="{{ asset('img/icon-nts.png') }}" class="img-fluid position-absolute img-product translate-middle" alt="images">
            </div>
        </div>
      </a>
          </div>
          <div class="col-md">
            <a href="{{ url('/FAQs')}}" class="text-decoration-none">
            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                <p class="product-cat">FAQs</p>
              <div class="d-flex justify-content-end position-relative">
                <img src="{{ asset('img/icon-faq.png') }}" class="img-fluid position-absolute img-product translate-middle" alt="images">
              </div>
          </div>
        </a>
          </div>
          <div class="col-md m-auto mt-2">
            <a href="{{ url('/toBuy')}}" class="text-decoration-none">
            <div class="p-5 border boxed bg-light overflow-hidden rounded-4">
                <p class="product-cat">Where to Buy</p>
              <div class="d-flex justify-content-end position-relative">
                <img src="{{ asset('img/icon-wb.png') }}" class="img-fluid position-absolute img-product translate-middle" alt="images">
              </div>
          </div>
        </a>
          </div>
          
        </div>
      </div>
  </div>

  <div class="mt-4">
    <div class="container box d-lg-none d-block d-sm-block">
      <div class="container contact-mob p-5">
        <div class="bg-light">
          <div class="container p-5">
            <p class="footer-contact">CONTACT US</p>
            <p class="footer-context">We'd love to hear from you</p>
            <div class="containers">
              <div class="row gy-4 align-items-start">
                <div class="col-md-4">
                  <input class="form-control rounded-0" placeholder="Name *" type="text" required="">
                </div>
                <div class="col-md-4">
                  <input class="form-control rounded-0" placeholder="Phone No. *" type="text" required="">
                </div>
                <div class="col-md-4">
                  <input class="form-control rounded-0" placeholder="Email Address *" type="text" required="">
                </div>
              </div>
              <br>
              <textarea class="form-control textarea rounded-0" placeholder="Write a Message"></textarea>
              <br>
               <button class="findAbout btns" style="width: 90% !important;">
    SEND MESSAGE
</button>
            </div>
          </div>
        </div> 
      </div>    
  </div>
  </div>
  
  <div class="d-lg-block d-none d-sm-none">
    <br><br><br><br><br><br><br><br>
  </div>  
  
  <style>
    .footer-mt {
        margin-top: 20rem;
    }
  </style>

@endsection