/* * Custom overrides * ------------------------------------------------------------------ * Add your own style changes in this file instead of editing the * theme/plugin CSS under assets/. It's linked last on every page, * after all theme and plugin stylesheets, so anything you add here * safely overrides the defaults without needing !important and * without your changes being lost on a theme update. * ------------------------------------------------------------------ */ /* Site-wide main content top/bottom spacing. Overrides the theme's --theme-var-main_content_padding (9rem, set in style.css) which .page_content_wrap normally uses directly - scoped here instead of changing the variable itself, since that variable is also reused (via calc()) for unrelated hr margins and a few other paddings elsewhere that should stay as-is. More specific selectors like .single_style_style-2 .page_content_wrap and .privacy-policy .page_content_wrap (below) keep their own intentionally-different values and still win over this. */ .page_content_wrap { padding-top: 100px; padding-bottom: 100px; } /* Scale the 100px down at the site's established breakpoint tiers (matches the tablet/mobile/small-mobile steps already used elsewhere in this file, e.g. the homepage counter grid below) - the base rule above had no responsive variant at all before this, same flat 100px from 320px up to 4K, same gap the original theme's own --theme-var-main_content_padding had (also never responsive). */ @media (max-width: 1024px) { .page_content_wrap { padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 767px) { .page_content_wrap { padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 480px) { .page_content_wrap { padding-top: 40px; padding-bottom: 40px; } } /* Hide the theme's "Buy Theme" demo promo widget (envato affiliate panel). Targeting .trx_demo_panels instead of .trx_demo_tabs because the theme's own CSS targets ".trx_demo_panels .trx_demo_tabs" (2 classes), which beats a plain ".trx_demo_tabs" rule on specificity regardless of load order. */ .trx_demo_panels { display: none; } /* Sticky header on every page except the homepage. The homepage's carries the theme's own "header_position_over" class (its header overlays the hero, absolutely positioned, transparent background - a distinct style the theme itself already treats specially in its own sticky-header CSS) and must stay exactly as-is per explicit request, so it's excluded here rather than relying on a page-specific id. IMPORTANT: this targets the desktop/mobile NAV ROWS directly, not the outer

wrapper. That wrapper contains the nav row(s) *and* the page-title/banner row (e.g. .elementor-element-6e3dba2, "About ESH800") as plain sibling divs inside the same .elementor container - an earlier version of this rule targeted the whole wrapper and accidentally made the title row sticky too, which it must not be (it has to scroll away normally). The theme marks the two candidate rows with .elementor-hidden-tablet.elementor-hidden-mobile (desktop-only row, visible >=1280px) and .elementor-hidden-desktop (tablet/mobile row, visible <=1279px) - these are Elementor's own responsive-visibility classes (see custom-frontend.min.*.css), so unlike the rows' numeric per-page element ids they're guaranteed present and consistent on every page. */ body:not(.header_position_over) .top_panel_custom .elementor-hidden-tablet.elementor-hidden-mobile { /* Desktop (>=1280px): position:sticky, confirmed working. Row stays in normal document flow, so the browser reserves its own space for it automatically - no manual top padding needed to stop it overlapping content below, and no snap/jump the moment it starts sticking. z-index:8000 matches what the theme's own style.css already gives the outer .top_panel. Left exactly as-is - do not change. */ position: sticky; top: 0; z-index: 8000; } /* Tablet/mobile (<=1279px): position:sticky on this row proved unreliable across testing (the desktop row above works; this one didn't take effect below the 1279px breakpoint despite matching CSS, no conflicting position/overflow/transform rule found in any of the ~46 stylesheets this theme loads, and correct selector specificity). Switched to position:fixed instead, which doesn't depend on a scrolling-container relationship the way sticky does - verified no ancestor of this row (body, .body_wrap, .page_wrap, .top_panel_custom, .elementor-XX) sets transform/filter/will-change:transform/contain, which are the only things that would break position:fixed itself. z-index:9999 keeps it above page content; it doesn't need to also beat the WhatsApp button or mobile nav overlay since neither occupies this same top strip of the screen. The hamburger toggle and its slide-out drawer live inside this same row, so both stay reachable while scrolling; the drawer is already position:fixed internally and is unaffected by its ancestor also being fixed. */ body:not(.header_position_over) .top_panel_custom .elementor-hidden-desktop { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } /* position:fixed removes the row above from normal document flow, so nothing after it (the page title/banner, .elementor-element-6e3dba2, then the rest of the page) would otherwise render tucked underneath it. Compensate with top padding on the row's own wrapper (not the title row itself, which must stay untouched) - scoped to <=1279px only so desktop is completely unaffected. The --esh-mobile-header-height value is the row's own real measured height (set by assets/js/custom-cursor.js, which this file already loads on every page) rather than a hardcoded guess, because different pages' header widget variants render this row at different heights (e.g. the ones with an extra phone-number line); 70px is only the fallback for the brief instant before that JS runs. */ @media (max-width: 1279px) { body:not(.header_position_over) .top_panel_custom { padding-top: var(--esh-mobile-header-height, 70px); } } /* Floating WhatsApp button - premium entrance + continuous ripple/breathing animation. Bottom-right (moved from the bottom-left placement the old Tidio chat bubble this replaces used, per explicit request). Motion is layered across three independent elements so nothing fights for the same "transform" property: the button itself plays a one-time scale-in bounce on load; its ::before is a separate ring that fades outward on a slow loop; the icon svg gets its own very slight infinite float. The loops start only once the entrance bounce has settled (animation-delay) so the page load reads as one deliberate sequence, not several things happening at once. Hover only strengthens the shadow (no hover transform) specifically so it never has to fight the entrance animation's held end-state. */ .esh-whatsapp-btn { position: fixed; left: 20px; bottom: 20px; z-index: 9; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15); transition: box-shadow 0.35s ease; animation: esh-wa-intro 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .esh-whatsapp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25d366; animation: esh-wa-ripple 2.8s ease-out infinite; animation-delay: 0.7s; } .esh-whatsapp-btn svg { animation: esh-wa-breathe 3.6s ease-in-out infinite; animation-delay: 0.7s; } .esh-whatsapp-btn:hover { box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2); } @keyframes esh-wa-intro { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 80% { transform: scale(0.96); } 100% { transform: scale(1); } } @keyframes esh-wa-ripple { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes esh-wa-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .esh-whatsapp-btn, .esh-whatsapp-btn svg { animation: none; } .esh-whatsapp-btn::before { display: none; } } @media (max-width: 480px) { .esh-whatsapp-btn { right: 14px; bottom: 14px; width: 48px; height: 48px; } .esh-whatsapp-btn svg { width: 24px; height: 24px; } } .trx_addons_inline_1774793312 img.logo_image, .elementor-76 .elementor-element.elementor-element-3e5ff532 .logo_image, .elementor-20 .elementor-element.elementor-element-9bd874e .logo_image, .trx_addons_inline_1394240876 img.logo_image, .elementor-24 .elementor-element.elementor-element-a0c09be .logo_image, .trx_addons_inline_414590783 img.logo_image { /* Capped at 36px to match the mobile-row logo (post-76/20/24.css) - an earlier "unset" here let the logo render at its native 157x61px on desktop (1280px+), ~69% larger than designed, instead of the intended ~93x36px. */ max-height: unset; } .elementor-76 .elementor-element.elementor-element-76966cf3 { margin-right: 10px; } /* "Clinical standards, in your own home" comparison table (Feature / Traditional / ESH800) on the homepage. Restyled to match the theme's own native table pattern - the same flat, underlined-row layout used by the (unused-on-this-page) "Recognition / Service / History" table in post-45.css (elementor-element-2f371c7e / -49048f81 etc.): plain rows sitting directly on the section's own light-teal background (elementor-element-de1e1fc already sets that), a solid line under the header, a hairline between rows, and real elementor-heading-title h6s so the type matches theme headings automatically - no separate white card, no shadow, no rounded box like the previous version had. */ .esh-compare2-row { display: flex; flex-wrap: wrap; gap: 12px 24px; border-bottom: 1px solid var(--e-global-color-theme_color_bd_color, #CADBDD); padding: 22px 0; } .esh-compare2-row:last-child { border-bottom: none; } .esh-compare2-header { border-bottom: 1px solid var(--e-global-color-theme_color_title, #08363B); padding-bottom: 18px; } /* Every cell - header row included - is left to inherit the theme's own default h6/.elementor-heading-title font, size, weight and color untouched, same as the real "Recognition / Service / History" table: uniform type throughout, no small-caps label styling, no per-column color or weight. The x/check icons are the only pass-fail signal. */ .esh-compare2-col { flex: 1 1 0; min-width: 150px; } .esh-compare2-col-feature { flex: 1.2 1 0; } .esh-compare2-col-num { flex: 0 0 44px; min-width: 44px; } .esh-compare-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; margin-right: 8px; font-weight: 700; } .esh-compare-icon-x { color: var(--e-global-color-theme_color_bd_color, #CADBDD); } .esh-compare-icon-check { color: var(--e-global-color-theme_color_link, #00A8BC); } @media (max-width: 767px) { .esh-compare2-col:not(.esh-compare2-col-num) { flex: 1 1 100%; } } /* "Healthcare data overview" / "Recent updates and medical highlights" four-counter stat row. The left image column was removed, so this row now takes the full section width. Elementor's own CSS (and an earlier hand-edit here) drive this element's layout through `--width`/`--flex-direction` custom properties, which fight each other across breakpoints - so instead of chasing that, this sets the real layout properties directly (with !important) as a single source of truth for every screen size. Text/values are untouched; only sizing, spacing, alignment and responsive behavior change. */ .elementor-element-18bd06f3 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: start !important; width: 100% !important; gap: 40px 32px !important; } .elementor-element-18bd06f3>.elementor-element { width: auto !important; min-width: 0; } .elementor-element-18bd06f3 .trx-addons-counter-number-wrap { white-space: nowrap; font-size: 56px !important; line-height: 1.1; } .elementor-element-18bd06f3 .trx-addons-counter-title { margin-top: 6px; } /* Tablet: 4-in-a-row still, just smaller and tighter so nothing wraps or overflows. */ @media (max-width: 1024px) { .elementor-element-18bd06f3 { gap: 24px 20px !important; } .elementor-element-18bd06f3 .trx-addons-counter-number-wrap { font-size: 34px; } } /* Mobile: 2x2 grid, centered. */ @media (max-width: 767px) { .elementor-element-18bd06f3 { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 20px !important; } .elementor-element-18bd06f3 .trx-addons-counter-number-title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .elementor-element-18bd06f3 .trx-addons-counter-number-wrap { font-size: 30px; } } /* Small mobile: keep the 2x2 grid, shrink further so e.g. $200.2M never overflows its column. */ @media (max-width: 480px) { .elementor-element-18bd06f3 { gap: 20px 14px !important; } .elementor-element-18bd06f3 .trx-addons-counter-number-wrap { font-size: 22px; /* Base rule sets white-space:nowrap for this element; on the tightest 2x2 grid cells a longer value than today's (30 Mins, 1:1, DHA, 1M+) could spill past its column, so allow wrapping as a safety net here. */ white-space: normal; overflow-wrap: break-word; } .elementor-element-18bd06f3 .trx-addons-counter-title { font-size: 12px; } } .elementor-icon-box-wrapper .elementor-icon-box-icon { margin-bottom: 10px; } .elementor-icon-box-description { margin-bottom: 0; } /* .elementor-45 .elementor-element.elementor-element-5f0987ac { --padding-top: 150px; --padding-bottom: 0; } */ .elementor-32 .elementor-element.elementor-element-f1ac009 { --container-widget-width: 100%; } .records-analysed { padding-left: 0; list-style: none; } .records-analysed li { display: inline-flex; align-items: self-end; gap: 10px; margin-right: 15px; } .elementor-28 .elementor-element.elementor-element-7448bc2 .logo_image { max-height: unset; } /* Footer logo: the navy/green wordmark reads as dark-on-dark against the teal footer background, so give it a white rounded backing plate (matching how it looks in the light-background header) - scoped to this one footer instance only. */ .elementor-element-7448bc2 .sc_layouts_logo { display: inline-flex; background: #ffffff; padding: 10px 16px; border-radius: 12px; } /* Footer nav/contact links were rendering in the theme's low-contrast "alt text" gray-teal, which reads as barely-there on the footer's dark background. Bump them to near-white for legibility, with the brand green on hover so they still read clearly as links. */ /* .footer_wrap .elementor-icon-list-text { color: #eef3f3 !important; } */ /* .footer_wrap .elementor-icon-list-item:hover .elementor-icon-list-text { color: #4fd18b !important; } */ /* "Company" and "Location" sub-headings in the footer are new widgets (added along with the ESH800 content) that have no page-specific CSS of their own, so they were falling back to the theme's default dark heading color meant for light backgrounds - nearly invisible on the dark footer. Match them to the same near-white the other footer headings ("Care", "Legal Policy", "Contact") already use. */ .elementor-element-5a7b42b .elementor-heading-title, .elementor-element-a37513d .elementor-heading-title { color: #fbfeff; margin: 0 0 15px 0; } .elementor-heading-title.elementor-size-default.company { margin-top: 15px; } /* "Have inquiries? Reach out to us!" contact form (MetForm widget): the theme normally colors this via JS at runtime (reading its accent color out of MD_STORAGE/TRX_ADDONS_STORAGE), which isn't reliably applying here, so set the brand look directly instead of depending on that. Matches the theme's teal accent (#00A8BC) used elsewhere on the site. */ .mf-input:not(.mf-checkbox-input), textarea.mf-input { background: #ffffff !important; border: 1px solid #dfe3e6 !important; border-radius: 10px !important; } .mf-input-label { font-weight: 600; color: #16232f; } .mf-checkbox-input { accent-color: #00a8bc; } /* Same inset box-shadow sliding-fill hover technique as the header's "Book Care" button (see .elementor-element-76966cf3 etc. above), so this page's own submit button behaves like the header button instead of the plain flat-color swap it had before. */ .metform-submit-btn { /* background: #00a8bc !important; */ color: #ffffff !important; border: none !important; border-radius: 10px !important; font-weight: 700; box-shadow: inset 0 0 0 0 #27508d, inset 0 0 0 0 #27508d; transition: box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease; } .metform-submit-btn:hover { box-shadow: inset 100px 0 0 0 #27508d, inset -100px 0 0 0 #27508d; border-color: #27508d; color: #ffffff !important; } .elementor-28 .elementor-element.elementor-element-513d507 { width: 100%; } .elementor-28 .elementor-element.elementor-element-513d507 p { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; } .elementor-46 .elementor-element .elementor-icon-box-wrapper .elementor-icon-box-description { margin-bottom: 18px; } .elementor-46 .elementor-element.elementor-element-6f748e56 .elementor-icon, .elementor-46 .elementor-element.elementor-element-542d9de3 .elementor-icon, .elementor-46 .elementor-element.elementor-element-7da6522 .elementor-icon, .elementor-46 .elementor-element.elementor-element-a22f634 .elementor-icon, .elementor-46 .elementor-element.elementor-element-b026342 .elementor-icon, .elementor-46 .elementor-element.elementor-element-888371c .elementor-icon { font-size: 30px; } /* services/index.html: the services grid was cramming 4 cards per row, which was crowding the icon/title/description and making the second row look cut off. 3 per row gives each card enough width to breathe. */ @media (min-width: 1280px) { .elementor-element-e915e02 { --e-con-grid-template-columns: repeat(3, 1fr) !important; } } /* Each services-grid card is a flex column of [icon, content], but its own container uses justify-content:space-between - so once the grid stretches every card in a row to match the tallest one, shorter cards' title/description get pushed toward the bottom instead of sitting right under the icon, making titles land at different heights across cards. Pin content to the top instead. */ .elementor-element-e915e02>.elementor-element { --justify-content: flex-start !important; justify-content: flex-start !important; } /* "View Service" links added to match the home page's service cards. */ .elementor-element-e915e02 .elementor-element>a { display: inline-block; margin-top: 12px; color: var(--theme-color-title); font-weight: 600; text-decoration: none; } .elementor-element-e915e02 .elementor-element>a:hover { text-decoration: underline; } .elementor-43 .elementor-element.elementor-element-53cc6568 .elementor-element.elementor-element-59a91462 p { text-align: center; } .included-everything { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .included-everything li { display: inline-flex; align-items: self-end; gap: 10px; } /* services/doctor-on-call: "Three steps, fully managed." grid was trimmed from 4 steps down to 3 (Request/Match/Deliver), but the grid still reserved a 4th column's worth of width, leaving the card looking left-aligned with empty space on the right instead of centered. Scoped to this one instance (.esh-steps-3col) since the same element ID still has its original 4 items intact on index.html. */ @media (min-width: 1280px) { .esh-steps-3col { --e-con-grid-template-columns: repeat(3, 1fr) !important; } } /* Homepage "Doctor Consultation / Home Nursing / Pathology / ..." 8-card grid: the source template (dentist page) never had icons on this widget, so these are self-contained additions - not tied to any page's own CSS scope. Icon and heading sit side by side in one row. */ .esh-service-icon-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; flex-direction: row-reverse; width: 100%; } .esh-service-icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--e-global-color-theme_color_link); } .esh-service-icon svg { width: 100%; height: 100%; } /* Service cards: brand-teal overlay slides up from the bottom on hover, text/icon switch to white for contrast. */ .esh-service-card { position: relative; overflow: hidden; transition: color 0.35s ease; } /* The theme sets --justify-content:space-between on this card (icon+title row vs. the description+"Learn More" row), which pins the icon/title to the top and the description to the bottom of the stretched grid cell - so with a 1-line title (e.g. "Home Nursing") the description floats far below where a 2/3-line title (e.g. "Doctor Consultation") puts it, instead of both cards reading top-down consistently. Anchoring to the top instead keeps the description right under the title on every card, regardless of how many lines the title/description take. Scoped to the homepage (.elementor-45) only - .esh-service-card is now reused on the services grid (.elementor-36) too, purely for the hover overlay below; that page's own cards keep their original space-between layout. */ .elementor-45 .esh-service-card { --justify-content: flex-start !important; } .esh-service-card::before { content: ""; position: absolute; inset: 0; /* background: #00A8BC; */ background: #183b6e; transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; } .esh-service-card:hover::before { transform: translateY(0); } .esh-service-card>* { position: relative; z-index: 1; } .esh-service-card:hover .esh-service-icon, .esh-service-card:hover .elementor-heading-title, .esh-service-card:hover p, .esh-service-card:hover .trx-addons-icon-list-text, .esh-service-card:hover .trx-addons-icon-list-item-with-link, .esh-service-card:hover .elementor-widget-text-editor, .esh-service-card:hover a { color: #ffffff !important; transition: color 0.35s ease; } /* services/index.html's 9-card grid reuses .esh-service-card (see above) but its icon is a real Elementor icon widget (SVG fill set via a highly-specific per-widget-id rule in post-36.css), not the homepage's plain .esh-service-icon svg - so the icon needs its own hover override to turn white too. */ .esh-service-card:hover .elementor-icon, .esh-service-card:hover .elementor-icon svg { color: #ffffff !important; fill: #ffffff !important; transition: color 0.35s ease, fill 0.35s ease; } .our-services h1.elementor-heading-title.elementor-size-default { margin-bottom: 30px; } /* .elementor-32 .elementor-element.elementor-element-ae43035 { margin-bottom: 0; } */ /* .elementor-32 .elementor-element.elementor-element-f1ac009 { margin-bottom: 20px; } */ .elementor-44.our-services .elementor-element.elementor-element-2c3b4b19 { padding-top: 0; padding-bottom: 0; } /* Homepage "Read real stories..." row (Marcus Green / Caroline Rivers / Michael Turner): the 5-star rating markup was pasted in from the testimonials widget, but that widget's star-color CSS is scoped to its own element ID, which isn't present here - so the stars render with the SVG default (black) fill instead of brand teal. Sizing already works (Testimonials.css has an unscoped base rule for that); only the color is missing. Scoped to these 3 image-box widgets only, so it doesn't affect star ratings elsewhere on the site that may use a different color. */ .elementor-element-53a21f6 .trx-addons-fb-rev-star-filled svg path, .elementor-element-53a21f6 .trx-addons-fb-rev-star-half svg path, .elementor-element-53a21f6 .trx-addons-fb-rev-star-empty svg path, .elementor-element-e238218 .trx-addons-fb-rev-star-filled svg path, .elementor-element-e238218 .trx-addons-fb-rev-star-half svg path, .elementor-element-e238218 .trx-addons-fb-rev-star-empty svg path, .elementor-element-17566b4 .trx-addons-fb-rev-star-filled svg path, .elementor-element-17566b4 .trx-addons-fb-rev-star-half svg path, .elementor-element-17566b4 .trx-addons-fb-rev-star-empty svg path { fill: var(--e-global-color-theme_color_link, #00A8BC); } /* "Redefining modern patient care" section background removed. */ .elementor-47 .elementor-element.elementor-element-33cf6aaf:not(.elementor-motion-effects-element-type-background) { background-color: transparent; } /* Cursor-follow dot (every page, driven by assets/js/custom-cursor.js). Fixed positioning + pointer-events:none keeps it purely visual - it never intercepts clicks or affects layout. The JS only creates/moves this element on desktop, so no extra device guarding is needed here. Position itself is set via inline transform (translate3d) from the JS each frame, so every other property here uses width/height/margin/ background instead of transform, to avoid the two fighting. */ .esh-cursor-dot { position: fixed; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #183B6E; border-radius: 50%; pointer-events: none; z-index: 99999; opacity: 0; transition: opacity 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease; } .esh-cursor-dot-visible { opacity: 1; } /* Hover state: over links/buttons/form fields/service cards the dot switches to white with a thin teal ring and grows slightly - keeps it visible against the service cards' solid teal hover fill (where a plain teal dot would otherwise disappear) and reads as a "clickable" cue everywhere else. */ .esh-cursor-dot-hover { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: transparent; border: 2px solid #ffffff; box-shadow: 0 0 0 2px #183B6E; } /* Image "shine" hover effect: a soft diagonal light streak sweeps across the image on hover. Add .esh-img-shine to the element that wraps the (needs its own bounds to clip against - a widget div, figure, card, etc). Pure CSS, no JS, no effect on layout/size. */ .esh-img-shine { position: relative; overflow: hidden; } .esh-img-shine::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); pointer-events: none; z-index: 2; transition: left 1.4s ease; } .esh-img-shine:hover::after { left: 125%; } /* Header "Book Care" button - inset box-shadow fill on hover. Two inset shadows (one offset from the left edge, one from the right) grow toward each other and meet in the middle, purely via box-shadow so size/shape/padding/font/position are untouched - no new markup, no pseudo-elements. Scoped to just this one button (elementor-element-76966cf3) so no other button on the site changes. */ /* .elementor-element-76966cf3 .elementor-button { box-shadow: inset 0 0 0 0 #00A8BC, inset 0 0 0 0 #00A8BC; transition: box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease; } .elementor-element-76966cf3 .elementor-button:hover { box-shadow: inset 100px 0 0 0 #00A8BC, inset -100px 0 0 0 #00A8BC; border-color: #00A8BC; color: #ffffff !important; } */ /* Same "Book Care" header button, but on every OTHER page: Elementor gave it a different widget id per header variant (76966cf3 is the homepage's own unique header; every other page's header uses either a1c5a07 or a2e9d9e depending on which of the two header layouts that page has) - this rule was homepage-only, so the hover effect silently did nothing anywhere else. Verified both ids point at the identical button markup (.elementor-button.elementor-button-link, "Book Care" text) before extending the same rule to them. */ .elementor-element-76966cf3 .elementor-button, .elementor-element-a1c5a07 .elementor-button, .elementor-element-a2e9d9e .elementor-button { box-shadow: inset 0 0 0 0 #27508d, inset 0 0 0 0 #27508d; transition: box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease; } .elementor-element-76966cf3 .elementor-button:hover, .elementor-element-a1c5a07 .elementor-button:hover, .elementor-element-a2e9d9e .elementor-button:hover { box-shadow: inset 100px 0 0 0 #27508d, inset -100px 0 0 0 #27508d; border-color: #27508d; color: #ffffff !important; } /* .elementor-element-76966cf3 .elementor-button { box-shadow: inset 0 0 0 0 #5DC18E, inset 0 0 0 0 #5DC18E; transition: box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease; } .elementor-element-76966cf3 .elementor-button:hover { box-shadow: inset 100px 0 0 0 #5DC18E, inset -100px 0 0 0 #5DC18E; border-color: #5DC18E; color: #ffffff !important; } */ button:where(:not(.components-button):not([class*="wp-block-social"]):not([id="elementor-editor-button"])), input[type="button"], input[type="reset"], input[type="submit"], .theme_button, .post_item .more-link, .wp-block-button__link, .elementor-button, .sc_button_default { border-color: #183B6E !important; background-color: #183B6E !important; } .elementor.elementor-36.who-its-for .e-con-inner { padding-bottom: 0; padding-top: 0; margin-bottom: 50px; } .elementor.elementor-36.who-its-for .e-con-inner .elementor-heading-title.elementor-size-default { margin-bottom: 22px; } .elementor-44.our-services .elementor-element.elementor-element-5a093a72 { width: var(--container-widget-width, 240px); max-width: 240px; --container-widget-width: 240px; --container-widget-flex-grow: 0; } .privacy-policy .elementor-3 .elementor-element.elementor-element-5718cb04 { --content-width: 100%; } .privacy-policy .elementor-3 .elementor-element .elementor-divider { padding-block-start: 40px; padding-block-end: 40px; } .privacy-policy .page_content_wrap { padding-top: 80px; padding-bottom: 80px; } /* Same responsive scaling as the site-wide .page_content_wrap rule above, proportioned to this page's own 80px base instead of 100px. */ @media (max-width: 1024px) { .privacy-policy .page_content_wrap { padding-top: 64px; padding-bottom: 64px; } } @media (max-width: 767px) { .privacy-policy .page_content_wrap { padding-top: 48px; padding-bottom: 48px; } } @media (max-width: 480px) { .privacy-policy .page_content_wrap { padding-top: 32px; padding-bottom: 32px; } } .elementor-45 .cards-col .elementor-element.elementor-element { --container-widget-width: 100%; } /* about-us: "We guide your path to better health care" section (elementor-element-6aed0fd / -1111d9e / -725b04a9 / -25d64d8a / -6b0de91f / -473ec8f1 / -6024df2 / -505a6434). This content/markup was copied over from the homepage (scoped there to .elementor-32, in post-32's own per-page CSS), but about-us is a different Elementor post (.elementor-34) whose own post-34 CSS never got the matching rules generated - so the grid layout, image sizing/radius, card padding/background and heading color were all falling back to unstyled defaults. Mirrors post-32's rules verbatim, rescoped to .elementor-34. */ .elementor-34 .elementor-element.elementor-element-6aed0fd { --display: flex; --flex-direction: row; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap; --gap: 0px 0px; --row-gap: 0px; --column-gap: 0px; --padding-top: 100px; --padding-bottom: 100px; --padding-left: 70px; --padding-right: 70px; } .elementor-34 .elementor-element.elementor-element-6024df2 { --display: flex; --flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap; } .elementor-34 .elementor-element.elementor-element-1111d9e { --display: grid; --e-con-grid-template-columns: repeat(2, 1fr); --e-con-grid-template-rows: repeat(1, 1fr); --gap: 25px 25px; --row-gap: 25px; --column-gap: 25px; --grid-auto-flow: row; --padding-top: 10px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } .elementor-34 .elementor-element.elementor-element-725b04a9 { --display: flex; --justify-content: flex-end; --border-radius: 30px 30px 30px 30px; --padding-top: 30px; --padding-bottom: 30px; --padding-left: 30px; --padding-right: 30px; } .elementor-34 .elementor-element.elementor-element-725b04a9:not(.elementor-motion-effects-element-type-background), .elementor-34 .elementor-element.elementor-element-725b04a9>.elementor-motion-effects-container>.elementor-motion-effects-layer { background-color: var(--e-global-color-theme_color_link); } .elementor-34 .elementor-element.elementor-element-473ec8f1 .elementor-heading-title { color: var(--e-global-color-theme_color_alt_title); } .elementor-34 .elementor-element.elementor-element-25d64d8a img { border-radius: 30px 30px 30px 30px; } .elementor-34 .elementor-element.elementor-element-6b0de91f { grid-column: span 2; } .elementor-34 .elementor-element.elementor-element-6b0de91f img { border-radius: 30px 30px 30px 30px; } .elementor-34 .elementor-element.elementor-element-505a6434 { --display: flex; --flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap; --gap: 0px 0px; --row-gap: 0px; --column-gap: 0px; --padding-top: 8.8vw; --padding-bottom: 0vw; --padding-left: 7vw; --padding-right: 0vw; } @media (min-width: 768px) { .elementor-34 .elementor-element.elementor-element-6024df2 { --width: 50%; } .elementor-34 .elementor-element.elementor-element-505a6434 { --width: 50%; } } @media (max-width: 1279px) { .elementor-34 .elementor-element.elementor-element-6aed0fd { --gap: 30px 30px; --row-gap: 30px; --column-gap: 30px; --padding-top: 95px; --padding-bottom: 95px; --padding-left: 30px; --padding-right: 30px; } .elementor-34 .elementor-element.elementor-element-1111d9e { --gap: 20px 20px; --row-gap: 20px; --column-gap: 20px; --grid-auto-flow: row; } .elementor-34 .elementor-element.elementor-element-725b04a9 { --padding-top: 20px; --padding-bottom: 20px; --padding-left: 20px; --padding-right: 20px; } .elementor-34 .elementor-element.elementor-element-473ec8f1 .elementor-heading-title { font-size: 20px; } .elementor-34 .elementor-element.elementor-element-505a6434 { --padding-top: 60px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } .elementor-28 .elementor-element.elementor-element-c8e1e0a { --container-widget-width: 100%; } } @media (max-width: 767px) { .elementor-34 .elementor-element.elementor-element-6aed0fd { --gap: 0px 0px; --row-gap: 0px; --column-gap: 0px; --padding-top: 65px; --padding-bottom: 65px; --padding-left: 20px; --padding-right: 20px; } .elementor-34 .elementor-element.elementor-element-1111d9e { --gap: 15px 15px; --row-gap: 15px; --column-gap: 15px; --grid-auto-flow: row; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } .elementor-34 .elementor-element.elementor-element-725b04a9 { --border-radius: 15px 15px 15px 15px; } .elementor-34 .elementor-element.elementor-element-25d64d8a img { max-width: 100%; height: 100%; object-fit: cover; border-radius: 15px 15px 15px 15px; } .elementor-34 .elementor-element.elementor-element-6b0de91f img { border-radius: 15px 15px 15px 15px; } .elementor-34 .elementor-element.elementor-element-505a6434 { --padding-top: 40px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } } /* about-us: "Diagnostics / The Mobile Diagnostic Suite" icon-box list (On-board laboratory / 12-lead ECG / Specimen processing / Digital reporting - elementor-element-40040b39/-5a1ee142/-2f2fc95c/-258e6015). These icon-box widgets have no page-specific CSS of their own, so Elementor's default "icon on top" layout was falling back to its built-in centered alignment - same as every other icon-box card already on this page (e.g. elementor-element-1fe2193's "Complete care" card) except those cards each carry their own ".elementor-icon-box-wrapper{text-align:start}" rule. Mirroring that same rule here left-aligns this list the same way, without touching icon size, spacing or any text. */ .elementor-34 .elementor-element.elementor-element-40040b39 .elementor-icon-box-wrapper, .elementor-34 .elementor-element.elementor-element-5a1ee142 .elementor-icon-box-wrapper, .elementor-34 .elementor-element.elementor-element-2f2fc95c .elementor-icon-box-wrapper, .elementor-34 .elementor-element.elementor-element-258e6015 .elementor-icon-box-wrapper { text-align: start; } /* about-us: same icon-box list (elementor-element-5e9721b6, the container wrapping the 4 icon-boxes above). Its gap was never generated in post-34's own CSS either, so the icon-box rows sit with the default (near-zero) gap instead of the same generous spacing this list uses on the homepage (.elementor-32). Mirrors post-32's rule verbatim, rescoped to .elementor-34. */ .elementor-34 .elementor-element.elementor-element-5e9721b6 { --gap: 55px 55px; --row-gap: 55px; --column-gap: 55px; } @media (max-width: 1279px) { .elementor-34 .elementor-element.elementor-element-5e9721b6 { --gap: 35px 35px; --row-gap: 35px; --column-gap: 35px; } } @media (max-width: 767px) { .elementor-34 .elementor-element.elementor-element-5e9721b6 { --gap: 28px 28px; --row-gap: 28px; --column-gap: 28px; } } .about-us-new { padding-top: 0; } /* .about-page .top_panel .e-con-inner { padding-top: 80px; } */ .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { right: inherit; } .elementor-39 .elementor-element .trx-addons-list-items .trx-addons-icon-list-icon { color: #5dc18e !important; } .elementor-39 .elementor-element .trx-addons-list-items .trx-addons-icon-list-icon svg { fill: #5dc18e !important; } /**/ .trx_addons_scroll_to_top { background-color: #5dc18e; } h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { color: #183b6e; } a { color: var(--e-global-color-theme_color_title); } .elementor-kit-1 { /* --e-global-color-primary: #6EC1E4; --e-global-color-secondary: #54595F; --e-global-color-text: #7A7A7A; --e-global-color-accent: #61CE70; --e-global-color-theme_color_bg_color: #FFFFFF; --e-global-color-theme_color_bg_color_2: #EDF9FC; --e-global-color-theme_color_bd_color: #CADBDD; --e-global-color-theme_color_title: #08363B; --e-global-color-theme_color_text: #67787A; --e-global-color-theme_color_meta: #849A9C; --e-global-color-theme_color_link: #00A8BC; --e-global-color-theme_color_hover: #008C9C; --e-global-color-theme_color_alt_bg_color: #0A2E32; --e-global-color-theme_color_alt_bg_color_2: #0E3B40; --e-global-color-theme_color_alt_bd_color: #134A50; --e-global-color-theme_color_alt_title: #FBFEFF; --e-global-color-theme_color_alt_text: #A8BFC1; --e-global-color-theme_color_alt_meta: #7F9698; --e-global-color-theme_color_alt_link: #00A8BC; --e-global-color-theme_color_alt_hover: #008C9C; */ --e-global-color-primary: #183B6E; --e-global-color-secondary: #5DC18E; --e-global-color-text: #67787A; --e-global-color-accent: #5DC18E; --e-global-color-theme_color_bg_color: #FFFFFF; --e-global-color-theme_color_bg_color_2: #F1FAF6; --e-global-color-theme_color_bd_color: #D2E5DC; --e-global-color-theme_color_title: #183B6E; --e-global-color-theme_color_text: #67787A; --e-global-color-theme_color_meta: #849A9C; --e-global-color-theme_color_link: #5DC18E; --e-global-color-theme_color_hover: #5DC18E; --e-global-color-theme_color_alt_bg_color: #102B50; --e-global-color-theme_color_alt_bg_color_2: #153B63; --e-global-color-theme_color_alt_bd_color: #28527A; --e-global-color-theme_color_alt_title: #FFFFFF; --e-global-color-theme_color_alt_text: #B5C7D8; --e-global-color-theme_color_alt_meta: #91A8BD; --e-global-color-theme_color_alt_link: #5DC18E; --e-global-color-theme_color_alt_hover: #45AD78; } .trx-addons-advanced-title-item.chnage-color { color: var(--e-global-color-theme_color_link); } .elementor-76 .elementor-element.elementor-element-2ef5ffb2, .elementor-76 .elementor-element.elementor-element-51367e0b { --padding-top: 0; --padding-right: 0px; --padding-left: 0; } .elementor-76 .elementor-element.elementor-element-6c421f95, .elementor-76 .elementor-element.elementor-element-171fdbd1 { --border-radius: 0px 0px 15px 15px; } .about-us-new .elementor-icon { font-size: 35px; } /* "About ESH800" page title section (about-us only). Both the title-row wrapper and its heading widget (.elementor-element-6e3dba2 / -68f04ef) are reused across 6 OTHER pages via the same cloned page-title template (blog, both category pages, privacy-policy, terms-conditions, account-deletion-policy) - scoped to .elementor-24 (about-us's own Elementor post id) so none of those other pages' titles are touched. - 50px top/bottom at every size: overrides the theme's own responsive --padding-top (100px desktop / 95px <=1279px / 65px <=767px) and --padding-bottom (always 0) with a flat 50px/50px, same on desktop, tablet and mobile per explicit request - no separate breakpoint values needed since none were asked for. - Left-aligned: the wrapper's own --align-items:center is what visually centers the title block (a flex cross-axis property, not text-align - "About ESH800" is short enough that centering happens here, not via text-align on the heading itself), so that's switched to flex-start; text-align:left on the heading covers the alternate case too. - 40px heading size: no existing font-size rule was set for this heading anywhere (it was inheriting the browser/theme default), so this is a new, additive rule - font-family, weight and color are untouched, matching "keep everything else unchanged". */ .elementor-24 .elementor-element.elementor-element-6e3dba2 { --padding-top: clamp(30px, 5vw, 50px); --padding-bottom: clamp(30px, 5vw, 50px); --align-items: flex-start; } .elementor-24 .elementor-element.elementor-element-68f04ef .elementor-heading-title { font-size: clamp(35px, 4vw, 40px); text-align: left; } .privacy-policy .page_content_wrap, .blog-page .page_content_wrap { padding-top: 0; } .about-page .elementor-34 .elementor-element.elementor-element-7c6ba20 { padding-top: 0; } .about-page .e-con>.e-con-inner { max-width: unset; padding-left: 70px; padding-right: 70px; } .faqs-page .page_content_wrap .e-con-full { padding-block-end: 0px; } .faqs-page .elementor-40 .elementor-element.elementor-element-2438fbf9 { width: 100%; } .faqs-page .elementor-40 .elementor-element.elementor-element-540291e4 .elementor-heading-title { text-align: left; } .faqs-page .elementor-40 .elementor-element.elementor-element-2438fbf9 .elementor-heading-title { font-size: clamp(35px, 4vw, 40px); } .faqs-page .elementor-40 .elementor-element.elementor-element-578e32d7 { --padding-top: 50px; } .faqs-page .page_content_wrap .e-con>.e-con-inner { padding-block-end: 50px; padding-block-start: 50px; } @media (max-width: 1279px) { .about-page .e-con>.e-con-inner { padding-left: 20px; padding-right: 20px; } }