/* ========================================================================== Imperial Hospital - Dedicated Mobile & Tablet Responsive Optimization (v5.0) Strictly affects viewports <= 1024px (Mobile & Tablet only). Desktop layout (>= 1025px) remains 100% UNTOUCHED and unchanged. ========================================================================== */ /* -------------------------------------------------------------------------- 1. GLOBAL MOBILE VIEWPORT & BASE RESETS (<= 767px) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-text-size-adjust: 100% !important; -webkit-tap-highlight-color: transparent !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 0 !important; } *, *::before, *::after { box-sizing: border-box !important; } img, picture, video, canvas, svg { max-width: 100% !important; height: auto !important; } /* Section & Container Resets - Eliminates bloated whitespace between sections */ .elementor-section.elementor-top-section, .e-con-parent, .e-con.e-parent { padding-left: 16px !important; padding-right: 16px !important; padding-top: 18px !important; padding-bottom: 18px !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } .elementor-section.elementor-section-boxed > .elementor-container, .elementor-container, .e-con-inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Column Reset - Stacks cleanly without horizontal overflowing gaps */ .elementor-column, .elementor-column.elementor-col-100, .elementor-column.elementor-col-50, .elementor-column.elementor-col-33, .elementor-column.elementor-col-25, .elementor-column.elementor-col-20, .elementor-top-column { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Clean inner sections reset */ .elementor-inner-section { padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Elementor generic widget spacing on mobile */ .elementor-widget:not(:last-child) { margin-bottom: 14px !important; } /* Specific element margin-gap normalization across homepage and inner pages */ .elementor-element.elementor-element-ec80242, .elementor-element.elementor-element-061844f, .elementor-element.elementor-element-dfd9b3c, .elementor-element.elementor-element-9dff5c7, .elementor-element.elementor-element-3f924fb, .elementor-element.elementor-element-7d0557e, .elementor-element.elementor-element-503ce95, .elementor-element.elementor-element-ec9b084, .elementor-element.elementor-element-8c643dc, .elementor-element.elementor-element-05b0d67, .elementor-element.elementor-element-e7de8c8, .elementor-element.elementor-element-6f98af5, .elementor-element.elementor-element-2f358e5 { margin-top: 0 !important; margin-bottom: 0 !important; --margin-top: 0px !important; --margin-bottom: 0px !important; } /* CRITICAL: Services Section (3f924fb - live, 9dff5c7 - draft) post-871.css sets padding: 50px 20px 150px 20px at max-width: 1366px This collapses the huge empty space below the Learn More button */ html body .elementor-element.elementor-element-3f924fb, html body .elementor-element.elementor-element-9dff5c7, html body .elementor-element.elementor-element-ec9b084 { padding-top: 18px !important; padding-right: 16px !important; padding-bottom: 18px !important; padding-left: 16px !important; margin-top: 0 !important; margin-bottom: 0 !important; --padding-top: 18px !important; --padding-bottom: 18px !important; --margin-top: 0px !important; --margin-bottom: 0px !important; } html body .elementor-element.elementor-element-3f924fb > .e-con-inner, html body .elementor-element.elementor-element-9dff5c7 > .elementor-container { padding: 0 !important; margin: 0 !important; width: 100% !important; } html body .elementor-element.elementor-element-91c8815 { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Remove empty pre-footer spacer causing white gap before footer */ html body .elementor-element-78bc662 { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } /* "What makes us diffrent?" Heading Section (1ef12a6) */ html body .elementor-element.elementor-element-1ef12a6 { margin-top: 16px !important; margin-bottom: 6px !important; padding: 0 16px !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; } html body .elementor-element.elementor-element-1ef12a6 .elementor-heading-title { text-align: center !important; font-size: clamp(20px, 4.8vw, 24px) !important; margin: 0 !important; } /* CRITICAL: Override sections 05b0d67 & e7de8c8 (What makes us different 8 cards) */ html body .elementor-element.elementor-element-05b0d67, html body .elementor-element.elementor-element-e7de8c8 { padding-top: 4px !important; padding-bottom: 8px !important; padding-left: 16px !important; padding-right: 16px !important; margin-top: 0 !important; margin-bottom: 0 !important; } html body .elementor-element.elementor-element-05b0d67 > .elementor-container, html body .elementor-element.elementor-element-e7de8c8 > .elementor-container { padding: 0 !important; margin: 0 !important; width: 100% !important; } /* Feature flip cards inside 05b0d67 and e7de8c8 */ html body .elementor-element.elementor-element-05b0d67 .elementor-column, html body .elementor-element.elementor-element-e7de8c8 .elementor-column { margin-bottom: 10px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } html body .elementor-element.elementor-element-05b0d67 .elementor-element-populated, html body .elementor-element.elementor-element-e7de8c8 .elementor-element-populated { padding: 0 !important; } /* Flip box styling: clean auto-height, clean padding, proper text fit */ html body .wpr-flip-box { height: auto !important; min-height: 155px !important; border-radius: 10px !important; } html body .wpr-flip-box-front .wpr-flip-box-content, html body .wpr-flip-box-back .wpr-flip-box-content { padding: 16px 14px !important; } html body .wpr-flip-box-front .wpr-flip-box-icon { font-size: 30px !important; margin-bottom: 6px !important; } html body .wpr-flip-box-front .wpr-flip-box-title, html body .wpr-flip-box-back .wpr-flip-box-title { font-size: 15.5px !important; line-height: 1.3 !important; margin: 0 0 4px !important; word-break: break-word !important; } html body .wpr-flip-box-front .wpr-flip-box-description p, html body .wpr-flip-box-back .wpr-flip-box-description p { font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important; } /* ---------------------------------------------------------------------- TYPOGRAPHY REFINEMENTS FOR MOBILE ---------------------------------------------------------------------- */ /* 1. Section Badges / Category Tags (Uppercase, medium bold 16px) */ html body .elementor-element-3d6917d2 .elementor-heading-title, html body .elementor-element-2885bc6 .elementor-heading-title, html body .elementor-element-365cff6 .elementor-heading-title, html body .elementor-element-444d2a0 .elementor-heading-title, html body .elementor-element-3ce6c4f .elementor-heading-title, html body .elementor-element-26bba71 .elementor-heading-title, html body .elementor-element-7d30062 .elementor-heading-title, html body .elementor-element-2ff44ef .elementor-heading-title, html body .elementor-element-f2b91a5 .elementor-heading-title, html body .elementor-element-4ecb98b .elementor-heading-title, html body .elementor-element-e36b309 .elementor-heading-title { font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; line-height: 1.35 !important; margin-bottom: 6px !important; display: inline-block !important; } /* 2. Main Section Headings - Proportional mobile scaling */ html body .elementor-widget-heading .elementor-heading-title { font-size: clamp(19px, 4.8vw, 23px) !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 8px !important; word-break: break-word !important; } /* 3. Subtitle Paragraphs inside Heading Widgets - decrease font size and set readable line-height */ html body .elementor-element-be8616e .elementor-heading-title, html body .elementor-element-3d7981c .elementor-heading-title, html body .elementor-element-ee7e328 .elementor-heading-title, html body .elementor-element-70769ac .elementor-heading-title, html body .elementor-element-6034f43 .elementor-heading-title, html body .elementor-element-5769616 .elementor-heading-title, html body .elementor-element-2d1a374 .elementor-heading-title, html body .elementor-element-4e12bff .elementor-heading-title, html body .elementor-element-19fe973 .elementor-heading-title { font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #555555 !important; margin-bottom: 12px !important; letter-spacing: normal !important; word-break: normal !important; } /* White text for subtitles on dark blue backgrounds */ html body .elementor-element-70769ac .elementor-heading-title, html body .elementor-element-6034f43 .elementor-heading-title { color: rgba(255, 255, 255, 0.92) !important; } /* 4. Paragraph typography & line-height on mobile */ html body .elementor-widget-text-editor p { font-size: 13.5px !important; line-height: 1.55 !important; margin-bottom: 10px !important; color: #555555 !important; } /* 5. Checklist & icon list typography */ html body .elementor-icon-list-item { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 6px !important; } html body .wpr-feature-list-title { font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.3 !important; margin-bottom: 3px !important; } html body .wpr-feature-list-description { font-size: 13px !important; line-height: 1.45 !important; color: #666666 !important; } /* ---------------------------------------------------------------------- PROPER BUTTON ALIGNMENT ACROSS ALL SECTIONS Instead of leaving buttons pushed too far to the left, center and align them naturally within the mobile screen. ---------------------------------------------------------------------- */ html body .wpr-button-wrap, html body .elementor-widget-wpr-button .wpr-button-wrap { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; margin: 14px auto 6px auto !important; } html body .wpr-button, html body .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: 160px !important; max-width: 260px !important; padding: 11px 26px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 6px !important; margin: 0 auto !important; box-sizing: border-box !important; } html body .wpr-button .wpr-button-content, html body .wpr-button .wpr-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; } /* Emergency Call banner button centered */ html body .elementor-element-061844f .wpr-button-wrap, html body .elementor-element-84e5659 { display: flex !important; justify-content: center !important; margin: 14px auto !important; } } /* -------------------------------------------------------------------------- 2. HERO SLIDER MOBILE OPTIMIZATION (<= 767px) Matches desktop design: left-aligned layout, dark medical overlay, Poppins 900 typography, navy button, fluid responsive dimensions. -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Hero container & slider wrapper - edge to edge */ html body .elementor.elementor-871 .elementor-element-deafe56, html body .elementor.elementor-871 .elementor-element-deafe56 > .elementor-container, html body .elementor.elementor-871 .elementor-element-2863d46, html body .elementor.elementor-871 .elementor-element-2863d46 > .elementor-widget-wrap, html body .elementor.elementor-871 .elementor-element-8662dfd, html body .elementor.elementor-871 .elementor-element-8662dfd .wpr-advanced-slider-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } html body .elementor-element-8662dfd .wpr-advanced-slider, html body .elementor-element-8662dfd .wpr-slider-item, html body .elementor-element-8662dfd .slick-list, html body .elementor-element-8662dfd .slick-track { height: auto !important; min-height: 480px !important; position: relative !important; } /* Background image & overlay - matches desktop contrast */ html body .elementor-element-8662dfd .wpr-slider-item-bg { background-size: cover !important; background-position: center center !important; } html body .elementor-element-8662dfd .wpr-slider-item-overlay { position: absolute !important; inset: 0 !important; background-color: rgba(15, 25, 45, 0.65) !important; z-index: 1 !important; } /* Content wrapper - left-aligned matching desktop */ html body .elementor-element-8662dfd .wpr-slider-content { position: relative !important; z-index: 2 !important; padding: 44px 20px 52px 20px !important; max-width: 100% !important; margin: 0 !important; text-align: left !important; float: left !important; box-sizing: border-box !important; } /* Sub-title - uppercase white */ html body .elementor-element-8662dfd .wpr-slider-sub-title * { color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 0 !important; margin: 0 0 8px 0 !important; text-align: left !important; display: block !important; } /* Title - bold Poppins 900 left-aligned */ html body .elementor-element-8662dfd .wpr-slider-title * { color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: clamp(24px, 6.2vw, 34px) !important; font-weight: 900 !important; line-height: 1.18 !important; padding: 0 !important; margin: 0 0 12px 0 !important; text-align: left !important; word-break: break-word !important; display: block !important; } /* Description - clean Montserrat left-aligned */ html body .elementor-element-8662dfd .wpr-slider-description p { color: rgba(255, 255, 255, 0.92) !important; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; padding: 0 !important; margin: 0 0 20px 0 !important; text-align: left !important; display: block !important; } /* Buttons - left-aligned Poppins navy button matching desktop */ html body .elementor-element-8662dfd .wpr-slider-btns { text-align: left !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; } html body .elementor-element-8662dfd .wpr-slider-primary-btn { background-color: #0A1C43 !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 10px 28px !important; margin: 0 !important; border-radius: 4px !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Dots - bottom left indicators */ html body .elementor-element-8662dfd .wpr-slider-dots { top: auto !important; bottom: 14px !important; left: 20px !important; right: auto !important; text-align: left !important; margin: 0 !important; } } /* -------------------------------------------------------------------------- 3. COUNTERS & STATISTICS SECTION RESPONSIVE GRID (<= 767px) Converts vertically stacked stat boxes into full-width horizontal 2x2 grid. Applies to homepage blue stats panel and all inner page counter sections. -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Homepage Blue Statistics Panel: Full width outer container */ html body .elementor-element.elementor-element-503ce95 { width: 100% !important; max-width: 100% !important; padding: 8px 16px !important; margin: 0 !important; box-sizing: border-box !important; } html body .elementor-element.elementor-element-503ce95 > .e-con-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* The Solid Blue Card - Full width across screen with 12px rounded corners */ html body .elementor-element.elementor-element-f290b41 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; border-radius: 12px !important; background-color: #0d5c9c !important; padding: 18px 8px !important; margin: 0 !important; box-sizing: border-box !important; } /* MOBILE: Statistics / Stars - 2x2 layout */ @media screen and (max-width: 767px) { /* Main statistics container */ html body .elementor-element.elementor-element-3775082 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, auto) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Four statistics items */ html body .elementor-element.elementor-element-3775082 .elementor-element-54fd39e, html body .elementor-element.elementor-element-3775082 .elementor-element-60bbc1e, html body .elementor-element.elementor-element-3775082 .elementor-element-af9ea07, html body .elementor-element.elementor-element-3775082 .elementor-element-203263f { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding: 6px 4px !important; margin: 0 !important; box-sizing: border-box !important; text-align: center !important; } /* Star icon */ html body .elementor-element-3775082 .elementor-widget-icon { margin-bottom: 4px !important; display: flex !important; justify-content: center !important; align-items: center !important; } html body .elementor-element-3775082 .elementor-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #EF7B00 !important; font-size: 26px !important; width: 26px !important; height: 26px !important; } html body .elementor-element-3775082 .elementor-icon svg { width: 26px !important; height: 26px !important; fill: #EF7B00 !important; } /* Number */ html body .elementor-element-3775082 .elementor-counter-number-wrapper { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15 !important; color: #ffffff !important; text-align: center !important; justify-content: center !important; } /* Title */ html body .elementor-element-3775082 .elementor-counter-title { font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; color: rgba(255, 255, 255, 0.95) !important; text-align: center !important; margin-top: 2px !important; } } /* Inner pages / About page / Doctor pages statistics containers (03724ee, 4066fc0, etc.) */ html body .elementor-element-03724ee, html body .elementor-element-4066fc0 { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; margin: 12px 0 !important; border-radius: 12px !important; gap: 12px 0 !important; box-sizing: border-box !important; } html body .elementor-element-03724ee > .e-con, html body .elementor-element-4066fc0 > .e-con, html body .elementor-element-8af164c, html body .elementor-element-bb2c3a0, html body .elementor-element-9c14c73, html body .elementor-element-cbb51bf, html body .elementor-element-0172809, html body .elementor-element-498e283, html body .elementor-element-6c51bbb { width: 50% !important; max-width: 50% !important; min-width: 50% !important; flex: 0 0 50% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 6px !important; margin: 0 !important; box-sizing: border-box !important; } /* Legacy draft counter section (7d0557e) fallback */ html body .elementor-element-7d0557e { margin: 0 !important; padding: 12px !important; } } /* -------------------------------------------------------------------------- 4. APPOINTMENT CARDS & FORMS ALIGNMENT ON MOBILE (<= 767px) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Dedicated appointment form cards wrapper */ html body .elementor-section.elementor-top-section.elementor-element-4251ca1, html body .elementor-section.elementor-top-section.elementor-element-2a7311e, html body .elementor-section.elementor-top-section.elementor-element-384d3e19 { padding-left: 16px !important; padding-right: 16px !important; padding-top: 24px !important; padding-bottom: 12px !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } html body .elementor-column.elementor-col-100.elementor-element-688aeba, html body .elementor-column.elementor-col-100.elementor-element-1669edca, html body .elementor-column.elementor-col-100.elementor-element-b4a1467 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Inner White Card Wrapper for Appointment Forms */ html body .elementor-section.elementor-inner-section.elementor-element-0c0c228, html body .elementor-section.elementor-inner-section.elementor-element-5839b1c, html body .elementor-section.elementor-inner-section.appointment-form-card { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; padding: 24px 18px 26px 18px !important; border-radius: 12px !important; background-color: #ffffff !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; box-sizing: border-box !important; } html body .elementor-element-0c0c228 > .elementor-container, html body .elementor-element-5839b1c > .elementor-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Inner Column & Flex alignment overrides */ html body .elementor-inner-column, html body .elementor-element-f20e24e, html body .elementor-inner-column > .elementor-widget-wrap, html body .elementor-element-f20e24e.elementor-column .elementor-widget-wrap, html body .elementor-bc-flex-widget .elementor-column .elementor-widget-wrap, html body .elementor-column[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated { width: 100% !important; max-width: 100% !important; min-width: 100% !important; padding: 0 !important; margin: 0 !important; align-items: stretch !important; align-content: stretch !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } /* Form Widget Wrapper - metform is the active form */ html body .elementor-widget-metform, html body .metform-form, html body .metform-form-content { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Text Inputs, Date, Time, Email, Phone, Select */ html body .metform-form input[type="text"], html body .metform-form input[type="email"], html body .metform-form input[type="tel"], html body .metform-form input[type="date"], html body .metform-form input[type="time"], html body .metform-form select, html body .wpr-form-field, html body .wpr-form-field-textual { width: 100% !important; max-width: 100% !important; min-width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 10px 14px !important; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 15px !important; line-height: 1.4 !important; color: #333333 !important; background-color: #ffffff !important; border: 1px solid #d0d5dd !important; border-radius: 6px !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; text-align: left !important; display: block !important; } /* Textarea Field */ html body .metform-form textarea, html body textarea.wpr-form-field, html body textarea.wpr-form-field-textual { width: 100% !important; max-width: 100% !important; min-width: 100% !important; min-height: 90px !important; height: auto !important; padding: 12px 14px !important; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 15px !important; line-height: 1.5 !important; color: #333333 !important; background-color: #ffffff !important; border: 1px solid #d0d5dd !important; border-radius: 6px !important; box-sizing: border-box !important; resize: vertical !important; white-space: pre-wrap !important; word-break: normal !important; display: block !important; text-align: left !important; } /* Submit Button */ html body .metform-btn, html body .metform-form button[type="submit"], html body .wpr-button[type="submit"] { width: 100% !important; max-width: 100% !important; min-width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 12px 20px !important; margin: 6px 0 0 0 !important; background-color: #EF7B00 !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; border: none !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-shadow: 0 4px 14px rgba(239, 123, 0, 0.35) !important; cursor: pointer !important; touch-action: manipulation !important; box-sizing: border-box !important; } } /* -------------------------------------------------------------------------- 5. FLOATING ACTION BUTTONS (Mobile <= 767px) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Phone Call Button */ html body .elementor-widget-wpr-phone-call, html body .elementor-widget-wpr-phone-call .wpr-pc-wrapper, html body .wpr-pc-btn, html body .elementor-element-de6f571 .wpr-pc-btn, html body .elementor-element-de6f571.wpr-pc-btn-align-fixed-right .wpr-pc-btn { position: fixed !important; right: 16px !important; bottom: 74px !important; width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important; z-index: 99999 !important; background-color: #EF7B00 !important; border: 2px solid #ffffff !important; box-sizing: border-box !important; touch-action: manipulation !important; } /* Scroll To Top Button */ html body .elementor-widget-wpr-scroll-to-top, html body .elementor-widget-wpr-scroll-to-top .wpr-stt-wrapper, html body .wpr-stt-btn, html body .elementor-element-bbca014 .wpr-stt-btn, html body .elementor-element-bbca014.wpr-stt-btn-align-fixed-right .wpr-stt-btn { position: fixed !important; right: 16px !important; bottom: 18px !important; width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important; z-index: 99998 !important; background-color: #0A1C43 !important; border: 2px solid #ffffff !important; box-sizing: border-box !important; touch-action: manipulation !important; } } /* -------------------------------------------------------------------------- 6. TOP BAR RESPONSIVENESS (<= 767px) Preserves all desktop elements: Phone, Email, Social Icons, Appointment Arranged deterministically via CSS Grid into two balanced rows: Row 1: Social Icons (Left) + Appointment Button (Right) Row 2: Phone Number (Left) + Email ID (Right) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Top Bar Section Container */ html body .elementor.elementor-312 .elementor-element-1fc2745, html body .elementor-element-1fc2745 { width: 100% !important; max-width: 100vw !important; min-height: 0 !important; padding: 6px 14px !important; margin: 0 !important; background-color: #0A1C43 !important; box-sizing: border-box !important; } html body .elementor.elementor-312 .elementor-element-1fc2745 > .elementor-container, html body .elementor-element-1fc2745 > .elementor-container { display: grid !important; grid-template-columns: 1fr auto !important; row-gap: 5px !important; column-gap: 8px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Column resets using display: contents to let items participate directly in grid */ html body .elementor.elementor-312 .elementor-element-1fc2745 .elementor-column, html body .elementor.elementor-312 .elementor-element-1fc2745 .elementor-widget-wrap, html body .elementor-element-62d28aa, html body .elementor-element-62d28aa > .elementor-widget-wrap, html body .elementor-element-a02ab74, html body .elementor-element-a02ab74 > .elementor-widget-wrap { display: contents !important; } /* Grid Cell 1: Social Icons (Row 1, Col 1 - Top Left) */ html body .elementor-element-00e3896 { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; width: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body .elementor-element-00e3896 .elementor-social-icons-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } html body .elementor-element-00e3896 .elementor-social-icon { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } html body .elementor-element-00e3896 .elementor-social-icon svg { width: 11px !important; height: 11px !important; fill: #ffffff !important; } /* Grid Cell 2: Appointment Button (Row 1, Col 2 - Top Right) */ html body .elementor-element-fce18a9 { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body .elementor-element-fce18a9 .wpr-offcanvas-trigger { background-color: #EF7B00 !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 5px 12px !important; border-radius: 4px !important; border: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; line-height: 1.3 !important; box-shadow: 0 2px 6px rgba(239, 123, 0, 0.3) !important; margin: 0 !important; } /* Grid Cell 3: Phone Number (Row 2, Col 1 - Bottom Left) */ html body .elementor-element-81da487, html body .elementor-element-81da487.elementor-hidden-mobile { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; width: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body .elementor-element-81da487 .elementor-icon-list-items { display: flex !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .elementor-element-81da487 .elementor-icon-list-item > a { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 11.5px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; } html body .elementor-element-81da487 .elementor-icon-list-icon svg { width: 11px !important; height: 11px !important; fill: #EF7B00 !important; } /* Grid Cell 4: Email Address (Row 2, Col 2 - Bottom Right) */ html body .elementor-element-17d3e10, html body .elementor-element-17d3e10.elementor-hidden-mobile { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; width: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body .elementor-element-17d3e10 .elementor-icon-list-items { display: flex !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .elementor-element-17d3e10 .elementor-icon-list-item > a { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 11.5px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; } html body .elementor-element-17d3e10 .elementor-icon-list-icon svg { width: 11px !important; height: 11px !important; fill: #EF7B00 !important; } } /* -------------------------------------------------------------------------- 7. HEADER & 3-LINES HAMBURGER MOBILE MENU (<= 1024px) -------------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { /* Hide Desktop Navigation bar */ .wpr-nav-menu-container { display: none !important; } /* Ensure header container is relative with high z-index and no clipping */ html body .elementor-element-3cadbe5, html body .elementor-element-3cadbe5.e-parent, html body .elementor-element-3cadbe5.e-con { position: relative !important; z-index: 999999 !important; overflow: visible !important; padding: 6px 16px !important; margin: 0 !important; width: 100% !important; min-height: auto !important; background-color: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; } html body .elementor-element-3cadbe5 .e-con-inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 2px 0 !important; width: 100% !important; position: relative !important; box-sizing: border-box !important; } .elementor-element-0451bfe { width: auto !important; max-width: 180px !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; } .elementor-element-2373297 .wpr-logo-image img { max-width: 46px !important; height: auto !important; display: block !important; } .elementor-element-dfe6d53 { width: auto !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; position: static !important; } .elementor-element-edad87a { position: static !important; display: block !important; width: auto !important; } /* Mobile Container: Stays inline so the 3-lines toggle button stays visible in the header */ .wpr-mobile-nav-menu-container { position: static !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* 3-Lines Hamburger Button Wrapper */ .wpr-mobile-toggle-wrap { display: flex !important; align-items: center !important; justify-content: center !important; padding: 6px !important; margin: 0 !important; cursor: pointer !important; touch-action: manipulation !important; user-select: none !important; -webkit-user-select: none !important; } .wpr-mobile-toggle { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; width: 32px !important; height: 22px !important; padding: 0 !important; cursor: pointer !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } .wpr-mobile-toggle-line { display: block !important; width: 26px !important; height: 3px !important; background-color: #0A1C43 !important; margin: 0 !important; border-radius: 3px !important; transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease !important; transform-origin: center !important; } /* 3-Lines Hamburger Active Transition */ .wpr-active-toggle .wpr-mobile-toggle-line:nth-child(1), .wpr-mobile-toggle.wpr-active-toggle .wpr-mobile-toggle-line:nth-child(1) { transform: translateY(9.5px) rotate(45deg) !important; background-color: #F84365 !important; } .wpr-active-toggle .wpr-mobile-toggle-line:nth-child(2), .wpr-mobile-toggle.wpr-active-toggle .wpr-mobile-toggle-line:nth-child(2) { opacity: 0 !important; transform: scale(0) !important; } .wpr-active-toggle .wpr-mobile-toggle-line:nth-child(3), .wpr-mobile-toggle.wpr-active-toggle .wpr-mobile-toggle-line:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg) !important; background-color: #F84365 !important; } /* Mobile Dropdown Navigation Menu List */ .wpr-mobile-nav-menu { display: none; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100% !important; background: #ffffff !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15) !important; z-index: 9999999 !important; border-top: 3px solid #EF7B00 !important; list-style: none !important; padding: 6px 0 16px 0 !important; margin: 0 !important; max-height: 80vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } .wpr-mobile-nav-menu.wpr-menu-open, .wpr-mobile-nav-menu.active { display: block !important; animation: wprMenuSlideDown 0.22s ease-out forwards; } @keyframes wprMenuSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .wpr-mobile-nav-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #f0f2f5 !important; box-sizing: border-box !important; } .wpr-mobile-nav-menu > li:last-child { border-bottom: none !important; } .wpr-mobile-nav-menu > li > a, .wpr-mobile-nav-menu .wpr-mobile-menu-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 13px 20px !important; color: #1a2238 !important; font-family: "Poppins", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease !important; box-sizing: border-box !important; width: 100% !important; } .wpr-mobile-nav-menu > li > a:hover, .wpr-mobile-nav-menu > li > a.wpr-active-menu-item, .wpr-mobile-nav-menu .current_page_item > a { background-color: #fff8f0 !important; color: #EF7B00 !important; } /* Submenu for Doctors Dropdown */ .wpr-mobile-nav-menu .menu-item-has-children > a .wpr-sub-icon, .wpr-mobile-nav-menu .menu-item-has-children > a::after { display: inline-block !important; font-size: 13px !important; transition: transform 0.25s ease !important; } .wpr-mobile-nav-menu .menu-item-has-children.wpr-sub-open > a .wpr-sub-icon, .wpr-mobile-nav-menu .menu-item-has-children.wpr-sub-open > a::after { transform: rotate(180deg) !important; } .wpr-mobile-nav-menu .sub-menu, .wpr-mobile-nav-menu .wpr-sub-menu { display: none; list-style: none !important; padding: 4px 0 !important; margin: 0 !important; background: #f8fafc !important; border-top: 1px solid #eef2f6 !important; box-sizing: border-box !important; } .wpr-mobile-nav-menu .sub-menu.wpr-sub-open, .wpr-mobile-nav-menu .sub-menu.active { display: block !important; } .wpr-mobile-nav-menu .sub-menu li { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .wpr-mobile-nav-menu .sub-menu li a, .wpr-mobile-nav-menu .wpr-mobile-sub-menu-item { display: block !important; padding: 10px 20px 10px 32px !important; color: #475569 !important; font-size: 14px !important; font-weight: 400 !important; text-decoration: none !important; border-bottom: 1px solid #f1f5f9 !important; box-sizing: border-box !important; width: 100% !important; } .wpr-mobile-nav-menu .sub-menu li a:hover { background-color: #fff8f0 !important; color: #EF7B00 !important; } } /* -------------------------------------------------------------------------- 8. OFFCANVAS APPOINTMENT POPUP (<= 767px) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { .wpr-offcanvas-wrap { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.6) !important; z-index: 9999999 !important; display: none; opacity: 0; transition: opacity 0.3s ease; } .wpr-offcanvas-wrap.wpr-offcanvas-open { display: block !important; opacity: 1 !important; } .wpr-offcanvas-content { position: fixed !important; top: 0 !important; right: 0 !important; width: 90vw !important; max-width: 360px !important; height: 100vh !important; background: #ffffff !important; box-shadow: -5px 0 25px rgba(0,0,0,0.2) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 20px 16px 40px 16px !important; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .wpr-offcanvas-wrap.wpr-offcanvas-open .wpr-offcanvas-content { transform: translateX(0) !important; } .wpr-close-offcanvas { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; font-size: 18px !important; cursor: pointer !important; background: #f1f5f9 !important; border-radius: 50% !important; color: #333333 !important; } } /* -------------------------------------------------------------------------- 9. FOOTER RESPONSIVE STACKING & SPACING (<= 767px) -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { .elementor-315 .elementor-container { display: flex !important; flex-direction: column !important; } .elementor-315 .elementor-column { width: 100% !important; margin-bottom: 16px !important; text-align: left !important; } .elementor-315 .elementor-element.elementor-element-6cbc3e4 > .elementor-element-populated { margin: 0 0 10px 0 !important; --e-column-margin-right: 0px !important; } /* Footer Quick Links - compact list spacing */ .elementor-315 .elementor-widget-icon-list .elementor-icon-list-items { justify-content: flex-start !important; gap: 0 !important; } .elementor-315 .elementor-icon-list-item { margin-bottom: 4px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.6 !important; } .elementor-315 .elementor-icon-list-item a { font-size: 13px !important; line-height: 1.6 !important; } /* Footer logo - force small size */ .elementor-315 .wpr-logo { text-align: left !important; } .elementor-315 .wpr-logo-image img, .elementor-315 .wpr-logo img, .elementor-315 img.wpr-logo-img { max-width: 110px !important; width: 110px !important; height: auto !important; margin: 0 !important; display: block !important; } } /* -------------------------------------------------------------------------- 10. TABLET RESPONSIVE ADJUSTMENTS (768px - 1024px) -------------------------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* Tablet Top Bar - clean single horizontal row */ html body .elementor.elementor-312 .elementor-element-1fc2745, html body .elementor-element-1fc2745 { padding: 6px 20px !important; } html body .elementor.elementor-312 .elementor-element-1fc2745 > .elementor-container, html body .elementor-element-1fc2745 > .elementor-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; } html body .elementor-element-62d28aa { width: auto !important; flex: 0 0 auto !important; } html body .elementor-element-a02ab74 { width: auto !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; } html body .elementor-element-a02ab74 > .elementor-widget-wrap { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; } html body .elementor-element-81da487, html body .elementor-element-81da487.elementor-hidden-mobile { display: inline-flex !important; visibility: visible !important; } html body .elementor-element-17d3e10, html body .elementor-element-17d3e10.elementor-hidden-mobile { display: inline-flex !important; visibility: visible !important; } html body .elementor-section.elementor-inner-section.elementor-element-0c0c228, html body .elementor-section.elementor-inner-section.elementor-element-5839b1c { max-width: 600px !important; margin: 0 auto !important; padding: 30px 24px !important; } /* Tablet Statistics Panel - 4 items in a clean horizontal row */ html body .elementor-element.elementor-element-503ce95 { width: 100% !important; max-width: 100% !important; padding: 16px 20px !important; } html body .elementor-element.elementor-element-f290b41 { width: 100% !important; max-width: 100% !important; border-radius: 12px !important; padding: 20px 16px !important; } html body .elementor-element.elementor-element-3775082 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-around !important; width: 100% !important; gap: 12px !important; } html body .elementor-element.elementor-element-3775082 > .e-con { width: 25% !important; flex: 1 1 25% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Tablet flip boxes - 2x2 grid */ html body .elementor-element.elementor-element-05b0d67 .elementor-column, html body .elementor-element.elementor-element-e7de8c8 .elementor-column { width: 50% !important; flex: 0 0 50% !important; margin-bottom: 16px !important; } html body .wpr-pc-btn { bottom: 74px !important; right: 20px !important; } html body .wpr-stt-btn { bottom: 18px !important; right: 20px !important; } } /* Mobile: reduce excessive section spacing */ @media (max-width: 767px) { /* Reduce unnecessary white space/padding between sections */ .elementor-section, .elementor-container { padding-top: 10px !important; padding-bottom: 10px !important; } /* Emergency Call button - keep it on the left */ .emergency-call, .emergency-call-button { margin-left: 0 !important; margin-right: auto !important; width: auto !important; max-width: 230px !important; } } /* ========================================================= MOBILE FIX - ONLY HEADER GAP + EMERGENCY CALL BUTTON ========================================================= */ @media screen and (max-width: 767px) { /* ----------------------------------------------------- 1. REMOVE EXCESSIVE WHITE SPACE BEFORE HERO ----------------------------------------------------- */ body { overflow-x: hidden !important; } /* Remove spacing from the main header wrapper */ .elementor-location-header, .elementor-location-header > *, .elementor-location-header .elementor-section, .elementor-location-header .elementor-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove top spacing from the first page section */ main, main > .elementor, main > .elementor > .elementor-section:first-child, .elementor-location-header + .elementor, .elementor-location-header + .elementor > .elementor-section:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Hero should start immediately after the header */ .elementor-location-header + .elementor .elementor-section:first-child { margin-top: 0 !important; } /* ----------------------------------------------------- 2. EMERGENCY CALL BUTTON - LEFT ALIGN + SMALLER ----------------------------------------------------- */ a[href^="tel:"] { margin-left: 0 !important; margin-right: auto !important; } /* Any phone/emergency button container */ .elementor-widget-wpr-button, .elementor-widget-button { text-align: left !important; } .elementor-widget-wpr-button a[href^="tel:"], .elementor-widget-button a[href^="tel:"] { display: inline-flex !important; margin-left: 0 !important; margin-right: auto !important; transform: scale(0.90); transform-origin: left center; } } @media (max-width: 767px) { .elementor-location-header { padding-bottom: 0 !important; margin-bottom: 0 !important; } .elementor-location-header .elementor-section, .elementor-location-header .elementor-container { padding-bottom: 0 !important; margin-bottom: 0 !important; } .elementor-location-header + .elementor { padding-top: 0 !important; margin-top: 0 !important; } } @media (max-width: 767px) { /* Reduce empty space below logo + hamburger */ .elementor-location-header .elementor-section:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } .elementor-location-header .elementor-section:last-child .elementor-container { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } /* Keep only a small gap before the hero */ .elementor-location-header { margin-bottom: 0 !important; padding-bottom: 0 !important; } } @media (max-width: 767px) { .elementor-location-header .elementor-section:last-child .elementor-widget-wrap { padding-bottom: 5px !important; } } @media screen and (max-width: 767px) { /* Reduce the white space below the mobile logo/hamburger */ html body .elementor.elementor-871 .elementor-element-deafe56, html body .elementor.elementor-871 .elementor-element-deafe56 > .elementor-container, html body .elementor.elementor-871 .elementor-element-2863d46, html body .elementor.elementor-871 .elementor-element-2863d46 > .elementor-widget-wrap { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; } } /* ===================================================== MOBILE - CONSISTENT SECTION PADDING ===================================================== */ @media screen and (max-width: 767px) { /* Keep section padding equal on all four sides */ /*main .elementor-section { padding: 16px !important; box-sizing: border-box !important; }*/ main .elementor-container { padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } main .elementor-widget-wrap { padding: 0 !important; box-sizing: border-box !important; } /* Prevent uneven spacing caused by individual widgets */ main .elementor-widget { box-sizing: border-box !important; } /* ================================================= FOOTER TEXT - WHITE ================================================= */ footer, footer p, footer span, footer div, footer a, footer li, .elementor-location-footer, .elementor-location-footer p, .elementor-location-footer span, .elementor-location-footer div, .elementor-location-footer a, .elementor-location-footer li { color: #ffffff !important; } } @media screen and (max-width: 767px) { /* ============================== FOOTER TEXT - WHITE ============================== */ footer *, .elementor-location-footer * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ============================== MOBILE - REDUCE SIDE PADDING ============================== */ main .elementor-section > .elementor-container { padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } main .elementor-section > .elementor-container > .elementor-column { padding-left: 0 !important; padding-right: 0 !important; } } @media screen and (max-width: 767px) { /* Appointment panel - reduce excessive padding */ html body .elementor-2141 .elementor-element-a7a0dc7 { padding: 20px !important; box-sizing: border-box !important; } } @media screen and (max-width: 767px) { /* Footer text - white */ html body .elementor-315 .elementor-element-19fe973 .elementor-heading-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } } @media screen and (max-width: 767px) { /* Copyright - make text white */ html body .elementor-315 .elementor-element-9a46a6f p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Appointment form - reduce excessive side padding */ html body .elementor-2141 .elementor-element-a7a0dc7 { padding-left: 5px !important; padding-right: 5px !important; box-sizing: border-box !important; } } /* ---- Floating-button wrapper sections: zero document height, buttons stay fixed ---- */ @media screen and (max-width: 767px) { html body .elementor-315 .elementor-element.elementor-element-cb70e3c, html body .elementor-315 .elementor-element.elementor-element-aab79ae { position: absolute !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: visible !important; pointer-events: none !important; display: block !important; } /* Collapse every child wrapper that adds layout space */ html body .elementor-315 .elementor-element-cb70e3c > *, html body .elementor-315 .elementor-element-aab79ae > * { padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; } /* Re-enable clicks on the actual fixed buttons */ html body .elementor-element-bbca014 .wpr-stt-btn, html body .elementor-element-de6f571 .wpr-pc-btn { pointer-events: auto !important; } } /* MOBILE LAYOUT SPACING - MINIMUM & EQUAL */ @media screen and (max-width: 767px) { /* Sections and containers */ html body .elementor .elementor-section, html body .elementor .elementor-container, html body .elementor .e-con, html body .elementor .e-con-inner { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 6px !important; padding-right: 6px !important; margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } /* Elementor columns */ html body .elementor .elementor-column > .elementor-element-populated, html body .elementor .elementor-widget-wrap { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 6px !important; padding-right: 6px !important; margin: 0 !important; box-sizing: border-box !important; } /* Remove unnecessary gaps between layout elements */ html body .elementor .e-con, html body .elementor .e-con-inner { gap: 4px !important; row-gap: 4px !important; column-gap: 4px !important; } /* Elementor widgets */ html body .elementor .elementor-widget { margin-top: 0 !important; margin-bottom: 0 !important; } } /* ========================================================= MOBILE SECTION PADDING ONLY Main page sections: Top/Bottom 50px; Left/Right 20px Header template (.elementor-312) is intentionally excluded. No other properties are changed by this final override. ========================================================= */ /*@media screen and (max-width: 767px) { html body .elementor.elementor-871 section.elementor-section { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } }*/ @media screen and (max-width: 767px) { /* NORMAL MOBILE SECTIONS */ html body .elementor.elementor-871 section.elementor-section { padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* CARD SECTIONS - keep their smaller spacing */ html body .elementor.elementor-871 .elementor-element-05b0d67, html body .elementor.elementor-871 .elementor-element-e7de8c8 { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } /* ========================================================================== FINAL MOBILE SECTION SPACING FIX ========================================================================== */ @media screen and (max-width: 767px) { /* Main sections - equal and compact spacing */ html body main .elementor-section { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } /* Specific sections seen with excessive vertical space */ html body .elementor-element-05b0d67, html body .elementor-element-e7de8c8 { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } /* Keep inner Elementor containers from adding large side spacing */ html body main .elementor-section > .elementor-container { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } @media screen and (max-width: 767px) { html body .elementor-element-3f924fb { padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } /* ========================================================= FORCE MOBILE PADDING FOR THE TWO ELEMENTOR CONTAINERS ========================================================= */ @media screen and (max-width: 767px) { html body .elementor-element.elementor-element-3f924fb, html body .elementor-element.elementor-element-503ce95 { /* Elementor container padding variables */ --padding-top: 50px !important; --padding-bottom: 50px !important; --padding-left: 20px !important; --padding-right: 20px !important; /* Direct padding */ padding: 50px 20px !important; padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; padding-block-start: 50px !important; padding-block-end: 50px !important; padding-inline-start: 20px !important; padding-inline-end: 20px !important; box-sizing: border-box !important; } } /* Force correct mobile padding for this Elementor container */ @media screen and (max-width: 767px) { html body .elementor-element.elementor-element-1ef12a6 { --padding-top: 50px !important; --padding-bottom: 50px !important; --padding-left: 20px !important; --padding-right: 20px !important; padding: 50px 20px !important; padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; padding-block-start: 50px !important; padding-block-end: 50px !important; padding-inline-start: 20px !important; padding-inline-end: 20px !important; box-sizing: border-box !important; } } @media screen and (max-width: 767px) { /* All normal sections */ html body .elementor.elementor-871 section.elementor-section { padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ================================================= WHAT MAKES US DIFFERENT - CARD SECTIONS Keep these compact so there is no large gap ================================================= */ html body .elementor.elementor-871 .elementor-element.elementor-element-05b0d67, html body .elementor.elementor-871 .elementor-element.elementor-element-e7de8c8 { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; } /* Remove extra spacing from their direct containers */ html body .elementor.elementor-871 .elementor-element.elementor-element-05b0d67 > .elementor-container, html body .elementor.elementor-871 .elementor-element.elementor-element-e7de8c8 > .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; box-sizing: border-box !important; } /* Keep the individual cards close together */ html body .elementor.elementor-871 .elementor-element.elementor-element-05b0d67 .elementor-column, html body .elementor.elementor-871 .elementor-element.elementor-element-e7de8c8 .elementor-column { margin-top: 0 !important; margin-bottom: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } } @media screen and (max-width: 767px) { /* HERO - remove only left/right section padding */ html body .elementor.elementor-871 .elementor-element.elementor-element-deafe56 { padding-left: 0 !important; padding-right: 0 !important; --padding-left: 0px !important; --padding-right: 0px !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; box-sizing: border-box !important; } } @media screen and (max-width: 767px) { /* Hero - remove unwanted top spacing */ html body .elementor.elementor-871 .elementor-element.elementor-element-deafe56 { padding-top: 0 !important; --padding-top: 0px !important; padding-block-start: 0 !important; } } @media screen and (max-width: 767px) { /* ========================================================================== CONSISTENT MOBILE TYPOGRAPHY FOR ALL SECTIONS & PAGES Reduces oversized headings/text while preserving WordPress design & alignment ========================================================================== */ /* 1. Main Section Headings - Uniform 22px across all sections and pages */ html body .elementor-widget-heading .elementor-heading-title, html body .elementor .elementor-heading-title, html body .elementor-element-e2f4ca1 .elementor-heading-title, html body .elementor-element-1ef12a6 .elementor-heading-title, html body .elementor-element-f9ba6a2 .elementor-heading-title, html body .elementor-element-edcdfb2 .elementor-heading-title, html body .elementor-element-bc0c922 .elementor-heading-title, html body .elementor-element-c112918 .elementor-heading-title, html body .elementor-element-b4f3f02 .elementor-heading-title, html body .elementor-element-90311fc .elementor-heading-title, html body .elementor-element-a6efbef .elementor-heading-title, html body .elementor-element-c5a29b6 .elementor-heading-title, html body .elementor-element-b00a61c .elementor-heading-title, html body .elementor-element-0522e8f .elementor-heading-title, html body .elementor-element-87ae7cb .elementor-heading-title, html body .elementor-element-eb2efac .elementor-heading-title, html body .elementor-element-a914548 .elementor-heading-title, html body .elementor-element-2398e79 .elementor-heading-title, html body .elementor-element-fb9d224 .elementor-heading-title, html body .elementor-element-f4cf016 .elementor-heading-title, html body .elementor-element-4505b10 .elementor-heading-title, html body .elementor-element-f610253 .elementor-heading-title, html body .elementor-element-c6a88ec .elementor-heading-title, html body .elementor-element-829268c .elementor-heading-title, html body .elementor-element-7cf1e18 .elementor-heading-title, html body .elementor-element-cd98948 .elementor-heading-title { font-size: 22px !important; line-height: 1.28 !important; font-weight: 700 !important; word-break: break-word !important; } /* 2. Section Badges / Section Labels - Medium size (16px) for clear section identification */ /* (About Us, Who We Are, Feedback, Why Choose Us, FAQ, Latest News, 24/7 Availability, etc.) */ html body .elementor .elementor-element-3d6917d2 .elementor-heading-title, html body .elementor .elementor-element-2885bc6 .elementor-heading-title, html body .elementor .elementor-element-365cff6 .elementor-heading-title, html body .elementor .elementor-element-444d2a0 .elementor-heading-title, html body .elementor .elementor-element-3f924fb .elementor-heading-title, html body .elementor .elementor-element-91c8815 .elementor-heading-title, html body .elementor .elementor-element-54f4eaa .elementor-heading-title, html body .elementor .elementor-element-3ce6c4f .elementor-heading-title, html body .elementor .elementor-element-26bba71 .elementor-heading-title, html body .elementor .elementor-element-7d30062 .elementor-heading-title, html body .elementor .elementor-element-e36b309 .elementor-heading-title, html body .elementor .elementor-element-775dc7c .elementor-heading-title, html body .elementor .elementor-element-1db2a7d .elementor-heading-title, html body .elementor .elementor-element-07b3276 .elementor-heading-title, html body .elementor .elementor-element-8661c12 .elementor-heading-title, html body .elementor .elementor-element-8fe4031 .elementor-heading-title, html body .elementor .elementor-element-faabfd3 .elementor-heading-title, html body .elementor .elementor-element-4140d0c .elementor-heading-title, html body .elementor-element-3d6917d2 .elementor-heading-title, html body .elementor-element-2885bc6 .elementor-heading-title, html body .elementor-element-365cff6 .elementor-heading-title, html body .elementor-element-444d2a0 .elementor-heading-title, html body .elementor-element-3f924fb .elementor-heading-title, html body .elementor-element-91c8815 .elementor-heading-title, html body .elementor-element-54f4eaa .elementor-heading-title, html body .elementor-element-3ce6c4f .elementor-heading-title, html body .elementor-element-26bba71 .elementor-heading-title, html body .elementor-element-7d30062 .elementor-heading-title, html body .elementor-element-e36b309 .elementor-heading-title { font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; line-height: 1.35 !important; margin-bottom: 6px !important; display: inline-block !important; } /* "What We Provide" section heading - Medium size (18px) */ html body .elementor .elementor-element-ef2b36e .elementor-heading-title, html body .elementor .elementor-element-cd304f0 .elementor-heading-title, html body .elementor-element-ef2b36e .elementor-heading-title, html body .elementor-element-cd304f0 .elementor-heading-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* 3. Subtitle / Supporting Text Paragraphs inside Heading Widgets (14.5px, readable line-height) */ html body .elementor .elementor-element-85fc2d6 .elementor-heading-title, html body .elementor-element-85fc2d6 .elementor-heading-title, html body .elementor .elementor-element-ece1074 .elementor-heading-title, html body .elementor-element-ece1074 .elementor-heading-title, html body .elementor .elementor-element-be8616e .elementor-heading-title, html body .elementor-element-be8616e .elementor-heading-title, html body .elementor .elementor-element-3d7981c .elementor-heading-title, html body .elementor-element-3d7981c .elementor-heading-title, html body .elementor .elementor-element-ee7e328 .elementor-heading-title, html body .elementor-element-ee7e328 .elementor-heading-title, html body .elementor .elementor-element-70769ac .elementor-heading-title, html body .elementor-element-70769ac .elementor-heading-title, html body .elementor .elementor-element-6034f43 .elementor-heading-title, html body .elementor-element-6034f43 .elementor-heading-title, html body .elementor .elementor-element-5769616 .elementor-heading-title, html body .elementor-element-5769616 .elementor-heading-title, html body .elementor .elementor-element-2d1a374 .elementor-heading-title, html body .elementor-element-2d1a374 .elementor-heading-title, html body .elementor .elementor-element-4e12bff .elementor-heading-title, html body .elementor-element-4e12bff .elementor-heading-title, html body .elementor .elementor-element-19fe973 .elementor-heading-title, html body .elementor-element-19fe973 .elementor-heading-title, html body .elementor .elementor-element-cac95e7 .elementor-heading-title, html body .elementor-element-cac95e7 .elementor-heading-title, html body .elementor .elementor-element-065b8ad .elementor-heading-title, html body .elementor-element-065b8ad .elementor-heading-title, html body .elementor .elementor-element-ca0bdf8 .elementor-heading-title, html body .elementor-element-ca0bdf8 .elementor-heading-title, html body .elementor .elementor-element-b07dc50 .elementor-heading-title, html body .elementor-element-b07dc50 .elementor-heading-title, html body .elementor .elementor-element-6d7e857 .elementor-heading-title, html body .elementor-element-6d7e857 .elementor-heading-title, html body .elementor .elementor-element-2f30ecb .elementor-heading-title, html body .elementor-element-2f30ecb .elementor-heading-title, html body .elementor .elementor-element-05f3ca3 .elementor-heading-title, html body .elementor-element-05f3ca3 .elementor-heading-title, html body .elementor .elementor-element-ebcd519 .elementor-heading-title, html body .elementor-element-ebcd519 .elementor-heading-title, html body .elementor .elementor-element-e2e0f48 .elementor-heading-title, html body .elementor-element-e2e0f48 .elementor-heading-title, html body .elementor .elementor-element-4c88efd .elementor-heading-title, html body .elementor-element-4c88efd .elementor-heading-title, html body .elementor .elementor-element-f38229b .elementor-heading-title, html body .elementor-element-f38229b .elementor-heading-title, html body .elementor .elementor-element-16815cd .elementor-heading-title, html body .elementor-element-16815cd .elementor-heading-title, html body .elementor .elementor-element-2f82d35 .elementor-heading-title, html body .elementor-element-2f82d35 .elementor-heading-title { font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: normal !important; word-break: normal !important; text-transform: none !important; } /* About page blockquote paragraph with pink accent border */ html body .elementor-element.elementor-element-85fc2d6 { padding: 0 0 0 14px !important; border-left: 3px solid #F84365 !important; margin-top: 10px !important; margin-bottom: 16px !important; } /* 4. Page Banners & Inner Page Titles */ html body .elementor-element-9e00986 .elementor-heading-title, html body .elementor-element-c0911d2 .elementor-heading-title, html body h1.wpr-archive-title, html body .wpr-archive-title span { font-size: 26px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* 5. Cards, Promo Boxes, and Icon Box Titles */ html body .wpr-promo-box-title, html body .wpr-promo-box-title span, html body .elementor-icon-box-title, html body .elementor-icon-box-title a { font-size: 16.5px !important; line-height: 1.35 !important; font-weight: 600 !important; } /* 6. Body Paragraphs */ html body .elementor .elementor-widget-text-editor p, html body .elementor-widget-text-editor p { font-size: 13.5px !important; line-height: 1.55 !important; } /* ========================================================================== 7. FOOTER TYPOGRAPHY REFINEMENTS ON MOBILE Matches all Useful Links items to the same clean 13px size as Services ========================================================================== */ /* Footer Column Headers (QUICK LINKS, USEFUL LINKS, WORK HOURS) */ html body .elementor-315 .elementor-element-2ff44ef .elementor-heading-title, html body .elementor-315 .elementor-element-f2b91a5 .elementor-heading-title, html body .elementor-315 .elementor-element-4ecb98b .elementor-heading-title, html body .elementor-315 .elementor-element-2ff44ef, html body .elementor-315 .elementor-element-f2b91a5, html body .elementor-315 .elementor-element-4ecb98b { font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase !important; margin-bottom: 8px !important; } /* ALL Footer Menu / Navigation Items - Quick Links & Useful Links (matches Services size) */ html body .elementor-315 .elementor-element-18b0044 .elementor-heading-title, html body .elementor-315 .elementor-element-aac2ef3 .elementor-heading-title, html body .elementor-315 .elementor-element-6edce9b .elementor-heading-title, html body .elementor-315 .elementor-element-a30217f .elementor-heading-title, html body .elementor-315 .elementor-element-5b15f7a .elementor-heading-title, html body .elementor-315 .elementor-element-08bbc34 .elementor-heading-title, html body .elementor-315 .elementor-element-efaad17 .elementor-heading-title, html body .elementor-315 .elementor-element-00196fc .elementor-heading-title, html body .elementor-315 .elementor-element-5aad3d6 .elementor-heading-title, html body .elementor-315 .elementor-element-7cf6ebd .elementor-widget-heading:not(.elementor-element-f2b91a5) .elementor-heading-title, html body .elementor-315 .elementor-element-161934c .elementor-widget-heading:not(.elementor-element-2ff44ef) .elementor-heading-title, html body .elementor-315 .elementor-heading-title a, html body .elementor-315 .elementor-heading-title a:link, html body .elementor-315 .elementor-heading-title a:visited, html body .elementor-315 .elementor-icon-list-item a { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } /* Footer Description Text & Text Editor */ html body .elementor-315 .elementor-element-19fe973 .elementor-heading-title, html body .elementor-315 p, html body .elementor-315 .elementor-widget-text-editor { font-size: 13px !important; font-weight: 400 !important; line-height: 1.55 !important; } } @media screen and (max-width: 767px) { html body { margin-bottom: 0 !important; padding-bottom: 0 !important; } html body main { margin-bottom: 0 !important; padding-bottom: 0 !important; } html body .elementor-location-footer { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Reduce excessive top padding on the footer main content row */ html body .elementor-315 .elementor-element.elementor-element-e85a1be { padding-top: 20px !important; padding-bottom: 12px !important; } /* Ensure the page wrapper itself has no bottom gap */ html, html body, html body .elementor-315 { overflow-x: hidden !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ========================================================================== GLOBAL SECTION SPACING & FINAL MOBILE OPTIMIZATIONS (<= 1024px) 1. Consistent 50px top/bottom, 20px left/right on actual outer sections only. 2. Home Hero section: full-width, zero left/right/bottom padding. 3. "What Makes Us Different" cards: zero unwanted gap between the two rows. 4. Contact page Map: full-width, zero top/bottom padding/extra whitespace. 5. Appointment page: balanced normal mobile gap before "Book Visit Now". 6. Typography hierarchy: balanced, readable, mobile-optimized. Desktop layout (>= 1025px) remains completely untouched. ========================================================================== */ @media screen and (max-width: 1024px) { /* ----------------------------------------------------------------------- 1. GLOBAL SECTION SPACING ? ACTUAL OUTER SECTIONS ONLY Applies 50px top/bottom and 20px left/right to real page sections. Intelligently excludes special/custom-spaced sections. ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-top-section:not(.elementor-element-deafe56):not(.elementor-element-05b0d67):not(.elementor-element-e7de8c8):not(.elementor-element-098a2f1):not(.elementor-element-a857fd2):not(.elementor-element-662fdd8):not(.elementor-element-2a7311e):not(.elementor-element-cb70e3c):not(.elementor-element-aab79ae):not(.elementor-element-78bc662):not(.elementor-element-dfd9b3c):not(.elementor-hidden-mobile):not(.elementor-hidden-tablet) { padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Outer e-con parent containers (e.g. 503ce95, 3f924fb) */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.e-con-boxed:not(.elementor-element-503ce95):not(.elementor-hidden-mobile):not(.elementor-hidden-tablet), html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.e-con.e-parent:not(.elementor-element-503ce95):not(.elementor-hidden-mobile):not(.elementor-hidden-tablet) { padding-top: 50px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Inner containers reset to prevent double horizontal indent */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-top-section > .elementor-container, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.e-con-boxed > .e-con-inner, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.e-con.e-parent > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------------------------- 2. HOME HERO SECTION ? FULL WIDTH, ZERO LEFT/RIGHT/BOTTOM PADDING ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-deafe56, html body .elementor-element.elementor-element-deafe56 { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; --padding-top: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important; --padding-right: 0px !important; width: 100% !important; max-width: 100% !important; } html body .elementor-element.elementor-element-deafe56 > .elementor-container { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: 100% !important; width: 100% !important; } /* ----------------------------------------------------------------------- 3. HOME HERO AREA CARDS ? REMOVE EXTRA GAP BETWEEN THE TWO ROWS ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-05b0d67, html body .elementor-element.elementor-element-05b0d67 { padding-top: 15px !important; padding-bottom: 0 !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; --padding-top: 15px !important; --padding-bottom: 0px !important; --padding-left: 20px !important; --padding-right: 20px !important; } html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-e7de8c8, html body .elementor-element.elementor-element-e7de8c8 { padding-top: 0 !important; padding-bottom: 25px !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; --padding-top: 0px !important; --padding-bottom: 25px !important; --padding-left: 20px !important; --padding-right: 20px !important; } html body .elementor-element.elementor-element-05b0d67 > .elementor-container, html body .elementor-element.elementor-element-e7de8c8 > .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; width: 100% !important; } html body .elementor-element.elementor-element-05b0d67 .elementor-column, html body .elementor-element.elementor-element-e7de8c8 .elementor-column { margin-top: 0 !important; margin-bottom: 12px !important; padding: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------------------------- 4. CONTACT PAGE MAP ? FULL-WIDTH, ZERO TOP/BOTTOM PADDING/WHITESPACE The map comes directly into the section, similar to the Home hero. Controls, size, location, and functionality remain intact. ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-098a2f1, html body .elementor-element.elementor-element-098a2f1 { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; --padding-top: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important; --padding-right: 0px !important; width: 100% !important; max-width: 100% !important; } html body .elementor-element.elementor-element-098a2f1 > .elementor-container { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: 100% !important; width: 100% !important; } html body .elementor-element.elementor-element-098a2f1 .elementor-column, html body .elementor-element.elementor-element-098a2f1 .elementor-widget-wrap, html body .elementor-element.elementor-element-098a2f1 .elementor-widget { padding: 0 !important; margin: 0 !important; } html body .elementor-element.elementor-element-098a2f1 .wpr-google-map { margin: 0 !important; padding: 0 !important; } html body .elementor-element.elementor-element-098a2f1 .wpr-google-map iframe { display: block !important; margin: 0 !important; vertical-align: middle !important; width: 100% !important; } /* ----------------------------------------------------------------------- 5. APPOINTMENT PAGE ? BALANCED MOBILE GAP ABOVE "BOOK VISIT NOW" Collapses the 87px spacer section (a857fd2) and balances the gap between the content section (662fdd8) and "Book Visit Now" (2a7311e) to a clean 50px. ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-a857fd2, html body .elementor-element.elementor-element-a857fd2 { display: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; } html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-662fdd8, html body .elementor-element.elementor-element-662fdd8 { padding-top: 40px !important; padding-bottom: 25px !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; } html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-2a7311e, html body .elementor-element.elementor-element-2a7311e { padding-top: 25px !important; padding-bottom: 40px !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ----------------------------------------------------------------------- 6. HIDDEN & SPACER SECTIONS ? ZERO SPACE ----------------------------------------------------------------------- */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-cb70e3c, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-aab79ae, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-element-78bc662, html body .elementor-element.elementor-element-cb70e3c, html body .elementor-element.elementor-element-aab79ae, html body .elementor-element.elementor-element-78bc662 { padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; border: none !important; } /* Page banner section (elementor-897): compact vertical breathing room */ html body .elementor-897 > section.elementor-top-section { padding-top: 25px !important; padding-bottom: 25px !important; padding-left: 20px !important; padding-right: 20px !important; } /* ----------------------------------------------------------------------- 7. FEATURE LIST & ICON LIST TYPOGRAPHY HARMONY ----------------------------------------------------------------------- */ html body .wpr-feature-list-title, html body .wpr-feature-list-title a { font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; } html body .wpr-feature-list-description { font-size: 13.5px !important; line-height: 1.5 !important; } html body .elementor-icon-list-text { font-size: 14px !important; line-height: 1.5 !important; } } @media screen and (max-width: 767px) { /* Responsive hidden sections collapse completely on mobile (excludes header top-bar items) */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-hidden-mobile, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.elementor-hidden-mobile, html body .elementor:not(.elementor-312) .elementor-hidden-mobile:not(.elementor-element-81da487):not(.elementor-element-17d3e10) { display: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; } /* Restore Header Top Bar Phone & Email (Row 2 below Social & Appointment) */ html body .elementor.elementor-312 .elementor-element-81da487, html body .elementor-element-81da487, html body .elementor-element-81da487.elementor-hidden-mobile { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; width: auto !important; height: auto !important; min-height: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body .elementor.elementor-312 .elementor-element-17d3e10, html body .elementor-element-17d3e10, html body .elementor-element-17d3e10.elementor-hidden-mobile { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; width: auto !important; height: auto !important; min-height: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { /* Responsive hidden sections collapse completely on tablet (excludes header top-bar items) */ html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > section.elementor-hidden-tablet, html body .elementor:not(.elementor-312):not(.elementor-897):not(.elementor-315) > div.elementor-hidden-tablet, html body .elementor:not(.elementor-312) .elementor-hidden-tablet:not(.elementor-element-81da487):not(.elementor-element-17d3e10) { display: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; } } /* ========================================================================== MOBILE HEADER ALIGNMENT FOR INNER PAGES (EXCLUDING HOME) Ensures inner page headers match the Home page header exactly: - Row 1: Facebook + Instagram (top-left) | Appointment button (top-right) - Row 2: Phone number with orange icon (bottom-left) | Email with orange icon (bottom-right) - Strict vertical alignment, balanced spacing, no overflow ========================================================================== */ @media screen and (max-width: 767px) { /* 1. Force the 2x2 grid container on pages other than Home */ html body:not(.home) .elementor.elementor-312 .elementor-element-1fc2745 > .elementor-container, html body:not(.home) .elementor-element-1fc2745 > .elementor-container, html body:not(.elementor-page-871) .elementor.elementor-312 .elementor-element-1fc2745 > .elementor-container, html body:not(.elementor-page-871) .elementor-element-1fc2745 > .elementor-container { display: grid !important; grid-template-columns: 1fr auto !important; row-gap: 5px !important; column-gap: 8px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; } /* 2. Column resets to ensure children participate directly in the grid */ html body:not(.home) .elementor.elementor-312 .elementor-element-1fc2745 .elementor-column, html body:not(.home) .elementor.elementor-312 .elementor-element-1fc2745 .elementor-widget-wrap, html body:not(.home) .elementor-element-62d28aa, html body:not(.home) .elementor-element-62d28aa > .elementor-widget-wrap, html body:not(.home) .elementor-element-a02ab74, html body:not(.home) .elementor-element-a02ab74 > .elementor-widget-wrap, html body:not(.elementor-page-871) .elementor.elementor-312 .elementor-element-1fc2745 .elementor-column, html body:not(.elementor-page-871) .elementor.elementor-312 .elementor-element-1fc2745 .elementor-widget-wrap, html body:not(.elementor-page-871) .elementor-element-62d28aa, html body:not(.elementor-page-871) .elementor-element-62d28aa > .elementor-widget-wrap, html body:not(.elementor-page-871) .elementor-element-a02ab74, html body:not(.elementor-page-871) .elementor-element-a02ab74 > .elementor-widget-wrap { display: contents !important; } /* 3. Row 1, Col 1: Social Icons (Top Left) */ html body:not(.home) .elementor-element-00e3896, html body:not(.elementor-page-871) .elementor-element-00e3896 { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; width: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* 4. Row 1, Col 2: Appointment Button (Top Right) */ html body:not(.home) .elementor-element-fce18a9, html body:not(.elementor-page-871) .elementor-element-fce18a9 { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* 5. Row 2, Col 1: Phone Number (Bottom Left) */ html body:not(.home) .elementor.elementor-312 .elementor-element-81da487, html body:not(.home) .elementor-element-81da487, html body:not(.home) .elementor-element-81da487.elementor-hidden-mobile, html body:not(.elementor-page-871) .elementor.elementor-312 .elementor-element-81da487, html body:not(.elementor-page-871) .elementor-element-81da487, html body:not(.elementor-page-871) .elementor-element-81da487.elementor-hidden-mobile { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; width: auto !important; height: auto !important; min-height: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-items, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-items { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-item, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-item { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-item > a, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-item > a { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-icon, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; padding-inline-end: 0 !important; line-height: 1 !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-icon svg, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-icon svg { width: 11px !important; height: 11px !important; min-width: 11px !important; min-height: 11px !important; fill: #EF7B00 !important; display: block !important; margin: 0 !important; } html body:not(.home) .elementor-element-81da487 .elementor-icon-list-text, html body:not(.elementor-page-871) .elementor-element-81da487 .elementor-icon-list-text { font-family: "Poppins", sans-serif !important; font-size: 11.5px !important; font-weight: 500 !important; color: #ffffff !important; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; padding-inline-start: 0 !important; } /* 6. Row 2, Col 2: Email Address (Bottom Right) */ html body:not(.home) .elementor.elementor-312 .elementor-element-17d3e10, html body:not(.home) .elementor-element-17d3e10, html body:not(.home) .elementor-element-17d3e10.elementor-hidden-mobile, html body:not(.elementor-page-871) .elementor.elementor-312 .elementor-element-17d3e10, html body:not(.elementor-page-871) .elementor-element-17d3e10, html body:not(.elementor-page-871) .elementor-element-17d3e10.elementor-hidden-mobile { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; width: auto !important; height: auto !important; min-height: auto !important; display: inline-flex !important; visibility: visible !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-items, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-items { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-item, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-item { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-item > a, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-item > a { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-icon, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; padding-inline-end: 0 !important; line-height: 1 !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-icon svg, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-icon svg { width: 11px !important; height: 11px !important; min-width: 11px !important; min-height: 11px !important; fill: #EF7B00 !important; display: block !important; margin: 0 !important; } html body:not(.home) .elementor-element-17d3e10 .elementor-icon-list-text, html body:not(.elementor-page-871) .elementor-element-17d3e10 .elementor-icon-list-text { font-family: "Poppins", sans-serif !important; font-size: 10.5px !important; font-weight: 500 !important; color: #ffffff !important; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; padding-inline-start: 0 !important; letter-spacing: -0.2px !important; } /* ========================================================================= 7. HOME PAGE: READ MORE SECTION & BLUE STATISTICS SECTION SPACING Eliminates the excessive vertical blank space between the Read More button/content section and the blue statistics section, keeping them close together with a clean, normal, professional mobile section gap (~25px). ========================================================================= */ html body.home .elementor.elementor-871 section.elementor-section.elementor-element-dfd9b3c, html body.elementor-page-871 .elementor.elementor-871 section.elementor-section.elementor-element-dfd9b3c, html body .elementor.elementor-871 section.elementor-section.elementor-element-dfd9b3c, html body.home .elementor-element.elementor-element-dfd9b3c, html body.elementor-page-871 .elementor-element.elementor-element-dfd9b3c, html body .elementor-871 .elementor-element.elementor-element-dfd9b3c { padding-bottom: 12px !important; padding-block-end: 12px !important; --padding-bottom: 12px !important; margin-bottom: 0 !important; --margin-bottom: 0px !important; } html body.home .elementor.elementor-871 div.e-con.elementor-element-503ce95, html body.elementor-page-871 .elementor.elementor-871 div.e-con.elementor-element-503ce95, html body .elementor.elementor-871 div.e-con.elementor-element-503ce95, html body.home .elementor-element.elementor-element-503ce95, html body.elementor-page-871 .elementor-element.elementor-element-503ce95, html body .elementor-871 .elementor-element.elementor-element-503ce95, html body .elementor-element.elementor-element-503ce95 { padding-top: 12px !important; padding-block-start: 12px !important; --padding-top: 12px !important; margin-top: 0 !important; --margin-top: 0px !important; } /* ========================================================================= 8. SERVICES PAGE: VISUAL CONNECTION & CONSISTENT MOBILE ITEM SPACING - Connects each service image and its blue content card via -60px overlap - Enforces clean, consistent 25px mobile spacing between separate items - Normalizes inner sections to prevent uneven gaps ========================================================================= */ /* Normalize inner section vertical margins/padding across services */ html body.elementor-page-8 .elementor-element-0ff9b64 .elementor-inner-section, html body .elementor-8 .elementor-element-0ff9b64 .elementor-inner-section, html body.elementor-page-8 .elementor-inner-section, html body .elementor-8 .elementor-inner-section { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; --margin-top: 0px !important; --margin-bottom: 0px !important; } /* Service item columns: clean, consistent 25px gap between separate service cards */ html body.elementor-page-8 .elementor-element-0ff9b64 .elementor-inner-column, html body .elementor-8 .elementor-element-0ff9b64 .elementor-inner-column { margin-bottom: 25px !important; padding-bottom: 0 !important; --margin-bottom: 25px !important; } /* Service card image container */ html body.elementor-page-8 .elementor-element-0ff9b64 .elementor-widget-image, html body .elementor-8 .elementor-element-0ff9b64 .elementor-widget-image { margin-bottom: 0 !important; } /* Keep each image and its corresponding blue content card visually connected */ html body.elementor-page-8 .elementor-element-0ff9b64 .elementor-widget-wpr-promo-box, html body .elementor-8 .elementor-element-0ff9b64 .elementor-widget-wpr-promo-box { margin-top: -60px !important; margin-left: 15px !important; margin-right: 15px !important; margin-bottom: 0 !important; position: relative !important; z-index: 2 !important; } }