diff --git a/index.html b/index.html new file mode 100644 index 0000000..1fc5084 --- /dev/null +++ b/index.html @@ -0,0 +1,232 @@ + + + + + + אינסטלטורים בתל אביב יפו | שירותי אינסטלציה 24/7 + + + + + + + + + + + + + +
+
+ + + + 076-800-5526 + +
+
+ +
+
+
+
+ + זמינים 24/7 • תל אביב-יפו והסביבה +
+

+ אינסטלטור מקצועי + מגיע אליכם + תוך שעה +

+

פתיחת סתימות, תיקון נזילות, התקנות חדשות וטיפול בדודי שמש. עבודה נקייה, מחיר סגור מראש, ללא הפתעות.

+
+ + + התקשרו עכשיו + + או השאירו פרטים +
+
    +
  • + + אחריות מלאה על העבודה +
    • +
  • + + זמן הגעה ממוצע: 45 דקות +
    • +
  • + + מחיר סגור לפני תחילת העבודה +
    • +
+
+
+ +
+
+

מה אנחנו מתקנים

+

כל בעיות האינסטלציה בבית ובעסק — פתרון מקצועי באותו היום

+
+
+
+ +
+
+

פתיחת סתימות

+

כיורים, אמבטיות, שירותים וביוב ראשי. ציוד מקצועי כולל מצלמה לאיתור הסתימה.

+ הכי נפוץ +
+
+
+
+ +
+

תיקוני נזילות

+

איתור ותיקון נזילות סמויות וגלויות. מניעת נזקי רטיבות לפני שהם מתפשטים.

+
+
+
+ +
+

התקנות אינסטלציה

+

התקנת כיורים, אסלות, ברזים, מכונות כביסה ומדיחי כלים בצורה מקצועית.

+
+
+
+ +
+

טיפול בדוד שמש

+

תיקון, החלפה ותחזוקת דודי שמש וחשמל. אין מים חמים? נפתור תוך שעות.

+
+
+
+
+ +
+
+
+
+

בעיית אינסטלציה לא מחכה.
גם אנחנו לא.

+

צוות האינסטלטורים שלנו זמין בכל שעה — ביום, בלילה, בשבת ובחג. תקלה דחופה? אנחנו בדרך.

+
+ תל אביב + יפו + רמת אביב + פלורנטין + נווה צדק + הצפון הישן + רמת החייל + +הסביבה +
+
+
+
+ חייגו עכשיו + 076-800-5526 +
+

מענה אנושי תוך 30 שניות

+
+
+
+
+ +
+
+
+
+

השאירו פרטים

+

מלאו את הטופס ונחזור אליכם תוך 5 דקות. או פשוט התקשרו — אנחנו כאן.

+
+ + + 076-800-5526 + +
+ + 24 שעות ביממה, 7 ימים בשבוע +
+
+
+
+
+ + + נא להזין שם מלא +
+
+ + + נא להזין מספר טלפון תקין +
+
+ + +
+ +

אנחנו לא שולחים ספאם. רק תשובה לפנייה שלכם.

+ +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..460490b --- /dev/null +++ b/script.js @@ -0,0 +1,146 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Header scroll effect + const header = document.querySelector('.header'); + let ticking = false; + + function updateHeader() { + const scrollY = window.scrollY; + if (scrollY > 50) { + header.style.boxShadow = '0 2px 16px rgba(10, 22, 40, 0.1)'; + } else { + header.style.boxShadow = 'none'; + } + ticking = false; + } + + window.addEventListener('scroll', function() { + if (!ticking) { + requestAnimationFrame(updateHeader); + ticking = true; + } + }, { passive: true }); + + // Form handling with validation + const form = document.getElementById('contactForm'); + const formSuccess = document.getElementById('formSuccess'); + + function validateField(field) { + const value = field.value.trim(); + let isValid = true; + + if (field.hasAttribute('required') && !value) { + isValid = false; + } + + if (field.type === 'tel' && value) { + // Israeli phone number validation (basic) + const phonePattern = /^0[0-9]{8,9}$/; + const cleanPhone = value.replace(/[-\s]/g, ''); + isValid = phonePattern.test(cleanPhone); + } + + if (isValid) { + field.classList.remove('invalid'); + field.removeAttribute('aria-invalid'); + } else { + field.classList.add('invalid'); + field.setAttribute('aria-invalid', 'true'); + } + + return isValid; + } + + if (form) { + const nameField = form.querySelector('#name'); + const phoneField = form.querySelector('#phone'); + + // Validate on blur + [nameField, phoneField].forEach(function(field) { + if (field) { + field.addEventListener('blur', function() { + validateField(this); + }); + + // Clear error on input + field.addEventListener('input', function() { + if (this.classList.contains('invalid')) { + validateField(this); + } + }); + } + }); + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + // Validate all required fields + let isFormValid = true; + + if (nameField && !validateField(nameField)) { + isFormValid = false; + } + + if (phoneField && !validateField(phoneField)) { + isFormValid = false; + } + + if (!isFormValid) { + // Focus first invalid field + const firstInvalid = form.querySelector('.invalid'); + if (firstInvalid) { + firstInvalid.focus(); + } + return; + } + + const submitBtn = form.querySelector('.form-submit'); + const originalText = submitBtn.textContent; + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + + // Simulate submission + setTimeout(function() { + submitBtn.textContent = originalText; + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + formSuccess.hidden = false; + formSuccess.setAttribute('role', 'alert'); + form.reset(); + + // Clear any validation states + form.querySelectorAll('.invalid').forEach(function(el) { + el.classList.remove('invalid'); + el.removeAttribute('aria-invalid'); + }); + + setTimeout(function() { + formSuccess.hidden = true; + }, 6000); + }, 1200); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + if (href === '#') return; + + const target = document.querySelector(href); + if (target) { + e.preventDefault(); + target.scrollIntoView({ + behavior: prefersReducedMotion ? 'auto' : 'smooth', + block: 'start' + }); + target.focus({ preventScroll: true }); + } + }); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..057455a --- /dev/null +++ b/style.css @@ -0,0 +1,972 @@ +:root { + --primary: #0a1628; + --primary-light: #162544; + --accent: #0096b4; + --accent-light: rgba(0, 150, 180, 0.12); + --accent-dark: #007a94; + --bg: #f8fafc; + --bg-alt: #ffffff; + --text: #1e293b; + --text-muted: #374151; + --text-light: #6b7280; + --success: #059669; + --error: #dc2626; + --radius: 12px; + --radius-lg: 20px; + --shadow: 0 4px 24px rgba(10, 22, 40, 0.08); + --shadow-lg: 0 12px 48px rgba(10, 22, 40, 0.12); + --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + html { + scroll-behavior: auto; + } +} + +body { + font-family: 'Heebo', sans-serif; + font-size: 1rem; + line-height: 1.7; + color: var(--text); + background: var(--bg); + -webkit-font-smoothing: antialiased; +} + +.container { + width: 100%; + max-width: 1120px; + margin-inline: auto; + padding-inline: 1.5rem; +} + +a { + color: inherit; + text-decoration: none; +} + +svg { + display: block; + fill: currentColor; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100px; + inset-inline-start: 50%; + transform: translateX(50%); + background: var(--primary); + color: white; + padding: 0.75rem 1.5rem; + border-radius: var(--radius); + z-index: 1000; + font-weight: 500; +} + +[dir="ltr"] .skip-link { + transform: translateX(-50%); +} + +.skip-link:focus { + top: 1rem; +} + +/* Header */ +.header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(12px); + border-block-end: 1px solid rgba(10, 22, 40, 0.08); + transition: var(--transition); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1120px; + margin-inline: auto; + padding: 0.875rem 1.5rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 1.125rem; + color: var(--primary); +} + +.header-phone { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + background: var(--accent); + color: white; + border-radius: 50px; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 1rem; + transition: var(--transition); +} + +.header-phone:hover { + background: var(--accent-dark); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 150, 180, 0.3); +} + +.header-phone:focus { + outline: 3px solid var(--primary); + outline-offset: 2px; +} + +.phone-icon { + width: 18px; + height: 18px; + fill: white; +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + padding-block: 100px 60px; + overflow: hidden; + background: linear-gradient(160deg, var(--bg) 0%, rgba(0, 150, 180, 0.04) 50%, var(--bg) 100%); +} + +.hero::before { + content: ''; + position: absolute; + inset-inline-end: -10%; + top: 10%; + width: 50%; + height: 80%; + background: var(--accent-light); + border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; + opacity: 0.5; + z-index: 0; +} + +.hero-content { + position: relative; + z-index: 1; + padding: 0 2rem; + max-width: 680px; + text-align: center; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--primary); + color: white; + border-radius: 50px; + font-size: 0.875rem; + font-weight: 500; + margin-block-end: 1.5rem; + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.5s 0.1s forwards; +} + +.badge-icon { + width: 16px; + height: 16px; + fill: var(--accent); +} + +.hero-title { + font-family: 'Rubik', sans-serif; + font-size: clamp(2.25rem, 5vw, 3.25rem); + font-weight: 600; + line-height: 1.2; + color: var(--primary); + margin-block-end: 1.25rem; +} + +.hero-title-line { + display: block; + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.5s forwards; +} + +.hero-title-line:nth-child(1) { animation-delay: 0.2s; } +.hero-title-line:nth-child(2) { animation-delay: 0.3s; } +.hero-title-line:nth-child(3) { animation-delay: 0.4s; } + +.hero-title-accent { + color: var(--accent); +} + +.hero-desc { + font-size: 1.125rem; + color: var(--text-muted); + margin-block-end: 2rem; + max-width: 520px; + margin-inline: auto; + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.5s 0.5s forwards; +} + +.hero-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.5s 0.6s forwards; +} + +.cta-button { + display: inline-flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 2rem; + background: var(--accent); + color: white; + border-radius: 50px; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 1.125rem; + box-shadow: 0 4px 20px rgba(0, 150, 180, 0.3); + transition: var(--transition); +} + +.cta-button:hover { + background: var(--accent-dark); + transform: translateY(-2px); + box-shadow: 0 8px 32px rgba(0, 150, 180, 0.4); +} + +.cta-button:focus { + outline: 3px solid var(--primary); + outline-offset: 3px; +} + +.cta-icon { + width: 22px; + height: 22px; + fill: white; +} + +.cta-secondary { + color: var(--primary); + font-weight: 500; + border-block-end: 2px solid var(--primary); + transition: var(--transition); +} + +.cta-secondary:hover { + color: var(--accent); + border-color: var(--accent); +} + +.cta-secondary:focus { + outline: 2px solid var(--primary); + outline-offset: 4px; +} + +.hero-trust { + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem 2rem; + margin-block-start: 2.5rem; + opacity: 0; + animation: fadeUp 0.5s 0.7s forwards; +} + +.trust-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + color: var(--text-muted); +} + +.trust-item svg { + width: 20px; + height: 20px; + fill: var(--accent); + flex-shrink: 0; +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Services */ +.services { + padding: 5rem 0; + background: var(--bg-alt); +} + +.section-title { + font-family: 'Rubik', sans-serif; + font-size: clamp(1.75rem, 4vw, 2.25rem); + font-weight: 600; + color: var(--primary); + text-align: center; + margin-block-end: 0.75rem; +} + +.section-subtitle { + text-align: center; + color: var(--text-muted); + font-size: 1.1rem; + margin-block-end: 3rem; + max-width: 500px; + margin-inline: auto; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; +} + +.service-card { + position: relative; + background: var(--bg); + border-radius: var(--radius-lg); + padding: 1.75rem; + transition: var(--transition); + border: 2px solid transparent; +} + +.service-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--accent-light); +} + +.service-card:focus-within { + outline: 3px solid var(--accent); + outline-offset: 2px; +} + +.service-card-featured { + grid-column: 1 / -1; + display: grid; + grid-template-columns: auto 1fr; + gap: 1.5rem; + align-items: center; + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); + padding: 2rem; +} + +.service-card-featured .service-icon { + margin-block-end: 0; +} + +.service-card-featured .service-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.service-card-featured .service-title, +.service-card-featured .service-desc { + color: white; +} + +.service-card-featured .service-desc { + opacity: 0.85; +} + +.service-card-featured .service-icon svg circle { + fill: rgba(0, 150, 180, 0.2); +} + +.service-tag { + position: absolute; + top: 1rem; + inset-inline-start: 1rem; + padding: 0.25rem 0.75rem; + background: var(--accent); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 50px; +} + +.service-card-featured .service-tag { + position: static; + align-self: flex-start; + margin-block-start: 0.5rem; +} + +.service-icon { + width: 64px; + height: 64px; + margin-block-end: 1.25rem; + flex-shrink: 0; +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-title { + font-family: 'Rubik', sans-serif; + font-size: 1.125rem; + font-weight: 500; + color: var(--primary); + margin-block-end: 0.5rem; +} + +.service-desc { + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* Availability */ +.availability { + padding: 5rem 0; + background: var(--primary); + position: relative; + overflow: hidden; +} + +.availability::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at 30% 70%, rgba(0, 150, 180, 0.12) 0%, transparent 50%); +} + +.availability-inner { + position: relative; + display: grid; + grid-template-columns: 1fr auto; + gap: 3rem; + align-items: center; +} + +.availability-title { + font-family: 'Rubik', sans-serif; + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 600; + color: white; + margin-block-end: 1rem; + line-height: 1.3; +} + +.availability-title span { + color: var(--accent); +} + +.availability-desc { + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.8); + margin-block-end: 1.5rem; + max-width: 500px; +} + +.availability-areas { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; +} + +.area-tag { + padding: 0.5rem 1rem; + background: rgba(255, 255, 255, 0.12); + color: white; + border-radius: 50px; + font-size: 0.875rem; + font-weight: 500; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: var(--transition); +} + +.area-tag:hover { + background: var(--accent); + border-color: var(--accent); +} + +.availability-cta { + text-align: center; +} + +.big-phone { + background: white; + padding: 1.5rem 2rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + transition: var(--transition); +} + +.big-phone:hover { + transform: scale(1.03); +} + +.big-phone-label { + display: block; + font-size: 0.875rem; + color: var(--text-muted); + margin-block-end: 0.25rem; +} + +.big-phone a { + font-family: 'Rubik', sans-serif; + font-size: clamp(1.375rem, 3vw, 1.75rem); + font-weight: 600; + color: var(--primary); + display: block; +} + +.big-phone a:focus { + outline: 3px solid var(--accent); + outline-offset: 4px; +} + +.phone-note { + margin-block-start: 0.75rem; + color: rgba(255, 255, 255, 0.7); + font-size: 0.875rem; +} + +/* Contact */ +.contact { + padding: 5rem 0; + background: var(--bg); +} + +.contact-inner { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3rem; + align-items: start; +} + +.contact-desc { + color: var(--text-muted); + margin-block-end: 1.5rem; + font-size: 1.05rem; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-phone { + display: inline-flex; + align-items: center; + gap: 0.75rem; + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: var(--primary); + transition: var(--transition); +} + +.contact-phone:hover { + color: var(--accent-dark); +} + +.contact-phone:focus { + outline: 3px solid var(--primary); + outline-offset: 4px; +} + +.contact-phone svg { + width: 28px; + height: 28px; + fill: var(--accent); +} + +.contact-hours { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-muted); + font-size: 0.95rem; +} + +.contact-hours svg { + width: 20px; + height: 20px; + fill: var(--text-light); +} + +.contact-form { + background: var(--bg-alt); + padding: 2rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow); +} + +.form-group { + margin-block-end: 1.25rem; +} + +.form-group label { + display: block; + font-weight: 500; + color: var(--text); + margin-block-end: 0.375rem; + font-size: 0.9rem; +} + +.optional { + font-weight: 400; + color: var(--text-light); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.875rem 1rem; + border: 2px solid rgba(10, 22, 40, 0.1); + border-radius: var(--radius); + font-family: inherit; + font-size: 1rem; + color: var(--text); + background: white; + transition: var(--transition); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: var(--text-light); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 4px var(--accent-light); +} + +.form-group input.invalid, +.form-group textarea.invalid { + border-color: var(--error); + box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); +} + +.form-group .error-message { + display: none; + color: var(--error); + font-size: 0.8rem; + margin-block-start: 0.375rem; +} + +.form-group input.invalid + .error-message, +.form-group textarea.invalid + .error-message { + display: block; +} + +.form-group textarea { + resize: vertical; + min-height: 90px; +} + +.form-submit { + width: 100%; + padding: 1rem; + background: var(--accent); + color: white; + border: none; + border-radius: var(--radius); + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 1.0625rem; + cursor: pointer; + transition: var(--transition); +} + +.form-submit:hover { + background: var(--accent-dark); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 150, 180, 0.3); +} + +.form-submit:focus { + outline: 3px solid var(--primary); + outline-offset: 3px; +} + +.form-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + +.form-note { + margin-block-start: 0.75rem; + font-size: 0.8rem; + color: var(--text-light); + text-align: center; +} + +.form-success { + display: flex; + align-items: center; + gap: 0.75rem; + margin-block-start: 1.25rem; + padding: 1rem; + background: rgba(5, 150, 105, 0.1); + border-radius: var(--radius); + color: var(--success); + font-weight: 500; +} + +.form-success svg { + width: 24px; + height: 24px; + fill: currentColor; + flex-shrink: 0; +} + +/* Footer */ +.footer { + padding: 1.5rem 0; + background: var(--primary-light); +} + +.footer-inner { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 0.75rem; + color: white; + font-family: 'Rubik', sans-serif; + font-weight: 500; + font-size: 0.9rem; +} + +.footer-logo { + width: 32px; + height: 32px; +} + +.footer-contact a { + color: var(--accent); + font-family: 'Rubik', sans-serif; + font-weight: 500; +} + +.footer-contact a:focus { + outline: 2px solid var(--accent); + outline-offset: 4px; +} + +.footer-copy { + color: rgba(255, 255, 255, 0.5); + font-size: 0.8rem; +} + +/* Responsive */ +@media (max-width: 1024px) { + .hero { + min-height: auto; + padding-block: 100px 60px; + } + + .hero::before { + width: 80%; + inset-inline-end: -20%; + opacity: 0.3; + } + + .hero-content { + padding: 0 1.5rem; + max-width: 100%; + } + + .services-grid { + grid-template-columns: 1fr 1fr; + } + + .service-card-featured { + grid-column: 1 / -1; + } + + .availability-inner { + grid-template-columns: 1fr; + gap: 2.5rem; + text-align: center; + } + + .availability-desc { + margin-inline: auto; + } + + .availability-areas { + justify-content: center; + } + + .contact-inner { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .contact-info { + text-align: center; + } + + .contact-details { + align-items: center; + } +} + +@media (max-width: 640px) { + .header-inner { + padding: 0.75rem 1rem; + } + + .logo-text { + font-size: 0.95rem; + } + + .header-phone span { + display: none; + } + + .header-phone { + padding: 0.75rem; + border-radius: 50%; + } + + .hero { + padding-block: 90px 50px; + } + + .hero-title { + font-size: 2rem; + } + + .hero-desc { + font-size: 1rem; + } + + .hero-actions { + flex-direction: column; + align-items: stretch; + } + + .cta-button { + justify-content: center; + font-size: 1rem; + } + + .cta-secondary { + text-align: center; + } + + .hero-trust { + flex-direction: column; + gap: 0.75rem; + } + + .services { + padding: 3.5rem 0; + } + + .services-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .service-card { + padding: 1.5rem; + } + + .service-card-featured { + grid-template-columns: 1fr; + text-align: center; + } + + .service-card-featured .service-icon { + margin-inline: auto; + margin-block-end: 1rem; + } + + .service-card-featured .service-tag { + align-self: center; + } + + .availability { + padding: 3.5rem 0; + } + + .big-phone { + padding: 1.25rem 1.75rem; + } + + .big-phone a { + font-size: 1.375rem; + } + + .contact { + padding: 3.5rem 0; + } + + .contact-form { + padding: 1.5rem; + } + + .footer-inner { + flex-direction: column; + text-align: center; + gap: 0.75rem; + } +}