@extends('themes.frontend.layouts.app')
@section('body_class', 'bg-background text-on-background font-body selection:bg-primary-fixed-dim selection:text-primary overflow-x-hidden')
@section('validate') @stop
    @push('head_scripts')
        <script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              secondary: "#4e6072",
              "on-secondary-container": "#546678",
              "on-error-container": "#93000a",
              "surface-bright": "#fcf9f5",
              tertiary: "#251e16",
              surface: "#fcf9f5",
              "on-surface": "#1c1c1a",
              "on-primary-fixed-variant": "#26467d",
              "secondary-fixed": "#d1e5fa",
              "on-surface-variant": "#434750",
              "surface-container-low": "#f6f3ef",
              outline: "#747781",
              "surface-container-highest": "#e5e2de",
              "secondary-fixed-dim": "#b5c9dd",
              "on-secondary-fixed-variant": "#36495a",
              primary: "#001e49",
              "on-tertiary-fixed": "#211a13",
              "inverse-primary": "#adc6ff",
              "error-container": "#ffdad6",
              "on-error": "#ffffff",
              "on-primary": "#ffffff",
              error: "#ba1a1a",
              "tertiary-fixed": "#eee0d4",
              background: "#fcf9f5",
              "surface-container-lowest": "#ffffff",
              "surface-dim": "#dcdad6",
              "secondary-container": "#d1e5fa",
              "primary-container": "#0e336a",
              "on-tertiary-container": "#a79b90",
              "on-primary-fixed": "#001a41",
              "surface-container-high": "#eae8e4",
              "inverse-surface": "#31302e",
              "tertiary-fixed-dim": "#d1c4b8",
              "surface-variant": "#e5e2de",
              "on-secondary": "#ffffff",
              "primary-fixed": "#d8e2ff",
              "surface-container": "#f0ede9",
              "on-tertiary": "#ffffff",
              "outline-variant": "#c4c6d1",
              "on-primary-container": "#809ddb",
              "on-background": "#1c1c1a",
              "inverse-on-surface": "#f3f0ec",
              "tertiary-container": "#3b332b",
              "primary-fixed-dim": "#adc6ff",
              "on-tertiary-fixed-variant": "#4e453c",
              "surface-tint": "#405e97",
              "on-secondary-fixed": "#091d2c",
            },
            borderRadius: {
              DEFAULT: "0.25rem",
              lg: "0.5rem",
              xl: "0.75rem",
              full: "9999px",
            },
            fontFamily: {
              headline: ["Manrope"],
              body: ["Inter"],
              label: ["Inter"],
            },
          },
        },
      };
    </script>
    @endpush
    @push('styles')
        <style>
      .material-symbols-outlined {
        font-variation-settings:
          "FILL" 0,
          "wght" 400,
          "GRAD" 0,
          "opsz" 24;
      }
      /* nabrbar css */
      .chg-nav-glass-morphism {
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 30, 73, 0.08);
      }
      .chg-nav-dropdown-container {
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
      }

      .chg-nav-link {
        @apply relative text-[#4e6072] font-semibold text-sm tracking-wide transition-colors duration-200 cursor-pointer;
      }
      .chg-nav-link:hover {
        @apply text-primary;
      }
      .chg-nav-active-nav-link {
        @apply text-primary;
      }
      .chg-nav-active-nav-link::after {
        /* content: ""; */
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #001e49;
      }
      .chg-nav-z-menu {
        z-index: 100;
      }
      /* navbar */
      .glass-silk {
        background: rgba(252, 249, 245, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      .glass-card {
        background: rgba(14, 51, 106, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      .editorial-shadow {
        box-shadow: 0 32px 64px -16px rgba(0, 30, 73, 0.05);
      }
      .text-balance {
        text-wrap: balance;
      }
      .glass-input {
        background: rgba(14, 51, 106, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: white !important;
        transition: all 0.3s ease;
      }
      .bg-chagger-blue {
        --tw-bg-opacity: 1;
        background-color: rgb(14 51 106 / var(--tw-bg-opacity, 1));
      }
      /* other services css */
      .glass-primary {
        background: rgba(14, 51, 106, 0.75);
        backdrop-filter: blur(16px);
      }
      .tonal-shift-surface-container-low {
        background-color: #f6f3ef;
      }
      .surface-dim-tonal-grounding {
        background-color: #dcdad6;
      }
      .perspective-text {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      }
      input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1); /* Turns a black icon white */
      }
    </style>
    @endpush
@section('content')
    <main class="max-w-[1440px] mx-auto px-6 md:px-12 mt-20 pb-8">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Left Column: Storytelling (65%) -->
        <div class="w-full lg:w-[65%] space-y-10 mt-5">
          <!-- Cinematic Hero -->
          <section class="relative group">
            <div class="rounded-[3rem] overflow-hidden aspect-[16/10] relative">
              <img
                alt="Radiant Smile"
                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                data-alt="Close-up of a stunningly bright and healthy human smile with almost invisible clear aligners in soft, natural studio lighting"
                src="{{ asset('themes/frontend') }}/images/services/dental-bonding.jpg"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent"
              ></div>
              <div class="absolute bottom-12 left-12 max-w-xl">
                <h1
                  class="text-5xl md:text-5xl font-headline font-extrabold text-white tracking-tighter leading-[0.9] text-balance"
                >
                  Dental Bonding
                </h1>
              </div>
            </div>
          </section>
          <!-- 'The Art of Perfection' Section -->
          <section class="grid relative">
            <div
              class="absolute -top-20 -left-20 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl"
            ></div>
            <div class="space-y-8 relative z-10">
              <h2
                class="text-4xl font-headline font-bold text-primary tracking-tight"
              >
                A simple, effective way to repair small imperfections and
                enhance your smile.
              </h2>
              <p class="text-secondary text-lg body-lg leading-relaxed">
                At Chagger Dental, dental bonding uses a tooth-coloured resin
                material to correct minor cosmetic concerns such as chips, small
                gaps, or uneven edges.<br /><br />
                It is a conservative treatment that improves the appearance of
                your teeth while preserving your natural tooth structure.
              </p>
            </div>
          </section>
          <!-- The Sanctuary Journey -->
          <section class="py-1">
            <div
              class="relative space-y-8 before:content-[''] before:absolute before:left-[1.25rem] before:top-4 before:bottom-4 before:w-[2px] before:bg-surface-container-highest"
            >
              <!-- Step 1 -->
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10 transition-transform duration-500 group-hover:scale-110"
                >
                  1
                </div>
                <h3 class="text-2xl font-bold text-primary mb-3">
                  What Dental Bonding Can Help With
                </h3>
                <p class="text-secondary leading-relaxed text-lg">
                  Dental bonding is commonly used to:
                </p>
                <ul
                  class="items-center gap-2 px-6 mt-3 space-y-3 text-sm text-gray-500"
                >
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Repair chipped or cracked teeth
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Improve small gaps between teeth
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Reshape uneven or worn edges
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Improve the appearance of minor discoloration
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Restore small areas of tooth damage
                  </li>
                </ul>
              </div>
              <!-- Step 2 -->
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10 transition-transform duration-500 group-hover:scale-110"
                >
                  2
                </div>
                <h3 class="text-2xl font-bold text-primary mb-4">
                  Bonding vs. Veneers
                </h3>
                <p class="text-secondary leading-relaxed text-lg">
                  Dental bonding and veneers both improve the appearance of your
                  smile, but they are different treatments:
                </p>
                <h4 class="text-xl font-bold text-primary mt-4">
                  Dental Bonding
                </h4>
                <ul
                  class="items-center gap-2 px-6 mt-3 space-y-3 text-sm text-gray-500"
                >
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Uses a tooth-coloured resin
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Completed in a single visit
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Best for minor cosmetic changes
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    More conservative and affordable
                  </li>
                </ul>
                <!-- veeners -->
                <h4 class="text-xl font-bold text-primary mt-4">
                  Porcelain Veneers
                </h4>
                <ul
                  class="items-center gap-2 px-6 mt-3 space-y-3 text-sm text-gray-500"
                >
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Thin custom-made porcelain shells
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Require more than one visit
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Best for larger smile transformations
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    More durable and stain-resistant
                  </li>
                </ul>
                <p
                  class="text-secondary leading-relaxed font-body text-lg mt-4"
                >
                  Your dentist will help determine which option best suits your
                  smile goals.
                </p>
              </div>
              <!-- Step 3 -->
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10 transition-transform duration-500 group-hover:scale-110"
                >
                  3
                </div>
                <h3 class="text-2xl font-bold text-primary mb-4">
                  What to Expect
                </h3>
                <p class="leading-relaxed text-lg font-bold">
                  The bonding process is typically completed in one visit:
                </p>
                <p class="text-secondary leading-relaxed text-lg">
                  A tooth-coloured resin is carefully applied, shaped, and
                  polished to blend naturally with your surrounding teeth. No
                  significant enamel removal is usually required.
                </p>
              </div>
              <!-- Step 4 -->
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10"
                >
                  4
                </div>
                <h3 class="text-2xl font-bold text-primary mb-4">
                  Benefits of Dental Bonding
                </h3>
                <ul
                  class="items-center gap-2 px-6 mt-3 space-y-3 text-sm text-gray-500"
                >
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Quick, single-visit treatment
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Minimally invasive
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Natural-looking results
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Helps restore shape and symmetry
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Ideal for small cosmetic improvements
                  </li>
                </ul>
              </div>
              <!-- Step 5 -->
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10"
                >
                  5
                </div>
                <h3 class="text-2xl font-bold text-primary mb-4">
                  Longevity & Care
                </h3>
                <p class="text-secondary leading-relaxed text-lg">
                  With good oral hygiene and regular dental care, bonding can
                  last several years.
                </p>
                <p class="leading-relaxed text-lg font-bold mt-3">
                  To maintain results:
                </p>
                <ul
                  class="items-center gap-2 px-6 space-y-3 text-sm text-gray-500"
                >
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Avoid biting hard objects (ice, pens, nails)
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Maintain regular brushing and flossing
                  </li>
                  <li
                    class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg"
                  >
                    Attend routine dental checkups
                  </li>
                </ul>
              </div>
              <div class="relative pl-16 group">
                <div
                  class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10 transition-transform duration-500 group-hover:scale-110"
                >
                  6
                </div>
                <h3 class="text-2xl font-bold text-primary mb-4">
                  Cost & Consultation
                </h3>

                <p class="text-secondary leading-relaxed text-lg">
                  The cost of dental bonding varies depending on the size and
                  number of teeth being treated.<br /><br />
                  During your consultation, we’ll assess your smile and
                  recommend the most appropriate treatment option for your
                  needs.
                </p>
              </div>
            </div>
          </section>

          <!-- cta -->
        </div>
        @include('themes.frontend.partials.book_appointment_section')
      </div>
      @include('themes.frontend.pages.service._other-services')
    </main>
@endsection