.elementor-19 .elementor-element.elementor-element-30d41b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-a520e82{--display:flex;}.elementor-19 .elementor-element.elementor-element-bdead74{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:1px;--padding-bottom:1px;--padding-left:1px;--padding-right:1px;}.elementor-19 .elementor-element.elementor-element-bdead74:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-bdead74 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(141deg, #1B3735 0%, #519B90 50%);}.elementor-19 .elementor-element.elementor-element-e6cba1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-19 .elementor-element.elementor-element-cca3612.elementor-element{--align-self:flex-start;}.elementor-19 .elementor-element.elementor-element-cca3612{text-align:left;}.elementor-19 .elementor-element.elementor-element-cca3612 .elementor-heading-title{color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-0cfd864{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-container{background-color:#2E665C;height:38px;max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a{background-color:#2E665C;color:#FFFFFF;padding:0px 15px 0px 15px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li.current-menu-item > a{color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger{float:right;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-close{color:rgba(51, 51, 51, 1);}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.elementor-19 .elementor-element.elementor-element-0640ee2{--display:flex;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-19 .elementor-element.elementor-element-0640ee2.e-con{--align-self:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-19 .elementor-element.elementor-element-8150373 .elementor-button{background-color:#FFFFFF;font-family:"Roboto", Sans-serif;font-weight:500;fill:#000000;color:#000000;}.elementor-19 .elementor-element.elementor-element-8150373.elementor-element{--align-self:flex-end;}@media(min-width:768px){.elementor-19 .elementor-element.elementor-element-e6cba1c{--width:25%;}.elementor-19 .elementor-element.elementor-element-0cfd864{--width:50%;}.elementor-19 .elementor-element.elementor-element-0640ee2{--width:25%;}}@media(max-width:1024px){.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}}@media(max-width:767px){.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav > li > a{color:#000000;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-navbar-nav .elementskit-submenu-panel > li > a{color:#000000;}.elementor-19 .elementor-element.elementor-element-1870cdb .elementskit-nav-logo > img{max-width:120px;max-height:50px;}}/* Start custom CSS for button, class: .elementor-element-8150373 */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Book Appointment - SmileDental</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static/icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"/>
</head>
<body class="min-h-screen bg-gray-50">

  <!-- Header -->
  <header class="bg-white shadow-sm border-b">
    <div class="container mx-auto px-4 py-4">
      <div class="flex items-center justify-between">
        <a href="/" class="flex items-center space-x-2 text-blue-600 hover:text-blue-500 transition-colors">
          <i class="lucide lucide-arrow-left w-5 h-5"></i>
          <span>Back to Home</span>
        </a>
        <div class="text-2xl font-bold text-blue-600">SmileDental</div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Book Your Appointment</h1>
        <p class="text-lg text-gray-500">Schedule your visit with our experienced dental team</p>
      </div>

      <div class="grid lg:grid-cols-2 gap-12">
        <!-- Appointment Form -->
        <div class="bg-white rounded-xl shadow-lg p-8">
          <h2 class="text-2xl font-semibold mb-6 flex items-center">
            <i class="lucide lucide-calendar mr-2 text-blue-600"></i>
            Appointment Details
          </h2>

          <form class="space-y-6">
            <!-- Personal Information -->
            <div class="space-y-4">
              <h3 class="text-lg font-medium flex items-center">
                <i class="lucide lucide-user mr-2 text-blue-600 w-5 h-5"></i>
                Personal Information
              </h3>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
                <input type="text" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Enter your full name" />
              </div>

              <div class="grid md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                  <input type="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="your@email.com" />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
                  <input type="tel" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="(555) 123-4567" />
                </div>
              </div>
            </div>

            <!-- Service Selection -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Service Needed *</label>
              <select name="service" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                <option value="">Select a service</option>
                <option>General Checkup</option>
                <option>Teeth Cleaning</option>
                <option>Dental Filling</option>
                <option>Root Canal</option>
                <option>Teeth Whitening</option>
                <option>Orthodontic Consultation</option>
              </select>
            </div>

            <!-- Date Selection -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Preferred Date *</label>
              <input type="date" name="date" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" />
            </div>

            <!-- Time Selection -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
                <i class="lucide lucide-clock mr-2 w-4 h-4"></i>
                Preferred Time *
              </label>
              <div class="grid grid-cols-3 gap-2">
                <input type="radio" name="time" value="9:00 AM" id="time1" class="hidden" />
                <label for="time1" class="text-center px-3 py-2 border rounded-lg cursor-pointer">9:00 AM</label>

                <input type="radio" name="time" value="10:00 AM" id="time2" class="hidden" />
                <label for="time2" class="text-center px-3 py-2 border rounded-lg cursor-pointer">10:00 AM</label>

                <input type="radio" name="time" value="11:00 AM" id="time3" class="hidden" />
                <label for="time3" class="text-center px-3 py-2 border rounded-lg cursor-pointer">11:00 AM</label>

                <input type="radio" name="time" value="2:00 PM" id="time4" class="hidden" />
                <label for="time4" class="text-center px-3 py-2 border rounded-lg cursor-pointer">2:00 PM</label>

                <input type="radio" name="time" value="3:00 PM" id="time5" class="hidden" />
                <label for="time5" class="text-center px-3 py-2 border rounded-lg cursor-pointer">3:00 PM</label>

                <input type="radio" name="time" value="4:00 PM" id="time6" class="hidden" />
                <label for="time6" class="text-center px-3 py-2 border rounded-lg cursor-pointer">4:00 PM</label>
              </div>
            </div>

            <!-- Additional Notes -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Additional Notes</label>
              <textarea name="notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Any specific concerns or requests?"></textarea>
            </div>

            <button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition">Book Appointment</button>
          </form>
        </div>

        <!-- Contact Info -->
        <div class="space-y-8">
          <div class="bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-2xl font-semibold mb-6">Contact Information</h2>
            <div class="space-y-4">
              <div class="flex items-center space-x-3">
                <i class="lucide lucide-phone text-blue-600 w-5 h-5"></i>
                <div>
                  <p class="font-medium">Phone</p>
                  <p class="text-gray-500">(555) 123-4567</p>
                </div>
              </div>
              <div class="flex items-center space-x-3">
                <i class="lucide lucide-mail text-blue-600 w-5 h-5"></i>
                <div>
                  <p class="font-medium">Email</p>
                  <p class="text-gray-500">info@smiledental.com</p>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-xl shadow-lg p-8">
            <h3 class="text-xl font-semibold mb-4">Office Hours</h3>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span>Monday - Friday</span>
                <span>9:00 AM - 6:00 PM</span>
              </div>
              <div class="flex justify-between">
                <span>Saturday</span>
                <span>9:00 AM - 2:00 PM</span>
              </div>
              <div class="flex justify-between">
                <span>Sunday</span>
                <span>Closed</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

</body>
</html>/* End custom CSS */