{"id":436,"date":"2026-01-15T19:47:16","date_gmt":"2026-01-15T19:47:16","guid":{"rendered":"https:\/\/buildapoolstgeorge.com\/?page_id=436"},"modified":"2026-02-16T21:58:55","modified_gmt":"2026-02-16T21:58:55","slug":"elementor-page-436","status":"publish","type":"page","link":"https:\/\/buildapoolstgeorge.com\/?page_id=436","title":{"rendered":"Contact Us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"436\" class=\"elementor elementor-436\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-249e6aa e-flex e-con-boxed e-con e-parent\" data-id=\"249e6aa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2586abd elementor-widget elementor-widget-html\" data-id=\"2586abd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Contact Us Page - Build a Pool St. George -->\r\n<!-- Interactive design with EmailJS integration -->\r\n\r\n<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- EmailJS SDK \u2014 loaded BEFORE any init calls -->\r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n  \/\/ Single initialization point \u2014 only runs after SDK has loaded\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    if (typeof emailjs !== 'undefined') {\r\n      emailjs.init(\"eXqmPL4WTc5a7RuJu\");\r\n      console.log('EmailJS initialized successfully');\r\n    } else {\r\n      console.error('EmailJS SDK failed to load');\r\n    }\r\n  });\r\n<\/script>\r\n\r\n<style>\r\n\/* ===== CONTACT PAGE STYLES ===== *\/\r\n\r\n\/* Reset and Base *\/\r\n.contact-page {\r\n  min-height: 100vh;\r\n  padding: 80px 24px;\r\n  font-family: \"Albert Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  background: linear-gradient(135deg, #0f0c25 0%, #1a1640 50%, #0f0c25 100%);\r\n  color: #fff;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  overflow-x: hidden;\r\n}\r\n\r\n.contact-page *, .contact-page *:before, .contact-page *:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* Animated Background Elements *\/\r\n.contact-page::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(circle at 20% 80%, rgba(18, 199, 194, 0.08) 0%, transparent 50%),\r\n              radial-gradient(circle at 80% 20%, rgba(255, 122, 24, 0.08) 0%, transparent 50%),\r\n              radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);\r\n  animation: contactBgFloat 20s ease-in-out infinite;\r\n  pointer-events: none;\r\n}\r\n\r\n@keyframes contactBgFloat {\r\n  0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n  33% { transform: translate(2%, 2%) rotate(1deg); }\r\n  66% { transform: translate(-1%, 1%) rotate(-1deg); }\r\n}\r\n\r\n\/* Container *\/\r\n.contact-container {\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* Logo Section *\/\r\n.contact-logo {\r\n  text-align: center;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.contact-logo img {\r\n  max-width: 220px;\r\n  width: 100%;\r\n  height: auto;\r\n  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));\r\n  transition: transform 0.4s ease, filter 0.4s ease;\r\n}\r\n\r\n.contact-logo img:hover {\r\n  transform: scale(1.05) translateY(-5px);\r\n  filter: drop-shadow(0 8px 30px rgba(18, 199, 194, 0.4));\r\n}\r\n\r\n\/* Header Section *\/\r\n.contact-header {\r\n  text-align: center;\r\n  margin-bottom: 60px;\r\n}\r\n\r\n.contact-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 20px;\r\n  border-radius: 999px;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.12em;\r\n  color: #12c7c2;\r\n  background: rgba(18, 199, 194, 0.1);\r\n  border: 1px solid rgba(18, 199, 194, 0.3);\r\n  margin-bottom: 24px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.contact-badge:hover {\r\n  background: rgba(18, 199, 194, 0.2);\r\n  border-color: rgba(18, 199, 194, 0.5);\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 8px 20px rgba(18, 199, 194, 0.2);\r\n}\r\n\r\n.contact-badge svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: #12c7c2;\r\n}\r\n\r\n.contact-title {\r\n  font-size: clamp(36px, 6vw, 56px);\r\n  font-weight: 800;\r\n  line-height: 1.1;\r\n  margin: 0 0 16px 0;\r\n  text-transform: uppercase;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.contact-title .gradient-text {\r\n  background: linear-gradient(90deg, #12c7c2, #ff7a18);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  display: inline-block;\r\n  animation: contactTextShimmer 3s ease-in-out infinite;\r\n  background-size: 200% auto;\r\n}\r\n\r\n@keyframes contactTextShimmer {\r\n  0%, 100% { background-position: 0% center; }\r\n  50% { background-position: 100% center; }\r\n}\r\n\r\n.contact-subtitle {\r\n  font-size: clamp(16px, 2.5vw, 20px);\r\n  color: rgba(255, 255, 255, 0.7);\r\n  max-width: 600px;\r\n  margin: 0 auto;\r\n  line-height: 1.6;\r\n}\r\n\r\n\/* Main Content Grid *\/\r\n.contact-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 48px;\r\n  align-items: start;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .contact-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 40px;\r\n  }\r\n}\r\n\r\n\/* Contact Form Card *\/\r\n.contact-form-card {\r\n  background: rgba(255, 255, 255, 0.03);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  border-radius: 24px;\r\n  padding: 40px;\r\n  transition: all 0.4s ease;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.contact-form-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 4px;\r\n  background: linear-gradient(90deg, #12c7c2, #ff7a18);\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n.contact-form-card:hover {\r\n  background: rgba(255, 255, 255, 0.05);\r\n  border-color: rgba(18, 199, 194, 0.3);\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(18, 199, 194, 0.1);\r\n}\r\n\r\n.contact-form-card:hover::before {\r\n  transform: scaleX(1);\r\n}\r\n\r\n.form-title {\r\n  font-size: 24px;\r\n  font-weight: 800;\r\n  margin: 0 0 8px 0;\r\n  color: #fff;\r\n}\r\n\r\n.form-subtitle {\r\n  font-size: 14px;\r\n  color: rgba(255, 255, 255, 0.6);\r\n  margin: 0 0 28px 0;\r\n}\r\n\r\n\/* Form Fields *\/\r\n.contact-form-grid {\r\n  display: grid;\r\n  gap: 20px;\r\n}\r\n\r\n.form-field {\r\n  position: relative;\r\n}\r\n\r\n.form-field label {\r\n  display: block;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  color: rgba(255, 255, 255, 0.8);\r\n  margin-bottom: 8px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.form-field:hover label {\r\n  color: #12c7c2;\r\n}\r\n\r\n.form-field input,\r\n.form-field textarea,\r\n.form-field select {\r\n  width: 100%;\r\n  padding: 16px 20px;\r\n  border-radius: 12px;\r\n  border: 2px solid rgba(255, 255, 255, 0.1);\r\n  background: rgba(255, 255, 255, 0.05);\r\n  font-size: 16px;\r\n  font-family: inherit;\r\n  color: #fff;\r\n  outline: none;\r\n  transition: all 0.3s ease;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n}\r\n\r\n.form-field input::placeholder,\r\n.form-field textarea::placeholder {\r\n  color: rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n.form-field input:hover,\r\n.form-field textarea:hover,\r\n.form-field select:hover {\r\n  border-color: rgba(18, 199, 194, 0.4);\r\n  background: rgba(255, 255, 255, 0.08);\r\n}\r\n\r\n.form-field input:focus,\r\n.form-field textarea:focus,\r\n.form-field select:focus {\r\n  border-color: #12c7c2;\r\n  background: rgba(18, 199, 194, 0.1);\r\n  box-shadow: 0 0 0 4px rgba(18, 199, 194, 0.15), 0 0 20px rgba(18, 199, 194, 0.1);\r\n}\r\n\r\n.form-field textarea {\r\n  min-height: 120px;\r\n  resize: vertical;\r\n}\r\n\r\n.form-field select {\r\n  cursor: pointer;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='%2312c7c2'%3E%3Cpath d='M7 10l5 5 5-5z'\/%3E%3C\/svg%3E\");\r\n  background-repeat: no-repeat;\r\n  background-position: right 16px center;\r\n  background-size: 24px;\r\n  padding-right: 48px;\r\n}\r\n\r\n.form-field select option {\r\n  background: #1a1640;\r\n  color: #fff;\r\n}\r\n\r\n\/* Form Row (Two columns) *\/\r\n.form-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 16px;\r\n}\r\n\r\n@media (max-width: 500px) {\r\n  .form-row {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n\/* Browser Autofill Overrides \u2014 prevents Chrome's default white\/yellow background *\/\r\n.form-field input:-webkit-autofill,\r\n.form-field input:-webkit-autofill:hover,\r\n.form-field input:-webkit-autofill:focus,\r\n.form-field textarea:-webkit-autofill,\r\n.form-field textarea:-webkit-autofill:hover,\r\n.form-field textarea:-webkit-autofill:focus,\r\n.form-field select:-webkit-autofill,\r\n.form-field select:-webkit-autofill:hover,\r\n.form-field select:-webkit-autofill:focus {\r\n  -webkit-text-fill-color: #fff;\r\n  -webkit-box-shadow: 0 0 0 1000px rgba(18, 199, 194, 0.12) inset;\r\n  box-shadow: 0 0 0 1000px rgba(18, 199, 194, 0.12) inset;\r\n  border-color: rgba(18, 199, 194, 0.4);\r\n  transition: background-color 5000s ease-in-out 0s;\r\n  caret-color: #fff;\r\n}\r\n\r\n\/* Form Field Errors *\/\r\n.field-error {\r\n  color: #ef4444;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  margin-top: 6px;\r\n  padding-left: 4px;\r\n  animation: errorFadeIn 0.3s ease;\r\n}\r\n\r\n@keyframes errorFadeIn {\r\n  from { opacity: 0; transform: translateY(-4px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Submit Button *\/\r\n.contact-submit-btn {\r\n  width: 100%;\r\n  padding: 18px 32px;\r\n  border: none;\r\n  border-radius: 14px;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  font-weight: 800;\r\n  font-family: inherit;\r\n  color: #fff;\r\n  background: linear-gradient(135deg, #12c7c2, #0ea5e9);\r\n  box-shadow: 0 10px 30px rgba(18, 199, 194, 0.3);\r\n  transition: all 0.3s ease;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin-top: 8px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n.contact-submit-btn::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n  transition: left 0.5s ease;\r\n}\r\n\r\n.contact-submit-btn:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 15px 40px rgba(18, 199, 194, 0.4), 0 0 30px rgba(18, 199, 194, 0.2);\r\n}\r\n\r\n.contact-submit-btn:hover::before {\r\n  left: 100%;\r\n}\r\n\r\n.contact-submit-btn:active {\r\n  transform: translateY(-1px) scale(0.98);\r\n}\r\n\r\n.contact-submit-btn:disabled {\r\n  opacity: 0.7;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n\r\n\/* Contact Info Cards *\/\r\n.contact-info-section {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n}\r\n\r\n.info-card {\r\n  background: rgba(255, 255, 255, 0.03);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  border-radius: 20px;\r\n  padding: 28px;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 20px;\r\n  transition: all 0.4s ease;\r\n  cursor: pointer;\r\n  text-decoration: none;\r\n  color: #fff;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.info-card::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 0;\r\n  background: radial-gradient(circle, rgba(18, 199, 194, 0.15) 0%, transparent 70%);\r\n  transform: translate(-50%, -50%);\r\n  transition: width 0.5s ease, height 0.5s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n.info-card:hover {\r\n  background: rgba(255, 255, 255, 0.06);\r\n  border-color: rgba(18, 199, 194, 0.4);\r\n  transform: translateX(10px);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), -5px 0 30px rgba(18, 199, 194, 0.1);\r\n}\r\n\r\n.info-card:hover::after {\r\n  width: 300px;\r\n  height: 300px;\r\n}\r\n\r\n.info-card.phone-card:hover {\r\n  border-color: rgba(255, 122, 24, 0.5);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), -5px 0 30px rgba(255, 122, 24, 0.15);\r\n}\r\n\r\n.info-card.email-card:hover {\r\n  border-color: rgba(139, 92, 246, 0.5);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), -5px 0 30px rgba(139, 92, 246, 0.15);\r\n}\r\n\r\n.info-card.location-card:hover {\r\n  border-color: rgba(16, 185, 129, 0.5);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), -5px 0 30px rgba(16, 185, 129, 0.15);\r\n}\r\n\r\n.info-card.hours-card:hover {\r\n  border-color: rgba(250, 204, 21, 0.5);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), -5px 0 30px rgba(250, 204, 21, 0.15);\r\n}\r\n\r\n.info-icon {\r\n  width: 56px;\r\n  height: 56px;\r\n  min-width: 56px;\r\n  border-radius: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.info-card:hover .info-icon {\r\n  transform: scale(1.1) rotate(5deg);\r\n}\r\n\r\n.info-icon.phone {\r\n  background: linear-gradient(135deg, #ff7a18, #ff9a4a);\r\n  box-shadow: 0 8px 20px rgba(255, 122, 24, 0.3);\r\n}\r\n\r\n.info-icon.email {\r\n  background: linear-gradient(135deg, #8b5cf6, #a78bfa);\r\n  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);\r\n}\r\n\r\n.info-icon.location {\r\n  background: linear-gradient(135deg, #10b981, #34d399);\r\n  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);\r\n}\r\n\r\n.info-icon.hours {\r\n  background: linear-gradient(135deg, #facc15, #fde047);\r\n  box-shadow: 0 8px 20px rgba(250, 204, 21, 0.3);\r\n}\r\n\r\n.info-icon svg {\r\n  width: 28px;\r\n  height: 28px;\r\n  fill: #fff;\r\n}\r\n\r\n.info-content {\r\n  flex: 1;\r\n}\r\n\r\n.info-label {\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.info-value {\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  margin-bottom: 4px;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.info-card:hover .info-value {\r\n  color: #12c7c2;\r\n}\r\n\r\n.info-card.phone-card:hover .info-value {\r\n  color: #ff7a18;\r\n}\r\n\r\n.info-card.email-card:hover .info-value {\r\n  color: #a78bfa;\r\n}\r\n\r\n.info-card.location-card:hover .info-value {\r\n  color: #34d399;\r\n}\r\n\r\n.info-card.hours-card:hover .info-value {\r\n  color: #fde047;\r\n}\r\n\r\n.info-detail {\r\n  font-size: 14px;\r\n  color: rgba(255, 255, 255, 0.6);\r\n  line-height: 1.5;\r\n}\r\n\r\n\/* CTA Card *\/\r\n.cta-card {\r\n  background: linear-gradient(135deg, rgba(18, 199, 194, 0.15), rgba(14, 165, 233, 0.1));\r\n  border: 2px solid rgba(18, 199, 194, 0.3);\r\n  border-radius: 20px;\r\n  padding: 32px;\r\n  text-align: center;\r\n  transition: all 0.4s ease;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.cta-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(circle, rgba(18, 199, 194, 0.1) 0%, transparent 50%);\r\n  animation: ctaPulse 4s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ctaPulse {\r\n  0%, 100% { transform: scale(1); opacity: 0.5; }\r\n  50% { transform: scale(1.1); opacity: 1; }\r\n}\r\n\r\n.cta-card:hover {\r\n  border-color: rgba(18, 199, 194, 0.6);\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 20px 50px rgba(18, 199, 194, 0.2);\r\n}\r\n\r\n.cta-title {\r\n  font-size: 22px;\r\n  font-weight: 800;\r\n  margin: 0 0 12px 0;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.cta-text {\r\n  font-size: 15px;\r\n  color: rgba(255, 255, 255, 0.7);\r\n  margin: 0 0 20px 0;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.cta-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 14px 28px;\r\n  background: linear-gradient(135deg, #ff7a18, #ff9a4a);\r\n  border: none;\r\n  border-radius: 12px;\r\n  color: #fff;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  position: relative;\r\n  z-index: 1;\r\n  font-family: inherit;\r\n  box-shadow: 0 8px 24px rgba(255, 122, 24, 0.3);\r\n}\r\n\r\n.cta-button:hover {\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: 0 12px 32px rgba(255, 122, 24, 0.4);\r\n}\r\n\r\n.cta-button svg {\r\n  width: 20px;\r\n  height: 20px;\r\n  fill: currentColor;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.cta-button:hover svg {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* Success Message *\/\r\n.contact-success {\r\n  display: none;\r\n  text-align: center;\r\n  padding: 40px 20px;\r\n  animation: successFadeIn 0.5s ease;\r\n}\r\n\r\n.contact-success.active {\r\n  display: block;\r\n}\r\n\r\n@keyframes successFadeIn {\r\n  from { opacity: 0; transform: scale(0.9); }\r\n  to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n.success-icon {\r\n  width: 80px;\r\n  height: 80px;\r\n  margin: 0 auto 24px;\r\n  background: linear-gradient(135deg, #10b981, #34d399);\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  animation: successBounce 0.6s ease;\r\n  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);\r\n}\r\n\r\n@keyframes successBounce {\r\n  0% { transform: scale(0); }\r\n  50% { transform: scale(1.2); }\r\n  100% { transform: scale(1); }\r\n}\r\n\r\n.success-icon svg {\r\n  width: 40px;\r\n  height: 40px;\r\n  fill: #fff;\r\n}\r\n\r\n.success-title {\r\n  font-size: 28px;\r\n  font-weight: 800;\r\n  margin-bottom: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.success-text {\r\n  font-size: 16px;\r\n  color: rgba(255, 255, 255, 0.7);\r\n  line-height: 1.6;\r\n  max-width: 400px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* Trust Badges *\/\r\n.trust-section {\r\n  margin-top: 60px;\r\n  text-align: center;\r\n}\r\n\r\n.trust-title {\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.trust-badges {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 40px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.trust-badge {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  color: rgba(255, 255, 255, 0.6);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease;\r\n  cursor: default;\r\n}\r\n\r\n.trust-badge:hover {\r\n  color: #fff;\r\n  transform: translateY(-3px);\r\n}\r\n\r\n.trust-badge svg {\r\n  width: 24px;\r\n  height: 24px;\r\n  fill: #facc15;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.trust-badge:hover svg {\r\n  transform: scale(1.2) rotate(10deg);\r\n}\r\n\r\n\/* Service Areas *\/\r\n.service-areas {\r\n  margin-top: 40px;\r\n  text-align: center;\r\n}\r\n\r\n.service-pill {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: rgba(255, 255, 255, 0.05);\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  padding: 14px 24px;\r\n  border-radius: 999px;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: rgba(255, 255, 255, 0.7);\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.service-pill:hover {\r\n  background: rgba(18, 199, 194, 0.1);\r\n  border-color: rgba(18, 199, 194, 0.3);\r\n  color: #fff;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.service-pill svg {\r\n  width: 18px;\r\n  height: 18px;\r\n  fill: #12c7c2;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n  .contact-page {\r\n    padding: 60px 20px;\r\n  }\r\n  \r\n  .contact-logo img {\r\n    max-width: 176px;\r\n  }\r\n  \r\n  .contact-form-card {\r\n    padding: 28px 24px;\r\n  }\r\n  \r\n  .info-card {\r\n    padding: 24px 20px;\r\n  }\r\n  \r\n  .info-value {\r\n    font-size: 18px;\r\n  }\r\n  \r\n  .trust-badges {\r\n    gap: 24px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .contact-page {\r\n    padding: 40px 16px;\r\n  }\r\n  \r\n  .contact-logo img {\r\n    max-width: 132px;\r\n  }\r\n  \r\n  .contact-form-card {\r\n    padding: 24px 20px;\r\n    border-radius: 20px;\r\n  }\r\n  \r\n  .form-field input,\r\n  .form-field textarea,\r\n  .form-field select {\r\n    padding: 14px 16px;\r\n  }\r\n  \r\n  .info-card {\r\n    flex-direction: column;\r\n    text-align: center;\r\n    padding: 24px 20px;\r\n  }\r\n  \r\n  .info-card:hover {\r\n    transform: translateY(-5px);\r\n  }\r\n  \r\n  .info-icon {\r\n    margin: 0 auto;\r\n  }\r\n  \r\n  .info-content {\r\n    width: 100%;\r\n  }\r\n  \r\n  .trust-badges {\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n  \r\n  .trust-badge {\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n\/* Reduced Motion *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  .contact-page::before,\r\n  .cta-card::before,\r\n  .contact-logo img,\r\n  .info-card,\r\n  .contact-form-card,\r\n  .contact-submit-btn,\r\n  .trust-badge,\r\n  .gradient-text {\r\n    animation: none;\r\n  }\r\n  \r\n  .contact-logo img:hover,\r\n  .info-card:hover,\r\n  .contact-form-card:hover,\r\n  .contact-submit-btn:hover,\r\n  .trust-badge:hover {\r\n    transform: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"contact-page\">\r\n  <div class=\"contact-container\">\r\n    \r\n    <!-- Logo -->\r\n    <div class=\"contact-logo\">\r\n      <a href=\"https:\/\/buildapoolstgeorge.com\">\r\n        <img decoding=\"async\" src=\"https:\/\/buildapoolstgeorge.com\/wp-content\/uploads\/2025\/12\/cropped-Logo-for-Build-a-Pool-1-e1766439767308.webp\" alt=\"Build a Pool St. George Logo\">\r\n      <\/a>\r\n    <\/div>\r\n    \r\n    <!-- Header -->\r\n    <div class=\"contact-header\">\r\n      <div class=\"contact-badge\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n        Get In Touch\r\n      <\/div>\r\n      <h1 class=\"contact-title\">Let's Build Your <span class=\"gradient-text\">Dream Pool<\/span><\/h1>\r\n      <p class=\"contact-subtitle\">Have questions about your pool project? We're here to help! Fill out the form below or reach out directly.<\/p>\r\n    <\/div>\r\n    \r\n    <!-- Main Grid -->\r\n    <div class=\"contact-grid\">\r\n      \r\n      <!-- Contact Form -->\r\n      <div class=\"contact-form-card\">\r\n        <div id=\"contactFormContent\">\r\n          <h2 class=\"form-title\">Send Us a Message<\/h2>\r\n          <p class=\"form-subtitle\">We typically respond within 24 hours<\/p>\r\n          \r\n          <form id=\"contactForm\" autocomplete=\"on\" method=\"post\" novalidate>\r\n          <div class=\"contact-form-grid\">\r\n            <div class=\"form-row\">\r\n              <div class=\"form-field\">\r\n                <label for=\"contactName\">Your Name<\/label>\r\n                <input type=\"text\" id=\"contactName\" name=\"name\" placeholder=\"John Smith\" autocomplete=\"name\" required>\r\n              <\/div>\r\n              <div class=\"form-field\">\r\n                <label for=\"contactPhone\">Phone Number<\/label>\r\n                <input type=\"tel\" id=\"contactPhone\" name=\"phone\" placeholder=\"(435) 555-1234\" autocomplete=\"tel\" required>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-field\">\r\n              <label for=\"contactEmail\">Email Address<\/label>\r\n              <input type=\"email\" id=\"contactEmail\" name=\"email\" placeholder=\"john@example.com\" autocomplete=\"email\" required>\r\n            <\/div>\r\n            \r\n            <div class=\"form-row\">\r\n              <div class=\"form-field\">\r\n                <label for=\"contactCity\">City<\/label>\r\n                <input type=\"text\" id=\"contactCity\" name=\"city\" placeholder=\"St. George\" autocomplete=\"address-level2\" required>\r\n              <\/div>\r\n              <div class=\"form-field\">\r\n                <label for=\"contactInterest\">I'm Interested In<\/label>\r\n                <select id=\"contactInterest\" name=\"interest\">\r\n                  <option value=\"\">Select an option...<\/option>\r\n                  <option value=\"New Pool\">New Pool Construction<\/option>\r\n                  <option value=\"Pool Renovation\">Pool Renovation<\/option>\r\n                  <option value=\"Hot Tub\/Spa\">Hot Tub \/ Spa<\/option>\r\n                  <option value=\"Pool + Spa Combo\">Pool + Spa Combo<\/option>\r\n                  <option value=\"Just Exploring\">Just Exploring Options<\/option>\r\n                <\/select>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-field\">\r\n              <label for=\"contactMessage\">Your Message (Optional)<\/label>\r\n              <textarea id=\"contactMessage\" name=\"message\" placeholder=\"Tell us about your dream pool project...\" autocomplete=\"off\"><\/textarea>\r\n            <\/div>\r\n            \r\n            <button type=\"submit\" class=\"contact-submit-btn\" id=\"contactSubmitBtn\">\r\n              Send Message <svg style=\"width:20px;height:20px;fill:#fff;vertical-align:middle;margin-left:8px;\" viewBox=\"0 0 24 24\"><path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"\/><\/svg>\r\n            <\/button>\r\n          <\/div>\r\n          <\/form>\r\n        <\/div>\r\n        \r\n        <!-- Success Message -->\r\n        <div class=\"contact-success\" id=\"contactSuccess\">\r\n          <div class=\"success-icon\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg>\r\n          <\/div>\r\n          <h3 class=\"success-title\">Message Sent!<\/h3>\r\n          <p class=\"success-text\">Thank you for reaching out! We've received your message and will get back to you within 24 hours.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <!-- Contact Info Section -->\r\n      <div class=\"contact-info-section\">\r\n        \r\n        <!-- Phone Card -->\r\n        <a href=\"tel:+14359008608\" class=\"info-card phone-card\">\r\n          <div class=\"info-icon phone\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"info-content\">\r\n            <div class=\"info-label\">Call Us<\/div>\r\n            <div class=\"info-value\">(435) 900-8608<\/div>\r\n            <div class=\"info-detail\">Tap to call us directly<\/div>\r\n          <\/div>\r\n        <\/a>\r\n        \r\n        <!-- Email Card -->\r\n        <a href=\"mailto:info@buildapoolstgeorge.com\" class=\"info-card email-card\">\r\n          <div class=\"info-icon email\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"info-content\">\r\n            <div class=\"info-label\">Email Us<\/div>\r\n            <div class=\"info-value\">info@buildapoolstgeorge.com<\/div>\r\n            <div class=\"info-detail\">We'll respond within 24 hours<\/div>\r\n          <\/div>\r\n        <\/a>\r\n        \r\n        <!-- Location Card -->\r\n        <div class=\"info-card location-card\">\r\n          <div class=\"info-icon location\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"info-content\">\r\n            <div class=\"info-label\">Service Area<\/div>\r\n            <div class=\"info-value\">Southern Utah & Mesquite<\/div>\r\n            <div class=\"info-detail\">St. George, Washington, Hurricane, Ivins & more<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Hours Card -->\r\n        <div class=\"info-card hours-card\">\r\n          <div class=\"info-icon hours\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"info-content\">\r\n            <div class=\"info-label\">Business Hours<\/div>\r\n            <div class=\"info-value\">Mon - Sat: 8am - 6pm<\/div>\r\n            <div class=\"info-detail\">Sunday: By appointment only<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- CTA Card -->\r\n        <div class=\"cta-card\">\r\n          <h3 class=\"cta-title\">Ready to Get Started?<\/h3>\r\n          <p class=\"cta-text\">Use our interactive design tool to customize your dream pool and get an instant estimate!<\/p>\r\n          <a href=\"https:\/\/buildapoolstgeorge.com\/?page_id=122\" class=\"cta-button\">\r\n            Design Your Pool Now\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n          <\/a>\r\n        <\/div>\r\n        \r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- Trust Badges -->\r\n    <div class=\"trust-section\">\r\n      <div class=\"trust-title\">Why Choose Us<\/div>\r\n      <div class=\"trust-badges\">\r\n        <div class=\"trust-badge\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n          <span>5-Star Rated Builders<\/span>\r\n        <\/div>\r\n        <div class=\"trust-badge\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\/><\/svg>\r\n          <span>Licensed & Insured<\/span>\r\n        <\/div>\r\n        <div class=\"trust-badge\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z\"\/><\/svg>\r\n          <span>Financing Available<\/span>\r\n        <\/div>\r\n        <div class=\"trust-badge\">\r\n          <svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/><\/svg>\r\n          <span>Free Estimates<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- Service Areas -->\r\n    <div class=\"service-areas\">\r\n      <div class=\"service-pill\">\r\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n        St. George \u2022 Washington \u2022 Hurricane \u2022 Ivins \u2022 Mesquite\r\n      <\/div>\r\n    <\/div>\r\n    \r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var contactForm = document.getElementById('contactForm');\r\n  var submitBtn = document.getElementById('contactSubmitBtn');\r\n  var formContent = document.getElementById('contactFormContent');\r\n  var successMessage = document.getElementById('contactSuccess');\r\n  \r\n  \/\/ Clear error styling when user starts typing in a flagged field\r\n  var formFields = document.querySelectorAll('#contactName, #contactPhone, #contactEmail, #contactCity');\r\n  for(var i = 0; i < formFields.length; i++){\r\n    formFields[i].addEventListener('input', function(){\r\n      this.style.borderColor = 'rgba(255, 255, 255, 0.1)';\r\n      var existingError = this.parentNode.querySelector('.field-error');\r\n      if(existingError) existingError.remove();\r\n    });\r\n  }\r\n  \r\n  contactForm.addEventListener('submit', function(e){\r\n    \/\/ Prevent the browser from actually submitting the form \/ reloading the page\r\n    e.preventDefault();\r\n    var name = document.getElementById('contactName').value.trim();\r\n    var phone = document.getElementById('contactPhone').value.trim();\r\n    var email = document.getElementById('contactEmail').value.trim();\r\n    var city = document.getElementById('contactCity').value.trim();\r\n    var interest = document.getElementById('contactInterest').value;\r\n    var message = document.getElementById('contactMessage').value.trim();\r\n    \r\n    \/\/ Clear previous error states\r\n    var allFields = document.querySelectorAll('.form-field input, .form-field textarea, .form-field select');\r\n    for(var i = 0; i < allFields.length; i++){\r\n      allFields[i].style.borderColor = 'rgba(255, 255, 255, 0.1)';\r\n    }\r\n    var oldErrors = document.querySelectorAll('.field-error');\r\n    for(var i = 0; i < oldErrors.length; i++){\r\n      oldErrors[i].remove();\r\n    }\r\n    \r\n    var errors = [];\r\n    \r\n    \/\/ Name validation \u2014 required\r\n    if(!name){\r\n      errors.push({ field: 'contactName', msg: 'Name is required' });\r\n    }\r\n    \r\n    \/\/ Phone validation \u2014 required, at least 10 digits\r\n    var phoneDigits = phone.replace(\/\\D\/g, '');\r\n    if(!phone){\r\n      errors.push({ field: 'contactPhone', msg: 'Phone number is required' });\r\n    } else if(phoneDigits.length < 10){\r\n      errors.push({ field: 'contactPhone', msg: 'Phone number must be at least 10 digits' });\r\n    }\r\n    \r\n    \/\/ Email validation \u2014 required, must match format XXX@XXX.XXX\r\n    var emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n    if(!email){\r\n      errors.push({ field: 'contactEmail', msg: 'Email address is required' });\r\n    } else if(!emailRegex.test(email)){\r\n      errors.push({ field: 'contactEmail', msg: 'Please enter a valid email (example@domain.com)' });\r\n    }\r\n    \r\n    \/\/ City validation \u2014 required\r\n    if(!city){\r\n      errors.push({ field: 'contactCity', msg: 'City is required' });\r\n    }\r\n    \r\n    \/\/ If there are errors, highlight the fields and stop submission\r\n    if(errors.length > 0){\r\n      for(var i = 0; i < errors.length; i++){\r\n        var fieldEl = document.getElementById(errors[i].field);\r\n        if(fieldEl){\r\n          fieldEl.style.borderColor = '#ef4444';\r\n          var errorMsg = document.createElement('div');\r\n          errorMsg.className = 'field-error';\r\n          errorMsg.textContent = errors[i].msg;\r\n          fieldEl.parentNode.appendChild(errorMsg);\r\n        }\r\n      }\r\n      \/\/ Scroll to and focus the first error field\r\n      var firstError = document.getElementById(errors[0].field);\r\n      if(firstError){\r\n        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n        firstError.focus();\r\n      }\r\n      return;\r\n    }\r\n    \r\n    \/\/ Check that EmailJS is available before trying to send\r\n    if(typeof emailjs === 'undefined'){\r\n      alert('The email service is still loading. Please wait a moment and try again.');\r\n      return;\r\n    }\r\n    \r\n    \/\/ Disable button and show loading state\r\n    submitBtn.disabled = true;\r\n    submitBtn.innerHTML = 'Sending... <svg style=\"width:20px;height:20px;fill:#fff;vertical-align:middle;margin-left:8px;animation:spin 1s linear infinite;\" viewBox=\"0 0 24 24\"><path d=\"M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z\"\/><\/svg>';\r\n    \r\n    \/\/ Generate timestamp\r\n    var now = new Date();\r\n    var timestamp = now.toLocaleString('en-US', {\r\n      weekday: 'long',\r\n      year: 'numeric',\r\n      month: 'long',\r\n      day: 'numeric',\r\n      hour: '2-digit',\r\n      minute: '2-digit',\r\n      timeZoneName: 'short'\r\n    });\r\n    \r\n    \/\/ EmailJS parameters \u2014 must match your template variable names exactly\r\n    var templateParams = {\r\n      from_name: name,\r\n      from_email: email,\r\n      phone: phone,\r\n      city: city,\r\n      interest: interest || 'Not specified',\r\n      message: message || 'No message provided',\r\n      timestamp: timestamp\r\n    };\r\n    \r\n    \/\/ Send email \u2014 NO public key as 4th argument (already initialized above)\r\n    emailjs.send('service_9ao0xh8', 'template_ub598um', templateParams)\r\n      .then(function(response) {\r\n        console.log('EmailJS SUCCESS:', response.status, response.text);\r\n        \r\n        \/\/ Hide form and show success message\r\n        formContent.style.display = 'none';\r\n        successMessage.classList.add('active');\r\n        \r\n      }, function(error) {\r\n        console.log('EmailJS FAILED:', JSON.stringify(error));\r\n        alert('There was an error sending your message. Please try again or call us directly at (435) 900-8608.');\r\n        \r\n        \/\/ Re-enable button\r\n        submitBtn.disabled = false;\r\n        submitBtn.innerHTML = 'Send Message <svg style=\"width:20px;height:20px;fill:#fff;vertical-align:middle;margin-left:8px;\" viewBox=\"0 0 24 24\"><path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"\/><\/svg>';\r\n      });\r\n  });\r\n  \r\n  \/\/ Add spin animation for loading state\r\n  var style = document.createElement('style');\r\n  style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';\r\n  document.head.appendChild(style);\r\n  \r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Contact us and we&#8217;ll be in touch shortly<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-436","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/pages\/436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=436"}],"version-history":[{"count":13,"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=\/wp\/v2\/pages\/436\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/buildapoolstgeorge.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}