@extends('layouts.app')
@section('title', 'Quarry Services — Paytell Company Limited')

@section('content')
<section style="background:var(--blue-900);padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,0.12);">
  <div class="wrap">
    <p style="font-size:12.5px;color:rgba(255,255,255,0.55);margin-bottom:14px;">Home › Services › Quarry services</p>
    <h1 style="font-family:'Barlow Semi Condensed';font-weight:700;font-size:38px;color:#fff;line-height:1.1;max-width:680px;margin-bottom:14px;">Quarry services &amp; aggregate supply.</h1>
    <p style="font-size:15.5px;color:rgba(255,255,255,0.75);max-width:580px;">Paytell supplies granite aggregate and quarry products to construction and infrastructure projects across Ghana.</p>
  </div>
</section>
<section class="section">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px;align-items:start;">
      <div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Granite aggregate supply</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Crushed granite in standard sizes — 3/8, 3/4 and 1 inch — delivered to site or collected at the quarry.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Sand and filling material</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">River sand, laterite and other filling materials for earthworks and concrete production.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Bulk delivery logistics</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Our own fleet ensures reliable delivery of aggregate to project sites across Ghana.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Long-term supply contracts</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Bulk pricing and scheduled delivery agreements for large-scale contractors and developers.</p>
    </div></div>
      <div>
        <div style="background:var(--paper-alt);border:1px solid var(--line);border-radius:4px;padding:30px;">
          <div class="eyebrow">Get a quote</div>
          <h3 style="font-size:22px;margin-bottom:10px;color:var(--blue-900);">Talk to our team</h3>
          <p style="font-size:14px;color:var(--steel);margin-bottom:20px;">Describe your project or request and we'll get back to you within 24 hours.</p>
          <a href="{{ route('contact') }}" class="cta-btn" style="display:inline-block;text-decoration:none;">Send an enquiry</a>
        </div>
        <div style="margin-top:20px;background:var(--blue-900);border-radius:4px;padding:28px;">
          <p style="font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:8px;">Office hours</p>
          <p style="color:#fff;font-size:14.5px;">Mon – Sat, 8am – 6pm</p>
          <p style="color:rgba(255,255,255,0.75);font-size:14px;margin-top:12px;">+233 244 271 418</p>
          <p style="color:rgba(255,255,255,0.75);font-size:14px;">info@paytellcompanylimited.com</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="cta-band">
  <div class="wrap">
    <h2>Ready to start?</h2>
    <p>Contact Paytell for a quote or site visit.</p>
    <div class="btn-row" style="justify-content:center;display:flex;gap:14px;">
      <a href="{{ route('contact') }}" class="cta-btn" style="background:#fff;color:var(--crimson-600);">Contact us</a>
      <a href="{{ route('services.index') }}" class="cta-ghost" style="border-color:#fff;color:#fff;">Back to services</a>
    </div>
  </div>
</section>

@endsection