Bionix On Call \u2014 Header<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\r\n\r\n :root {\r\n --neutral: #B08F6D;\r\n --neutral-dark: #8f6e50;\r\n --neutral-light: #c9aa8c;\r\n --bg: #ffffff;\r\n --text: #1e1b18;\r\n --muted: #7c7166;\r\n --border: rgba(176,143,109,0.14);\r\n --pill-bg: #faf7f4;\r\n --drop-bg: rgba(176,143,109,0.06);\r\n --shadow: 0 8px 40px rgba(30,27,24,0.07);\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: #f6f2ee;\r\n min-height: 300vh;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HEADER SHELL\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .site-header {\r\n position: fixed;\r\n inset: 0 0 auto 0;\r\n z-index: 900;\r\n background: rgba(255,255,255,0.97);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n border-bottom: 1px solid var(--border);\r\n box-shadow: 0 2px 20px rgba(30,27,24,0.04);\r\n transition: box-shadow .3s ease;\r\n }\r\n\r\n .site-header.scrolled {\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INNER LAYOUT \u2014 true 3-column grid\r\n Logo | Nav (centered) | Actions\r\n Each side column is equal width so\r\n nav is always mathematically centred.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-inner {\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n height: 88px;\r\n padding: 0 40px;\r\n display: grid;\r\n grid-template-columns: 1fr auto 1fr;\r\n align-items: center;\r\n gap: 24px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LOGO \u2014 left column, left-aligned\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo {\r\n justify-self: start;\r\n display: flex;\r\n align-items: center;\r\n text-decoration: none;\r\n }\r\n\r\n .logo img {\r\n height: 68px;\r\n width: auto;\r\n display: block;\r\n object-fit: contain;\r\n transition: transform .3s ease;\r\n }\r\n\r\n .logo:hover img { transform: scale(1.03); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAV \u2014 middle column, perfectly centred\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .main-nav {\r\n display: flex;\r\n align-items: center;\r\n list-style: none;\r\n gap: 2px;\r\n justify-self: center; \/* centres within its grid cell *\/\r\n }\r\n\r\n .main-nav > li { position: relative; }\r\n\r\n .main-nav > li > a {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n padding: 8px 14px;\r\n \r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 14.5px;\r\n font-weight: 600;\r\n letter-spacing: -.01em;\r\n white-space: nowrap;\r\n transition: color .25s ease, background .25s ease;\r\n }\r\n\r\n .main-nav > li > a:hover,\r\n .main-nav > li > a.active {\r\n color: var(--neutral);\r\n background: var(--drop-bg);\r\n }\r\n\r\n .main-nav > li > a .chevron {\r\n font-size: 9px;\r\n color: var(--muted);\r\n transition: transform .28s ease, color .25s ease;\r\n }\r\n\r\n .main-nav > li:hover > a .chevron {\r\n transform: rotate(180deg);\r\n color: var(--neutral);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DROPDOWN\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .dropdown {\r\n position: absolute;\r\n top: calc(100% + 10px);\r\n left: 50%;\r\n transform: translateX(-50%) translateY(6px);\r\n min-width: 250px;\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n padding: 8px;\r\n list-style: none;\r\n box-shadow: 0 20px 50px rgba(30,27,24,0.10), 0 4px 12px rgba(0,0,0,0.03);\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n transition: opacity .28s ease, transform .28s cubic-bezier(.19,1,.22,1), visibility .28s;\r\n z-index: 200;\r\n }\r\n\r\n .dropdown::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -6px;\r\n left: 50%;\r\n transform: translateX(-50%) rotate(45deg);\r\n width: 12px; height: 12px;\r\n background: var(--bg);\r\n border-top: 1px solid var(--border);\r\n border-left: 1px solid var(--border);\r\n border-radius: 2px;\r\n }\r\n\r\n .main-nav > li:hover .dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n .hover-bridge {\r\n position: absolute;\r\n top: 100%;\r\n left: -10px; right: -10px;\r\n height: 12px;\r\n }\r\n\r\n .dropdown li + li { margin-top: 2px; }\r\n\r\n .dropdown li a {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 10px 14px;\r\n border-radius: 12px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 13.5px;\r\n font-weight: 500;\r\n transition: background .22s ease, color .22s ease, transform .22s ease;\r\n }\r\n\r\n .dropdown li a:hover {\r\n background: var(--drop-bg);\r\n color: var(--neutral);\r\n transform: translateX(3px);\r\n }\r\n\r\n .drop-icon {\r\n width: 34px; height: 34px;\r\n border-radius: 10px;\r\n background: rgba(176,143,109,0.10);\r\n display: grid;\r\n place-items: center;\r\n font-size: 13px;\r\n color: var(--neutral);\r\n flex-shrink: 0;\r\n transition: background .22s ease, transform .22s ease;\r\n }\r\n\r\n .dropdown li a:hover .drop-icon {\r\n background: rgba(176,143,109,0.18);\r\n transform: scale(1.06);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RIGHT ACTIONS \u2014 right column, right-aligned\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-actions {\r\n justify-self: end;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex-shrink: 0;\r\n min-width: 0;\r\n }\r\n\r\n .contact-pill {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 7px 16px 7px 7px;\r\n border-radius: 999px;\r\n background: var(--pill-bg);\r\n border: 1px solid var(--border);\r\n text-decoration: none;\r\n transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;\r\n }\r\n\r\n .contact-pill:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(176,143,109,0.14);\r\n border-color: rgba(176,143,109,0.24);\r\n }\r\n\r\n .pill-icon {\r\n width: 36px; height: 36px;\r\n border-radius: 50%;\r\n background: rgba(176,143,109,0.12);\r\n color: var(--neutral);\r\n display: grid;\r\n place-items: center;\r\n font-size: 14px;\r\n }\r\n\r\n .pill-text { line-height: 1.15; white-space: nowrap; }\r\n\r\n .pill-text small {\r\n display: block;\r\n font-size: 10px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: .8px;\r\n margin-bottom: 2px;\r\n white-space: nowrap;\r\n }\r\n\r\n .pill-text strong {\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: var(--text);\r\n white-space: nowrap;\r\n }\r\n\r\n .book-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 0 26px 0 6px;\r\n height: 52px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, var(--neutral-dark) 0%, var(--neutral) 50%, var(--neutral-light) 100%);\r\n color: #fff;\r\n font-size: 14.5px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n box-shadow: 0 6px 24px rgba(176,143,109,0.35), inset 0 1px 0 rgba(255,255,255,0.18);\r\n overflow: hidden;\r\n position: relative;\r\n letter-spacing: -.01em;\r\n transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease;\r\n }\r\n\r\n \/* Icon circle inside the button *\/\r\n .book-btn .btn-icon-wrap {\r\n width: 40px; height: 40px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.18);\r\n border: 1px solid rgba(255,255,255,0.22);\r\n display: grid;\r\n place-items: center;\r\n font-size: 15px;\r\n flex-shrink: 0;\r\n transition: background .3s ease, transform .35s cubic-bezier(.19,1,.22,1);\r\n }\r\n\r\n \/* Shimmer sweep *\/\r\n .book-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0; left: -120%;\r\n width: 60%; height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transition: left .6s ease;\r\n }\r\n\r\n .book-btn:hover::after { left: 140%; }\r\n\r\n .book-btn:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 14px 36px rgba(176,143,109,0.42), inset 0 1px 0 rgba(255,255,255,0.18);\r\n }\r\n\r\n .book-btn:hover .btn-icon-wrap {\r\n background: rgba(255,255,255,0.26);\r\n transform: rotate(8deg) scale(1.08);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HAMBURGER (mobile only)\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n #nav-toggle { display: none; }\r\n\r\n .hamburger {\r\n display: none;\r\n width: 46px; height: 46px;\r\n border-radius: 12px;\r\n border: 1px solid var(--border);\r\n background: var(--pill-bg);\r\n cursor: pointer;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 5px;\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 910;\r\n transition: background .25s ease, border-color .25s ease;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 20px; height: 2px;\r\n border-radius: 6px;\r\n background: var(--neutral);\r\n transition: transform .35s cubic-bezier(.19,1,.22,1), opacity .25s ease;\r\n }\r\n\r\n .hamburger:hover { background: rgba(176,143,109,0.08); border-color: rgba(176,143,109,0.22); }\r\n\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE OVERLAY\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .mobile-overlay {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(30,27,24,0.38);\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(3px);\r\n z-index: 905;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity .35s ease, visibility .35s;\r\n }\r\n\r\n #nav-toggle:checked ~ .mobile-overlay {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE DRAWER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .mobile-drawer {\r\n display: none;\r\n position: fixed;\r\n top: 0; right: -100%;\r\n width: 310px;\r\n max-width: 88vw;\r\n height: 100vh;\r\n height: 100dvh;\r\n background: var(--bg);\r\n z-index: 910;\r\n flex-direction: column;\r\n overflow-y: auto;\r\n box-shadow: -8px 0 40px rgba(0,0,0,0.10);\r\n transition: right .42s cubic-bezier(.19,1,.22,1);\r\n }\r\n\r\n #nav-toggle:checked ~ .mobile-drawer {\r\n right: 0;\r\n }\r\n\r\n .drawer-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 18px 20px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .drawer-head .logo img { height: 40px; }\r\n\r\n .drawer-close {\r\n width: 38px; height: 38px;\r\n border-radius: 10px;\r\n border: 1px solid var(--border);\r\n background: var(--pill-bg);\r\n display: grid;\r\n place-items: center;\r\n cursor: pointer;\r\n color: var(--muted);\r\n font-size: 15px;\r\n transition: background .25s ease, color .25s ease;\r\n }\r\n\r\n .drawer-close:hover { background: rgba(176,143,109,0.10); color: var(--neutral); }\r\n\r\n .drawer-nav {\r\n list-style: none;\r\n padding: 12px 14px;\r\n flex: 1;\r\n }\r\n\r\n .drawer-nav > li { border-bottom: 1px solid rgba(176,143,109,0.07); }\r\n .drawer-nav > li:last-child { border-bottom: none; }\r\n\r\n .drawer-nav > li > a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 15px 10px;\r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 15px;\r\n font-weight: 600;\r\n transition: color .22s ease, background .22s ease;\r\n }\r\n\r\n .drawer-nav > li > a:hover,\r\n .drawer-nav > li > a.active { color: var(--neutral); background: var(--drop-bg); }\r\n\r\n .drawer-nav > li > a .chevron {\r\n font-size: 9px;\r\n color: var(--muted);\r\n transition: transform .28s ease, color .28s ease;\r\n }\r\n\r\n .drawer-nav > li.open > a .chevron {\r\n transform: rotate(180deg);\r\n color: var(--neutral);\r\n }\r\n\r\n .drawer-sub {\r\n list-style: none;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height .38s cubic-bezier(.19,1,.22,1);\r\n padding: 0 4px;\r\n }\r\n\r\n .drawer-nav > li.open .drawer-sub { max-height: 700px; }\r\n\r\n .drawer-sub li a {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 9px 12px;\r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 13.5px;\r\n font-weight: 500;\r\n margin-bottom: 2px;\r\n transition: background .22s ease, color .22s ease;\r\n }\r\n\r\n .drawer-sub li a:hover { background: var(--drop-bg); color: var(--neutral); }\r\n\r\n .drawer-sub .drop-icon {\r\n width: 30px; height: 30px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n }\r\n\r\n .drawer-actions {\r\n padding: 16px 18px 32px;\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .drawer-actions .contact-pill { width: 100%; justify-content: flex-start; }\r\n .drawer-actions .book-btn {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 0 28px 0 6px;\r\n height: 54px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SPACER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-spacer { height: 88px; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* hide contact pill below 1200 \u2014 keep grid but collapse pill *\/\r\n @media (max-width: 1200px) {\r\n .header-inner { padding: 0 28px; }\r\n .contact-pill { display: none; }\r\n .main-nav > li > a { font-size: 14px; padding: 8px 11px; }\r\n }\r\n\r\n \/* below 960 \u2192 drawer mode \u2014 switch back to flex for logo + hamburger *\/\r\n @media (max-width: 960px) {\r\n .header-inner {\r\n padding: 0 20px;\r\n height: 72px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .header-spacer { height: 72px; }\r\n .logo { justify-self: unset; }\r\n .logo img { height: 52px; }\r\n\r\n .main-nav { display: none; }\r\n .header-actions { display: none; justify-self: unset; }\r\n\r\n .hamburger { display: flex; }\r\n .mobile-overlay { display: block; }\r\n .mobile-drawer { display: flex; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header-inner { padding: 0 14px; height: 62px; }\r\n .header-spacer { height: 62px; }\r\n .logo img { height: 44px; }\r\n .hamburger { width: 42px; height: 42px; }\r\n .mobile-drawer { width: 100%; max-width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<input type=\"checkbox\" id=\"nav-toggle\" style=\"display:none\">\r\n\r\n<header class=\"site-header\" id=\"siteHeader\">\r\n <div class=\"header-inner\">\r\n\r\n \r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" alt=\"Bionix On Call\">\r\n <\/a>\r\n\r\n \r\n <ul class=\"main-nav\">\r\n <li><a href=\"https:\/\/bionixoncall.justeasyshop.com\/\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"https:\/\/bionixoncall.justeasyshop.com\/index.php\/about-us\/\">About<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/bionixoncall.justeasyshop.com\/index.php\/services\/\" class=\"has-dropdown\">\r\n Services <i class=\"fa-solid fa-chevron-down chevron\"><\/i>\r\n <\/a>\r\n <div class=\"hover-bridge\"><\/div>\r\n <ul class=\"dropdown\">\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-syringe\"><\/i><\/span>IV Therapy<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-user-nurse\"><\/i><\/span>Home Nursing<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-person-cane\"><\/i><\/span>Elderly Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-stethoscope\"><\/i><\/span>Doctor on Call<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-heart-pulse\"><\/i><\/span>Palliative Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-bandage\"><\/i><\/span>Wound Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-dumbbell\"><\/i><\/span>Physiotherapy at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-flask-vial\"><\/i><\/span>Lab Test at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-hospital\"><\/i><\/span>Post-operative Care<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\">Why Choose Us<\/a><\/li>\r\n <li><a href=\"#\">Doctors<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n \r\n <div class=\"header-actions\">\r\n <a href=\"tel:+971501234567\" class=\"contact-pill\">\r\n <div class=\"pill-icon\"><i class=\"fa-solid fa-phone-volume\"><\/i><\/div>\r\n <div class=\"pill-text\">\r\n <small>Call Us 24\/7<\/small>\r\n <strong>+971 50 123 4567<\/strong>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"book-btn\">\r\n <span class=\"btn-icon-wrap\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/span>\r\n Book Now\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <label for=\"nav-toggle\" class=\"hamburger\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/label>\r\n\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<label for=\"nav-toggle\" class=\"mobile-overlay\"><\/label>\r\n\r\n\r\n<div class=\"mobile-drawer\">\r\n <div class=\"drawer-head\">\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" alt=\"Bionix On Call\">\r\n <\/a>\r\n <label for=\"nav-toggle\" class=\"drawer-close\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/label>\r\n <\/div>\r\n\r\n <ul class=\"drawer-nav\">\r\n <li><a href=\"#\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#\">About<\/a><\/li>\r\n <li>\r\n <a href=\"#\" class=\"toggle-sub\">\r\n Services <i class=\"fa-solid fa-chevron-down chevron\"><\/i>\r\n <\/a>\r\n <ul class=\"drawer-sub\">\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-syringe\"><\/i><\/span>IV Therapy<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-user-nurse\"><\/i><\/span>Home Nursing<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-person-cane\"><\/i><\/span>Elderly Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-stethoscope\"><\/i><\/span>Doctor on Call<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-heart-pulse\"><\/i><\/span>Palliative Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-bandage\"><\/i><\/span>Wound Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-dumbbell\"><\/i><\/span>Physiotherapy at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-flask-vial\"><\/i><\/span>Lab Test at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-hospital\"><\/i><\/span>Post-operative Care<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\">Why Choose Us<\/a><\/li>\r\n <li><a href=\"#\">Doctors<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n <div class=\"drawer-actions\">\r\n <a href=\"tel:+971501234567\" class=\"contact-pill\">\r\n <div class=\"pill-icon\"><i class=\"fa-solid fa-phone-volume\"><\/i><\/div>\r\n <div class=\"pill-text\">\r\n <small>Call Us 24\/7<\/small>\r\n <strong>+971 50 123 4567<\/strong>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"book-btn\">\r\n <span class=\"btn-icon-wrap\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/span>\r\n Book Now\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"header-spacer\"><\/div>\r\n\r\n<script>\r\n const header = document.getElementById('siteHeader');\r\n window.addEventListener('scroll', () => {\r\n header.classList.toggle('scrolled', window.scrollY > 20);\r\n }, { passive: true });\r\n\r\n document.querySelectorAll('.drawer-nav .toggle-sub').forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const li = this.closest('li');\r\n const isOpen = li.classList.contains('open');\r\n document.querySelectorAll('.drawer-nav > li').forEach(l => l.classList.remove('open'));\r\n if (!isOpen) li.classList.add('open');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a8fb02e e-con-full e-flex e-con e-parent\" data-id=\"a8fb02e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71f00d9 elementor-widget elementor-widget-html\" data-id=\"71f00d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Bionix On Call \u2014 Premium Home Care Dubai<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\nhtml{height:100%}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n overflow-x:hidden;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\r\n\/* FIX 1: min-height instead of height:100vh \u2014 sections below are now visible *\/\r\n.hero-section{\r\n min-height:100vh;\r\n padding:14px;\r\n display:flex;\r\n}\r\n\r\n.hero-shell{\r\n position:relative;\r\n width:100%;\r\n min-height:calc(100vh - 28px);\r\n border-radius:22px;\r\n overflow:hidden;\r\n isolation:isolate;\r\n display:flex;\r\n flex-direction:column;\r\n}\r\n\r\n.hero-shell::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:url('https:\/\/images.unsplash.com\/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=2000&q=80') center center\/cover no-repeat;\r\n z-index:0;\r\n animation:bgZoom 22s ease-in-out infinite alternate;\r\n}\r\n\r\n.hero-shell::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(46,42,38,.95) 0%, rgba(56,52,48,.92) 28%, rgba(66,62,58,.84) 48%, rgba(80,76,72,.72) 68%, rgba(91,91,91,.62) 100%),\r\n radial-gradient(ellipse at 12% 50%, rgba(176,143,109,.12) 0%, transparent 55%);\r\n z-index:1;\r\n}\r\n\r\n.deco-circle{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(219,203,182,.1);\r\n pointer-events:none;\r\n z-index:2;\r\n}\r\n.deco-1{width:420px;height:420px;top:-110px;right:-100px;animation:fadeIn 1.2s var(--ease) .6s both, spinSlow 45s linear infinite}\r\n.deco-2{width:280px;height:280px;bottom:-70px;left:-50px;border-color:rgba(176,143,109,.08);animation:fadeIn 1.2s var(--ease) .8s both, spinSlow 35s linear infinite reverse}\r\n.deco-3{width:60px;height:60px;top:22%;left:44%;border-color:rgba(219,203,182,.06);animation:fadeIn 1s var(--ease) 1s both, floatY 6s ease-in-out infinite}\r\n\r\n.deco-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(219,203,182,.16);z-index:2;pointer-events:none}\r\n.dot-1{top:16%;left:36%;animation:fadeIn .8s var(--ease) 1.3s both, floatY 5s ease-in-out infinite}\r\n.dot-2{top:70%;left:48%;animation:fadeIn .8s var(--ease) 1.5s both, floatY 4s ease-in-out .5s infinite}\r\n.dot-3{top:28%;right:30%;animation:fadeIn .8s var(--ease) 1.7s both, floatY 6s ease-in-out 1s infinite}\r\n\r\n\/* \u2500\u2500\u2500 GRID \u2500\u2500\u2500 *\/\r\n.hero-grid{\r\n position:relative;\r\n z-index:3;\r\n flex:1;\r\n display:grid;\r\n grid-template-columns:1.1fr .9fr;\r\n align-items:center;\r\n gap:32px;\r\n padding:60px 64px;\r\n min-height:calc(100vh - 28px);\r\n}\r\n\r\n\/* \u2500\u2500\u2500 LEFT \u2500\u2500\u2500 *\/\r\n.hero-left{\r\n max-width:600px;\r\n display:flex;\r\n flex-direction:column;\r\n}\r\n\r\n.eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:8px 20px 8px 10px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.14);\r\n border:1px solid rgba(176,143,109,.22);\r\n backdrop-filter:blur(10px);\r\n margin-bottom:28px;\r\n width:fit-content;\r\n opacity:0;\r\n animation:slideUp .8s var(--ease) .2s both;\r\n}\r\n\r\n.eyebrow-dot{\r\n width:36px;height:36px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid;place-items:center;\r\n color:white;font-size:14px;\r\n animation:pulse 2.5s ease-in-out 2s infinite;\r\n}\r\n\r\n.eyebrow span{\r\n font-size:15px;\r\n font-weight:600;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n color:var(--light);\r\n}\r\n\r\n\/* FIX 2: Large font sizes \u2014 previous clamp mins were too small *\/\r\n.hero-title{\r\n font-size:clamp(52px, 6vw, 88px);\r\n font-weight:800;\r\n line-height:1.02;\r\n letter-spacing:-.04em;\r\n color:var(--pop);\r\n margin-bottom:20px;\r\n}\r\n\r\n.hero-title .line{display:block;overflow:hidden}\r\n.hero-title .line span{display:inline-block;opacity:0;animation:wordUp 1s var(--ease) both}\r\n.hero-title .line:nth-child(1) span{animation-delay:.35s}\r\n.hero-title .line:nth-child(2) span{animation-delay:.5s}\r\n.hero-title .line:nth-child(3) span{animation-delay:.65s}\r\n.hero-title .accent{color:var(--light)}\r\n\r\n.hero-sub{\r\n font-size:clamp(18px, 1.8vw, 24px);\r\n font-weight:400;\r\n color:rgba(249,249,249,.65);\r\n margin-bottom:44px;\r\n line-height:1.6;\r\n max-width:500px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) .8s both;\r\n}\r\n\r\n.cta-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n align-items:center;\r\n gap:16px;\r\n margin-bottom:36px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) .95s both;\r\n}\r\n\r\n.btn-main{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:20px 40px;\r\n border-radius:999px;\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:white;\r\n font-size:17px;\r\n font-weight:700;\r\n text-decoration:none;\r\n box-shadow:0 14px 36px rgba(176,143,109,.3);\r\n transition:.4s var(--ease);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n.btn-main::before{\r\n content:\"\";position:absolute;inset:0;\r\n background:linear-gradient(135deg, transparent, rgba(255,255,255,.15), transparent);\r\n transform:translateX(-100%);\r\n transition:.6s var(--ease);\r\n}\r\n.btn-main:hover::before{transform:translateX(100%)}\r\n.btn-main:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 48px rgba(176,143,109,.4)}\r\n\r\n.btn-glass{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:20px 32px;\r\n border-radius:999px;\r\n background:rgba(255,255,255,.06);\r\n backdrop-filter:blur(10px);\r\n border:1.5px solid rgba(219,203,182,.18);\r\n color:var(--pop);\r\n font-size:17px;\r\n font-weight:600;\r\n text-decoration:none;\r\n transition:.4s var(--ease);\r\n}\r\n.btn-glass:hover{background:rgba(219,203,182,.12);border-color:rgba(219,203,182,.35);transform:translateY(-3px)}\r\n\r\n.contact-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n align-items:center;\r\n gap:20px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) 1.1s both;\r\n}\r\n\r\n.contact-link{\r\n display:flex;align-items:center;gap:8px;\r\n text-decoration:none;color:var(--light);\r\n font-size:15px;font-weight:600;\r\n transition:.3s var(--ease);\r\n}\r\n.contact-link:hover{color:var(--pop);transform:translateX(3px)}\r\n.contact-link i{\r\n width:32px;height:32px;border-radius:50%;\r\n background:rgba(176,143,109,.18);\r\n display:grid;place-items:center;\r\n font-size:13px;color:var(--light);\r\n}\r\n\r\n.sep{width:4px;height:4px;border-radius:50%;background:rgba(219,203,182,.25)}\r\n\r\n.trust-tag{\r\n display:flex;align-items:center;gap:6px;\r\n font-size:14px;font-weight:500;\r\n color:rgba(249,249,249,.5);\r\n}\r\n.trust-tag i{color:var(--neutral);font-size:12px}\r\n\r\n\/* \u2500\u2500\u2500 RIGHT IMAGE \u2500\u2500\u2500 *\/\r\n.hero-right{\r\n position:relative;\r\n height:100%;\r\n min-height:520px;\r\n display:flex;\r\n align-items:stretch;\r\n justify-content:center;\r\n}\r\n\r\n.hero-person{\r\n position:relative;\r\n height:100%;\r\n width:100%;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:center;\r\n}\r\n\r\n\/* FIX 3: Image is now large and prominent *\/\r\n.hero-person img{\r\n position:absolute;\r\n bottom:-8%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n height:120%;\r\n width:auto;\r\n max-width:120%;\r\n object-fit:contain;\r\n object-position:bottom center;\r\n display:block;\r\n filter:drop-shadow(0 20px 60px rgba(0,0,0,.4));\r\n opacity:0;\r\n animation:personIn 1.2s var(--ease) .5s both;\r\n z-index:2;\r\n}\r\n\r\n.person-glow{\r\n position:absolute;bottom:5%;left:50%;\r\n transform:translateX(-50%);\r\n width:80%;height:60%;\r\n background:radial-gradient(ellipse, rgba(176,143,109,.14) 0%, transparent 70%);\r\n z-index:0;pointer-events:none;\r\n animation:fadeIn 1.5s var(--ease) 1s both;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 FLOATING CARDS \u2500\u2500\u2500 *\/\r\n.float-card{\r\n position:absolute;\r\n background:rgba(40,38,35,.55);\r\n backdrop-filter:blur(18px);\r\n -webkit-backdrop-filter:blur(18px);\r\n border:1px solid rgba(219,203,182,.1);\r\n border-radius:16px;\r\n padding:14px 16px;\r\n z-index:5;\r\n box-shadow:0 14px 42px rgba(0,0,0,.25);\r\n}\r\n\r\n.card-rating{bottom:10%;right:-8px;min-width:190px;opacity:0;animation:slideLeft .9s var(--ease) 1.2s both, bob 6s ease-in-out 2.5s infinite}\r\n.card-rating-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}\r\n.card-rating-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg, var(--neutral), var(--light));display:grid;place-items:center;color:white;font-size:15px;animation:pulse 3s ease-in-out 2s infinite}\r\n.card-rating-score{font-size:26px;font-weight:800;color:var(--pop);line-height:1}\r\n.card-rating-stars{display:flex;gap:2px;margin-bottom:3px}\r\n.card-rating-stars i{font-size:10px;color:var(--neutral);opacity:0}\r\n.card-rating-stars i:nth-child(1){animation:starPop .4s var(--ease) 1.6s both}\r\n.card-rating-stars i:nth-child(2){animation:starPop .4s var(--ease) 1.7s both}\r\n.card-rating-stars i:nth-child(3){animation:starPop .4s var(--ease) 1.8s both}\r\n.card-rating-stars i:nth-child(4){animation:starPop .4s var(--ease) 1.9s both}\r\n.card-rating-stars i:nth-child(5){animation:starPop .4s var(--ease) 2s both}\r\n.card-rating-label{font-size:11px;color:rgba(249,249,249,.5);font-weight:500}\r\n\r\n.card-stat{top:8%;left:-16px;opacity:0;animation:slideRight .9s var(--ease) 1.35s both, bob 5.5s ease-in-out 2.8s infinite reverse}\r\n.card-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:rgba(249,249,249,.5);margin-bottom:5px}\r\n.card-stat-value{display:flex;align-items:flex-end;gap:3px;margin-bottom:7px}\r\n.card-stat-value strong{font-size:30px;font-weight:800;color:var(--pop);line-height:1}\r\n.card-stat-value span{font-size:15px;font-weight:700;color:var(--light);margin-bottom:2px}\r\n.card-stat-bar{width:100px;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}\r\n.card-stat-bar::after{content:\"\";display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg, var(--neutral), var(--light));animation:barFill 1.6s ease 2s forwards}\r\n\r\n.card-badge{top:40%;right:-14px;display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;opacity:0;animation:slideLeft .9s var(--ease) 1.5s both, floatY 7s ease-in-out 3s infinite}\r\n.card-badge-icon{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg, var(--neutral), var(--light));display:grid;place-items:center;color:white;font-size:12px}\r\n.card-badge span{font-size:12px;font-weight:700;color:var(--pop);white-space:nowrap}\r\n\r\n\/* \u2500\u2500\u2500 SCROLL \u2500\u2500\u2500 *\/\r\n.scroll-hint{\r\n position:absolute;bottom:20px;left:50%;transform:translateX(-50%);\r\n z-index:4;display:flex;align-items:center;gap:8px;\r\n opacity:0;animation:slideUp .8s var(--ease) 1.5s both;\r\n}\r\n.scroll-mouse{width:18px;height:28px;border-radius:9px;border:1.5px solid rgba(219,203,182,.22);position:relative}\r\n.scroll-mouse::after{content:\"\";width:2px;height:5px;border-radius:999px;background:var(--neutral);position:absolute;top:5px;left:50%;transform:translateX(-50%);animation:scrollDot 2s ease-in-out 2s infinite}\r\n.scroll-hint span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(219,203,182,.35);font-weight:500}\r\n.scroll-track{width:36px;height:1px;background:rgba(219,203,182,.12);position:relative;overflow:hidden}\r\n.scroll-track::after{content:\"\";position:absolute;width:12px;height:100%;background:var(--neutral);animation:scrollSlide 2.2s ease-in-out 2.2s infinite}\r\n\r\n\/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\r\n@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes slideLeft{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}\r\n@keyframes slideRight{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}\r\n@keyframes wordUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\r\n@keyframes personIn{from{opacity:0;transform:translateX(-50%) translateY(36px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}\r\n@keyframes bgZoom{0%{transform:scale(1)}100%{transform:scale(1.06)}}\r\n@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}\r\n@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}\r\n@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\r\n@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(176,143,109,.18)}50%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(176,143,109,0)}}\r\n@keyframes starPop{from{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}\r\n@keyframes barFill{to{width:96%}}\r\n@keyframes scrollSlide{0%{transform:translateX(-12px)}50%{transform:translateX(36px)}100%{transform:translateX(36px)}}\r\n@keyframes scrollDot{0%,100%{opacity:1;transform:translateX(-50%) translateY(0)}50%{opacity:.3;transform:translateX(-50%) translateY(8px)}}\r\n\r\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n@media(max-width:1200px){\r\n .hero-grid{padding:50px 48px}\r\n .hero-title{font-size:clamp(44px,5.5vw,72px)}\r\n}\r\n\r\n\/* \u2500\u2500 TABLET \u2500\u2500 *\/\r\n@media(max-width:960px){\r\n .hero-section{padding:10px}\r\n .hero-shell{border-radius:18px;min-height:calc(100vh - 20px)}\r\n\r\n .hero-grid{\r\n grid-template-columns:1fr 1fr;\r\n align-items:end;\r\n gap:0;\r\n padding:48px 36px 0;\r\n min-height:calc(100vh - 20px);\r\n }\r\n\r\n .hero-left{\r\n max-width:100%;\r\n padding-bottom:48px;\r\n z-index:2;\r\n }\r\n\r\n .hero-title{font-size:clamp(38px,5vw,58px)}\r\n .hero-sub{font-size:17px}\r\n\r\n .hero-right{\r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n min-height:420px;\r\n align-items:flex-end;\r\n }\r\n\r\n .hero-person{height:100%;width:100%}\r\n .hero-person img{\r\n position:absolute;\r\n bottom:0;left:50%;\r\n transform:translateX(-50%);\r\n height:100%;width:auto;max-width:110%;\r\n }\r\n\r\n .float-card{display:none}\r\n .person-glow{display:block;bottom:0;width:90%;height:50%}\r\n}\r\n\r\n\/* \u2500\u2500 MOBILE \u2500\u2500 *\/\r\n@media(max-width:640px){\r\n .hero-section{padding:8px}\r\n .hero-shell{border-radius:14px;min-height:100vh}\r\n\r\n .hero-grid{\r\n grid-template-columns:1fr;\r\n grid-template-rows:auto auto;\r\n align-items:start;\r\n gap:0;\r\n padding:40px 24px 0;\r\n min-height:100vh;\r\n }\r\n\r\n .hero-left{\r\n max-width:100%;\r\n padding-bottom:28px;\r\n z-index:2;\r\n }\r\n\r\n .eyebrow{margin-bottom:20px;padding:8px 18px 8px 9px;gap:9px}\r\n .eyebrow-dot{width:32px;height:32px;font-size:13px}\r\n .eyebrow span{font-size:13px;letter-spacing:.05em}\r\n\r\n \/* Big, readable mobile title *\/\r\n .hero-title{font-size:clamp(40px,10vw,56px);margin-bottom:16px;letter-spacing:-.03em}\r\n\r\n .hero-sub{font-size:16px;margin-bottom:32px;max-width:100%}\r\n\r\n .cta-row{gap:12px;margin-bottom:24px;flex-direction:column;align-items:stretch}\r\n .btn-main{padding:18px 28px;font-size:16px;gap:10px;justify-content:center}\r\n .btn-glass{padding:18px 24px;font-size:16px;gap:10px;justify-content:center}\r\n\r\n .contact-row{display:flex;flex-wrap:wrap;gap:14px}\r\n .contact-link{font-size:14px}\r\n .trust-tag{font-size:13px}\r\n\r\n \/* Image block \u2014 full width, good height *\/\r\n .hero-right{position:relative;width:100%;height:380px;min-height:380px;overflow:visible}\r\n .hero-person{position:relative;height:100%;width:100%;overflow:visible}\r\n .hero-person img{\r\n position:absolute;bottom:0;left:50%;\r\n transform:translateX(-50%);\r\n height:100%;width:auto;max-width:85%;\r\n }\r\n\r\n .person-glow{display:block;bottom:0;width:80%;height:60%}\r\n .float-card{display:none}\r\n\r\n .deco-1{width:200px;height:200px;top:-50px;right:-50px}\r\n .deco-2{width:140px;height:140px;bottom:-35px;left:-28px}\r\n .deco-3,.deco-dot{display:none}\r\n .scroll-hint{display:none}\r\n}\r\n\r\n@media(max-width:420px){\r\n .hero-grid{padding:32px 20px 0}\r\n .hero-title{font-size:clamp(36px,9vw,48px)}\r\n .hero-sub{font-size:15px}\r\n .btn-main{padding:16px 24px;font-size:15px}\r\n .btn-glass{padding:16px 20px;font-size:15px}\r\n .hero-right{height:320px;min-height:320px}\r\n .hero-person img{max-width:90%}\r\n}\r\n\r\n@media(min-height:900px){\r\n .hero-grid{padding:80px 64px}\r\n}\r\n\r\n@media(max-height:700px) and (min-width:641px){\r\n .hero-grid{padding:28px 48px}\r\n .hero-title{font-size:clamp(36px,4.5vw,54px)}\r\n .hero-sub{font-size:16px;margin-bottom:28px}\r\n .cta-row{gap:10px;margin-bottom:20px}\r\n .btn-main{padding:14px 28px;font-size:15px}\r\n .btn-glass{padding:14px 24px;font-size:15px}\r\n}\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n *,*::before,*::after{animation:none!important;transition:none!important}\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"hero-section\">\r\n <div class=\"hero-shell\">\r\n\r\n <div class=\"deco-circle deco-1\"><\/div>\r\n <div class=\"deco-circle deco-2\"><\/div>\r\n <div class=\"deco-circle deco-3\"><\/div>\r\n <div class=\"deco-dot dot-1\"><\/div>\r\n <div class=\"deco-dot dot-2\"><\/div>\r\n <div class=\"deco-dot dot-3\"><\/div>\r\n\r\n <div class=\"hero-grid\">\r\n\r\n \r\n <div class=\"hero-left\">\r\n <div class=\"eyebrow\">\r\n <div class=\"eyebrow-dot\"><i class=\"fa-solid fa-plus\"><\/i><\/div>\r\n <span>Premium Home Healthcare<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n <span class=\"line\"><span>Expert <span class=\"accent\">Home<\/span><\/span><\/span>\r\n <span class=\"line\"><span><span class=\"accent\">Care<\/span> Services<\/span><\/span>\r\n <span class=\"line\"><span>Across Dubai<\/span><\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n DHA-licensed medical professionals at your doorstep \u2014 anytime, anywhere in Dubai.\r\n <\/p>\r\n\r\n <div class=\"cta-row\">\r\n <a href=\"#\" class=\"btn-main\">\r\n <i class=\"fa-solid fa-calendar-check\"><\/i>\r\n Book a Caregiver\r\n <\/a>\r\n <a href=\"tel:+971501234567\" class=\"btn-glass\">\r\n <i class=\"fa-solid fa-phone\"><\/i>\r\n +971 50 123 4567\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <a href=\"mailto:info@bionixoncall.com\" class=\"contact-link\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n info@bionixoncall.com\r\n <\/a>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"trust-tag\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n DHA Approved\r\n <\/div>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"trust-tag\">\r\n <i class=\"fa-solid fa-bolt\"><\/i>\r\n 30 Min Response\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <div class=\"hero-person\">\r\n <div class=\"person-glow\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/Untitled-design-2026-03-16T150549.956.png\" alt=\"Bionix On Call \u2014 Home Care Professional\">\r\n\r\n <div class=\"float-card card-stat\">\r\n <div class=\"card-stat-label\">Satisfaction<\/div>\r\n <div class=\"card-stat-value\"><strong>98<\/strong><span>%<\/span><\/div>\r\n <div class=\"card-stat-bar\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"float-card card-badge\">\r\n <div class=\"card-badge-icon\"><i class=\"fa-solid fa-shield-heart\"><\/i><\/div>\r\n <span>Trusted Team<\/span>\r\n <\/div>\r\n\r\n <div class=\"float-card card-rating\">\r\n <div class=\"card-rating-top\">\r\n <div class=\"card-rating-icon\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n <div class=\"card-rating-score\">4.9<\/div>\r\n <\/div>\r\n <div class=\"card-rating-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <div class=\"card-rating-label\">Google Reviews<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"scroll-hint\">\r\n <div class=\"scroll-mouse\"><\/div>\r\n <div class=\"scroll-track\"><\/div>\r\n <span>Scroll<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87391f3 e-con-full e-flex e-con e-parent\" data-id=\"87391f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7257422 elementor-widget elementor-widget-html\" data-id=\"7257422\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Bionix On Call - Services Section<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n *{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n }\r\n\r\n :root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n --border:rgba(176,143,109,0.12);\r\n --shadow:0 18px 44px rgba(91,91,91,0.10);\r\n --shadow-soft:0 10px 26px rgba(176,143,109,0.08);\r\n --transition:all .35s ease;\r\n }\r\n\r\n body{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n color:var(--text);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SECTION \u2500\u2500\u2500 *\/\r\n .services-section{\r\n padding:40px 24px 50px;\r\n background:var(--pop);\r\n overflow:visible;\r\n position:relative;\r\n }\r\n\r\n .services-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-80px;\r\n left:-60px;\r\n width:480px;\r\n height:480px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.14) 0%, rgba(176,143,109,0.06) 35%, rgba(176,143,109,0.02) 55%, transparent 70%);\r\n filter:blur(40px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .services-section::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-100px;\r\n right:-40px;\r\n width:520px;\r\n height:520px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.2) 0%, rgba(176,143,109,0.1) 30%, rgba(176,143,109,0.03) 50%, transparent 68%);\r\n filter:blur(50px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 WRAPPER \u2500\u2500\u2500 *\/\r\n .services-wrap{\r\n max-width:1280px;\r\n margin:0 auto;\r\n position:relative;\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:34px;\r\n padding:34px 34px 30px;\r\n box-shadow:var(--shadow);\r\n overflow:visible;\r\n z-index:1;\r\n }\r\n\r\n .services-wrap::before{\r\n content:\"\";\r\n position:absolute;\r\n right:14%;\r\n top:34px;\r\n width:340px;\r\n height:340px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.3) 0%, rgba(219,203,182,0.12) 40%, rgba(219,203,182,0.03) 65%, transparent 76%);\r\n filter:blur(10px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .services-wrap::after{\r\n content:\"\";\r\n position:absolute;\r\n left:5%;\r\n bottom:40px;\r\n width:280px;\r\n height:280px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.1) 0%, rgba(176,143,109,0.04) 40%, transparent 65%);\r\n filter:blur(20px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 INNER GRID \u2500\u2500\u2500 *\/\r\n .services-inner{\r\n position:relative;\r\n z-index:2;\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) 390px;\r\n gap:24px;\r\n align-items:end;\r\n overflow:visible;\r\n }\r\n\r\n .services-content{\r\n min-width:0;\r\n position:relative;\r\n }\r\n\r\n .services-content::before{\r\n content:\"\";\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n width:400px;\r\n height:400px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.07) 0%, rgba(219,203,182,0.05) 35%, transparent 60%);\r\n filter:blur(30px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 BADGE \u2500\u2500\u2500 *\/\r\n .section-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:9px;\r\n padding:10px 16px;\r\n background:linear-gradient(135deg, var(--neutral), var(--neutral-light));\r\n color:var(--white);\r\n border-radius:999px;\r\n font-size:13px;\r\n font-weight:700;\r\n margin-bottom:20px;\r\n box-shadow:0 8px 18px rgba(176,143,109,0.28);\r\n animation:fadeUp .6s ease both;\r\n position:relative;\r\n z-index:2;\r\n }\r\n\r\n .section-badge i{\r\n font-size:11px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 TITLE \u2500\u2500\u2500 *\/\r\n .section-title{\r\n font-size:44px;\r\n line-height:1.08;\r\n font-weight:800;\r\n letter-spacing:-1.4px;\r\n max-width:700px;\r\n margin-bottom:26px;\r\n animation:fadeUp .7s ease .08s both;\r\n position:relative;\r\n z-index:2;\r\n color:var(--text);\r\n }\r\n\r\n .section-title .accent{\r\n color:var(--neutral);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARDS GRID \u2500\u2500\u2500 *\/\r\n .services-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, minmax(0, 1fr));\r\n gap:14px;\r\n position:relative;\r\n z-index:2;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARD \u2500\u2500\u2500 *\/\r\n .service-card{\r\n position:relative;\r\n min-height:168px;\r\n background:linear-gradient(145deg, #faf6f1 0%, #f5ede4 30%, #f0e6da 60%, #ebe0d2 100%);\r\n border:1px solid rgba(176,143,109,0.12);\r\n border-radius:24px;\r\n padding:22px 18px 18px;\r\n text-decoration:none;\r\n color:var(--text);\r\n box-shadow:0 8px 24px rgba(176,143,109,0.08), 0 2px 8px rgba(176,143,109,0.04);\r\n transition:var(--transition);\r\n overflow:hidden;\r\n animation:fadeUp .7s ease both;\r\n }\r\n\r\n .service-card:nth-child(1){ animation-delay:.10s; }\r\n .service-card:nth-child(2){ animation-delay:.16s; }\r\n .service-card:nth-child(3){ animation-delay:.22s; }\r\n .service-card:nth-child(4){ animation-delay:.28s; }\r\n .service-card:nth-child(5){ animation-delay:.34s; }\r\n .service-card:nth-child(6){ animation-delay:.40s; }\r\n .service-card:nth-child(7){ animation-delay:.46s; }\r\n .service-card:nth-child(8){ animation-delay:.52s; }\r\n .service-card:nth-child(9){ animation-delay:.58s; }\r\n\r\n .service-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:linear-gradient(160deg, rgba(176,143,109,0.06) 0%, rgba(176,143,109,0.14) 50%, rgba(91,91,91,0.1) 100%);\r\n opacity:0;\r\n transition:var(--transition);\r\n border-radius:24px;\r\n }\r\n\r\n .service-card::after{\r\n content:\"\";\r\n position:absolute;\r\n top:-30%;\r\n right:-30%;\r\n width:120px;\r\n height:120px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.3) 0%, transparent 70%);\r\n opacity:0.6;\r\n transition:var(--transition);\r\n pointer-events:none;\r\n }\r\n\r\n .service-card:hover{\r\n transform:translateY(-8px);\r\n background:linear-gradient(145deg, #f5ede4 0%, #ecddc9 30%, #e5d3bb 60%, #dfc9af 100%);\r\n border-color:rgba(176,143,109,0.25);\r\n box-shadow:0 20px 44px rgba(176,143,109,0.18), 0 4px 12px rgba(176,143,109,0.1);\r\n }\r\n\r\n .service-card:hover::before{\r\n opacity:1;\r\n }\r\n\r\n .service-card:hover::after{\r\n opacity:1;\r\n transform:scale(1.3);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ARROW \u2500\u2500\u2500 *\/\r\n .service-arrow{\r\n position:absolute;\r\n top:16px;\r\n right:16px;\r\n width:36px;\r\n height:36px;\r\n border-radius:50%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:var(--neutral);\r\n font-size:15px;\r\n transition:var(--transition);\r\n z-index:2;\r\n }\r\n\r\n .service-card:hover .service-arrow{\r\n transform:translate(2px, -2px);\r\n color:var(--dark-deep);\r\n background:rgba(176,143,109,0.12);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 *\/\r\n .service-icon{\r\n position:relative;\r\n z-index:2;\r\n width:62px;\r\n height:62px;\r\n border-radius:16px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-bottom:18px;\r\n background:rgba(176,143,109,0.12);\r\n border:1px solid rgba(176,143,109,0.18);\r\n transition:var(--transition);\r\n overflow:hidden;\r\n }\r\n\r\n .service-card:hover .service-icon{\r\n transform:scale(1.06);\r\n background:rgba(176,143,109,0.18);\r\n border-color:rgba(176,143,109,0.28);\r\n }\r\n\r\n .service-icon img{\r\n width:34px;\r\n height:34px;\r\n object-fit:contain;\r\n display:block;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARD TITLE \u2500\u2500\u2500 *\/\r\n .service-title{\r\n position:relative;\r\n z-index:2;\r\n font-size:17px;\r\n line-height:1.32;\r\n font-weight:700;\r\n max-width:180px;\r\n color:var(--text);\r\n transition:color .35s ease;\r\n }\r\n\r\n .service-card:hover .service-title{\r\n color:var(--dark-deep);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 DOCTOR SIDE \u2500\u2500\u2500 *\/\r\n .doctor-side{\r\n position:relative;\r\n min-height:100%;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:center;\r\n overflow:visible;\r\n }\r\n\r\n .doctor-glow{\r\n position:absolute;\r\n width:330px;\r\n height:430px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.5) 0%, rgba(219,203,182,0.2) 38%, rgba(219,203,182,0.06) 60%, transparent 76%);\r\n filter:blur(6px);\r\n bottom:20px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n z-index:0;\r\n }\r\n\r\n .doctor-img{\r\n position:relative;\r\n z-index:2;\r\n max-width:430px;\r\n width:120%;\r\n margin-right:-22px;\r\n margin-bottom:-30px;\r\n margin-top:-110px;\r\n object-fit:contain;\r\n animation:doctorFloat 4.5s ease-in-out infinite;\r\n filter:drop-shadow(0 18px 34px rgba(91,91,91,0.14));\r\n }\r\n\r\n \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\r\n @keyframes fadeUp{\r\n from{\r\n opacity:0;\r\n transform:translateY(24px);\r\n }\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n }\r\n\r\n @keyframes doctorFloat{\r\n 0%,100%{\r\n transform:translateY(0);\r\n }\r\n 50%{\r\n transform:translateY(-8px);\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n @media (max-width:1250px){\r\n .services-inner{\r\n grid-template-columns:1fr 320px;\r\n }\r\n\r\n .section-title{\r\n font-size:38px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .doctor-img{\r\n width:124%;\r\n margin-right:-12px;\r\n margin-top:-90px;\r\n }\r\n }\r\n\r\n @media (max-width:1024px){\r\n .services-section{\r\n padding:24px 16px 32px;\r\n }\r\n\r\n .services-wrap{\r\n padding:28px 24px 24px;\r\n border-radius:28px;\r\n }\r\n\r\n .services-inner{\r\n grid-template-columns:1fr;\r\n gap:18px;\r\n }\r\n\r\n .section-title{\r\n font-size:34px;\r\n margin-bottom:22px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .doctor-side{\r\n min-height:340px;\r\n margin-top:0;\r\n }\r\n\r\n .doctor-glow{\r\n width:290px;\r\n height:350px;\r\n }\r\n\r\n .doctor-img{\r\n width:350px;\r\n max-width:100%;\r\n margin-right:0;\r\n margin-bottom:-24px;\r\n margin-top:-80px;\r\n }\r\n\r\n .services-section::before{\r\n width:320px;\r\n height:320px;\r\n top:-40px;\r\n left:-30px;\r\n }\r\n\r\n .services-section::after{\r\n width:360px;\r\n height:360px;\r\n bottom:-60px;\r\n }\r\n }\r\n\r\n @media (max-width:768px){\r\n .services-wrap{\r\n padding:22px 18px 18px;\r\n border-radius:24px;\r\n }\r\n\r\n .section-title{\r\n font-size:29px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n gap:12px;\r\n }\r\n\r\n .service-card{\r\n min-height:150px;\r\n padding:18px 16px 16px;\r\n border-radius:20px;\r\n }\r\n\r\n .service-icon{\r\n width:54px;\r\n height:54px;\r\n margin-bottom:14px;\r\n }\r\n\r\n .service-icon img{\r\n width:30px;\r\n height:30px;\r\n }\r\n\r\n .service-title{\r\n font-size:15px;\r\n }\r\n\r\n .doctor-side{\r\n min-height:290px;\r\n }\r\n\r\n .doctor-img{\r\n width:300px;\r\n margin-top:-55px;\r\n }\r\n\r\n .services-section::before{\r\n width:240px;\r\n height:240px;\r\n }\r\n\r\n .services-section::after{\r\n width:280px;\r\n height:280px;\r\n }\r\n }\r\n\r\n @media (max-width:560px){\r\n .services-section{\r\n padding:18px 12px 24px;\r\n }\r\n\r\n .services-wrap{\r\n padding:20px 14px 16px;\r\n border-radius:20px;\r\n }\r\n\r\n .section-badge{\r\n font-size:12px;\r\n padding:9px 13px;\r\n margin-bottom:16px;\r\n }\r\n\r\n .section-title{\r\n font-size:25px;\r\n letter-spacing:-0.8px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:10px;\r\n }\r\n\r\n .service-card{\r\n min-height:138px;\r\n padding:16px 14px 14px;\r\n border-radius:18px;\r\n }\r\n\r\n .service-card::after{\r\n width:80px;\r\n height:80px;\r\n }\r\n\r\n .service-arrow{\r\n top:12px;\r\n right:12px;\r\n width:32px;\r\n height:32px;\r\n font-size:13px;\r\n }\r\n\r\n .service-icon{\r\n width:48px;\r\n height:48px;\r\n border-radius:14px;\r\n }\r\n\r\n .service-icon img{\r\n width:26px;\r\n height:26px;\r\n }\r\n\r\n .service-title{\r\n font-size:14px;\r\n max-width:100%;\r\n }\r\n\r\n .doctor-side{\r\n min-height:240px;\r\n }\r\n\r\n .doctor-glow{\r\n width:220px;\r\n height:260px;\r\n bottom:12px;\r\n }\r\n\r\n .doctor-img{\r\n width:245px;\r\n margin-top:-42px;\r\n margin-bottom:-16px;\r\n }\r\n\r\n .services-section::before{\r\n width:180px;\r\n height:180px;\r\n filter:blur(30px);\r\n }\r\n\r\n .services-section::after{\r\n width:200px;\r\n height:200px;\r\n filter:blur(35px);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"services-section\">\r\n <div class=\"services-wrap\">\r\n <div class=\"services-inner\">\r\n\r\n <div class=\"services-content\">\r\n <div class=\"section-badge\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n Our Services\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">Comprehensive <span class=\"accent\">Home Care<\/span> Services in Dubai<\/h2>\r\n\r\n <div class=\"services-grid\">\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/iv-bag.png\" alt=\"IV Therapy\">\r\n <\/div>\r\n <div class=\"service-title\">IV Therapy<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/service.png\" alt=\"Home Nursing\">\r\n <\/div>\r\n <div class=\"service-title\">Home Nursing<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/assisted-living.png\" alt=\"Elderly Care\">\r\n <\/div>\r\n <div class=\"service-title\">Elderly Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/emergency-call.png\" alt=\"Doctor on Call\">\r\n <\/div>\r\n <div class=\"service-title\">Doctor on Call<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/palliative.png\" alt=\"Palliative Care\">\r\n <\/div>\r\n <div class=\"service-title\">Palliative Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/tape.png\" alt=\"Wound Care\">\r\n <\/div>\r\n <div class=\"service-title\">Wound Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/physical-therapy.png\" alt=\"Physiotherapy at Home\">\r\n <\/div>\r\n <div class=\"service-title\">Physiotherapy at Home<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/flask.png\" alt=\"Lab Test at Home\">\r\n <\/div>\r\n <div class=\"service-title\">Lab Test at Home<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/surgery.png\" alt=\"Post-operative Care\">\r\n <\/div>\r\n <div class=\"service-title\">Post-operative Care<\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"doctor-side\">\r\n <div class=\"doctor-glow\"><\/div>\r\n <img decoding=\"async\" class=\"doctor-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/doctor-image-e1773056202565.png\" alt=\"Professional doctor\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afb5777 e-con-full e-flex e-con e-parent\" data-id=\"afb5777\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4669a9f elementor-widget elementor-widget-html\" data-id=\"4669a9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Our Services<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== SECTION ===== *\/\r\n\r\n.care-section{\r\n padding:100px 20px;\r\n position:relative;\r\n overflow:hidden;\r\n background:linear-gradient(180deg, var(--pop) 0%, #f3ede6 40%, #f5efe8 60%, var(--pop) 100%);\r\n}\r\n\r\n.care-bg-orb{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.care-bg-orb-1{\r\n width:400px;\r\n height:400px;\r\n top:-10%;\r\n left:-5%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 60%);\r\n filter:blur(40px);\r\n}\r\n\r\n.care-bg-orb-2{\r\n width:350px;\r\n height:350px;\r\n bottom:-8%;\r\n right:-3%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.12) 0%, transparent 55%);\r\n filter:blur(35px);\r\n}\r\n\r\n.care-bg-orb-3{\r\n width:300px;\r\n height:300px;\r\n top:40%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:radial-gradient(circle, rgba(176,143,109,0.05) 0%, transparent 50%);\r\n filter:blur(50px);\r\n}\r\n\r\n.care-container{\r\n max-width:1200px;\r\n margin:auto;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.care-header{\r\n text-align:center;\r\n margin-bottom:60px;\r\n}\r\n\r\n.care-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 20px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.1) 100%);\r\n border:1px solid rgba(176,143,109,0.15);\r\n border-radius:999px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:20px;\r\n}\r\n\r\n.care-badge::before{\r\n content:\"\";\r\n width:7px;\r\n height:7px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n flex-shrink:0;\r\n animation:carePulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes carePulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.care-header h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-1.5px;\r\n line-height:1.1;\r\n margin-bottom:16px;\r\n}\r\n\r\n.care-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.care-header p{\r\n font-size:16px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:520px;\r\n margin:0 auto;\r\n}\r\n\r\n.care-header-line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:12px;\r\n margin-top:24px;\r\n}\r\n\r\n.care-header-line span{\r\n width:40px;\r\n height:2px;\r\n background:linear-gradient(90deg, transparent, rgba(176,143,109,0.3), transparent);\r\n border-radius:2px;\r\n}\r\n\r\n.care-header-line .care-diamond{\r\n width:8px;\r\n height:8px;\r\n border:1.5px solid rgba(176,143,109,0.35);\r\n transform:rotate(45deg);\r\n flex-shrink:0;\r\n}\r\n\r\n\/* ===== 3\u00d73 GRID ===== *\/\r\n\r\n.care-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:24px;\r\n}\r\n\r\n\/* ===== CARD ===== *\/\r\n\r\n.care-card{\r\n position:relative;\r\n border-radius:24px;\r\n overflow:hidden;\r\n cursor:pointer;\r\n box-shadow:0 12px 40px rgba(91,91,91,0.08);\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n aspect-ratio:3\/2;\r\n}\r\n\r\n.care-card:hover{\r\n transform:translateY(-8px);\r\n box-shadow:0 24px 60px rgba(176,143,109,0.2), 0 8px 20px rgba(91,91,91,0.08);\r\n}\r\n\r\n\/* Image *\/\r\n\r\n.care-card-img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n position:absolute;\r\n inset:0;\r\n transition:all .7s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-card:hover .care-card-img{\r\n transform:scale(1.06);\r\n}\r\n\r\n\/* Overlay \u2014 strong bottom for title readability *\/\r\n\r\n.care-card-overlay{\r\n position:absolute;\r\n inset:0;\r\n background:linear-gradient(\r\n 180deg,\r\n rgba(44,40,37,0.0) 0%,\r\n rgba(44,40,37,0.0) 30%,\r\n rgba(44,40,37,0.08) 50%,\r\n rgba(44,40,37,0.42) 72%,\r\n rgba(44,40,37,0.7) 88%,\r\n rgba(44,40,37,0.82) 100%\r\n );\r\n z-index:1;\r\n pointer-events:none;\r\n transition:all .5s ease;\r\n}\r\n\r\n.care-card:hover .care-card-overlay{\r\n background:linear-gradient(\r\n 180deg,\r\n rgba(44,40,37,0.0) 0%,\r\n rgba(44,40,37,0.0) 25%,\r\n rgba(44,40,37,0.1) 45%,\r\n rgba(44,40,37,0.5) 70%,\r\n rgba(44,40,37,0.78) 86%,\r\n rgba(44,40,37,0.88) 100%\r\n );\r\n}\r\n\r\n\/* Content *\/\r\n\r\n.care-card-content{\r\n position:absolute;\r\n bottom:0;\r\n left:0;\r\n right:0;\r\n padding:24px;\r\n z-index:2;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:14px;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-card:hover .care-card-content{\r\n transform:translateY(-4px);\r\n}\r\n\r\n.care-card-info{\r\n flex:1;\r\n min-width:0;\r\n}\r\n\r\n.care-card-tag{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n padding:5px 12px;\r\n background:rgba(255,255,255,0.12);\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border:1px solid rgba(255,255,255,0.16);\r\n border-radius:50px;\r\n font-size:11px;\r\n font-weight:600;\r\n color:#fff;\r\n letter-spacing:0.4px;\r\n text-transform:uppercase;\r\n margin-bottom:10px;\r\n white-space:nowrap;\r\n}\r\n\r\n.care-card-tag i{\r\n font-size:8px;\r\n color:var(--light);\r\n}\r\n\r\n.care-card-content h3{\r\n font-size:22px;\r\n font-weight:700;\r\n color:#fff;\r\n line-height:1.2;\r\n letter-spacing:-0.3px;\r\n text-shadow:0 2px 12px rgba(0,0,0,0.3);\r\n}\r\n\r\n\/* Arrow *\/\r\n\r\n.care-card-arrow{\r\n width:44px;\r\n height:44px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--light) 0%, var(--neutral) 100%);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:var(--white);\r\n font-size:14px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 6px 18px rgba(176,143,109,0.3);\r\n flex-shrink:0;\r\n opacity:0;\r\n transform:translateY(10px);\r\n}\r\n\r\n.care-card:hover .care-card-arrow{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.care-card-arrow:hover{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--dark) 100%);\r\n transform:translateY(-2px) scale(1.05);\r\n}\r\n\r\n\/* ===== BOTTOM CTA ===== *\/\r\n\r\n.care-cta-strip{\r\n margin-top:50px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:32px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.care-cta-text{\r\n font-size:16px;\r\n color:var(--muted);\r\n font-weight:500;\r\n}\r\n\r\n.care-cta-text strong{\r\n color:var(--neutral);\r\n font-weight:700;\r\n}\r\n\r\n.care-cta-btn{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:16px 34px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border:none;\r\n border-radius:60px;\r\n font-size:14px;\r\n font-weight:700;\r\n cursor:pointer;\r\n font-family:'Inter',sans-serif;\r\n text-decoration:none;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 10px 30px rgba(176,143,109,0.25);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n.care-cta-btn::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:60%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);\r\n transition:left .6s ease;\r\n}\r\n\r\n.care-cta-btn:hover::before{\r\n left:160%;\r\n}\r\n\r\n.care-cta-btn:hover{\r\n transform:translateY(-4px) scale(1.03);\r\n box-shadow:0 16px 40px rgba(176,143,109,0.35);\r\n}\r\n\r\n.care-cta-btn i{\r\n font-size:12px;\r\n transition:transform .3s ease;\r\n}\r\n\r\n.care-cta-btn:hover i{\r\n transform:translateX(4px);\r\n}\r\n\r\n\/* ===== SCROLL REVEAL ===== *\/\r\n\r\n.care-reveal{\r\n opacity:0;\r\n transform:translateY(45px);\r\n transition:all .8s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-reveal.care-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.care-reveal:nth-child(1){ transition-delay:.05s; }\r\n.care-reveal:nth-child(2){ transition-delay:.12s; }\r\n.care-reveal:nth-child(3){ transition-delay:.19s; }\r\n.care-reveal:nth-child(4){ transition-delay:.26s; }\r\n.care-reveal:nth-child(5){ transition-delay:.33s; }\r\n.care-reveal:nth-child(6){ transition-delay:.40s; }\r\n.care-reveal:nth-child(7){ transition-delay:.47s; }\r\n.care-reveal:nth-child(8){ transition-delay:.54s; }\r\n.care-reveal:nth-child(9){ transition-delay:.61s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1100px){\r\n .care-grid{\r\n gap:18px;\r\n }\r\n\r\n .care-card-content{\r\n padding:20px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:20px;\r\n }\r\n}\r\n\r\n@media(max-width:900px){\r\n .care-section{\r\n padding:70px 16px;\r\n }\r\n\r\n .care-header h2{\r\n font-size:38px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:18px;\r\n }\r\n\r\n .care-card-arrow{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:21px;\r\n }\r\n}\r\n\r\n@media(max-width:640px){\r\n .care-section{\r\n padding:50px 12px;\r\n }\r\n\r\n .care-header{\r\n margin-bottom:40px;\r\n }\r\n\r\n .care-header h2{\r\n font-size:30px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .care-header p{\r\n font-size:14.5px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:12px;\r\n }\r\n\r\n .care-card{\r\n border-radius:18px;\r\n }\r\n\r\n .care-card-content{\r\n padding:16px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:16px;\r\n letter-spacing:-0.2px;\r\n }\r\n\r\n .care-card-tag{\r\n font-size:9px;\r\n padding:3px 8px;\r\n margin-bottom:6px;\r\n gap:4px;\r\n }\r\n\r\n .care-card-tag i{\r\n font-size:6px;\r\n }\r\n\r\n .care-card-arrow{\r\n width:34px;\r\n height:34px;\r\n font-size:11px;\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-cta-strip{\r\n flex-direction:column;\r\n gap:16px;\r\n text-align:center;\r\n }\r\n\r\n .care-cta-btn{\r\n padding:14px 28px;\r\n font-size:13px;\r\n }\r\n\r\n .care-bg-orb-1{\r\n width:240px;\r\n height:240px;\r\n }\r\n\r\n .care-bg-orb-2{\r\n width:200px;\r\n height:200px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .care-header h2{\r\n font-size:26px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr;\r\n gap:14px;\r\n }\r\n\r\n .care-card{\r\n border-radius:20px;\r\n aspect-ratio:16\/10;\r\n }\r\n\r\n .care-card-content{\r\n padding:20px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:20px;\r\n }\r\n\r\n .care-card-tag{\r\n font-size:10px;\r\n padding:4px 10px;\r\n margin-bottom:8px;\r\n }\r\n\r\n .care-card-arrow{\r\n width:40px;\r\n height:40px;\r\n font-size:13px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"care-section\">\r\n\r\n <div class=\"care-bg-orb care-bg-orb-1\"><\/div>\r\n <div class=\"care-bg-orb care-bg-orb-2\"><\/div>\r\n <div class=\"care-bg-orb care-bg-orb-3\"><\/div>\r\n\r\n <div class=\"care-container\">\r\n\r\n \r\n <div class=\"care-header care-reveal\">\r\n <div class=\"care-badge\">Our Services<\/div>\r\n <h2>Comprehensive <span>Home Care<\/span> Services in Dubai<\/h2>\r\n <p>DHA-licensed professionals delivering world-class healthcare at your doorstep \u2014 with compassion, expertise and round-the-clock availability.<\/p>\r\n <div class=\"care-header-line\">\r\n <span><\/span>\r\n <div class=\"care-diamond\"><\/div>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-grid\">\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/medium-shot-doctor-checking-patient-scaled.jpg\" alt=\"IV Therapy\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-droplet\"><\/i> Infusion<\/div>\r\n <h3>IV Therapy<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/2-1.png\" alt=\"Home Nursing\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-user-nurse\"><\/i> Nursing<\/div>\r\n <h3>Home Nursing<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"Elderly Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-hand-holding-heart\"><\/i> Senior<\/div>\r\n <h3>Elderly Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/3-1.png\" alt=\"Doctor on Call\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-stethoscope\"><\/i> Medical<\/div>\r\n <h3>Doctor on Call<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/4-1.png\" alt=\"Palliative Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Comfort<\/div>\r\n <h3>Palliative Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/parent-helping-her-child-perform-first-aid-knee-injury-after-she-has-been-accident_7186-1982.avif\" alt=\"Wound Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-bandage\"><\/i> Treatment<\/div>\r\n <h3>Wound Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/1-1.png\" alt=\"Physiotherapy at Home\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-dumbbell\"><\/i> Rehab<\/div>\r\n <h3>Physiotherapy at Home<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/6-1.png\" alt=\"Lab Test at Home\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-flask-vial\"><\/i> Diagnostics<\/div>\r\n <h3>Lab Test at Home<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/5-1.png\" alt=\"Post-operative Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-hospital\"><\/i> Recovery<\/div>\r\n <h3>Post-operative Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"care-cta-strip care-reveal\">\r\n <p class=\"care-cta-text\">Explore all our <strong>healthcare services<\/strong> tailored for Dubai residents.<\/p>\r\n <a href=\"#\" class=\"care-cta-btn\">\r\n Book a Service <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\nconst careEls = document.querySelectorAll('.care-reveal');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const careObs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('care-visible');\r\n careObs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n\r\n careEls.forEach(el => careObs.observe(el));\r\n} else {\r\n careEls.forEach(el => el.classList.add('care-visible'));\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7278faf e-con-full e-flex e-con e-parent\" data-id=\"7278faf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-640f932 elementor-widget elementor-widget-html\" data-id=\"640f932\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Why Choose Us<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== SECTION ===== *\/\r\n\r\n.why-section{\r\n padding:70px 20px;\r\n position:relative;\r\n overflow:hidden;\r\n background:var(--pop);\r\n}\r\n\r\n\/* BG Orbs *\/\r\n\r\n.why-orb{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.why-orb-1{\r\n width:500px;\r\n height:500px;\r\n top:-15%;\r\n left:-8%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.07) 0%, transparent 60%);\r\n filter:blur(50px);\r\n}\r\n\r\n.why-orb-2{\r\n width:400px;\r\n height:400px;\r\n bottom:-12%;\r\n right:-6%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.1) 0%, transparent 55%);\r\n filter:blur(45px);\r\n}\r\n\r\n.why-orb-3{\r\n width:200px;\r\n height:200px;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n background:radial-gradient(circle, rgba(176,143,109,0.05) 0%, transparent 50%);\r\n filter:blur(40px);\r\n}\r\n\r\n.why-container{\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.why-header{\r\n text-align:center;\r\n margin-bottom:70px;\r\n}\r\n\r\n.why-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 22px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.08) 100%);\r\n border:1px solid rgba(176,143,109,0.14);\r\n border-radius:999px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:22px;\r\n}\r\n\r\n.why-badge::before{\r\n content:\"\";\r\n width:7px;\r\n height:7px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n flex-shrink:0;\r\n animation:whyPulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes whyPulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.why-header h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-1.5px;\r\n line-height:1.1;\r\n margin-bottom:16px;\r\n}\r\n\r\n.why-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.why-header p{\r\n font-size:16px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:520px;\r\n margin:0 auto;\r\n}\r\n\r\n.why-header-line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:12px;\r\n margin-top:26px;\r\n}\r\n\r\n.why-header-line span{\r\n width:42px;\r\n height:2px;\r\n background:linear-gradient(90deg, transparent, rgba(176,143,109,0.3), transparent);\r\n border-radius:2px;\r\n}\r\n\r\n.why-header-line .why-diamond{\r\n width:8px;\r\n height:8px;\r\n border:1.5px solid rgba(176,143,109,0.35);\r\n transform:rotate(45deg);\r\n flex-shrink:0;\r\n}\r\n\r\n\/* ===== CARDS GRID ===== *\/\r\n\r\n.why-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:28px;\r\n}\r\n\r\n\/* ===== CARD ===== *\/\r\n\r\n.why-card{\r\n position:relative;\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:28px;\r\n padding:48px 36px 44px;\r\n text-align:center;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n overflow:hidden;\r\n box-shadow:0 8px 30px rgba(91,91,91,0.06);\r\n}\r\n\r\n\/* Card inner glow *\/\r\n.why-card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-40%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:200px;\r\n height:200px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.06) 0%, transparent 60%);\r\n transition:all .5s ease;\r\n pointer-events:none;\r\n}\r\n\r\n\/* Bottom accent line *\/\r\n.why-card::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:0;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:0;\r\n height:3px;\r\n border-radius:3px 3px 0 0;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n transition:width .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-card:hover{\r\n transform:translateY(-10px);\r\n border-color:rgba(176,143,109,0.2);\r\n box-shadow:0 28px 60px rgba(176,143,109,0.12), 0 8px 20px rgba(91,91,91,0.06);\r\n}\r\n\r\n.why-card:hover::before{\r\n width:300px;\r\n height:300px;\r\n opacity:.8;\r\n}\r\n\r\n.why-card:hover::after{\r\n width:60%;\r\n}\r\n\r\n\/* ===== ICON ===== *\/\r\n\r\n.why-icon-wrap{\r\n position:relative;\r\n width:88px;\r\n height:88px;\r\n margin:0 auto 28px;\r\n z-index:2;\r\n}\r\n\r\n\/* Outer ring *\/\r\n.why-icon-ring{\r\n position:absolute;\r\n inset:0;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,0.12);\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon-ring{\r\n border-color:rgba(176,143,109,0.25);\r\n transform:scale(1.08);\r\n}\r\n\r\n\/* Pulse ring *\/\r\n.why-icon-ring::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:-8px;\r\n border-radius:50%;\r\n border:1px solid rgba(176,143,109,0.06);\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon-ring::before{\r\n inset:-14px;\r\n border-color:rgba(176,143,109,0.1);\r\n}\r\n\r\n\/* Icon circle *\/\r\n.why-icon{\r\n position:absolute;\r\n inset:6px;\r\n border-radius:50%;\r\n background:linear-gradient(145deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.08) 100%);\r\n display:grid;\r\n place-items:center;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-card:hover .why-icon{\r\n background:linear-gradient(145deg, rgba(176,143,109,0.18) 0%, rgba(219,203,182,0.14) 100%);\r\n transform:scale(1.04);\r\n}\r\n\r\n.why-icon i{\r\n font-size:28px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon i{\r\n transform:scale(1.1);\r\n}\r\n\r\n\/* ===== TEXT ===== *\/\r\n\r\n.why-card-title{\r\n font-size:22px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-0.5px;\r\n margin-bottom:14px;\r\n position:relative;\r\n z-index:2;\r\n transition:color .4s ease;\r\n}\r\n\r\n.why-card:hover .why-card-title{\r\n color:var(--dark-deep);\r\n}\r\n\r\n.why-card-desc{\r\n font-size:15px;\r\n line-height:1.7;\r\n color:var(--muted);\r\n position:relative;\r\n z-index:2;\r\n max-width:320px;\r\n margin:0 auto;\r\n}\r\n\r\n\/* ===== DECORATIVE DOTS ===== *\/\r\n\r\n.why-card-dots{\r\n position:absolute;\r\n width:60px;\r\n height:60px;\r\n background-image:radial-gradient(rgba(176,143,109,0.08) 1.5px, transparent 1.5px);\r\n background-size:12px 12px;\r\n pointer-events:none;\r\n z-index:0;\r\n opacity:0;\r\n transition:opacity .5s ease;\r\n}\r\n\r\n.why-card:hover .why-card-dots{\r\n opacity:1;\r\n}\r\n\r\n.why-card-dots-tl{\r\n top:14px;\r\n left:14px;\r\n}\r\n\r\n.why-card-dots-br{\r\n bottom:14px;\r\n right:14px;\r\n}\r\n\r\n\/* ===== NUMBER TAG ===== *\/\r\n\r\n.why-card-num{\r\n position:absolute;\r\n top:20px;\r\n right:22px;\r\n font-size:56px;\r\n font-weight:900;\r\n line-height:1;\r\n color:rgba(176,143,109,0.05);\r\n z-index:0;\r\n pointer-events:none;\r\n transition:color .5s ease;\r\n}\r\n\r\n.why-card:hover .why-card-num{\r\n color:rgba(176,143,109,0.08);\r\n}\r\n\r\n\/* ===== SCROLL REVEAL ===== *\/\r\n\r\n.why-reveal{\r\n opacity:0;\r\n transform:translateY(45px);\r\n transition:all .8s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-reveal.why-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.why-reveal:nth-child(1){ transition-delay:.05s; }\r\n.why-reveal:nth-child(2){ transition-delay:.18s; }\r\n.why-reveal:nth-child(3){ transition-delay:.31s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1024px){\r\n .why-section{\r\n padding:80px 20px;\r\n }\r\n\r\n .why-header{\r\n margin-bottom:56px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:40px;\r\n }\r\n\r\n .why-grid{\r\n gap:22px;\r\n }\r\n\r\n .why-card{\r\n padding:40px 28px 38px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:20px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:14px;\r\n }\r\n}\r\n\r\n@media(max-width:800px){\r\n .why-section{\r\n padding:70px 16px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:34px;\r\n }\r\n\r\n .why-header p{\r\n font-size:15px;\r\n }\r\n\r\n .why-grid{\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n max-width:520px;\r\n margin:0 auto;\r\n }\r\n\r\n .why-card{\r\n padding:40px 32px 36px;\r\n border-radius:24px;\r\n display:grid;\r\n grid-template-columns:auto 1fr;\r\n grid-template-rows:auto auto;\r\n text-align:left;\r\n gap:0 24px;\r\n align-items:center;\r\n }\r\n\r\n .why-icon-wrap{\r\n grid-row:1 \/ 3;\r\n margin:0;\r\n width:76px;\r\n height:76px;\r\n }\r\n\r\n .why-card-title{\r\n align-self:end;\r\n margin-bottom:6px;\r\n font-size:20px;\r\n }\r\n\r\n .why-card-desc{\r\n align-self:start;\r\n margin:0;\r\n font-size:14px;\r\n max-width:100%;\r\n }\r\n\r\n .why-card-num{\r\n display:none;\r\n }\r\n\r\n .why-card-dots{\r\n display:none;\r\n }\r\n\r\n .why-card::after{\r\n left:0;\r\n transform:none;\r\n border-radius:0 0 0 3px;\r\n }\r\n\r\n .why-card:hover::after{\r\n width:40%;\r\n }\r\n}\r\n\r\n@media(max-width:560px){\r\n .why-section{\r\n padding:56px 12px;\r\n }\r\n\r\n .why-header{\r\n margin-bottom:40px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:28px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .why-header p{\r\n font-size:14px;\r\n }\r\n\r\n .why-grid{\r\n gap:16px;\r\n }\r\n\r\n .why-card{\r\n padding:28px 22px 26px;\r\n gap:0 18px;\r\n border-radius:20px;\r\n }\r\n\r\n .why-icon-wrap{\r\n width:64px;\r\n height:64px;\r\n }\r\n\r\n .why-icon i{\r\n font-size:22px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:17px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:13px;\r\n line-height:1.65;\r\n }\r\n\r\n .why-orb-1{\r\n width:280px;\r\n height:280px;\r\n }\r\n\r\n .why-orb-2{\r\n width:240px;\r\n height:240px;\r\n }\r\n}\r\n\r\n@media(max-width:380px){\r\n .why-header h2{\r\n font-size:24px;\r\n }\r\n\r\n .why-card{\r\n padding:24px 18px 22px;\r\n gap:0 14px;\r\n }\r\n\r\n .why-icon-wrap{\r\n width:56px;\r\n height:56px;\r\n }\r\n\r\n .why-icon i{\r\n font-size:20px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:16px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:12.5px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"why-section\">\r\n\r\n \r\n <div class=\"why-orb why-orb-1\"><\/div>\r\n <div class=\"why-orb why-orb-2\"><\/div>\r\n <div class=\"why-orb why-orb-3\"><\/div>\r\n\r\n <div class=\"why-container\">\r\n\r\n \r\n <div class=\"why-header why-reveal\">\r\n <div class=\"why-badge\">Why Choose Us<\/div>\r\n <h2>What Makes Us <span>Different<\/span><\/h2>\r\n <p>We bring trusted, affordable and certified home healthcare to every family across Dubai.<\/p>\r\n <div class=\"why-header-line\">\r\n <span><\/span>\r\n <div class=\"why-diamond\"><\/div>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-grid\">\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">01<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-certificate\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">DHA-Licensed<\/h3>\r\n <p class=\"why-card-desc\">Our company, and the entirety of our clinical staff, including nurses, are certified by the Dubai Health Authority for your peace of mind.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">02<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-shield-heart\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">High Quality Care<\/h3>\r\n <p class=\"why-card-desc\">Your health is the most precious thing you have and it's our top priority that you receive the best home care service with 100% satisfaction.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">03<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-hand-holding-dollar\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">Affordable Packages<\/h3>\r\n <p class=\"why-card-desc\">Our home care service packages are priced reasonably & with every budget in mind, cause quality healthcare shouldn't break the bank.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\nconst whyEls = document.querySelectorAll('.why-reveal');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const whyObs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('why-visible');\r\n whyObs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n\r\n whyEls.forEach(el => whyObs.observe(el));\r\n} else {\r\n whyEls.forEach(el => el.classList.add('why-visible'));\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e53d524 e-con-full e-flex e-con e-parent\" data-id=\"e53d524\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ddb1c elementor-widget elementor-widget-html\" data-id=\"a5ddb1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Care Stats Section<\/title>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n *{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n }\r\n\r\n body{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n overflow-x:hidden;\r\n }\r\n\r\n :root{\r\n --brand-dark:#5B5B5B;\r\n --brand-neutral:#B08F6D;\r\n --brand-light:#DBCBB6;\r\n --brand-pop:#F9F9F9;\r\n }\r\n\r\n \/* =========================\r\n REFERENCE STYLE STATS SECTION\r\n ========================== *\/\r\n\r\n .care-stats-section{\r\n --stats-bg:none; \/* add your image here later: url('your-image.jpg') *\/\r\n position:relative;\r\n overflow:hidden;\r\n padding:90px 20px;\r\n background:\r\n linear-gradient(135deg, rgba(91,91,91,0.92), rgba(176,143,109,0.76)),\r\n var(--stats-bg) center\/cover no-repeat;\r\n isolation:isolate;\r\n }\r\n\r\n .care-stats-section::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n radial-gradient(circle at 50% 10%, rgba(249,249,249,0.10), transparent 18%),\r\n radial-gradient(circle at 10% 85%, rgba(249,249,249,0.06), transparent 22%),\r\n radial-gradient(circle at 90% 75%, rgba(249,249,249,0.05), transparent 20%);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .care-stats-section::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(115deg, transparent 0 18%, rgba(249,249,249,0.04) 18% 19%, transparent 19% 100%),\r\n linear-gradient(70deg, transparent 0 68%, rgba(249,249,249,0.04) 68% 69%, transparent 69% 100%);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .care-stats-container{\r\n position:relative;\r\n z-index:2;\r\n max-width:1320px;\r\n margin:0 auto;\r\n display:grid;\r\n grid-template-columns:repeat(4, minmax(0, 1fr));\r\n gap:34px;\r\n align-items:start;\r\n }\r\n\r\n .care-stat-card{\r\n text-align:center;\r\n opacity:0;\r\n transform:translateY(40px);\r\n transition:opacity .7s ease, transform .7s ease;\r\n }\r\n\r\n .care-stat-card.is-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-stat-card:nth-child(1){ transition-delay:.05s; }\r\n .care-stat-card:nth-child(2){ transition-delay:.12s; }\r\n .care-stat-card:nth-child(3){ transition-delay:.19s; }\r\n .care-stat-card:nth-child(4){ transition-delay:.26s; }\r\n\r\n .care-stat-icon{\r\n width:145px;\r\n height:130px;\r\n margin:0 auto 28px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n clip-path:polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);\r\n background:rgba(249,249,249,0.96);\r\n border:1px solid rgba(219,203,182,0.65);\r\n box-shadow:0 18px 38px rgba(0,0,0,0.14);\r\n transition:transform .35s ease, box-shadow .35s ease, background .35s ease;\r\n }\r\n\r\n .care-stat-card:hover .care-stat-icon{\r\n transform:translateY(-8px);\r\n box-shadow:0 24px 50px rgba(0,0,0,0.18);\r\n background:#fff;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:52px;\r\n color:var(--brand-neutral);\r\n line-height:1;\r\n }\r\n\r\n .care-stat-number{\r\n font-size:clamp(42px, 4vw, 68px);\r\n font-weight:800;\r\n color:var(--brand-light);\r\n line-height:1;\r\n letter-spacing:-1px;\r\n margin-bottom:16px;\r\n text-shadow:0 4px 20px rgba(0,0,0,0.10);\r\n }\r\n\r\n .care-stat-label{\r\n font-size:clamp(15px, 1.2vw, 22px);\r\n font-weight:600;\r\n color:var(--brand-pop);\r\n line-height:1.45;\r\n text-transform:uppercase;\r\n letter-spacing:2.4px;\r\n max-width:220px;\r\n margin:0 auto;\r\n }\r\n\r\n \/* =========================\r\n RESPONSIVE\r\n ========================== *\/\r\n\r\n @media (max-width: 1100px){\r\n .care-stats-container{\r\n gap:28px 20px;\r\n }\r\n\r\n .care-stat-icon{\r\n width:132px;\r\n height:120px;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:46px;\r\n }\r\n\r\n .care-stat-label{\r\n letter-spacing:2px;\r\n }\r\n }\r\n\r\n @media (max-width: 900px){\r\n .care-stats-section{\r\n padding:70px 18px;\r\n }\r\n\r\n .care-stats-container{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n gap:34px 20px;\r\n }\r\n\r\n .care-stat-number{\r\n margin-bottom:12px;\r\n }\r\n }\r\n\r\n @media (max-width: 560px){\r\n .care-stats-section{\r\n padding:56px 14px;\r\n }\r\n\r\n .care-stats-container{\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n }\r\n\r\n .care-stat-card{\r\n max-width:320px;\r\n margin:0 auto;\r\n }\r\n\r\n .care-stat-icon{\r\n width:118px;\r\n height:106px;\r\n margin-bottom:20px;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:40px;\r\n }\r\n\r\n .care-stat-number{\r\n font-size:50px;\r\n margin-bottom:10px;\r\n }\r\n\r\n .care-stat-label{\r\n font-size:16px;\r\n letter-spacing:1.6px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .care-stat-card,\r\n .care-stat-icon{\r\n transition:none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"care-stats-section\" style=\"--stats-bg:none;\">\r\n <div class=\"care-stats-container\">\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-house-medical\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"50\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Home Care<br>Services<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-hand-holding-medical\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"100\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Care Teams<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-users\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"50000\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Happy<br>Customers<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-award\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"15\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Years of<br>Experience<\/p>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n const statCards = document.querySelectorAll('.care-stat-card');\r\n\r\n const statObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach((entry) => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n animateCounter(entry.target);\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, {\r\n threshold: 0.25\r\n });\r\n\r\n statCards.forEach((card) => statObserver.observe(card));\r\n\r\n function animateCounter(card){\r\n const counter = card.querySelector('.care-counter');\r\n if (!counter || counter.dataset.started === 'true') return;\r\n\r\n counter.dataset.started = 'true';\r\n\r\n const target = parseInt(counter.dataset.target, 10);\r\n const duration = target >= 1000 ? 1800 : 1400;\r\n const startTime = performance.now();\r\n\r\n function updateCounter(now){\r\n const elapsed = now - startTime;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 3);\r\n const current = Math.floor(target * eased);\r\n\r\n counter.textContent = current.toString();\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n counter.textContent = target.toString();\r\n }\r\n }\r\n\r\n requestAnimationFrame(updateCounter);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-775627e e-con-full e-flex e-con e-parent\" data-id=\"775627e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80b51a8 elementor-widget elementor-widget-html\" data-id=\"80b51a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Testimonials \u2014 Bionix On Call<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TESTIMONIALS SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.testi-section{\r\n padding:100px 40px;\r\n background:var(--pop);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Ambient glows matching hero style *\/\r\n.testi-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-120px; right:-160px;\r\n width:520px; height:520px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,.07) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n.testi-section::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-100px; left:-120px;\r\n width:400px; height:400px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,.09) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n\r\n\/* Deco circles \u2014 mirrors hero *\/\r\n.testi-deco{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,.08);\r\n pointer-events:none;\r\n}\r\n.testi-deco-1{width:360px;height:360px;top:-80px;left:-80px;}\r\n.testi-deco-2{width:200px;height:200px;bottom:60px;right:80px;border-color:rgba(219,203,182,.1);}\r\n\r\n.testi-wrapper{\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:1;\r\n}\r\n\r\n\/* \u2500\u2500 Section Header \u2500\u2500 *\/\r\n.testi-header{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:24px;\r\n margin-bottom:56px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.testi-header-left{}\r\n\r\n.testi-eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:8px 20px 8px 10px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.1);\r\n border:1px solid rgba(176,143,109,.2);\r\n margin-bottom:20px;\r\n}\r\n\r\n.testi-eyebrow-dot{\r\n width:32px; height:32px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid; place-items:center;\r\n color:#fff; font-size:12px;\r\n}\r\n\r\n.testi-eyebrow span{\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n}\r\n\r\n.testi-header h2{\r\n font-size:clamp(32px, 4.5vw, 56px);\r\n font-weight:800;\r\n letter-spacing:-.03em;\r\n line-height:1.05;\r\n color:#1a1a1a;\r\n}\r\n\r\n.testi-header h2 span{\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Google rating summary *\/\r\n.testi-rating-summary{\r\n display:flex;\r\n flex-direction:column;\r\n align-items:flex-end;\r\n gap:8px;\r\n flex-shrink:0;\r\n}\r\n\r\n.testi-rating-score{\r\n display:flex;\r\n align-items:center;\r\n gap:14px;\r\n}\r\n\r\n.testi-big-score{\r\n font-size:56px;\r\n font-weight:900;\r\n color:#1a1a1a;\r\n letter-spacing:-.04em;\r\n line-height:1;\r\n}\r\n\r\n.testi-score-meta{}\r\n\r\n.testi-stars{\r\n display:flex;\r\n gap:3px;\r\n margin-bottom:4px;\r\n}\r\n\r\n.testi-stars i{\r\n font-size:16px;\r\n color:var(--neutral);\r\n}\r\n\r\n.testi-score-meta p{\r\n font-size:13px;\r\n color:var(--dark);\r\n opacity:.7;\r\n font-weight:500;\r\n}\r\n\r\n.testi-google-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:7px 16px 7px 10px;\r\n border-radius:999px;\r\n background:#fff;\r\n border:1.5px solid rgba(176,143,109,.15);\r\n font-size:13px;\r\n font-weight:600;\r\n color:var(--dark);\r\n box-shadow:0 4px 14px rgba(0,0,0,.05);\r\n}\r\n\r\n.testi-google-badge i{\r\n font-size:16px;\r\n color:#4285F4;\r\n}\r\n\r\n\/* \u2500\u2500 Carousel Container \u2500\u2500 *\/\r\n.testi-track-wrap{\r\n position:relative;\r\n overflow:hidden;\r\n \/* fade edges *\/\r\n -webkit-mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);\r\n mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);\r\n}\r\n\r\n.testi-track{\r\n display:flex;\r\n gap:24px;\r\n transition:.6s var(--ease);\r\n will-change:transform;\r\n}\r\n\r\n\/* \u2500\u2500 Individual Card \u2500\u2500 *\/\r\n.testi-card{\r\n background:#fff;\r\n border:1.5px solid rgba(176,143,109,.12);\r\n border-radius:22px;\r\n padding:32px 28px;\r\n min-width:360px;\r\n max-width:360px;\r\n flex-shrink:0;\r\n position:relative;\r\n overflow:hidden;\r\n transition:.4s var(--ease);\r\n box-shadow:0 4px 20px rgba(0,0,0,.04);\r\n}\r\n\r\n.testi-card::before{\r\n content:\"\";\r\n position:absolute;\r\n bottom:0; left:0; right:0;\r\n height:3px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n transform:scaleX(0);\r\n transform-origin:left;\r\n transition:.4s var(--ease);\r\n}\r\n\r\n.testi-card:hover{\r\n transform:translateY(-6px);\r\n border-color:rgba(176,143,109,.28);\r\n box-shadow:0 20px 48px rgba(176,143,109,.12);\r\n}\r\n\r\n.testi-card:hover::before{\r\n transform:scaleX(1);\r\n}\r\n\r\n\/* Quote icon *\/\r\n.testi-quote{\r\n width:44px; height:44px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,.12), rgba(219,203,182,.18));\r\n border:1px solid rgba(176,143,109,.18);\r\n display:grid; place-items:center;\r\n color:var(--neutral);\r\n font-size:18px;\r\n margin-bottom:20px;\r\n}\r\n\r\n\/* Stars *\/\r\n.testi-card-stars{\r\n display:flex;\r\n gap:3px;\r\n margin-bottom:16px;\r\n}\r\n\r\n.testi-card-stars i{\r\n font-size:13px;\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Review text *\/\r\n.testi-card p{\r\n font-size:15px;\r\n line-height:1.75;\r\n color:var(--dark);\r\n font-weight:400;\r\n margin-bottom:24px;\r\n font-style:italic;\r\n opacity:.9;\r\n}\r\n\r\n\/* Author *\/\r\n.testi-author{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n padding-top:20px;\r\n border-top:1px solid rgba(176,143,109,.1);\r\n}\r\n\r\n.testi-avatar{\r\n width:46px; height:46px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid; place-items:center;\r\n font-size:18px;\r\n font-weight:700;\r\n color:#fff;\r\n flex-shrink:0;\r\n font-style:normal;\r\n}\r\n\r\n.testi-author-info{}\r\n\r\n.testi-author-name{\r\n font-size:15px;\r\n font-weight:700;\r\n color:#1a1a1a;\r\n margin-bottom:2px;\r\n}\r\n\r\n.testi-author-role{\r\n font-size:12px;\r\n font-weight:500;\r\n color:var(--neutral);\r\n display:flex;\r\n align-items:center;\r\n gap:5px;\r\n}\r\n\r\n.testi-author-role i{\r\n font-size:10px;\r\n}\r\n\r\n\/* Featured card *\/\r\n.testi-card.featured{\r\n background:linear-gradient(145deg, #2e2a26, #3a3630);\r\n border-color:rgba(219,203,182,.12);\r\n}\r\n\r\n.testi-card.featured .testi-quote{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:#fff;\r\n border-color:transparent;\r\n box-shadow:0 8px 20px rgba(176,143,109,.3);\r\n}\r\n\r\n.testi-card.featured .testi-card-stars i{\r\n color:var(--light);\r\n}\r\n\r\n.testi-card.featured p{\r\n color:#e8e0d8;\r\n opacity:1;\r\n}\r\n\r\n.testi-card.featured .testi-author{\r\n border-top-color:rgba(219,203,182,.1);\r\n}\r\n\r\n.testi-card.featured .testi-author-name{\r\n color:#fff;\r\n}\r\n\r\n.testi-card.featured .testi-author-role{\r\n color:var(--light);\r\n opacity:.8;\r\n}\r\n\r\n\/* \u2500\u2500 Navigation \u2500\u2500 *\/\r\n.testi-nav{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:16px;\r\n margin-top:44px;\r\n}\r\n\r\n.testi-btn{\r\n width:48px; height:48px;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,.2);\r\n background:#fff;\r\n color:var(--neutral);\r\n font-size:16px;\r\n display:grid; place-items:center;\r\n cursor:pointer;\r\n transition:.35s var(--ease);\r\n box-shadow:0 4px 14px rgba(0,0,0,.06);\r\n}\r\n\r\n.testi-btn:hover{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:#fff;\r\n border-color:transparent;\r\n transform:scale(1.08);\r\n box-shadow:0 10px 28px rgba(176,143,109,.28);\r\n}\r\n\r\n\/* Dots *\/\r\n.testi-dots{\r\n display:flex;\r\n gap:8px;\r\n align-items:center;\r\n}\r\n\r\n.testi-dot{\r\n width:8px; height:8px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.25);\r\n cursor:pointer;\r\n transition:.35s var(--ease);\r\n border:none;\r\n}\r\n\r\n.testi-dot.active{\r\n background:var(--neutral);\r\n width:24px;\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:960px){\r\n .testi-section{ padding:80px 28px }\r\n .testi-card{ min-width:300px; max-width:300px; }\r\n .testi-header{ flex-direction:column; align-items:flex-start; }\r\n .testi-rating-summary{ align-items:flex-start; }\r\n}\r\n\r\n@media(max-width:640px){\r\n .testi-section{ padding:64px 20px }\r\n .testi-header{ margin-bottom:36px }\r\n .testi-card{ min-width:calc(100vw - 56px); max-width:calc(100vw - 56px); padding:28px 22px }\r\n .testi-track-wrap{\r\n -webkit-mask-image:none;\r\n mask-image:none;\r\n }\r\n .testi-big-score{ font-size:44px }\r\n .testi-stars i{ font-size:14px }\r\n .testi-deco-1,.testi-deco-2{ display:none }\r\n}\r\n\r\n@media(max-width:400px){\r\n .testi-card{ min-width:calc(100vw - 40px); max-width:calc(100vw - 40px); }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"testi-section\">\r\n\r\n \r\n <div class=\"testi-deco testi-deco-1\"><\/div>\r\n <div class=\"testi-deco testi-deco-2\"><\/div>\r\n\r\n <div class=\"testi-wrapper\">\r\n\r\n \r\n <div class=\"testi-header\">\r\n <div class=\"testi-header-left\">\r\n <div class=\"testi-eyebrow\">\r\n <div class=\"testi-eyebrow-dot\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n <span>Patient Stories<\/span>\r\n <\/div>\r\n <h2>Trusted by Families<br>Across <span>Dubai<\/span><\/h2>\r\n <\/div>\r\n\r\n <div class=\"testi-rating-summary\">\r\n <div class=\"testi-rating-score\">\r\n <div class=\"testi-big-score\">4.9<\/div>\r\n <div class=\"testi-score-meta\">\r\n <div class=\"testi-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <p>Based on 200+ reviews<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-google-badge\">\r\n <i class=\"fa-brands fa-google\"><\/i>\r\n Google Reviews\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-track-wrap\">\r\n <div class=\"testi-track\" id=\"testiTrack\">\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"The nurse who visited was incredibly professional and kind. My elderly mother was nervous at first, but she was put completely at ease. The service was prompt and the care was exceptional.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">F<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Fatima Al Mansouri<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Jumeirah, Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card featured\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"I called at midnight when my father had a fever and the doctor arrived within 25 minutes. I was shocked by how fast and thorough the service was. Truly a lifesaver. Highly recommend to every family in Dubai.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">A<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Ahmed Khalid<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Downtown Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"We used Bionix On Call for post-surgery care for my husband. The physiotherapist visited daily and the progress was amazing. So convenient not having to travel to a clinic every day.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">S<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Sarah Thompson<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Dubai Marina<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <p>\"Had a blood test done at home for the whole family. The technician was gentle, organised and explained everything clearly. Results came back quickly. Will definitely use again.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">R<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Ravi Nair<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Business Bay<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"As an expat with no family nearby, having Bionix On Call available 24\/7 gives me real peace of mind. The team is always warm, professional and genuinely caring. Absolutely worth it.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">L<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Laura M\u00fcller<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Palm Jumeirah<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"My newborn needed monitoring after discharge and the Bionix nurse was so gentle and knowledgeable. She also gave us new-parent advice that was incredibly helpful. Five stars, no question.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">M<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Mariam Hassan<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Al Barsha, Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-nav\">\r\n <button class=\"testi-btn\" id=\"testiPrev\" aria-label=\"Previous\">\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"testi-dots\" id=\"testiDots\"><\/div>\r\n\r\n <button class=\"testi-btn\" id=\"testiNext\" aria-label=\"Next\">\r\n <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst track = document.getElementById('testiTrack');\r\nconst cards = track.querySelectorAll('.testi-card');\r\nconst dotsWrap = document.getElementById('testiDots');\r\nconst btnPrev = document.getElementById('testiPrev');\r\nconst btnNext = document.getElementById('testiNext');\r\n\r\nlet current = 0;\r\n\r\n\/* How many cards visible at once based on viewport *\/\r\nfunction visibleCount(){\r\n if(window.innerWidth <= 640) return 1;\r\n if(window.innerWidth <= 960) return 2;\r\n return 3;\r\n}\r\n\r\nconst totalSlides = () => Math.ceil(cards.length \/ visibleCount());\r\n\r\n\/* Build dots *\/\r\nfunction buildDots(){\r\n dotsWrap.innerHTML = '';\r\n for(let i = 0; i < totalSlides(); i++){\r\n const d = document.createElement('button');\r\n d.className = 'testi-dot' + (i === current ? ' active' : '');\r\n d.setAttribute('aria-label', `Slide ${i+1}`);\r\n d.addEventListener('click', () => goTo(i));\r\n dotsWrap.appendChild(d);\r\n }\r\n}\r\n\r\nfunction goTo(index){\r\n const total = totalSlides();\r\n current = (index + total) % total;\r\n\r\n const cardWidth = cards[0].offsetWidth + 24; \/* card + gap *\/\r\n const offset = current * visibleCount() * cardWidth;\r\n track.style.transform = `translateX(-${offset}px)`;\r\n\r\n dotsWrap.querySelectorAll('.testi-dot').forEach((d,i) => {\r\n d.classList.toggle('active', i === current);\r\n });\r\n}\r\n\r\nbtnPrev.addEventListener('click', () => goTo(current - 1));\r\nbtnNext.addEventListener('click', () => goTo(current + 1));\r\n\r\n\/* Touch \/ swipe support *\/\r\nlet startX = 0;\r\ntrack.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, {passive:true});\r\ntrack.addEventListener('touchend', e => {\r\n const diff = startX - e.changedTouches[0].clientX;\r\n if(Math.abs(diff) > 50) goTo(current + (diff > 0 ? 1 : -1));\r\n}, {passive:true});\r\n\r\n\/* Rebuild on resize *\/\r\nlet resizeTimer;\r\nwindow.addEventListener('resize', () => {\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(() => { current = 0; buildDots(); goTo(0); }, 200);\r\n});\r\n\r\n\/* Init *\/\r\nbuildDots();\r\ngoTo(0);\r\n\r\n\/* Auto-play *\/\r\nlet autoplay = setInterval(() => goTo(current + 1), 5000);\r\ntrack.addEventListener('mouseenter', () => clearInterval(autoplay));\r\ntrack.addEventListener('mouseleave', () => { autoplay = setInterval(() => goTo(current + 1), 5000); });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7f4d996 e-con-full e-flex e-con e-parent\" data-id=\"7f4d996\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57873c7 elementor-widget elementor-widget-html\" data-id=\"57873c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Bionix On Call \u2014 WhatsApp Banner<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --neutral: #B08F6D;\r\n --neutral-dark: #8a6b4e;\r\n --neutral-light: #c9aa8c;\r\n --white: #ffffff;\r\n --text: #1e1b18;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: #f6f2ee;\r\n padding: 60px 0;\r\n }\r\n\r\n \/* white outer section wrapper *\/\r\n .wa-section {\r\n background: #ffffff;\r\n padding: 40px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BANNER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .wa-banner {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 24px;\r\n background: linear-gradient(120deg, #1DA851 0%, #25D366 50%, #20c05c 100%);\r\n padding: 52px 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 40px;\r\n min-height: 180px;\r\n }\r\n\r\n \/* large WhatsApp icon as background watermark *\/\r\n .wa-banner::before {\r\n content: \"\\f232\";\r\n font-family: \"Font Awesome 6 Brands\";\r\n font-weight: 400;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 340px;\r\n color: rgba(255,255,255,0.06);\r\n line-height: 1;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n \/* faint large ring *\/\r\n .wa-banner::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 380px;\r\n height: 380px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.07);\r\n pointer-events: none;\r\n }\r\n\r\n \/* extra outer ring *\/\r\n .ring {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 460px;\r\n height: 460px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2500\u2500 LEFT: text \u2500\u2500 *\/\r\n .wa-content {\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n max-width: 560px;\r\n }\r\n\r\n .wa-label {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: rgba(255,255,255,0.85);\r\n letter-spacing: .3px;\r\n }\r\n\r\n .wa-title {\r\n font-size: clamp(1.6rem, 3.5vw, 2.4rem);\r\n font-weight: 800;\r\n color: var(--white);\r\n line-height: 1.15;\r\n letter-spacing: -.02em;\r\n }\r\n\r\n .wa-sub {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(255,255,255,0.78);\r\n line-height: 1.6;\r\n margin-top: 2px;\r\n }\r\n\r\n .wa-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 10px;\r\n padding: 13px 26px;\r\n border-radius: 999px;\r\n background: var(--white);\r\n color: #1A7A40;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n letter-spacing: .2px;\r\n width: fit-content;\r\n box-shadow: 0 6px 24px rgba(0,0,0,0.12);\r\n transition: transform .3s ease, box-shadow .3s ease, background .3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .wa-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0; left: -110%;\r\n width: 60%; height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(176,143,109,0.12), transparent);\r\n transition: left .5s ease;\r\n }\r\n\r\n .wa-btn:hover::after { left: 130%; }\r\n\r\n .wa-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(0,0,0,0.18);\r\n background: #f0fdf4;\r\n }\r\n\r\n .wa-btn i {\r\n font-size: 16px;\r\n color: #25D366;\r\n }\r\n\r\n .wa-btn .arrow {\r\n font-size: 11px;\r\n color: #1DA851;\r\n margin-left: 2px;\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT: big WhatsApp icon \u2500\u2500 *\/\r\n .wa-icon-block {\r\n position: relative;\r\n z-index: 2;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .wa-icon-circle {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.12);\r\n border: 2px solid rgba(255,255,255,0.2);\r\n display: grid;\r\n place-items: center;\r\n transition: transform .35s ease, background .35s ease;\r\n }\r\n\r\n .wa-banner:hover .wa-icon-circle {\r\n transform: scale(1.06);\r\n background: rgba(255,255,255,0.18);\r\n }\r\n\r\n .wa-icon-circle i {\r\n font-size: 40px;\r\n color: var(--white);\r\n }\r\n\r\n \/* pulse ring animation *\/\r\n .wa-icon-circle::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.15);\r\n animation: pulse-ring 2.2s ease-out infinite;\r\n }\r\n\r\n .wa-icon-circle::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(255,255,255,0.08);\r\n animation: pulse-ring 2.2s ease-out infinite .6s;\r\n }\r\n\r\n @keyframes pulse-ring {\r\n 0% { transform: scale(0.92); opacity: 1; }\r\n 100% { transform: scale(1.3); opacity: 0; }\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 900px) {\r\n .wa-section { padding: 28px; }\r\n .wa-banner { padding: 44px 40px; border-radius: 20px; }\r\n .wa-banner::before { font-size: 180px; right: 14%; }\r\n }\r\n\r\n @media (max-width: 680px) {\r\n .wa-section { padding: 20px; }\r\n .wa-banner {\r\n padding: 40px 28px;\r\n border-radius: 18px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 28px;\r\n min-height: unset;\r\n }\r\n .wa-banner::before { font-size: 140px; right: -2%; top: 40%; opacity: .6; }\r\n .wa-icon-block { align-self: flex-end; }\r\n .wa-icon-circle { width: 72px; height: 72px; }\r\n .wa-icon-circle i { font-size: 32px; }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .wa-section { padding: 14px; }\r\n .wa-banner { padding: 32px 20px; border-radius: 16px; }\r\n .wa-title { font-size: 1.5rem; }\r\n .wa-sub { font-size: 13px; }\r\n .wa-btn { font-size: 13px; padding: 11px 20px; }\r\n .wa-icon-circle { width: 60px; height: 60px; }\r\n .wa-icon-circle i { font-size: 26px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"wa-section\">\r\n<div class=\"wa-banner\">\r\n\r\n <div class=\"ring\"><\/div>\r\n\r\n \r\n <div class=\"wa-content\">\r\n <p class=\"wa-label\">Need Instant Help?<\/p>\r\n <h2 class=\"wa-title\">WhatsApp Us Now<\/h2>\r\n <p class=\"wa-sub\">\r\n Tell us your symptoms and we'll guide you<br>\r\n to the right doctor or treatment.\r\n <\/p>\r\n <a href=\"https:\/\/wa.me\/971501234567\" target=\"_blank\" class=\"wa-btn\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n Chat on WhatsApp\r\n <i class=\"fa-solid fa-arrow-right arrow\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-icon-block\">\r\n <div class=\"wa-icon-circle\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cd1dc6e e-con-full e-flex e-con e-parent\" data-id=\"cd1dc6e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b321f33 elementor-widget elementor-widget-html\" data-id=\"b321f33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>CTA Section<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== FULL WIDTH CTA ===== *\/\r\n\r\n.cta-section{\r\n width:100%;\r\n position:relative;\r\n overflow:hidden;\r\n background:linear-gradient(155deg, #3a3530 0%, #4a4440 25%, var(--dark) 50%, #4a4440 75%, #3a3530 100%);\r\n}\r\n\r\n\/* Shimmer *\/\r\n\r\n.cta-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:50%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(219,203,182,0.03), rgba(219,203,182,0.06), rgba(219,203,182,0.03), transparent);\r\n animation:ctaShimmer 8s ease-in-out infinite;\r\n z-index:1;\r\n pointer-events:none;\r\n}\r\n\r\n@keyframes ctaShimmer{\r\n 0%{ left:-100%; }\r\n 50%,100%{ left:160%; }\r\n}\r\n\r\n\/* Glows *\/\r\n\r\n.cta-glow{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.cta-glow-1{\r\n width:600px;\r\n height:600px;\r\n top:-40%;\r\n right:-5%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.15) 0%, transparent 55%);\r\n}\r\n\r\n.cta-glow-2{\r\n width:500px;\r\n height:500px;\r\n bottom:-40%;\r\n left:-5%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.08) 0%, transparent 50%);\r\n}\r\n\r\n.cta-glow-3{\r\n width:300px;\r\n height:300px;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n background:radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 50%);\r\n}\r\n\r\n.cta-glow-4{\r\n width:250px;\r\n height:250px;\r\n top:10%;\r\n left:20%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 50%);\r\n}\r\n\r\n\/* Dot grids *\/\r\n\r\n.cta-dots{\r\n position:absolute;\r\n width:160px;\r\n height:160px;\r\n background-image:radial-gradient(rgba(219,203,182,0.06) 1.5px, transparent 1.5px);\r\n background-size:18px 18px;\r\n z-index:0;\r\n pointer-events:none;\r\n}\r\n\r\n.cta-dots-1{\r\n top:30px;\r\n right:60px;\r\n}\r\n\r\n.cta-dots-2{\r\n bottom:30px;\r\n left:60px;\r\n}\r\n\r\n.cta-dots-3{\r\n top:50%;\r\n left:48%;\r\n transform:translateY(-50%);\r\n width:100px;\r\n height:100px;\r\n opacity:.5;\r\n}\r\n\r\n\/* Rings *\/\r\n\r\n.cta-ring{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(219,203,182,0.04);\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.cta-ring-1{\r\n width:250px;\r\n height:250px;\r\n bottom:-80px;\r\n right:-80px;\r\n}\r\n\r\n.cta-ring-2{\r\n width:380px;\r\n height:380px;\r\n bottom:-130px;\r\n right:-130px;\r\n}\r\n\r\n.cta-ring-3{\r\n width:200px;\r\n height:200px;\r\n top:-70px;\r\n left:-70px;\r\n}\r\n\r\n.cta-ring-4{\r\n width:320px;\r\n height:320px;\r\n top:-110px;\r\n left:-110px;\r\n}\r\n\r\n\/* ===== INNER CONTAINER ===== *\/\r\n\r\n.cta-inner{\r\n position:relative;\r\n z-index:2;\r\n max-width:1320px;\r\n margin:0 auto;\r\n padding:90px 60px;\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n align-items:center;\r\n gap:60px;\r\n}\r\n\r\n\/* ===== LEFT ===== *\/\r\n\r\n.cta-left{\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.cta-eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n margin-bottom:22px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:rgba(255,255,255,0.55);\r\n}\r\n\r\n.cta-eyebrow-dot{\r\n width:8px;\r\n height:8px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n animation:ctaPulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ctaPulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.cta-left h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--white);\r\n line-height:1.1;\r\n letter-spacing:-1.8px;\r\n margin-bottom:18px;\r\n}\r\n\r\n.cta-left h2 .cta-accent{\r\n background:linear-gradient(135deg, var(--light) 0%, var(--neutral) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.cta-left>p{\r\n font-size:17px;\r\n line-height:1.7;\r\n color:rgba(255,255,255,0.5);\r\n max-width:480px;\r\n margin-bottom:32px;\r\n}\r\n\r\n\/* Trust *\/\r\n\r\n.cta-trust{\r\n display:flex;\r\n align-items:center;\r\n gap:22px;\r\n flex-wrap:wrap;\r\n margin-bottom:36px;\r\n}\r\n\r\n.cta-trust-item{\r\n display:flex;\r\n align-items:center;\r\n gap:7px;\r\n font-size:13px;\r\n font-weight:500;\r\n color:rgba(255,255,255,0.5);\r\n}\r\n\r\n.cta-trust-item i{\r\n font-size:12px;\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Direct contact *\/\r\n\r\n.cta-direct{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:22px;\r\n}\r\n\r\n.cta-direct a{\r\n display:flex;\r\n align-items:center;\r\n gap:10px;\r\n text-decoration:none;\r\n color:var(--light);\r\n font-size:15px;\r\n font-weight:600;\r\n transition:all .3s ease;\r\n}\r\n\r\n.cta-direct a:hover{\r\n color:var(--white);\r\n transform:translateX(3px);\r\n}\r\n\r\n.cta-direct a .dir-icon{\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,0.18);\r\n display:grid;\r\n place-items:center;\r\n font-size:13px;\r\n color:var(--light);\r\n transition:all .3s ease;\r\n}\r\n\r\n.cta-direct a:hover .dir-icon{\r\n background:rgba(176,143,109,0.3);\r\n}\r\n\r\n\/* ===== RIGHT \u2014 FORM ===== *\/\r\n\r\n.cta-right{\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.cta-form-card{\r\n background:rgba(255,255,255,0.055);\r\n backdrop-filter:blur(22px);\r\n -webkit-backdrop-filter:blur(22px);\r\n border:1px solid rgba(219,203,182,0.1);\r\n border-radius:28px;\r\n padding:40px 36px;\r\n box-shadow:0 24px 60px rgba(0,0,0,0.18);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Form card inner glow *\/\r\n.cta-form-card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-50%;\r\n right:-30%;\r\n width:250px;\r\n height:250px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 60%);\r\n pointer-events:none;\r\n}\r\n\r\n.cta-form-header{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n margin-bottom:8px;\r\n}\r\n\r\n.cta-form-header-icon{\r\n width:42px;\r\n height:42px;\r\n border-radius:14px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.25), rgba(219,203,182,0.12));\r\n display:grid;\r\n place-items:center;\r\n color:var(--light);\r\n font-size:17px;\r\n}\r\n\r\n.cta-form-title{\r\n font-size:20px;\r\n font-weight:700;\r\n color:var(--white);\r\n}\r\n\r\n.cta-form-sub{\r\n font-size:13px;\r\n color:rgba(255,255,255,0.4);\r\n margin-bottom:26px;\r\n line-height:1.5;\r\n padding-left:54px;\r\n}\r\n\r\n.form-group{\r\n margin-bottom:16px;\r\n}\r\n\r\n.form-label{\r\n display:block;\r\n font-size:11px;\r\n font-weight:600;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n color:rgba(255,255,255,0.4);\r\n margin-bottom:6px;\r\n}\r\n\r\n.form-input,\r\n.form-select,\r\n.form-textarea{\r\n width:100%;\r\n padding:14px 16px;\r\n background:rgba(255,255,255,0.055);\r\n border:1.5px solid rgba(219,203,182,0.1);\r\n border-radius:14px;\r\n color:var(--white);\r\n font-size:14px;\r\n font-family:'Inter',sans-serif;\r\n font-weight:500;\r\n outline:none;\r\n transition:all .3s ease;\r\n -webkit-appearance:none;\r\n appearance:none;\r\n}\r\n\r\n.form-input::placeholder,\r\n.form-textarea::placeholder{\r\n color:rgba(255,255,255,0.22);\r\n}\r\n\r\n.form-input:focus,\r\n.form-select:focus,\r\n.form-textarea:focus{\r\n border-color:rgba(176,143,109,0.45);\r\n background:rgba(255,255,255,0.085);\r\n box-shadow:0 0 0 3px rgba(176,143,109,0.08);\r\n}\r\n\r\n.form-select{\r\n cursor:pointer;\r\n color:rgba(255,255,255,0.5);\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(219,203,182,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n background-repeat:no-repeat;\r\n background-position:right 14px center;\r\n padding-right:42px;\r\n}\r\n\r\n.form-select option{\r\n background:#3e3832;\r\n color:var(--white);\r\n}\r\n\r\n.form-select:valid{\r\n color:var(--white);\r\n}\r\n\r\n.form-row{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n}\r\n\r\n.form-textarea{\r\n resize:none;\r\n height:80px;\r\n}\r\n\r\n\/* Submit *\/\r\n\r\n.form-submit{\r\n width:100%;\r\n margin-top:10px;\r\n padding:17px 24px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border:none;\r\n border-radius:14px;\r\n font-size:15px;\r\n font-weight:700;\r\n font-family:'Inter',sans-serif;\r\n cursor:pointer;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 12px 30px rgba(176,143,109,0.3);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n.form-submit::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:60%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);\r\n transition:left .6s ease;\r\n}\r\n\r\n.form-submit:hover::before{\r\n left:160%;\r\n}\r\n\r\n.form-submit:hover{\r\n transform:translateY(-3px) scale(1.02);\r\n box-shadow:0 18px 42px rgba(176,143,109,0.4);\r\n}\r\n\r\n.form-submit i{\r\n font-size:17px;\r\n transition:transform .3s ease;\r\n}\r\n\r\n.form-submit:hover i{\r\n transform:translateX(3px);\r\n}\r\n\r\n\/* Security note *\/\r\n\r\n.form-footer{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:6px;\r\n margin-top:16px;\r\n font-size:11px;\r\n color:rgba(255,255,255,0.3);\r\n}\r\n\r\n.form-footer i{\r\n font-size:12px;\r\n color:rgba(255,255,255,0.25);\r\n}\r\n\r\n\/* ===== SCROLL ANIMATION ===== *\/\r\n\r\n.cta-animate{\r\n opacity:0;\r\n transform:translateY(50px);\r\n transition:all 1s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.cta-animate.cta-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.cta-animate-delay-1{ transition-delay:.1s; }\r\n.cta-animate-delay-2{ transition-delay:.25s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1100px){\r\n .cta-inner{\r\n padding:80px 44px;\r\n gap:44px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:40px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:34px 28px;\r\n }\r\n}\r\n\r\n@media(max-width:900px){\r\n .cta-inner{\r\n grid-template-columns:1fr;\r\n padding:60px 28px;\r\n gap:40px;\r\n text-align:center;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:36px;\r\n }\r\n\r\n .cta-left>p{\r\n margin:0 auto 28px;\r\n }\r\n\r\n .cta-trust{\r\n justify-content:center;\r\n }\r\n\r\n .cta-direct{\r\n justify-content:center;\r\n }\r\n\r\n .cta-form-card{\r\n max-width:520px;\r\n margin:0 auto;\r\n }\r\n\r\n .cta-form-sub{\r\n padding-left:0;\r\n text-align:center;\r\n }\r\n\r\n .cta-form-header{\r\n justify-content:center;\r\n }\r\n\r\n .cta-dots{\r\n display:none;\r\n }\r\n}\r\n\r\n@media(max-width:640px){\r\n .cta-inner{\r\n padding:48px 18px;\r\n gap:32px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:30px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .cta-left h2 br{\r\n display:none;\r\n }\r\n\r\n .cta-left>p{\r\n font-size:14.5px;\r\n }\r\n\r\n .cta-trust{\r\n gap:12px;\r\n }\r\n\r\n .cta-trust-item{\r\n font-size:12px;\r\n }\r\n\r\n .cta-direct{\r\n flex-direction:column;\r\n align-items:center;\r\n gap:12px;\r\n }\r\n\r\n .cta-direct a{\r\n font-size:13px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:28px 20px;\r\n border-radius:22px;\r\n }\r\n\r\n .cta-form-title{\r\n font-size:17px;\r\n }\r\n\r\n .cta-form-sub{\r\n font-size:12px;\r\n }\r\n\r\n .form-row{\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-textarea{\r\n padding:13px 14px;\r\n font-size:13px;\r\n border-radius:12px;\r\n }\r\n\r\n .form-submit{\r\n padding:15px 20px;\r\n font-size:14px;\r\n border-radius:12px;\r\n }\r\n\r\n .cta-eyebrow{\r\n font-size:10px;\r\n justify-content:center;\r\n }\r\n\r\n .cta-glow-1{\r\n width:350px;\r\n height:350px;\r\n }\r\n\r\n .cta-glow-2{\r\n width:280px;\r\n height:280px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .cta-inner{\r\n padding:36px 14px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:26px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:24px 16px;\r\n border-radius:18px;\r\n }\r\n\r\n .cta-form-header-icon{\r\n width:36px;\r\n height:36px;\r\n border-radius:11px;\r\n font-size:14px;\r\n }\r\n\r\n .cta-form-title{\r\n font-size:16px;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-textarea{\r\n padding:12px 12px;\r\n font-size:13px;\r\n }\r\n\r\n .form-submit{\r\n padding:14px 18px;\r\n font-size:13px;\r\n }\r\n\r\n .cta-trust-item{\r\n font-size:11px;\r\n }\r\n\r\n .cta-direct a{\r\n font-size:12px;\r\n }\r\n\r\n .cta-direct a .dir-icon{\r\n width:28px;\r\n height:28px;\r\n font-size:11px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"cta-section\">\r\n\r\n \r\n <div class=\"cta-glow cta-glow-1\"><\/div>\r\n <div class=\"cta-glow cta-glow-2\"><\/div>\r\n <div class=\"cta-glow cta-glow-3\"><\/div>\r\n <div class=\"cta-glow cta-glow-4\"><\/div>\r\n <div class=\"cta-dots cta-dots-1\"><\/div>\r\n <div class=\"cta-dots cta-dots-2\"><\/div>\r\n <div class=\"cta-dots cta-dots-3\"><\/div>\r\n <div class=\"cta-ring cta-ring-1\"><\/div>\r\n <div class=\"cta-ring cta-ring-2\"><\/div>\r\n <div class=\"cta-ring cta-ring-3\"><\/div>\r\n <div class=\"cta-ring cta-ring-4\"><\/div>\r\n\r\n <div class=\"cta-inner\">\r\n\r\n \r\n <div class=\"cta-left cta-animate\">\r\n\r\n <div class=\"cta-eyebrow\">\r\n <div class=\"cta-eyebrow-dot\"><\/div>\r\n Ready to Get Started\r\n <\/div>\r\n\r\n <h2>Book Your Home <br><span class=\"cta-accent\">Healthcare<\/span> Today<\/h2>\r\n\r\n <p>Get professional medical care delivered to your doorstep. Licensed doctors, nurses, and specialists available 24\/7 across Dubai.<\/p>\r\n\r\n <div class=\"cta-trust\">\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n DHA Licensed\r\n <\/div>\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n Available 24\/7\r\n <\/div>\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n 2,500+ Patients\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-direct\">\r\n <a href=\"tel:+971501234567\">\r\n <span class=\"dir-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/span>\r\n +971 50 123 4567\r\n <\/a>\r\n <a href=\"mailto:care@bionixoncall.com\">\r\n <span class=\"dir-icon\"><i class=\"fa-solid fa-envelope\"><\/i><\/span>\r\n care@bionixoncall.com\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-right cta-animate cta-animate-delay-2\">\r\n <div class=\"cta-form-card\">\r\n\r\n <div class=\"cta-form-header\">\r\n <div class=\"cta-form-header-icon\"><i class=\"fa-solid fa-paper-plane\"><\/i><\/div>\r\n <div class=\"cta-form-title\">Send Us a Message<\/div>\r\n <\/div>\r\n <div class=\"cta-form-sub\">Fill in your details and we'll respond via WhatsApp instantly.<\/div>\r\n\r\n <form id=\"whatsappForm\" onsubmit=\"sendToWhatsApp(event)\">\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaName\">Full Name<\/label>\r\n <input class=\"form-input\" type=\"text\" id=\"ctaName\" placeholder=\"Your name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaPhone\">Phone Number<\/label>\r\n <input class=\"form-input\" type=\"tel\" id=\"ctaPhone\" placeholder=\"+971 50 XXX XXXX\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaEmail\">Email Address<\/label>\r\n <input class=\"form-input\" type=\"email\" id=\"ctaEmail\" placeholder=\"your@email.com\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaService\">Service Needed<\/label>\r\n <select class=\"form-select\" id=\"ctaService\" required>\r\n <option value=\"\" disabled selected>Select a service<\/option>\r\n <option value=\"IV Therapy\">IV Therapy<\/option>\r\n <option value=\"Home Nursing\">Home Nursing<\/option>\r\n <option value=\"Elderly Care\">Elderly Care<\/option>\r\n <option value=\"Doctor on Call\">Doctor on Call<\/option>\r\n <option value=\"Palliative Care\">Palliative Care<\/option>\r\n <option value=\"Wound Care\">Wound Care<\/option>\r\n <option value=\"Physiotherapy at Home\">Physiotherapy at Home<\/option>\r\n <option value=\"Lab Test at Home\">Lab Test at Home<\/option>\r\n <option value=\"Post-operative Care\">Post-operative Care<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaMessage\">Message (Optional)<\/label>\r\n <textarea class=\"form-textarea\" id=\"ctaMessage\" placeholder=\"Brief description of your needs...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"form-submit\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n Send via WhatsApp\r\n <\/button>\r\n\r\n <\/form>\r\n\r\n <div class=\"form-footer\">\r\n <i class=\"fa-solid fa-lock\"><\/i>\r\n Your details are secure & sent directly to our care team\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Scroll reveal\r\nconst ctaEls = document.querySelectorAll('.cta-animate');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('cta-visible');\r\n obs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n ctaEls.forEach(el => obs.observe(el));\r\n} else {\r\n ctaEls.forEach(el => el.classList.add('cta-visible'));\r\n}\r\n\r\n\/\/ WhatsApp form handler\r\nfunction sendToWhatsApp(e) {\r\n e.preventDefault();\r\n\r\n const name = document.getElementById('ctaName').value.trim();\r\n const phone = document.getElementById('ctaPhone').value.trim();\r\n const email = document.getElementById('ctaEmail').value.trim();\r\n const service = document.getElementById('ctaService').value;\r\n const message = document.getElementById('ctaMessage').value.trim();\r\n\r\n \/\/ Replace with your actual WhatsApp number (no + or spaces)\r\n const whatsappNumber = '971501234567';\r\n\r\n let text = `\ud83c\udfe5 *New Home Care Inquiry*\\n\\n`;\r\n text += `\ud83d\udc64 *Name:* ${name}\\n`;\r\n text += `\ud83d\udcf1 *Phone:* ${phone}\\n`;\r\n text += `\ud83d\udce7 *Email:* ${email}\\n`;\r\n text += `\ud83e\ude7a *Service:* ${service}\\n`;\r\n\r\n if (message) {\r\n text += `\ud83d\udcac *Message:* ${message}\\n`;\r\n }\r\n\r\n text += `\\n\ud83d\udccd *Source:* Bionix On Call Website`;\r\n\r\n const encoded = encodeURIComponent(text);\r\n const url = `https:\/\/wa.me\/${whatsappNumber}?text=${encoded}`;\r\n\r\n window.open(url, '_blank');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0a2658 e-con-full e-flex e-con e-parent\" data-id=\"e0a2658\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba497b7 elementor-widget elementor-widget-html\" data-id=\"ba497b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>FAQ Section<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--white);\r\n}\r\n\r\n.faq-section{\r\n padding:90px 20px;\r\n background:var(--white);\r\n}\r\n\r\n.faq-container{\r\n max-width:780px;\r\n margin:auto;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.faq-header{\r\n text-align:center;\r\n margin-bottom:54px;\r\n}\r\n\r\n.faq-header h2{\r\n font-size:42px;\r\n font-weight:800;\r\n letter-spacing:-1.2px;\r\n line-height:1.1;\r\n color:var(--text);\r\n margin-bottom:14px;\r\n}\r\n\r\n.faq-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.faq-header p{\r\n font-size:15px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:480px;\r\n margin:0 auto;\r\n}\r\n\r\n\/* ===== FAQ LIST ===== *\/\r\n\r\n.faq-list{\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n}\r\n\r\n\/* ===== FAQ ITEM ===== *\/\r\n\r\n.faq-item{\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:20px;\r\n overflow:hidden;\r\n box-shadow:0 8px 30px rgba(91,91,91,0.05), 0 2px 8px rgba(0,0,0,0.02);\r\n transition:all .45s cubic-bezier(0.19,1,0.22,1);\r\n position:relative;\r\n}\r\n\r\n.faq-item:hover{\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 40px rgba(176,143,109,0.1), 0 4px 12px rgba(0,0,0,0.03);\r\n border-color:rgba(176,143,109,0.16);\r\n}\r\n\r\n.faq-item.active{\r\n border-color:rgba(176,143,109,0.2);\r\n box-shadow:0 16px 48px rgba(176,143,109,0.12), 0 4px 14px rgba(0,0,0,0.03);\r\n background:var(--white);\r\n}\r\n\r\n\/* Left accent line *\/\r\n\r\n.faq-item::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:4px;\r\n height:0;\r\n background:linear-gradient(180deg, var(--neutral), var(--light), var(--neutral-light));\r\n border-radius:0 4px 4px 0;\r\n transition:height .5s cubic-bezier(0.19,1,0.22,1);\r\n z-index:3;\r\n}\r\n\r\n.faq-item.active::before{\r\n height:100%;\r\n}\r\n\r\n\/* ===== QUESTION ===== *\/\r\n\r\n.faq-question{\r\n padding:22px 24px;\r\n display:flex;\r\n align-items:center;\r\n gap:16px;\r\n cursor:pointer;\r\n user-select:none;\r\n transition:all .35s ease;\r\n}\r\n\r\n.faq-question:hover{\r\n background:rgba(176,143,109,0.03);\r\n}\r\n\r\n.faq-num{\r\n width:38px;\r\n height:38px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.08) 0%, rgba(219,203,182,0.08) 100%);\r\n border:1px solid rgba(176,143,109,0.1);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:13px;\r\n font-weight:700;\r\n color:var(--neutral);\r\n flex-shrink:0;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-item.active .faq-num{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border-color:transparent;\r\n box-shadow:0 6px 16px rgba(176,143,109,0.25);\r\n transform:scale(1.05);\r\n}\r\n\r\n.faq-q-text{\r\n flex:1;\r\n font-size:16.5px;\r\n font-weight:600;\r\n color:var(--text);\r\n line-height:1.4;\r\n transition:color .35s ease;\r\n}\r\n\r\n.faq-item.active .faq-q-text{\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Toggle button *\/\r\n\r\n.faq-toggle{\r\n width:40px;\r\n height:40px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.06) 0%, rgba(219,203,182,0.06) 100%);\r\n border:1px solid rgba(176,143,109,0.1);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex-shrink:0;\r\n position:relative;\r\n transition:all .45s cubic-bezier(0.19,1,0.22,1);\r\n cursor:pointer;\r\n}\r\n\r\n.faq-toggle::before,\r\n.faq-toggle::after{\r\n content:\"\";\r\n position:absolute;\r\n background:var(--neutral);\r\n border-radius:2px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-toggle::before{\r\n width:14px;\r\n height:2px;\r\n}\r\n\r\n.faq-toggle::after{\r\n width:2px;\r\n height:14px;\r\n}\r\n\r\n.faq-item.active .faq-toggle{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n border-color:transparent;\r\n box-shadow:0 6px 16px rgba(176,143,109,0.25);\r\n transform:rotate(45deg);\r\n}\r\n\r\n.faq-item.active .faq-toggle::before,\r\n.faq-item.active .faq-toggle::after{\r\n background:var(--white);\r\n}\r\n\r\n.faq-question:hover .faq-toggle{\r\n background:linear-gradient(135deg, rgba(176,143,109,0.12) 0%, rgba(219,203,182,0.12) 100%);\r\n border-color:rgba(176,143,109,0.18);\r\n transform:scale(1.06);\r\n}\r\n\r\n.faq-item.active .faq-question:hover .faq-toggle{\r\n transform:rotate(45deg) scale(1.06);\r\n}\r\n\r\n\/* ===== ANSWER ===== *\/\r\n\r\n.faq-answer{\r\n max-height:0;\r\n overflow:hidden;\r\n transition:max-height .5s cubic-bezier(0.19,1,0.22,1), padding .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-answer-inner{\r\n padding:0 24px 0 78px;\r\n opacity:0;\r\n transform:translateY(-10px);\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1) .1s;\r\n}\r\n\r\n.faq-item.active .faq-answer{\r\n max-height:300px;\r\n}\r\n\r\n.faq-item.active .faq-answer-inner{\r\n padding:0 24px 24px 78px;\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.faq-answer-inner p{\r\n font-size:14.5px;\r\n line-height:1.75;\r\n color:var(--muted);\r\n}\r\n\r\n.faq-answer-divider{\r\n width:40px;\r\n height:2px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n border-radius:2px;\r\n margin-bottom:12px;\r\n transform:scaleX(0);\r\n transform-origin:left;\r\n transition:transform .5s cubic-bezier(0.19,1,0.22,1) .15s;\r\n}\r\n\r\n.faq-item.active .faq-answer-divider{\r\n transform:scaleX(1);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:600px){\r\n .faq-section{\r\n padding:56px 12px;\r\n }\r\n\r\n .faq-header h2{\r\n font-size:28px;\r\n letter-spacing:-0.8px;\r\n }\r\n\r\n .faq-header p{\r\n font-size:14px;\r\n }\r\n\r\n .faq-list{\r\n gap:12px;\r\n }\r\n\r\n .faq-item{\r\n border-radius:16px;\r\n }\r\n\r\n .faq-question{\r\n padding:18px 18px;\r\n gap:12px;\r\n }\r\n\r\n .faq-num{\r\n width:34px;\r\n height:34px;\r\n border-radius:10px;\r\n font-size:12px;\r\n }\r\n\r\n .faq-q-text{\r\n font-size:14.5px;\r\n }\r\n\r\n .faq-toggle{\r\n width:36px;\r\n height:36px;\r\n border-radius:10px;\r\n }\r\n\r\n .faq-toggle::before{ width:12px; }\r\n .faq-toggle::after{ height:12px; }\r\n\r\n .faq-item.active .faq-answer-inner{\r\n padding:0 18px 20px 64px;\r\n }\r\n\r\n .faq-answer-inner{\r\n padding:0 18px 0 64px;\r\n }\r\n\r\n .faq-answer-inner p{\r\n font-size:13.5px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .faq-header h2{\r\n font-size:25px;\r\n }\r\n\r\n .faq-question{\r\n padding:16px 14px;\r\n gap:10px;\r\n }\r\n\r\n .faq-num{\r\n width:30px;\r\n height:30px;\r\n font-size:11px;\r\n border-radius:8px;\r\n }\r\n\r\n .faq-q-text{\r\n font-size:14px;\r\n }\r\n\r\n .faq-toggle{\r\n width:32px;\r\n height:32px;\r\n }\r\n\r\n .faq-item.active .faq-answer-inner{\r\n padding:0 14px 18px 54px;\r\n }\r\n\r\n .faq-answer-inner{\r\n padding:0 14px 0 54px;\r\n }\r\n\r\n .faq-answer-inner p{\r\n font-size:13px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"faq-section\">\r\n <div class=\"faq-container\">\r\n\r\n <div class=\"faq-header\">\r\n <h2>Frequently Asked <span>Questions<\/span><\/h2>\r\n <p>Find answers to common questions about our home healthcare services across Dubai.<\/p>\r\n <\/div>\r\n\r\n <div class=\"faq-list\">\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">01<\/div>\r\n <div class=\"faq-q-text\">How do I book a doctor at home?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>You can easily book a doctor visit at home through our website or by contacting our support team. Our doctors are available across Dubai for consultations, check-ups, and ongoing treatment plans.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">02<\/div>\r\n <div class=\"faq-q-text\">Do you provide 24\/7 nursing staff?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes, our professional nurses are available 24\/7 for home healthcare, medication administration, wound care, and continuous patient monitoring throughout Dubai.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">03<\/div>\r\n <div class=\"faq-q-text\">Is home healthcare safe?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>All our healthcare professionals are DHA-licensed and continuously trained to provide safe, reliable, and hygienic home medical services following the highest standards.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">04<\/div>\r\n <div class=\"faq-q-text\">Do you offer elderly care services?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes. Our elderly care service includes daily assistance, physiotherapy, medical supervision, companionship, and personalized care plans designed for senior wellbeing.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">05<\/div>\r\n <div class=\"faq-q-text\">Can I book lab tests at home?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes. We provide home sample collection services for diagnostic lab tests with quick and reliable reports delivered digitally to your email or app dashboard.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">06<\/div>\r\n <div class=\"faq-q-text\">What areas in Dubai do you cover?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>We provide home healthcare services across all major areas in Dubai including Downtown, Marina, JBR, Business Bay, Palm Jumeirah, and surrounding communities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst faqItems = document.querySelectorAll('.faq-item');\r\n\r\nfaqItems.forEach(item => {\r\n item.querySelector('.faq-question').addEventListener('click', () => {\r\n const wasActive = item.classList.contains('active');\r\n faqItems.forEach(el => el.classList.remove('active'));\r\n if (!wasActive) item.classList.add('active');\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba420f6 e-con-full e-flex e-con e-parent\" data-id=\"ba420f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d52f09 elementor-widget elementor-widget-html\" data-id=\"8d52f09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Footer \u2014 Bionix On Call<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* \u2500\u2500 Matches header CSS variables exactly \u2500\u2500 *\/\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.site-footer{\r\n background:#fff;\r\n color:var(--dark);\r\n padding-top:80px;\r\n border-top:1px solid rgba(176,143,109,.15);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Subtle warm background texture \u2014 mirrors the hero's radial glow *\/\r\n.site-footer::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-120px;\r\n right:-160px;\r\n width:480px;\r\n height:480px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,.06) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n.site-footer::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-80px;\r\n left:-100px;\r\n width:340px;\r\n height:340px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,.07) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n\r\n.footer-container{\r\n position:relative;\r\n max-width:1200px;\r\n margin:auto;\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr 1fr;\r\n gap:48px;\r\n padding:0 40px;\r\n z-index:1;\r\n}\r\n\r\n\/* \u2500\u2500 COLUMN 1: About \u2500\u2500 *\/\r\n.footer-logo{\r\n width:150px;\r\n margin-bottom:22px;\r\n display:block;\r\n}\r\n\r\n.footer-about p{\r\n line-height:1.75;\r\n font-size:15px;\r\n font-weight:400;\r\n color:var(--dark);\r\n opacity:.85;\r\n margin-bottom:28px;\r\n max-width:320px;\r\n}\r\n\r\n\/* Social icons \u2014 match header's circular icon style *\/\r\n.footer-social{\r\n display:flex;\r\n gap:10px;\r\n}\r\n\r\n.footer-social a{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n width:38px;\r\n height:38px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,.1);\r\n border:1.5px solid rgba(176,143,109,.2);\r\n color:var(--neutral);\r\n text-decoration:none;\r\n font-size:15px;\r\n transition:.35s var(--ease);\r\n}\r\n\r\n.footer-social a:hover{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n border-color:transparent;\r\n color:#fff;\r\n transform:translateY(-3px);\r\n box-shadow:0 8px 20px rgba(176,143,109,.28);\r\n}\r\n\r\n\/* \u2500\u2500 Column headings \u2014 mirror eyebrow style \u2500\u2500 *\/\r\n.footer-col h4{\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:22px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n}\r\n\r\n\/* Small decorative dash before heading *\/\r\n.footer-col h4::before{\r\n content:\"\";\r\n display:inline-block;\r\n width:18px;\r\n height:2px;\r\n border-radius:999px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n}\r\n\r\n\/* \u2500\u2500 Links \u2500\u2500 *\/\r\n.footer-col ul{\r\n list-style:none;\r\n padding:0;\r\n}\r\n\r\n.footer-col ul li{\r\n margin-bottom:11px;\r\n}\r\n\r\n.footer-col ul li a{\r\n color:var(--dark);\r\n text-decoration:none;\r\n font-size:15px;\r\n font-weight:500;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:7px;\r\n transition:.3s var(--ease);\r\n opacity:.8;\r\n}\r\n\r\n.footer-col ul li a::before{\r\n content:\"\";\r\n display:inline-block;\r\n width:5px;\r\n height:5px;\r\n border-radius:50%;\r\n background:var(--light);\r\n flex-shrink:0;\r\n transition:.3s var(--ease);\r\n}\r\n\r\n.footer-col ul li a:hover{\r\n color:var(--neutral);\r\n opacity:1;\r\n transform:translateX(4px);\r\n}\r\n\r\n.footer-col ul li a:hover::before{\r\n background:var(--neutral);\r\n transform:scale(1.4);\r\n}\r\n\r\n\/* \u2500\u2500 Contact list \u2500\u2500 *\/\r\n.footer-contact{\r\n list-style:none;\r\n padding:0;\r\n}\r\n\r\n.footer-contact li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:12px;\r\n font-size:15px;\r\n font-weight:500;\r\n color:var(--dark);\r\n opacity:.85;\r\n margin-bottom:14px;\r\n line-height:1.5;\r\n}\r\n\r\n.footer-contact li i{\r\n width:32px;\r\n height:32px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,.1);\r\n border:1px solid rgba(176,143,109,.18);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:12px;\r\n color:var(--neutral);\r\n flex-shrink:0;\r\n margin-top:1px;\r\n}\r\n\r\n\/* \u2500\u2500 Bottom bar \u2500\u2500 *\/\r\n.footer-bottom{\r\n position:relative;\r\n z-index:1;\r\n border-top:1px solid rgba(176,143,109,.12);\r\n margin-top:60px;\r\n padding:22px 40px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n flex-wrap:wrap;\r\n gap:12px;\r\n}\r\n\r\n.footer-bottom p{\r\n font-size:14px;\r\n font-weight:500;\r\n color:var(--dark);\r\n opacity:.6;\r\n}\r\n\r\n\/* Trust badge \u2014 mirrors the header trust-tag pill *\/\r\n.footer-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:6px 16px 6px 8px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.08);\r\n border:1px solid rgba(176,143,109,.18);\r\n font-size:13px;\r\n font-weight:600;\r\n color:var(--dark);\r\n letter-spacing:.03em;\r\n}\r\n\r\n.footer-badge-dot{\r\n width:24px;\r\n height:24px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:#fff;\r\n font-size:10px;\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:1000px){\r\n .footer-container{\r\n grid-template-columns:1fr 1fr;\r\n gap:36px;\r\n padding:0 30px;\r\n }\r\n .footer-about p{max-width:100%}\r\n}\r\n\r\n@media(max-width:600px){\r\n .site-footer{padding-top:56px}\r\n\r\n .footer-container{\r\n grid-template-columns:1fr;\r\n gap:32px;\r\n padding:0 24px;\r\n text-align:center;\r\n }\r\n\r\n .footer-logo{margin:0 auto 20px}\r\n .footer-about p{max-width:100%}\r\n\r\n .footer-social{justify-content:center}\r\n\r\n .footer-col h4{justify-content:center}\r\n .footer-col h4::before{display:none}\r\n\r\n .footer-col ul li a{justify-content:center}\r\n .footer-col ul li a::before{display:none}\r\n\r\n .footer-contact li{justify-content:center}\r\n\r\n .footer-bottom{\r\n flex-direction:column;\r\n align-items:center;\r\n text-align:center;\r\n padding:18px 24px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<footer class=\"site-footer\">\r\n <div class=\"footer-container\">\r\n\r\n \r\n <div class=\"footer-col footer-about\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" class=\"footer-logo\" alt=\"Bionix On Call\">\r\n <p>\r\n Bionix On Call provides professional home healthcare services across Dubai. Our certified doctors, nurses and caregivers ensure compassionate care at your doorstep.\r\n <\/p>\r\n <div class=\"footer-social\">\r\n <a href=\"#\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"Twitter\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Quick Links<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Home<\/a><\/li>\r\n <li><a href=\"#\">About Us<\/a><\/li>\r\n <li><a href=\"#\">Services<\/a><\/li>\r\n <li><a href=\"#\">Doctor On Call<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Our Services<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Home Nursing<\/a><\/li>\r\n <li><a href=\"#\">Doctor Visit<\/a><\/li>\r\n <li><a href=\"#\">Elderly Care<\/a><\/li>\r\n <li><a href=\"#\">Physiotherapy<\/a><\/li>\r\n <li><a href=\"#\">Lab Test at Home<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Contact Info<\/h4>\r\n <ul class=\"footer-contact\">\r\n <li>\r\n <i class=\"fa-solid fa-location-dot\"><\/i>\r\n Dubai, United Arab Emirates\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-phone\"><\/i>\r\n +971 50 000 0000\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n info@bionixoncall.com\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-clock\"><\/i>\r\n 24\/7 Healthcare Support\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Bionix On Call. All Rights Reserved.<\/p>\r\n <div style=\"display:flex;gap:10px;flex-wrap:wrap;justify-content:center\">\r\n <span class=\"footer-badge\">\r\n <span class=\"footer-badge-dot\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/span>\r\n DHA Approved\r\n <\/span>\r\n <span class=\"footer-badge\">\r\n <span class=\"footer-badge-dot\"><i class=\"fa-solid fa-bolt\"><\/i><\/span>\r\n 30 Min Response\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bionix On Call \u2014 Header Home About Services IV Therapy Home Nursing Elderly Care Doctor on Call Palliative Care Wound […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":268,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Bionix On Call \u2014 Header<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\r\n\r\n :root {\r\n --neutral: #B08F6D;\r\n --neutral-dark: #8f6e50;\r\n --neutral-light: #c9aa8c;\r\n --bg: #ffffff;\r\n --text: #1e1b18;\r\n --muted: #7c7166;\r\n --border: rgba(176,143,109,0.14);\r\n --pill-bg: #faf7f4;\r\n --drop-bg: rgba(176,143,109,0.06);\r\n --shadow: 0 8px 40px rgba(30,27,24,0.07);\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: #f6f2ee;\r\n min-height: 300vh;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HEADER SHELL\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .site-header {\r\n position: fixed;\r\n inset: 0 0 auto 0;\r\n z-index: 900;\r\n background: rgba(255,255,255,0.97);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n border-bottom: 1px solid var(--border);\r\n box-shadow: 0 2px 20px rgba(30,27,24,0.04);\r\n transition: box-shadow .3s ease;\r\n }\r\n\r\n .site-header.scrolled {\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INNER LAYOUT \u2014 true 3-column grid\r\n Logo | Nav (centered) | Actions\r\n Each side column is equal width so\r\n nav is always mathematically centred.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-inner {\r\n max-width: 1380px;\r\n margin: 0 auto;\r\n height: 88px;\r\n padding: 0 40px;\r\n display: grid;\r\n grid-template-columns: 1fr auto 1fr;\r\n align-items: center;\r\n gap: 24px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LOGO \u2014 left column, left-aligned\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo {\r\n justify-self: start;\r\n display: flex;\r\n align-items: center;\r\n text-decoration: none;\r\n }\r\n\r\n .logo img {\r\n height: 68px;\r\n width: auto;\r\n display: block;\r\n object-fit: contain;\r\n transition: transform .3s ease;\r\n }\r\n\r\n .logo:hover img { transform: scale(1.03); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAV \u2014 middle column, perfectly centred\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .main-nav {\r\n display: flex;\r\n align-items: center;\r\n list-style: none;\r\n gap: 2px;\r\n justify-self: center; \/* centres within its grid cell *\/\r\n }\r\n\r\n .main-nav > li { position: relative; }\r\n\r\n .main-nav > li > a {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n padding: 8px 14px;\r\n \r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 14.5px;\r\n font-weight: 600;\r\n letter-spacing: -.01em;\r\n white-space: nowrap;\r\n transition: color .25s ease, background .25s ease;\r\n }\r\n\r\n .main-nav > li > a:hover,\r\n .main-nav > li > a.active {\r\n color: var(--neutral);\r\n background: var(--drop-bg);\r\n }\r\n\r\n .main-nav > li > a .chevron {\r\n font-size: 9px;\r\n color: var(--muted);\r\n transition: transform .28s ease, color .25s ease;\r\n }\r\n\r\n .main-nav > li:hover > a .chevron {\r\n transform: rotate(180deg);\r\n color: var(--neutral);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DROPDOWN\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .dropdown {\r\n position: absolute;\r\n top: calc(100% + 10px);\r\n left: 50%;\r\n transform: translateX(-50%) translateY(6px);\r\n min-width: 250px;\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n padding: 8px;\r\n list-style: none;\r\n box-shadow: 0 20px 50px rgba(30,27,24,0.10), 0 4px 12px rgba(0,0,0,0.03);\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n transition: opacity .28s ease, transform .28s cubic-bezier(.19,1,.22,1), visibility .28s;\r\n z-index: 200;\r\n }\r\n\r\n .dropdown::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -6px;\r\n left: 50%;\r\n transform: translateX(-50%) rotate(45deg);\r\n width: 12px; height: 12px;\r\n background: var(--bg);\r\n border-top: 1px solid var(--border);\r\n border-left: 1px solid var(--border);\r\n border-radius: 2px;\r\n }\r\n\r\n .main-nav > li:hover .dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n .hover-bridge {\r\n position: absolute;\r\n top: 100%;\r\n left: -10px; right: -10px;\r\n height: 12px;\r\n }\r\n\r\n .dropdown li + li { margin-top: 2px; }\r\n\r\n .dropdown li a {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 10px 14px;\r\n border-radius: 12px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 13.5px;\r\n font-weight: 500;\r\n transition: background .22s ease, color .22s ease, transform .22s ease;\r\n }\r\n\r\n .dropdown li a:hover {\r\n background: var(--drop-bg);\r\n color: var(--neutral);\r\n transform: translateX(3px);\r\n }\r\n\r\n .drop-icon {\r\n width: 34px; height: 34px;\r\n border-radius: 10px;\r\n background: rgba(176,143,109,0.10);\r\n display: grid;\r\n place-items: center;\r\n font-size: 13px;\r\n color: var(--neutral);\r\n flex-shrink: 0;\r\n transition: background .22s ease, transform .22s ease;\r\n }\r\n\r\n .dropdown li a:hover .drop-icon {\r\n background: rgba(176,143,109,0.18);\r\n transform: scale(1.06);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RIGHT ACTIONS \u2014 right column, right-aligned\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-actions {\r\n justify-self: end;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex-shrink: 0;\r\n min-width: 0;\r\n }\r\n\r\n .contact-pill {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 7px 16px 7px 7px;\r\n border-radius: 999px;\r\n background: var(--pill-bg);\r\n border: 1px solid var(--border);\r\n text-decoration: none;\r\n transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;\r\n }\r\n\r\n .contact-pill:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(176,143,109,0.14);\r\n border-color: rgba(176,143,109,0.24);\r\n }\r\n\r\n .pill-icon {\r\n width: 36px; height: 36px;\r\n border-radius: 50%;\r\n background: rgba(176,143,109,0.12);\r\n color: var(--neutral);\r\n display: grid;\r\n place-items: center;\r\n font-size: 14px;\r\n }\r\n\r\n .pill-text { line-height: 1.15; white-space: nowrap; }\r\n\r\n .pill-text small {\r\n display: block;\r\n font-size: 10px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: .8px;\r\n margin-bottom: 2px;\r\n white-space: nowrap;\r\n }\r\n\r\n .pill-text strong {\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: var(--text);\r\n white-space: nowrap;\r\n }\r\n\r\n .book-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 0 26px 0 6px;\r\n height: 52px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, var(--neutral-dark) 0%, var(--neutral) 50%, var(--neutral-light) 100%);\r\n color: #fff;\r\n font-size: 14.5px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n box-shadow: 0 6px 24px rgba(176,143,109,0.35), inset 0 1px 0 rgba(255,255,255,0.18);\r\n overflow: hidden;\r\n position: relative;\r\n letter-spacing: -.01em;\r\n transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease;\r\n }\r\n\r\n \/* Icon circle inside the button *\/\r\n .book-btn .btn-icon-wrap {\r\n width: 40px; height: 40px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.18);\r\n border: 1px solid rgba(255,255,255,0.22);\r\n display: grid;\r\n place-items: center;\r\n font-size: 15px;\r\n flex-shrink: 0;\r\n transition: background .3s ease, transform .35s cubic-bezier(.19,1,.22,1);\r\n }\r\n\r\n \/* Shimmer sweep *\/\r\n .book-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0; left: -120%;\r\n width: 60%; height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transition: left .6s ease;\r\n }\r\n\r\n .book-btn:hover::after { left: 140%; }\r\n\r\n .book-btn:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 14px 36px rgba(176,143,109,0.42), inset 0 1px 0 rgba(255,255,255,0.18);\r\n }\r\n\r\n .book-btn:hover .btn-icon-wrap {\r\n background: rgba(255,255,255,0.26);\r\n transform: rotate(8deg) scale(1.08);\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HAMBURGER (mobile only)\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n #nav-toggle { display: none; }\r\n\r\n .hamburger {\r\n display: none;\r\n width: 46px; height: 46px;\r\n border-radius: 12px;\r\n border: 1px solid var(--border);\r\n background: var(--pill-bg);\r\n cursor: pointer;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 5px;\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 910;\r\n transition: background .25s ease, border-color .25s ease;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 20px; height: 2px;\r\n border-radius: 6px;\r\n background: var(--neutral);\r\n transition: transform .35s cubic-bezier(.19,1,.22,1), opacity .25s ease;\r\n }\r\n\r\n .hamburger:hover { background: rgba(176,143,109,0.08); border-color: rgba(176,143,109,0.22); }\r\n\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }\r\n #nav-toggle:checked ~ .header-inner .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE OVERLAY\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .mobile-overlay {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(30,27,24,0.38);\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(3px);\r\n z-index: 905;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity .35s ease, visibility .35s;\r\n }\r\n\r\n #nav-toggle:checked ~ .mobile-overlay {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE DRAWER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .mobile-drawer {\r\n display: none;\r\n position: fixed;\r\n top: 0; right: -100%;\r\n width: 310px;\r\n max-width: 88vw;\r\n height: 100vh;\r\n height: 100dvh;\r\n background: var(--bg);\r\n z-index: 910;\r\n flex-direction: column;\r\n overflow-y: auto;\r\n box-shadow: -8px 0 40px rgba(0,0,0,0.10);\r\n transition: right .42s cubic-bezier(.19,1,.22,1);\r\n }\r\n\r\n #nav-toggle:checked ~ .mobile-drawer {\r\n right: 0;\r\n }\r\n\r\n .drawer-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 18px 20px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .drawer-head .logo img { height: 40px; }\r\n\r\n .drawer-close {\r\n width: 38px; height: 38px;\r\n border-radius: 10px;\r\n border: 1px solid var(--border);\r\n background: var(--pill-bg);\r\n display: grid;\r\n place-items: center;\r\n cursor: pointer;\r\n color: var(--muted);\r\n font-size: 15px;\r\n transition: background .25s ease, color .25s ease;\r\n }\r\n\r\n .drawer-close:hover { background: rgba(176,143,109,0.10); color: var(--neutral); }\r\n\r\n .drawer-nav {\r\n list-style: none;\r\n padding: 12px 14px;\r\n flex: 1;\r\n }\r\n\r\n .drawer-nav > li { border-bottom: 1px solid rgba(176,143,109,0.07); }\r\n .drawer-nav > li:last-child { border-bottom: none; }\r\n\r\n .drawer-nav > li > a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 15px 10px;\r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 15px;\r\n font-weight: 600;\r\n transition: color .22s ease, background .22s ease;\r\n }\r\n\r\n .drawer-nav > li > a:hover,\r\n .drawer-nav > li > a.active { color: var(--neutral); background: var(--drop-bg); }\r\n\r\n .drawer-nav > li > a .chevron {\r\n font-size: 9px;\r\n color: var(--muted);\r\n transition: transform .28s ease, color .28s ease;\r\n }\r\n\r\n .drawer-nav > li.open > a .chevron {\r\n transform: rotate(180deg);\r\n color: var(--neutral);\r\n }\r\n\r\n .drawer-sub {\r\n list-style: none;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height .38s cubic-bezier(.19,1,.22,1);\r\n padding: 0 4px;\r\n }\r\n\r\n .drawer-nav > li.open .drawer-sub { max-height: 700px; }\r\n\r\n .drawer-sub li a {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 9px 12px;\r\n border-radius: 10px;\r\n text-decoration: none;\r\n color: var(--text);\r\n font-size: 13.5px;\r\n font-weight: 500;\r\n margin-bottom: 2px;\r\n transition: background .22s ease, color .22s ease;\r\n }\r\n\r\n .drawer-sub li a:hover { background: var(--drop-bg); color: var(--neutral); }\r\n\r\n .drawer-sub .drop-icon {\r\n width: 30px; height: 30px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n }\r\n\r\n .drawer-actions {\r\n padding: 16px 18px 32px;\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .drawer-actions .contact-pill { width: 100%; justify-content: flex-start; }\r\n .drawer-actions .book-btn {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 0 28px 0 6px;\r\n height: 54px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SPACER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .header-spacer { height: 88px; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* hide contact pill below 1200 \u2014 keep grid but collapse pill *\/\r\n @media (max-width: 1200px) {\r\n .header-inner { padding: 0 28px; }\r\n .contact-pill { display: none; }\r\n .main-nav > li > a { font-size: 14px; padding: 8px 11px; }\r\n }\r\n\r\n \/* below 960 \u2192 drawer mode \u2014 switch back to flex for logo + hamburger *\/\r\n @media (max-width: 960px) {\r\n .header-inner {\r\n padding: 0 20px;\r\n height: 72px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .header-spacer { height: 72px; }\r\n .logo { justify-self: unset; }\r\n .logo img { height: 52px; }\r\n\r\n .main-nav { display: none; }\r\n .header-actions { display: none; justify-self: unset; }\r\n\r\n .hamburger { display: flex; }\r\n .mobile-overlay { display: block; }\r\n .mobile-drawer { display: flex; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header-inner { padding: 0 14px; height: 62px; }\r\n .header-spacer { height: 62px; }\r\n .logo img { height: 44px; }\r\n .hamburger { width: 42px; height: 42px; }\r\n .mobile-drawer { width: 100%; max-width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<input type=\"checkbox\" id=\"nav-toggle\" style=\"display:none\">\r\n\r\n<header class=\"site-header\" id=\"siteHeader\">\r\n <div class=\"header-inner\">\r\n\r\n \r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" alt=\"Bionix On Call\">\r\n <\/a>\r\n\r\n \r\n <ul class=\"main-nav\">\r\n <li><a href=\"https:\/\/bionixoncall.justeasyshop.com\/\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"https:\/\/bionixoncall.justeasyshop.com\/index.php\/about-us\/\">About<\/a><\/li>\r\n <li>\r\n <a href=\"https:\/\/bionixoncall.justeasyshop.com\/index.php\/services\/\" class=\"has-dropdown\">\r\n Services <i class=\"fa-solid fa-chevron-down chevron\"><\/i>\r\n <\/a>\r\n <div class=\"hover-bridge\"><\/div>\r\n <ul class=\"dropdown\">\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-syringe\"><\/i><\/span>IV Therapy<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-user-nurse\"><\/i><\/span>Home Nursing<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-person-cane\"><\/i><\/span>Elderly Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-stethoscope\"><\/i><\/span>Doctor on Call<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-heart-pulse\"><\/i><\/span>Palliative Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-bandage\"><\/i><\/span>Wound Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-dumbbell\"><\/i><\/span>Physiotherapy at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-flask-vial\"><\/i><\/span>Lab Test at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-hospital\"><\/i><\/span>Post-operative Care<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\">Why Choose Us<\/a><\/li>\r\n <li><a href=\"#\">Doctors<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n \r\n <div class=\"header-actions\">\r\n <a href=\"tel:+971501234567\" class=\"contact-pill\">\r\n <div class=\"pill-icon\"><i class=\"fa-solid fa-phone-volume\"><\/i><\/div>\r\n <div class=\"pill-text\">\r\n <small>Call Us 24\/7<\/small>\r\n <strong>+971 50 123 4567<\/strong>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"book-btn\">\r\n <span class=\"btn-icon-wrap\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/span>\r\n Book Now\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <label for=\"nav-toggle\" class=\"hamburger\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/label>\r\n\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<label for=\"nav-toggle\" class=\"mobile-overlay\"><\/label>\r\n\r\n\r\n<div class=\"mobile-drawer\">\r\n <div class=\"drawer-head\">\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" alt=\"Bionix On Call\">\r\n <\/a>\r\n <label for=\"nav-toggle\" class=\"drawer-close\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/label>\r\n <\/div>\r\n\r\n <ul class=\"drawer-nav\">\r\n <li><a href=\"#\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#\">About<\/a><\/li>\r\n <li>\r\n <a href=\"#\" class=\"toggle-sub\">\r\n Services <i class=\"fa-solid fa-chevron-down chevron\"><\/i>\r\n <\/a>\r\n <ul class=\"drawer-sub\">\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-syringe\"><\/i><\/span>IV Therapy<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-user-nurse\"><\/i><\/span>Home Nursing<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-person-cane\"><\/i><\/span>Elderly Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-stethoscope\"><\/i><\/span>Doctor on Call<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-heart-pulse\"><\/i><\/span>Palliative Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-bandage\"><\/i><\/span>Wound Care<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-dumbbell\"><\/i><\/span>Physiotherapy at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-flask-vial\"><\/i><\/span>Lab Test at Home<\/a><\/li>\r\n <li><a href=\"#\"><span class=\"drop-icon\"><i class=\"fa-solid fa-hospital\"><\/i><\/span>Post-operative Care<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\">Why Choose Us<\/a><\/li>\r\n <li><a href=\"#\">Doctors<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n\r\n <div class=\"drawer-actions\">\r\n <a href=\"tel:+971501234567\" class=\"contact-pill\">\r\n <div class=\"pill-icon\"><i class=\"fa-solid fa-phone-volume\"><\/i><\/div>\r\n <div class=\"pill-text\">\r\n <small>Call Us 24\/7<\/small>\r\n <strong>+971 50 123 4567<\/strong>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"book-btn\">\r\n <span class=\"btn-icon-wrap\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/span>\r\n Book Now\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"header-spacer\"><\/div>\r\n\r\n<script>\r\n const header = document.getElementById('siteHeader');\r\n window.addEventListener('scroll', () => {\r\n header.classList.toggle('scrolled', window.scrollY > 20);\r\n }, { passive: true });\r\n\r\n document.querySelectorAll('.drawer-nav .toggle-sub').forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const li = this.closest('li');\r\n const isOpen = li.classList.contains('open');\r\n document.querySelectorAll('.drawer-nav > li').forEach(l => l.classList.remove('open'));\r\n if (!isOpen) li.classList.add('open');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a8fb02e e-con-full e-flex e-con e-parent\" data-id=\"a8fb02e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71f00d9 elementor-widget elementor-widget-html\" data-id=\"71f00d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Bionix On Call \u2014 Premium Home Care Dubai<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\nhtml{height:100%}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n overflow-x:hidden;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\r\n\/* FIX 1: min-height instead of height:100vh \u2014 sections below are now visible *\/\r\n.hero-section{\r\n min-height:100vh;\r\n padding:14px;\r\n display:flex;\r\n}\r\n\r\n.hero-shell{\r\n position:relative;\r\n width:100%;\r\n min-height:calc(100vh - 28px);\r\n border-radius:22px;\r\n overflow:hidden;\r\n isolation:isolate;\r\n display:flex;\r\n flex-direction:column;\r\n}\r\n\r\n.hero-shell::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:url('https:\/\/images.unsplash.com\/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=2000&q=80') center center\/cover no-repeat;\r\n z-index:0;\r\n animation:bgZoom 22s ease-in-out infinite alternate;\r\n}\r\n\r\n.hero-shell::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(46,42,38,.95) 0%, rgba(56,52,48,.92) 28%, rgba(66,62,58,.84) 48%, rgba(80,76,72,.72) 68%, rgba(91,91,91,.62) 100%),\r\n radial-gradient(ellipse at 12% 50%, rgba(176,143,109,.12) 0%, transparent 55%);\r\n z-index:1;\r\n}\r\n\r\n.deco-circle{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(219,203,182,.1);\r\n pointer-events:none;\r\n z-index:2;\r\n}\r\n.deco-1{width:420px;height:420px;top:-110px;right:-100px;animation:fadeIn 1.2s var(--ease) .6s both, spinSlow 45s linear infinite}\r\n.deco-2{width:280px;height:280px;bottom:-70px;left:-50px;border-color:rgba(176,143,109,.08);animation:fadeIn 1.2s var(--ease) .8s both, spinSlow 35s linear infinite reverse}\r\n.deco-3{width:60px;height:60px;top:22%;left:44%;border-color:rgba(219,203,182,.06);animation:fadeIn 1s var(--ease) 1s both, floatY 6s ease-in-out infinite}\r\n\r\n.deco-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(219,203,182,.16);z-index:2;pointer-events:none}\r\n.dot-1{top:16%;left:36%;animation:fadeIn .8s var(--ease) 1.3s both, floatY 5s ease-in-out infinite}\r\n.dot-2{top:70%;left:48%;animation:fadeIn .8s var(--ease) 1.5s both, floatY 4s ease-in-out .5s infinite}\r\n.dot-3{top:28%;right:30%;animation:fadeIn .8s var(--ease) 1.7s both, floatY 6s ease-in-out 1s infinite}\r\n\r\n\/* \u2500\u2500\u2500 GRID \u2500\u2500\u2500 *\/\r\n.hero-grid{\r\n position:relative;\r\n z-index:3;\r\n flex:1;\r\n display:grid;\r\n grid-template-columns:1.1fr .9fr;\r\n align-items:center;\r\n gap:32px;\r\n padding:60px 64px;\r\n min-height:calc(100vh - 28px);\r\n}\r\n\r\n\/* \u2500\u2500\u2500 LEFT \u2500\u2500\u2500 *\/\r\n.hero-left{\r\n max-width:600px;\r\n display:flex;\r\n flex-direction:column;\r\n}\r\n\r\n.eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:8px 20px 8px 10px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.14);\r\n border:1px solid rgba(176,143,109,.22);\r\n backdrop-filter:blur(10px);\r\n margin-bottom:28px;\r\n width:fit-content;\r\n opacity:0;\r\n animation:slideUp .8s var(--ease) .2s both;\r\n}\r\n\r\n.eyebrow-dot{\r\n width:36px;height:36px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid;place-items:center;\r\n color:white;font-size:14px;\r\n animation:pulse 2.5s ease-in-out 2s infinite;\r\n}\r\n\r\n.eyebrow span{\r\n font-size:15px;\r\n font-weight:600;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n color:var(--light);\r\n}\r\n\r\n\/* FIX 2: Large font sizes \u2014 previous clamp mins were too small *\/\r\n.hero-title{\r\n font-size:clamp(52px, 6vw, 88px);\r\n font-weight:800;\r\n line-height:1.02;\r\n letter-spacing:-.04em;\r\n color:var(--pop);\r\n margin-bottom:20px;\r\n}\r\n\r\n.hero-title .line{display:block;overflow:hidden}\r\n.hero-title .line span{display:inline-block;opacity:0;animation:wordUp 1s var(--ease) both}\r\n.hero-title .line:nth-child(1) span{animation-delay:.35s}\r\n.hero-title .line:nth-child(2) span{animation-delay:.5s}\r\n.hero-title .line:nth-child(3) span{animation-delay:.65s}\r\n.hero-title .accent{color:var(--light)}\r\n\r\n.hero-sub{\r\n font-size:clamp(18px, 1.8vw, 24px);\r\n font-weight:400;\r\n color:rgba(249,249,249,.65);\r\n margin-bottom:44px;\r\n line-height:1.6;\r\n max-width:500px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) .8s both;\r\n}\r\n\r\n.cta-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n align-items:center;\r\n gap:16px;\r\n margin-bottom:36px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) .95s both;\r\n}\r\n\r\n.btn-main{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:20px 40px;\r\n border-radius:999px;\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:white;\r\n font-size:17px;\r\n font-weight:700;\r\n text-decoration:none;\r\n box-shadow:0 14px 36px rgba(176,143,109,.3);\r\n transition:.4s var(--ease);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n.btn-main::before{\r\n content:\"\";position:absolute;inset:0;\r\n background:linear-gradient(135deg, transparent, rgba(255,255,255,.15), transparent);\r\n transform:translateX(-100%);\r\n transition:.6s var(--ease);\r\n}\r\n.btn-main:hover::before{transform:translateX(100%)}\r\n.btn-main:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 48px rgba(176,143,109,.4)}\r\n\r\n.btn-glass{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:20px 32px;\r\n border-radius:999px;\r\n background:rgba(255,255,255,.06);\r\n backdrop-filter:blur(10px);\r\n border:1.5px solid rgba(219,203,182,.18);\r\n color:var(--pop);\r\n font-size:17px;\r\n font-weight:600;\r\n text-decoration:none;\r\n transition:.4s var(--ease);\r\n}\r\n.btn-glass:hover{background:rgba(219,203,182,.12);border-color:rgba(219,203,182,.35);transform:translateY(-3px)}\r\n\r\n.contact-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n align-items:center;\r\n gap:20px;\r\n opacity:0;\r\n animation:slideUp .9s var(--ease) 1.1s both;\r\n}\r\n\r\n.contact-link{\r\n display:flex;align-items:center;gap:8px;\r\n text-decoration:none;color:var(--light);\r\n font-size:15px;font-weight:600;\r\n transition:.3s var(--ease);\r\n}\r\n.contact-link:hover{color:var(--pop);transform:translateX(3px)}\r\n.contact-link i{\r\n width:32px;height:32px;border-radius:50%;\r\n background:rgba(176,143,109,.18);\r\n display:grid;place-items:center;\r\n font-size:13px;color:var(--light);\r\n}\r\n\r\n.sep{width:4px;height:4px;border-radius:50%;background:rgba(219,203,182,.25)}\r\n\r\n.trust-tag{\r\n display:flex;align-items:center;gap:6px;\r\n font-size:14px;font-weight:500;\r\n color:rgba(249,249,249,.5);\r\n}\r\n.trust-tag i{color:var(--neutral);font-size:12px}\r\n\r\n\/* \u2500\u2500\u2500 RIGHT IMAGE \u2500\u2500\u2500 *\/\r\n.hero-right{\r\n position:relative;\r\n height:100%;\r\n min-height:520px;\r\n display:flex;\r\n align-items:stretch;\r\n justify-content:center;\r\n}\r\n\r\n.hero-person{\r\n position:relative;\r\n height:100%;\r\n width:100%;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:center;\r\n}\r\n\r\n\/* FIX 3: Image is now large and prominent *\/\r\n.hero-person img{\r\n position:absolute;\r\n bottom:-8%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n height:120%;\r\n width:auto;\r\n max-width:120%;\r\n object-fit:contain;\r\n object-position:bottom center;\r\n display:block;\r\n filter:drop-shadow(0 20px 60px rgba(0,0,0,.4));\r\n opacity:0;\r\n animation:personIn 1.2s var(--ease) .5s both;\r\n z-index:2;\r\n}\r\n\r\n.person-glow{\r\n position:absolute;bottom:5%;left:50%;\r\n transform:translateX(-50%);\r\n width:80%;height:60%;\r\n background:radial-gradient(ellipse, rgba(176,143,109,.14) 0%, transparent 70%);\r\n z-index:0;pointer-events:none;\r\n animation:fadeIn 1.5s var(--ease) 1s both;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 FLOATING CARDS \u2500\u2500\u2500 *\/\r\n.float-card{\r\n position:absolute;\r\n background:rgba(40,38,35,.55);\r\n backdrop-filter:blur(18px);\r\n -webkit-backdrop-filter:blur(18px);\r\n border:1px solid rgba(219,203,182,.1);\r\n border-radius:16px;\r\n padding:14px 16px;\r\n z-index:5;\r\n box-shadow:0 14px 42px rgba(0,0,0,.25);\r\n}\r\n\r\n.card-rating{bottom:10%;right:-8px;min-width:190px;opacity:0;animation:slideLeft .9s var(--ease) 1.2s both, bob 6s ease-in-out 2.5s infinite}\r\n.card-rating-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}\r\n.card-rating-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg, var(--neutral), var(--light));display:grid;place-items:center;color:white;font-size:15px;animation:pulse 3s ease-in-out 2s infinite}\r\n.card-rating-score{font-size:26px;font-weight:800;color:var(--pop);line-height:1}\r\n.card-rating-stars{display:flex;gap:2px;margin-bottom:3px}\r\n.card-rating-stars i{font-size:10px;color:var(--neutral);opacity:0}\r\n.card-rating-stars i:nth-child(1){animation:starPop .4s var(--ease) 1.6s both}\r\n.card-rating-stars i:nth-child(2){animation:starPop .4s var(--ease) 1.7s both}\r\n.card-rating-stars i:nth-child(3){animation:starPop .4s var(--ease) 1.8s both}\r\n.card-rating-stars i:nth-child(4){animation:starPop .4s var(--ease) 1.9s both}\r\n.card-rating-stars i:nth-child(5){animation:starPop .4s var(--ease) 2s both}\r\n.card-rating-label{font-size:11px;color:rgba(249,249,249,.5);font-weight:500}\r\n\r\n.card-stat{top:8%;left:-16px;opacity:0;animation:slideRight .9s var(--ease) 1.35s both, bob 5.5s ease-in-out 2.8s infinite reverse}\r\n.card-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:rgba(249,249,249,.5);margin-bottom:5px}\r\n.card-stat-value{display:flex;align-items:flex-end;gap:3px;margin-bottom:7px}\r\n.card-stat-value strong{font-size:30px;font-weight:800;color:var(--pop);line-height:1}\r\n.card-stat-value span{font-size:15px;font-weight:700;color:var(--light);margin-bottom:2px}\r\n.card-stat-bar{width:100px;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}\r\n.card-stat-bar::after{content:\"\";display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg, var(--neutral), var(--light));animation:barFill 1.6s ease 2s forwards}\r\n\r\n.card-badge{top:40%;right:-14px;display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;opacity:0;animation:slideLeft .9s var(--ease) 1.5s both, floatY 7s ease-in-out 3s infinite}\r\n.card-badge-icon{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg, var(--neutral), var(--light));display:grid;place-items:center;color:white;font-size:12px}\r\n.card-badge span{font-size:12px;font-weight:700;color:var(--pop);white-space:nowrap}\r\n\r\n\/* \u2500\u2500\u2500 SCROLL \u2500\u2500\u2500 *\/\r\n.scroll-hint{\r\n position:absolute;bottom:20px;left:50%;transform:translateX(-50%);\r\n z-index:4;display:flex;align-items:center;gap:8px;\r\n opacity:0;animation:slideUp .8s var(--ease) 1.5s both;\r\n}\r\n.scroll-mouse{width:18px;height:28px;border-radius:9px;border:1.5px solid rgba(219,203,182,.22);position:relative}\r\n.scroll-mouse::after{content:\"\";width:2px;height:5px;border-radius:999px;background:var(--neutral);position:absolute;top:5px;left:50%;transform:translateX(-50%);animation:scrollDot 2s ease-in-out 2s infinite}\r\n.scroll-hint span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(219,203,182,.35);font-weight:500}\r\n.scroll-track{width:36px;height:1px;background:rgba(219,203,182,.12);position:relative;overflow:hidden}\r\n.scroll-track::after{content:\"\";position:absolute;width:12px;height:100%;background:var(--neutral);animation:scrollSlide 2.2s ease-in-out 2.2s infinite}\r\n\r\n\/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\r\n@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes slideLeft{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}\r\n@keyframes slideRight{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}\r\n@keyframes wordUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\r\n@keyframes personIn{from{opacity:0;transform:translateX(-50%) translateY(36px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}\r\n@keyframes bgZoom{0%{transform:scale(1)}100%{transform:scale(1.06)}}\r\n@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}\r\n@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}\r\n@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\r\n@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(176,143,109,.18)}50%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(176,143,109,0)}}\r\n@keyframes starPop{from{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}\r\n@keyframes barFill{to{width:96%}}\r\n@keyframes scrollSlide{0%{transform:translateX(-12px)}50%{transform:translateX(36px)}100%{transform:translateX(36px)}}\r\n@keyframes scrollDot{0%,100%{opacity:1;transform:translateX(-50%) translateY(0)}50%{opacity:.3;transform:translateX(-50%) translateY(8px)}}\r\n\r\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n@media(max-width:1200px){\r\n .hero-grid{padding:50px 48px}\r\n .hero-title{font-size:clamp(44px,5.5vw,72px)}\r\n}\r\n\r\n\/* \u2500\u2500 TABLET \u2500\u2500 *\/\r\n@media(max-width:960px){\r\n .hero-section{padding:10px}\r\n .hero-shell{border-radius:18px;min-height:calc(100vh - 20px)}\r\n\r\n .hero-grid{\r\n grid-template-columns:1fr 1fr;\r\n align-items:end;\r\n gap:0;\r\n padding:48px 36px 0;\r\n min-height:calc(100vh - 20px);\r\n }\r\n\r\n .hero-left{\r\n max-width:100%;\r\n padding-bottom:48px;\r\n z-index:2;\r\n }\r\n\r\n .hero-title{font-size:clamp(38px,5vw,58px)}\r\n .hero-sub{font-size:17px}\r\n\r\n .hero-right{\r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n min-height:420px;\r\n align-items:flex-end;\r\n }\r\n\r\n .hero-person{height:100%;width:100%}\r\n .hero-person img{\r\n position:absolute;\r\n bottom:0;left:50%;\r\n transform:translateX(-50%);\r\n height:100%;width:auto;max-width:110%;\r\n }\r\n\r\n .float-card{display:none}\r\n .person-glow{display:block;bottom:0;width:90%;height:50%}\r\n}\r\n\r\n\/* \u2500\u2500 MOBILE \u2500\u2500 *\/\r\n@media(max-width:640px){\r\n .hero-section{padding:8px}\r\n .hero-shell{border-radius:14px;min-height:100vh}\r\n\r\n .hero-grid{\r\n grid-template-columns:1fr;\r\n grid-template-rows:auto auto;\r\n align-items:start;\r\n gap:0;\r\n padding:40px 24px 0;\r\n min-height:100vh;\r\n }\r\n\r\n .hero-left{\r\n max-width:100%;\r\n padding-bottom:28px;\r\n z-index:2;\r\n }\r\n\r\n .eyebrow{margin-bottom:20px;padding:8px 18px 8px 9px;gap:9px}\r\n .eyebrow-dot{width:32px;height:32px;font-size:13px}\r\n .eyebrow span{font-size:13px;letter-spacing:.05em}\r\n\r\n \/* Big, readable mobile title *\/\r\n .hero-title{font-size:clamp(40px,10vw,56px);margin-bottom:16px;letter-spacing:-.03em}\r\n\r\n .hero-sub{font-size:16px;margin-bottom:32px;max-width:100%}\r\n\r\n .cta-row{gap:12px;margin-bottom:24px;flex-direction:column;align-items:stretch}\r\n .btn-main{padding:18px 28px;font-size:16px;gap:10px;justify-content:center}\r\n .btn-glass{padding:18px 24px;font-size:16px;gap:10px;justify-content:center}\r\n\r\n .contact-row{display:flex;flex-wrap:wrap;gap:14px}\r\n .contact-link{font-size:14px}\r\n .trust-tag{font-size:13px}\r\n\r\n \/* Image block \u2014 full width, good height *\/\r\n .hero-right{position:relative;width:100%;height:380px;min-height:380px;overflow:visible}\r\n .hero-person{position:relative;height:100%;width:100%;overflow:visible}\r\n .hero-person img{\r\n position:absolute;bottom:0;left:50%;\r\n transform:translateX(-50%);\r\n height:100%;width:auto;max-width:85%;\r\n }\r\n\r\n .person-glow{display:block;bottom:0;width:80%;height:60%}\r\n .float-card{display:none}\r\n\r\n .deco-1{width:200px;height:200px;top:-50px;right:-50px}\r\n .deco-2{width:140px;height:140px;bottom:-35px;left:-28px}\r\n .deco-3,.deco-dot{display:none}\r\n .scroll-hint{display:none}\r\n}\r\n\r\n@media(max-width:420px){\r\n .hero-grid{padding:32px 20px 0}\r\n .hero-title{font-size:clamp(36px,9vw,48px)}\r\n .hero-sub{font-size:15px}\r\n .btn-main{padding:16px 24px;font-size:15px}\r\n .btn-glass{padding:16px 20px;font-size:15px}\r\n .hero-right{height:320px;min-height:320px}\r\n .hero-person img{max-width:90%}\r\n}\r\n\r\n@media(min-height:900px){\r\n .hero-grid{padding:80px 64px}\r\n}\r\n\r\n@media(max-height:700px) and (min-width:641px){\r\n .hero-grid{padding:28px 48px}\r\n .hero-title{font-size:clamp(36px,4.5vw,54px)}\r\n .hero-sub{font-size:16px;margin-bottom:28px}\r\n .cta-row{gap:10px;margin-bottom:20px}\r\n .btn-main{padding:14px 28px;font-size:15px}\r\n .btn-glass{padding:14px 24px;font-size:15px}\r\n}\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n *,*::before,*::after{animation:none!important;transition:none!important}\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"hero-section\">\r\n <div class=\"hero-shell\">\r\n\r\n <div class=\"deco-circle deco-1\"><\/div>\r\n <div class=\"deco-circle deco-2\"><\/div>\r\n <div class=\"deco-circle deco-3\"><\/div>\r\n <div class=\"deco-dot dot-1\"><\/div>\r\n <div class=\"deco-dot dot-2\"><\/div>\r\n <div class=\"deco-dot dot-3\"><\/div>\r\n\r\n <div class=\"hero-grid\">\r\n\r\n \r\n <div class=\"hero-left\">\r\n <div class=\"eyebrow\">\r\n <div class=\"eyebrow-dot\"><i class=\"fa-solid fa-plus\"><\/i><\/div>\r\n <span>Premium Home Healthcare<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n <span class=\"line\"><span>Expert <span class=\"accent\">Home<\/span><\/span><\/span>\r\n <span class=\"line\"><span><span class=\"accent\">Care<\/span> Services<\/span><\/span>\r\n <span class=\"line\"><span>Across Dubai<\/span><\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n DHA-licensed medical professionals at your doorstep \u2014 anytime, anywhere in Dubai.\r\n <\/p>\r\n\r\n <div class=\"cta-row\">\r\n <a href=\"#\" class=\"btn-main\">\r\n <i class=\"fa-solid fa-calendar-check\"><\/i>\r\n Book a Caregiver\r\n <\/a>\r\n <a href=\"tel:+971501234567\" class=\"btn-glass\">\r\n <i class=\"fa-solid fa-phone\"><\/i>\r\n +971 50 123 4567\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <a href=\"mailto:info@bionixoncall.com\" class=\"contact-link\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n info@bionixoncall.com\r\n <\/a>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"trust-tag\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n DHA Approved\r\n <\/div>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"trust-tag\">\r\n <i class=\"fa-solid fa-bolt\"><\/i>\r\n 30 Min Response\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <div class=\"hero-person\">\r\n <div class=\"person-glow\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/Untitled-design-2026-03-16T150549.956.png\" alt=\"Bionix On Call \u2014 Home Care Professional\">\r\n\r\n <div class=\"float-card card-stat\">\r\n <div class=\"card-stat-label\">Satisfaction<\/div>\r\n <div class=\"card-stat-value\"><strong>98<\/strong><span>%<\/span><\/div>\r\n <div class=\"card-stat-bar\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"float-card card-badge\">\r\n <div class=\"card-badge-icon\"><i class=\"fa-solid fa-shield-heart\"><\/i><\/div>\r\n <span>Trusted Team<\/span>\r\n <\/div>\r\n\r\n <div class=\"float-card card-rating\">\r\n <div class=\"card-rating-top\">\r\n <div class=\"card-rating-icon\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n <div class=\"card-rating-score\">4.9<\/div>\r\n <\/div>\r\n <div class=\"card-rating-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <div class=\"card-rating-label\">Google Reviews<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"scroll-hint\">\r\n <div class=\"scroll-mouse\"><\/div>\r\n <div class=\"scroll-track\"><\/div>\r\n <span>Scroll<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87391f3 e-con-full e-flex e-con e-parent\" data-id=\"87391f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7257422 elementor-widget elementor-widget-html\" data-id=\"7257422\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Bionix On Call - Services Section<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n *{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n }\r\n\r\n :root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n --border:rgba(176,143,109,0.12);\r\n --shadow:0 18px 44px rgba(91,91,91,0.10);\r\n --shadow-soft:0 10px 26px rgba(176,143,109,0.08);\r\n --transition:all .35s ease;\r\n }\r\n\r\n body{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n color:var(--text);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 SECTION \u2500\u2500\u2500 *\/\r\n .services-section{\r\n padding:40px 24px 50px;\r\n background:var(--pop);\r\n overflow:visible;\r\n position:relative;\r\n }\r\n\r\n .services-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-80px;\r\n left:-60px;\r\n width:480px;\r\n height:480px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.14) 0%, rgba(176,143,109,0.06) 35%, rgba(176,143,109,0.02) 55%, transparent 70%);\r\n filter:blur(40px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .services-section::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-100px;\r\n right:-40px;\r\n width:520px;\r\n height:520px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.2) 0%, rgba(176,143,109,0.1) 30%, rgba(176,143,109,0.03) 50%, transparent 68%);\r\n filter:blur(50px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 WRAPPER \u2500\u2500\u2500 *\/\r\n .services-wrap{\r\n max-width:1280px;\r\n margin:0 auto;\r\n position:relative;\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:34px;\r\n padding:34px 34px 30px;\r\n box-shadow:var(--shadow);\r\n overflow:visible;\r\n z-index:1;\r\n }\r\n\r\n .services-wrap::before{\r\n content:\"\";\r\n position:absolute;\r\n right:14%;\r\n top:34px;\r\n width:340px;\r\n height:340px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.3) 0%, rgba(219,203,182,0.12) 40%, rgba(219,203,182,0.03) 65%, transparent 76%);\r\n filter:blur(10px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .services-wrap::after{\r\n content:\"\";\r\n position:absolute;\r\n left:5%;\r\n bottom:40px;\r\n width:280px;\r\n height:280px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.1) 0%, rgba(176,143,109,0.04) 40%, transparent 65%);\r\n filter:blur(20px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 INNER GRID \u2500\u2500\u2500 *\/\r\n .services-inner{\r\n position:relative;\r\n z-index:2;\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) 390px;\r\n gap:24px;\r\n align-items:end;\r\n overflow:visible;\r\n }\r\n\r\n .services-content{\r\n min-width:0;\r\n position:relative;\r\n }\r\n\r\n .services-content::before{\r\n content:\"\";\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n width:400px;\r\n height:400px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.07) 0%, rgba(219,203,182,0.05) 35%, transparent 60%);\r\n filter:blur(30px);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 BADGE \u2500\u2500\u2500 *\/\r\n .section-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:9px;\r\n padding:10px 16px;\r\n background:linear-gradient(135deg, var(--neutral), var(--neutral-light));\r\n color:var(--white);\r\n border-radius:999px;\r\n font-size:13px;\r\n font-weight:700;\r\n margin-bottom:20px;\r\n box-shadow:0 8px 18px rgba(176,143,109,0.28);\r\n animation:fadeUp .6s ease both;\r\n position:relative;\r\n z-index:2;\r\n }\r\n\r\n .section-badge i{\r\n font-size:11px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 TITLE \u2500\u2500\u2500 *\/\r\n .section-title{\r\n font-size:44px;\r\n line-height:1.08;\r\n font-weight:800;\r\n letter-spacing:-1.4px;\r\n max-width:700px;\r\n margin-bottom:26px;\r\n animation:fadeUp .7s ease .08s both;\r\n position:relative;\r\n z-index:2;\r\n color:var(--text);\r\n }\r\n\r\n .section-title .accent{\r\n color:var(--neutral);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARDS GRID \u2500\u2500\u2500 *\/\r\n .services-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, minmax(0, 1fr));\r\n gap:14px;\r\n position:relative;\r\n z-index:2;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARD \u2500\u2500\u2500 *\/\r\n .service-card{\r\n position:relative;\r\n min-height:168px;\r\n background:linear-gradient(145deg, #faf6f1 0%, #f5ede4 30%, #f0e6da 60%, #ebe0d2 100%);\r\n border:1px solid rgba(176,143,109,0.12);\r\n border-radius:24px;\r\n padding:22px 18px 18px;\r\n text-decoration:none;\r\n color:var(--text);\r\n box-shadow:0 8px 24px rgba(176,143,109,0.08), 0 2px 8px rgba(176,143,109,0.04);\r\n transition:var(--transition);\r\n overflow:hidden;\r\n animation:fadeUp .7s ease both;\r\n }\r\n\r\n .service-card:nth-child(1){ animation-delay:.10s; }\r\n .service-card:nth-child(2){ animation-delay:.16s; }\r\n .service-card:nth-child(3){ animation-delay:.22s; }\r\n .service-card:nth-child(4){ animation-delay:.28s; }\r\n .service-card:nth-child(5){ animation-delay:.34s; }\r\n .service-card:nth-child(6){ animation-delay:.40s; }\r\n .service-card:nth-child(7){ animation-delay:.46s; }\r\n .service-card:nth-child(8){ animation-delay:.52s; }\r\n .service-card:nth-child(9){ animation-delay:.58s; }\r\n\r\n .service-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:linear-gradient(160deg, rgba(176,143,109,0.06) 0%, rgba(176,143,109,0.14) 50%, rgba(91,91,91,0.1) 100%);\r\n opacity:0;\r\n transition:var(--transition);\r\n border-radius:24px;\r\n }\r\n\r\n .service-card::after{\r\n content:\"\";\r\n position:absolute;\r\n top:-30%;\r\n right:-30%;\r\n width:120px;\r\n height:120px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.3) 0%, transparent 70%);\r\n opacity:0.6;\r\n transition:var(--transition);\r\n pointer-events:none;\r\n }\r\n\r\n .service-card:hover{\r\n transform:translateY(-8px);\r\n background:linear-gradient(145deg, #f5ede4 0%, #ecddc9 30%, #e5d3bb 60%, #dfc9af 100%);\r\n border-color:rgba(176,143,109,0.25);\r\n box-shadow:0 20px 44px rgba(176,143,109,0.18), 0 4px 12px rgba(176,143,109,0.1);\r\n }\r\n\r\n .service-card:hover::before{\r\n opacity:1;\r\n }\r\n\r\n .service-card:hover::after{\r\n opacity:1;\r\n transform:scale(1.3);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ARROW \u2500\u2500\u2500 *\/\r\n .service-arrow{\r\n position:absolute;\r\n top:16px;\r\n right:16px;\r\n width:36px;\r\n height:36px;\r\n border-radius:50%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:var(--neutral);\r\n font-size:15px;\r\n transition:var(--transition);\r\n z-index:2;\r\n }\r\n\r\n .service-card:hover .service-arrow{\r\n transform:translate(2px, -2px);\r\n color:var(--dark-deep);\r\n background:rgba(176,143,109,0.12);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 ICON \u2500\u2500\u2500 *\/\r\n .service-icon{\r\n position:relative;\r\n z-index:2;\r\n width:62px;\r\n height:62px;\r\n border-radius:16px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n margin-bottom:18px;\r\n background:rgba(176,143,109,0.12);\r\n border:1px solid rgba(176,143,109,0.18);\r\n transition:var(--transition);\r\n overflow:hidden;\r\n }\r\n\r\n .service-card:hover .service-icon{\r\n transform:scale(1.06);\r\n background:rgba(176,143,109,0.18);\r\n border-color:rgba(176,143,109,0.28);\r\n }\r\n\r\n .service-icon img{\r\n width:34px;\r\n height:34px;\r\n object-fit:contain;\r\n display:block;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 CARD TITLE \u2500\u2500\u2500 *\/\r\n .service-title{\r\n position:relative;\r\n z-index:2;\r\n font-size:17px;\r\n line-height:1.32;\r\n font-weight:700;\r\n max-width:180px;\r\n color:var(--text);\r\n transition:color .35s ease;\r\n }\r\n\r\n .service-card:hover .service-title{\r\n color:var(--dark-deep);\r\n }\r\n\r\n \/* \u2500\u2500\u2500 DOCTOR SIDE \u2500\u2500\u2500 *\/\r\n .doctor-side{\r\n position:relative;\r\n min-height:100%;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:center;\r\n overflow:visible;\r\n }\r\n\r\n .doctor-glow{\r\n position:absolute;\r\n width:330px;\r\n height:430px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.5) 0%, rgba(219,203,182,0.2) 38%, rgba(219,203,182,0.06) 60%, transparent 76%);\r\n filter:blur(6px);\r\n bottom:20px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n z-index:0;\r\n }\r\n\r\n .doctor-img{\r\n position:relative;\r\n z-index:2;\r\n max-width:430px;\r\n width:120%;\r\n margin-right:-22px;\r\n margin-bottom:-30px;\r\n margin-top:-110px;\r\n object-fit:contain;\r\n animation:doctorFloat 4.5s ease-in-out infinite;\r\n filter:drop-shadow(0 18px 34px rgba(91,91,91,0.14));\r\n }\r\n\r\n \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\r\n @keyframes fadeUp{\r\n from{\r\n opacity:0;\r\n transform:translateY(24px);\r\n }\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n }\r\n\r\n @keyframes doctorFloat{\r\n 0%,100%{\r\n transform:translateY(0);\r\n }\r\n 50%{\r\n transform:translateY(-8px);\r\n }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n @media (max-width:1250px){\r\n .services-inner{\r\n grid-template-columns:1fr 320px;\r\n }\r\n\r\n .section-title{\r\n font-size:38px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .doctor-img{\r\n width:124%;\r\n margin-right:-12px;\r\n margin-top:-90px;\r\n }\r\n }\r\n\r\n @media (max-width:1024px){\r\n .services-section{\r\n padding:24px 16px 32px;\r\n }\r\n\r\n .services-wrap{\r\n padding:28px 24px 24px;\r\n border-radius:28px;\r\n }\r\n\r\n .services-inner{\r\n grid-template-columns:1fr;\r\n gap:18px;\r\n }\r\n\r\n .section-title{\r\n font-size:34px;\r\n margin-bottom:22px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .doctor-side{\r\n min-height:340px;\r\n margin-top:0;\r\n }\r\n\r\n .doctor-glow{\r\n width:290px;\r\n height:350px;\r\n }\r\n\r\n .doctor-img{\r\n width:350px;\r\n max-width:100%;\r\n margin-right:0;\r\n margin-bottom:-24px;\r\n margin-top:-80px;\r\n }\r\n\r\n .services-section::before{\r\n width:320px;\r\n height:320px;\r\n top:-40px;\r\n left:-30px;\r\n }\r\n\r\n .services-section::after{\r\n width:360px;\r\n height:360px;\r\n bottom:-60px;\r\n }\r\n }\r\n\r\n @media (max-width:768px){\r\n .services-wrap{\r\n padding:22px 18px 18px;\r\n border-radius:24px;\r\n }\r\n\r\n .section-title{\r\n font-size:29px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n gap:12px;\r\n }\r\n\r\n .service-card{\r\n min-height:150px;\r\n padding:18px 16px 16px;\r\n border-radius:20px;\r\n }\r\n\r\n .service-icon{\r\n width:54px;\r\n height:54px;\r\n margin-bottom:14px;\r\n }\r\n\r\n .service-icon img{\r\n width:30px;\r\n height:30px;\r\n }\r\n\r\n .service-title{\r\n font-size:15px;\r\n }\r\n\r\n .doctor-side{\r\n min-height:290px;\r\n }\r\n\r\n .doctor-img{\r\n width:300px;\r\n margin-top:-55px;\r\n }\r\n\r\n .services-section::before{\r\n width:240px;\r\n height:240px;\r\n }\r\n\r\n .services-section::after{\r\n width:280px;\r\n height:280px;\r\n }\r\n }\r\n\r\n @media (max-width:560px){\r\n .services-section{\r\n padding:18px 12px 24px;\r\n }\r\n\r\n .services-wrap{\r\n padding:20px 14px 16px;\r\n border-radius:20px;\r\n }\r\n\r\n .section-badge{\r\n font-size:12px;\r\n padding:9px 13px;\r\n margin-bottom:16px;\r\n }\r\n\r\n .section-title{\r\n font-size:25px;\r\n letter-spacing:-0.8px;\r\n }\r\n\r\n .services-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:10px;\r\n }\r\n\r\n .service-card{\r\n min-height:138px;\r\n padding:16px 14px 14px;\r\n border-radius:18px;\r\n }\r\n\r\n .service-card::after{\r\n width:80px;\r\n height:80px;\r\n }\r\n\r\n .service-arrow{\r\n top:12px;\r\n right:12px;\r\n width:32px;\r\n height:32px;\r\n font-size:13px;\r\n }\r\n\r\n .service-icon{\r\n width:48px;\r\n height:48px;\r\n border-radius:14px;\r\n }\r\n\r\n .service-icon img{\r\n width:26px;\r\n height:26px;\r\n }\r\n\r\n .service-title{\r\n font-size:14px;\r\n max-width:100%;\r\n }\r\n\r\n .doctor-side{\r\n min-height:240px;\r\n }\r\n\r\n .doctor-glow{\r\n width:220px;\r\n height:260px;\r\n bottom:12px;\r\n }\r\n\r\n .doctor-img{\r\n width:245px;\r\n margin-top:-42px;\r\n margin-bottom:-16px;\r\n }\r\n\r\n .services-section::before{\r\n width:180px;\r\n height:180px;\r\n filter:blur(30px);\r\n }\r\n\r\n .services-section::after{\r\n width:200px;\r\n height:200px;\r\n filter:blur(35px);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"services-section\">\r\n <div class=\"services-wrap\">\r\n <div class=\"services-inner\">\r\n\r\n <div class=\"services-content\">\r\n <div class=\"section-badge\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n Our Services\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">Comprehensive <span class=\"accent\">Home Care<\/span> Services in Dubai<\/h2>\r\n\r\n <div class=\"services-grid\">\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/iv-bag.png\" alt=\"IV Therapy\">\r\n <\/div>\r\n <div class=\"service-title\">IV Therapy<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/service.png\" alt=\"Home Nursing\">\r\n <\/div>\r\n <div class=\"service-title\">Home Nursing<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/assisted-living.png\" alt=\"Elderly Care\">\r\n <\/div>\r\n <div class=\"service-title\">Elderly Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/emergency-call.png\" alt=\"Doctor on Call\">\r\n <\/div>\r\n <div class=\"service-title\">Doctor on Call<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/palliative.png\" alt=\"Palliative Care\">\r\n <\/div>\r\n <div class=\"service-title\">Palliative Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/tape.png\" alt=\"Wound Care\">\r\n <\/div>\r\n <div class=\"service-title\">Wound Care<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/physical-therapy.png\" alt=\"Physiotherapy at Home\">\r\n <\/div>\r\n <div class=\"service-title\">Physiotherapy at Home<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/flask.png\" alt=\"Lab Test at Home\">\r\n <\/div>\r\n <div class=\"service-title\">Lab Test at Home<\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"service-card\">\r\n <span class=\"service-arrow\"><i class=\"fa-solid fa-arrow-up-right-from-square\"><\/i><\/span>\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/surgery.png\" alt=\"Post-operative Care\">\r\n <\/div>\r\n <div class=\"service-title\">Post-operative Care<\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"doctor-side\">\r\n <div class=\"doctor-glow\"><\/div>\r\n <img decoding=\"async\" class=\"doctor-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/doctor-image-e1773056202565.png\" alt=\"Professional doctor\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afb5777 e-con-full e-flex e-con e-parent\" data-id=\"afb5777\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4669a9f elementor-widget elementor-widget-html\" data-id=\"4669a9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Our Services<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== SECTION ===== *\/\r\n\r\n.care-section{\r\n padding:100px 20px;\r\n position:relative;\r\n overflow:hidden;\r\n background:linear-gradient(180deg, var(--pop) 0%, #f3ede6 40%, #f5efe8 60%, var(--pop) 100%);\r\n}\r\n\r\n.care-bg-orb{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.care-bg-orb-1{\r\n width:400px;\r\n height:400px;\r\n top:-10%;\r\n left:-5%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 60%);\r\n filter:blur(40px);\r\n}\r\n\r\n.care-bg-orb-2{\r\n width:350px;\r\n height:350px;\r\n bottom:-8%;\r\n right:-3%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.12) 0%, transparent 55%);\r\n filter:blur(35px);\r\n}\r\n\r\n.care-bg-orb-3{\r\n width:300px;\r\n height:300px;\r\n top:40%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:radial-gradient(circle, rgba(176,143,109,0.05) 0%, transparent 50%);\r\n filter:blur(50px);\r\n}\r\n\r\n.care-container{\r\n max-width:1200px;\r\n margin:auto;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.care-header{\r\n text-align:center;\r\n margin-bottom:60px;\r\n}\r\n\r\n.care-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 20px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.1) 100%);\r\n border:1px solid rgba(176,143,109,0.15);\r\n border-radius:999px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:20px;\r\n}\r\n\r\n.care-badge::before{\r\n content:\"\";\r\n width:7px;\r\n height:7px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n flex-shrink:0;\r\n animation:carePulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes carePulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.care-header h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-1.5px;\r\n line-height:1.1;\r\n margin-bottom:16px;\r\n}\r\n\r\n.care-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.care-header p{\r\n font-size:16px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:520px;\r\n margin:0 auto;\r\n}\r\n\r\n.care-header-line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:12px;\r\n margin-top:24px;\r\n}\r\n\r\n.care-header-line span{\r\n width:40px;\r\n height:2px;\r\n background:linear-gradient(90deg, transparent, rgba(176,143,109,0.3), transparent);\r\n border-radius:2px;\r\n}\r\n\r\n.care-header-line .care-diamond{\r\n width:8px;\r\n height:8px;\r\n border:1.5px solid rgba(176,143,109,0.35);\r\n transform:rotate(45deg);\r\n flex-shrink:0;\r\n}\r\n\r\n\/* ===== 3\u00d73 GRID ===== *\/\r\n\r\n.care-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:24px;\r\n}\r\n\r\n\/* ===== CARD ===== *\/\r\n\r\n.care-card{\r\n position:relative;\r\n border-radius:24px;\r\n overflow:hidden;\r\n cursor:pointer;\r\n box-shadow:0 12px 40px rgba(91,91,91,0.08);\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n aspect-ratio:3\/2;\r\n}\r\n\r\n.care-card:hover{\r\n transform:translateY(-8px);\r\n box-shadow:0 24px 60px rgba(176,143,109,0.2), 0 8px 20px rgba(91,91,91,0.08);\r\n}\r\n\r\n\/* Image *\/\r\n\r\n.care-card-img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n position:absolute;\r\n inset:0;\r\n transition:all .7s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-card:hover .care-card-img{\r\n transform:scale(1.06);\r\n}\r\n\r\n\/* Overlay \u2014 strong bottom for title readability *\/\r\n\r\n.care-card-overlay{\r\n position:absolute;\r\n inset:0;\r\n background:linear-gradient(\r\n 180deg,\r\n rgba(44,40,37,0.0) 0%,\r\n rgba(44,40,37,0.0) 30%,\r\n rgba(44,40,37,0.08) 50%,\r\n rgba(44,40,37,0.42) 72%,\r\n rgba(44,40,37,0.7) 88%,\r\n rgba(44,40,37,0.82) 100%\r\n );\r\n z-index:1;\r\n pointer-events:none;\r\n transition:all .5s ease;\r\n}\r\n\r\n.care-card:hover .care-card-overlay{\r\n background:linear-gradient(\r\n 180deg,\r\n rgba(44,40,37,0.0) 0%,\r\n rgba(44,40,37,0.0) 25%,\r\n rgba(44,40,37,0.1) 45%,\r\n rgba(44,40,37,0.5) 70%,\r\n rgba(44,40,37,0.78) 86%,\r\n rgba(44,40,37,0.88) 100%\r\n );\r\n}\r\n\r\n\/* Content *\/\r\n\r\n.care-card-content{\r\n position:absolute;\r\n bottom:0;\r\n left:0;\r\n right:0;\r\n padding:24px;\r\n z-index:2;\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:14px;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-card:hover .care-card-content{\r\n transform:translateY(-4px);\r\n}\r\n\r\n.care-card-info{\r\n flex:1;\r\n min-width:0;\r\n}\r\n\r\n.care-card-tag{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n padding:5px 12px;\r\n background:rgba(255,255,255,0.12);\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border:1px solid rgba(255,255,255,0.16);\r\n border-radius:50px;\r\n font-size:11px;\r\n font-weight:600;\r\n color:#fff;\r\n letter-spacing:0.4px;\r\n text-transform:uppercase;\r\n margin-bottom:10px;\r\n white-space:nowrap;\r\n}\r\n\r\n.care-card-tag i{\r\n font-size:8px;\r\n color:var(--light);\r\n}\r\n\r\n.care-card-content h3{\r\n font-size:22px;\r\n font-weight:700;\r\n color:#fff;\r\n line-height:1.2;\r\n letter-spacing:-0.3px;\r\n text-shadow:0 2px 12px rgba(0,0,0,0.3);\r\n}\r\n\r\n\/* Arrow *\/\r\n\r\n.care-card-arrow{\r\n width:44px;\r\n height:44px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--light) 0%, var(--neutral) 100%);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:var(--white);\r\n font-size:14px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 6px 18px rgba(176,143,109,0.3);\r\n flex-shrink:0;\r\n opacity:0;\r\n transform:translateY(10px);\r\n}\r\n\r\n.care-card:hover .care-card-arrow{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.care-card-arrow:hover{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--dark) 100%);\r\n transform:translateY(-2px) scale(1.05);\r\n}\r\n\r\n\/* ===== BOTTOM CTA ===== *\/\r\n\r\n.care-cta-strip{\r\n margin-top:50px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:32px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.care-cta-text{\r\n font-size:16px;\r\n color:var(--muted);\r\n font-weight:500;\r\n}\r\n\r\n.care-cta-text strong{\r\n color:var(--neutral);\r\n font-weight:700;\r\n}\r\n\r\n.care-cta-btn{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:16px 34px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border:none;\r\n border-radius:60px;\r\n font-size:14px;\r\n font-weight:700;\r\n cursor:pointer;\r\n font-family:'Inter',sans-serif;\r\n text-decoration:none;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 10px 30px rgba(176,143,109,0.25);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n.care-cta-btn::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:60%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);\r\n transition:left .6s ease;\r\n}\r\n\r\n.care-cta-btn:hover::before{\r\n left:160%;\r\n}\r\n\r\n.care-cta-btn:hover{\r\n transform:translateY(-4px) scale(1.03);\r\n box-shadow:0 16px 40px rgba(176,143,109,0.35);\r\n}\r\n\r\n.care-cta-btn i{\r\n font-size:12px;\r\n transition:transform .3s ease;\r\n}\r\n\r\n.care-cta-btn:hover i{\r\n transform:translateX(4px);\r\n}\r\n\r\n\/* ===== SCROLL REVEAL ===== *\/\r\n\r\n.care-reveal{\r\n opacity:0;\r\n transform:translateY(45px);\r\n transition:all .8s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.care-reveal.care-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.care-reveal:nth-child(1){ transition-delay:.05s; }\r\n.care-reveal:nth-child(2){ transition-delay:.12s; }\r\n.care-reveal:nth-child(3){ transition-delay:.19s; }\r\n.care-reveal:nth-child(4){ transition-delay:.26s; }\r\n.care-reveal:nth-child(5){ transition-delay:.33s; }\r\n.care-reveal:nth-child(6){ transition-delay:.40s; }\r\n.care-reveal:nth-child(7){ transition-delay:.47s; }\r\n.care-reveal:nth-child(8){ transition-delay:.54s; }\r\n.care-reveal:nth-child(9){ transition-delay:.61s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1100px){\r\n .care-grid{\r\n gap:18px;\r\n }\r\n\r\n .care-card-content{\r\n padding:20px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:20px;\r\n }\r\n}\r\n\r\n@media(max-width:900px){\r\n .care-section{\r\n padding:70px 16px;\r\n }\r\n\r\n .care-header h2{\r\n font-size:38px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:18px;\r\n }\r\n\r\n .care-card-arrow{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:21px;\r\n }\r\n}\r\n\r\n@media(max-width:640px){\r\n .care-section{\r\n padding:50px 12px;\r\n }\r\n\r\n .care-header{\r\n margin-bottom:40px;\r\n }\r\n\r\n .care-header h2{\r\n font-size:30px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .care-header p{\r\n font-size:14.5px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr 1fr;\r\n gap:12px;\r\n }\r\n\r\n .care-card{\r\n border-radius:18px;\r\n }\r\n\r\n .care-card-content{\r\n padding:16px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:16px;\r\n letter-spacing:-0.2px;\r\n }\r\n\r\n .care-card-tag{\r\n font-size:9px;\r\n padding:3px 8px;\r\n margin-bottom:6px;\r\n gap:4px;\r\n }\r\n\r\n .care-card-tag i{\r\n font-size:6px;\r\n }\r\n\r\n .care-card-arrow{\r\n width:34px;\r\n height:34px;\r\n font-size:11px;\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-cta-strip{\r\n flex-direction:column;\r\n gap:16px;\r\n text-align:center;\r\n }\r\n\r\n .care-cta-btn{\r\n padding:14px 28px;\r\n font-size:13px;\r\n }\r\n\r\n .care-bg-orb-1{\r\n width:240px;\r\n height:240px;\r\n }\r\n\r\n .care-bg-orb-2{\r\n width:200px;\r\n height:200px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .care-header h2{\r\n font-size:26px;\r\n }\r\n\r\n .care-grid{\r\n grid-template-columns:1fr;\r\n gap:14px;\r\n }\r\n\r\n .care-card{\r\n border-radius:20px;\r\n aspect-ratio:16\/10;\r\n }\r\n\r\n .care-card-content{\r\n padding:20px;\r\n }\r\n\r\n .care-card-content h3{\r\n font-size:20px;\r\n }\r\n\r\n .care-card-tag{\r\n font-size:10px;\r\n padding:4px 10px;\r\n margin-bottom:8px;\r\n }\r\n\r\n .care-card-arrow{\r\n width:40px;\r\n height:40px;\r\n font-size:13px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"care-section\">\r\n\r\n <div class=\"care-bg-orb care-bg-orb-1\"><\/div>\r\n <div class=\"care-bg-orb care-bg-orb-2\"><\/div>\r\n <div class=\"care-bg-orb care-bg-orb-3\"><\/div>\r\n\r\n <div class=\"care-container\">\r\n\r\n \r\n <div class=\"care-header care-reveal\">\r\n <div class=\"care-badge\">Our Services<\/div>\r\n <h2>Comprehensive <span>Home Care<\/span> Services in Dubai<\/h2>\r\n <p>DHA-licensed professionals delivering world-class healthcare at your doorstep \u2014 with compassion, expertise and round-the-clock availability.<\/p>\r\n <div class=\"care-header-line\">\r\n <span><\/span>\r\n <div class=\"care-diamond\"><\/div>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-grid\">\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/medium-shot-doctor-checking-patient-scaled.jpg\" alt=\"IV Therapy\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-droplet\"><\/i> Infusion<\/div>\r\n <h3>IV Therapy<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/2-1.png\" alt=\"Home Nursing\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-user-nurse\"><\/i> Nursing<\/div>\r\n <h3>Home Nursing<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"Elderly Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-hand-holding-heart\"><\/i> Senior<\/div>\r\n <h3>Elderly Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/3-1.png\" alt=\"Doctor on Call\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-stethoscope\"><\/i> Medical<\/div>\r\n <h3>Doctor on Call<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/4-1.png\" alt=\"Palliative Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Comfort<\/div>\r\n <h3>Palliative Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/parent-helping-her-child-perform-first-aid-knee-injury-after-she-has-been-accident_7186-1982.avif\" alt=\"Wound Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-bandage\"><\/i> Treatment<\/div>\r\n <h3>Wound Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/1-1.png\" alt=\"Physiotherapy at Home\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-dumbbell\"><\/i> Rehab<\/div>\r\n <h3>Physiotherapy at Home<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/6-1.png\" alt=\"Lab Test at Home\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-flask-vial\"><\/i> Diagnostics<\/div>\r\n <h3>Lab Test at Home<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"care-card care-reveal\">\r\n <img decoding=\"async\" class=\"care-card-img\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/5-1.png\" alt=\"Post-operative Care\">\r\n <div class=\"care-card-overlay\"><\/div>\r\n <div class=\"care-card-content\">\r\n <div class=\"care-card-info\">\r\n <div class=\"care-card-tag\"><i class=\"fa-solid fa-hospital\"><\/i> Recovery<\/div>\r\n <h3>Post-operative Care<\/h3>\r\n <\/div>\r\n <div class=\"care-card-arrow\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"care-cta-strip care-reveal\">\r\n <p class=\"care-cta-text\">Explore all our <strong>healthcare services<\/strong> tailored for Dubai residents.<\/p>\r\n <a href=\"#\" class=\"care-cta-btn\">\r\n Book a Service <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\nconst careEls = document.querySelectorAll('.care-reveal');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const careObs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('care-visible');\r\n careObs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n\r\n careEls.forEach(el => careObs.observe(el));\r\n} else {\r\n careEls.forEach(el => el.classList.add('care-visible'));\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7278faf e-con-full e-flex e-con e-parent\" data-id=\"7278faf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-640f932 elementor-widget elementor-widget-html\" data-id=\"640f932\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Why Choose Us<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== SECTION ===== *\/\r\n\r\n.why-section{\r\n padding:70px 20px;\r\n position:relative;\r\n overflow:hidden;\r\n background:var(--pop);\r\n}\r\n\r\n\/* BG Orbs *\/\r\n\r\n.why-orb{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.why-orb-1{\r\n width:500px;\r\n height:500px;\r\n top:-15%;\r\n left:-8%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.07) 0%, transparent 60%);\r\n filter:blur(50px);\r\n}\r\n\r\n.why-orb-2{\r\n width:400px;\r\n height:400px;\r\n bottom:-12%;\r\n right:-6%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.1) 0%, transparent 55%);\r\n filter:blur(45px);\r\n}\r\n\r\n.why-orb-3{\r\n width:200px;\r\n height:200px;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n background:radial-gradient(circle, rgba(176,143,109,0.05) 0%, transparent 50%);\r\n filter:blur(40px);\r\n}\r\n\r\n.why-container{\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.why-header{\r\n text-align:center;\r\n margin-bottom:70px;\r\n}\r\n\r\n.why-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 22px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.08) 100%);\r\n border:1px solid rgba(176,143,109,0.14);\r\n border-radius:999px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:22px;\r\n}\r\n\r\n.why-badge::before{\r\n content:\"\";\r\n width:7px;\r\n height:7px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n flex-shrink:0;\r\n animation:whyPulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes whyPulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.why-header h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-1.5px;\r\n line-height:1.1;\r\n margin-bottom:16px;\r\n}\r\n\r\n.why-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.why-header p{\r\n font-size:16px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:520px;\r\n margin:0 auto;\r\n}\r\n\r\n.why-header-line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:12px;\r\n margin-top:26px;\r\n}\r\n\r\n.why-header-line span{\r\n width:42px;\r\n height:2px;\r\n background:linear-gradient(90deg, transparent, rgba(176,143,109,0.3), transparent);\r\n border-radius:2px;\r\n}\r\n\r\n.why-header-line .why-diamond{\r\n width:8px;\r\n height:8px;\r\n border:1.5px solid rgba(176,143,109,0.35);\r\n transform:rotate(45deg);\r\n flex-shrink:0;\r\n}\r\n\r\n\/* ===== CARDS GRID ===== *\/\r\n\r\n.why-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3, 1fr);\r\n gap:28px;\r\n}\r\n\r\n\/* ===== CARD ===== *\/\r\n\r\n.why-card{\r\n position:relative;\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:28px;\r\n padding:48px 36px 44px;\r\n text-align:center;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n overflow:hidden;\r\n box-shadow:0 8px 30px rgba(91,91,91,0.06);\r\n}\r\n\r\n\/* Card inner glow *\/\r\n.why-card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-40%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:200px;\r\n height:200px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.06) 0%, transparent 60%);\r\n transition:all .5s ease;\r\n pointer-events:none;\r\n}\r\n\r\n\/* Bottom accent line *\/\r\n.why-card::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:0;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:0;\r\n height:3px;\r\n border-radius:3px 3px 0 0;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n transition:width .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-card:hover{\r\n transform:translateY(-10px);\r\n border-color:rgba(176,143,109,0.2);\r\n box-shadow:0 28px 60px rgba(176,143,109,0.12), 0 8px 20px rgba(91,91,91,0.06);\r\n}\r\n\r\n.why-card:hover::before{\r\n width:300px;\r\n height:300px;\r\n opacity:.8;\r\n}\r\n\r\n.why-card:hover::after{\r\n width:60%;\r\n}\r\n\r\n\/* ===== ICON ===== *\/\r\n\r\n.why-icon-wrap{\r\n position:relative;\r\n width:88px;\r\n height:88px;\r\n margin:0 auto 28px;\r\n z-index:2;\r\n}\r\n\r\n\/* Outer ring *\/\r\n.why-icon-ring{\r\n position:absolute;\r\n inset:0;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,0.12);\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon-ring{\r\n border-color:rgba(176,143,109,0.25);\r\n transform:scale(1.08);\r\n}\r\n\r\n\/* Pulse ring *\/\r\n.why-icon-ring::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:-8px;\r\n border-radius:50%;\r\n border:1px solid rgba(176,143,109,0.06);\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon-ring::before{\r\n inset:-14px;\r\n border-color:rgba(176,143,109,0.1);\r\n}\r\n\r\n\/* Icon circle *\/\r\n.why-icon{\r\n position:absolute;\r\n inset:6px;\r\n border-radius:50%;\r\n background:linear-gradient(145deg, rgba(176,143,109,0.1) 0%, rgba(219,203,182,0.08) 100%);\r\n display:grid;\r\n place-items:center;\r\n transition:all .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-card:hover .why-icon{\r\n background:linear-gradient(145deg, rgba(176,143,109,0.18) 0%, rgba(219,203,182,0.14) 100%);\r\n transform:scale(1.04);\r\n}\r\n\r\n.why-icon i{\r\n font-size:28px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n transition:all .5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon i{\r\n transform:scale(1.1);\r\n}\r\n\r\n\/* ===== TEXT ===== *\/\r\n\r\n.why-card-title{\r\n font-size:22px;\r\n font-weight:800;\r\n color:var(--text);\r\n letter-spacing:-0.5px;\r\n margin-bottom:14px;\r\n position:relative;\r\n z-index:2;\r\n transition:color .4s ease;\r\n}\r\n\r\n.why-card:hover .why-card-title{\r\n color:var(--dark-deep);\r\n}\r\n\r\n.why-card-desc{\r\n font-size:15px;\r\n line-height:1.7;\r\n color:var(--muted);\r\n position:relative;\r\n z-index:2;\r\n max-width:320px;\r\n margin:0 auto;\r\n}\r\n\r\n\/* ===== DECORATIVE DOTS ===== *\/\r\n\r\n.why-card-dots{\r\n position:absolute;\r\n width:60px;\r\n height:60px;\r\n background-image:radial-gradient(rgba(176,143,109,0.08) 1.5px, transparent 1.5px);\r\n background-size:12px 12px;\r\n pointer-events:none;\r\n z-index:0;\r\n opacity:0;\r\n transition:opacity .5s ease;\r\n}\r\n\r\n.why-card:hover .why-card-dots{\r\n opacity:1;\r\n}\r\n\r\n.why-card-dots-tl{\r\n top:14px;\r\n left:14px;\r\n}\r\n\r\n.why-card-dots-br{\r\n bottom:14px;\r\n right:14px;\r\n}\r\n\r\n\/* ===== NUMBER TAG ===== *\/\r\n\r\n.why-card-num{\r\n position:absolute;\r\n top:20px;\r\n right:22px;\r\n font-size:56px;\r\n font-weight:900;\r\n line-height:1;\r\n color:rgba(176,143,109,0.05);\r\n z-index:0;\r\n pointer-events:none;\r\n transition:color .5s ease;\r\n}\r\n\r\n.why-card:hover .why-card-num{\r\n color:rgba(176,143,109,0.08);\r\n}\r\n\r\n\/* ===== SCROLL REVEAL ===== *\/\r\n\r\n.why-reveal{\r\n opacity:0;\r\n transform:translateY(45px);\r\n transition:all .8s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.why-reveal.why-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.why-reveal:nth-child(1){ transition-delay:.05s; }\r\n.why-reveal:nth-child(2){ transition-delay:.18s; }\r\n.why-reveal:nth-child(3){ transition-delay:.31s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1024px){\r\n .why-section{\r\n padding:80px 20px;\r\n }\r\n\r\n .why-header{\r\n margin-bottom:56px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:40px;\r\n }\r\n\r\n .why-grid{\r\n gap:22px;\r\n }\r\n\r\n .why-card{\r\n padding:40px 28px 38px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:20px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:14px;\r\n }\r\n}\r\n\r\n@media(max-width:800px){\r\n .why-section{\r\n padding:70px 16px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:34px;\r\n }\r\n\r\n .why-header p{\r\n font-size:15px;\r\n }\r\n\r\n .why-grid{\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n max-width:520px;\r\n margin:0 auto;\r\n }\r\n\r\n .why-card{\r\n padding:40px 32px 36px;\r\n border-radius:24px;\r\n display:grid;\r\n grid-template-columns:auto 1fr;\r\n grid-template-rows:auto auto;\r\n text-align:left;\r\n gap:0 24px;\r\n align-items:center;\r\n }\r\n\r\n .why-icon-wrap{\r\n grid-row:1 \/ 3;\r\n margin:0;\r\n width:76px;\r\n height:76px;\r\n }\r\n\r\n .why-card-title{\r\n align-self:end;\r\n margin-bottom:6px;\r\n font-size:20px;\r\n }\r\n\r\n .why-card-desc{\r\n align-self:start;\r\n margin:0;\r\n font-size:14px;\r\n max-width:100%;\r\n }\r\n\r\n .why-card-num{\r\n display:none;\r\n }\r\n\r\n .why-card-dots{\r\n display:none;\r\n }\r\n\r\n .why-card::after{\r\n left:0;\r\n transform:none;\r\n border-radius:0 0 0 3px;\r\n }\r\n\r\n .why-card:hover::after{\r\n width:40%;\r\n }\r\n}\r\n\r\n@media(max-width:560px){\r\n .why-section{\r\n padding:56px 12px;\r\n }\r\n\r\n .why-header{\r\n margin-bottom:40px;\r\n }\r\n\r\n .why-header h2{\r\n font-size:28px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .why-header p{\r\n font-size:14px;\r\n }\r\n\r\n .why-grid{\r\n gap:16px;\r\n }\r\n\r\n .why-card{\r\n padding:28px 22px 26px;\r\n gap:0 18px;\r\n border-radius:20px;\r\n }\r\n\r\n .why-icon-wrap{\r\n width:64px;\r\n height:64px;\r\n }\r\n\r\n .why-icon i{\r\n font-size:22px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:17px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:13px;\r\n line-height:1.65;\r\n }\r\n\r\n .why-orb-1{\r\n width:280px;\r\n height:280px;\r\n }\r\n\r\n .why-orb-2{\r\n width:240px;\r\n height:240px;\r\n }\r\n}\r\n\r\n@media(max-width:380px){\r\n .why-header h2{\r\n font-size:24px;\r\n }\r\n\r\n .why-card{\r\n padding:24px 18px 22px;\r\n gap:0 14px;\r\n }\r\n\r\n .why-icon-wrap{\r\n width:56px;\r\n height:56px;\r\n }\r\n\r\n .why-icon i{\r\n font-size:20px;\r\n }\r\n\r\n .why-card-title{\r\n font-size:16px;\r\n }\r\n\r\n .why-card-desc{\r\n font-size:12.5px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"why-section\">\r\n\r\n \r\n <div class=\"why-orb why-orb-1\"><\/div>\r\n <div class=\"why-orb why-orb-2\"><\/div>\r\n <div class=\"why-orb why-orb-3\"><\/div>\r\n\r\n <div class=\"why-container\">\r\n\r\n \r\n <div class=\"why-header why-reveal\">\r\n <div class=\"why-badge\">Why Choose Us<\/div>\r\n <h2>What Makes Us <span>Different<\/span><\/h2>\r\n <p>We bring trusted, affordable and certified home healthcare to every family across Dubai.<\/p>\r\n <div class=\"why-header-line\">\r\n <span><\/span>\r\n <div class=\"why-diamond\"><\/div>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-grid\">\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">01<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-certificate\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">DHA-Licensed<\/h3>\r\n <p class=\"why-card-desc\">Our company, and the entirety of our clinical staff, including nurses, are certified by the Dubai Health Authority for your peace of mind.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">02<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-shield-heart\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">High Quality Care<\/h3>\r\n <p class=\"why-card-desc\">Your health is the most precious thing you have and it's our top priority that you receive the best home care service with 100% satisfaction.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"why-card why-reveal\">\r\n <div class=\"why-card-num\">03<\/div>\r\n <div class=\"why-card-dots why-card-dots-tl\"><\/div>\r\n <div class=\"why-card-dots why-card-dots-br\"><\/div>\r\n\r\n <div class=\"why-icon-wrap\">\r\n <div class=\"why-icon-ring\"><\/div>\r\n <div class=\"why-icon\">\r\n <i class=\"fa-solid fa-hand-holding-dollar\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"why-card-title\">Affordable Packages<\/h3>\r\n <p class=\"why-card-desc\">Our home care service packages are priced reasonably & with every budget in mind, cause quality healthcare shouldn't break the bank.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\nconst whyEls = document.querySelectorAll('.why-reveal');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const whyObs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('why-visible');\r\n whyObs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n\r\n whyEls.forEach(el => whyObs.observe(el));\r\n} else {\r\n whyEls.forEach(el => el.classList.add('why-visible'));\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e53d524 e-con-full e-flex e-con e-parent\" data-id=\"e53d524\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ddb1c elementor-widget elementor-widget-html\" data-id=\"a5ddb1c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Care Stats Section<\/title>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n *{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n }\r\n\r\n body{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n overflow-x:hidden;\r\n }\r\n\r\n :root{\r\n --brand-dark:#5B5B5B;\r\n --brand-neutral:#B08F6D;\r\n --brand-light:#DBCBB6;\r\n --brand-pop:#F9F9F9;\r\n }\r\n\r\n \/* =========================\r\n REFERENCE STYLE STATS SECTION\r\n ========================== *\/\r\n\r\n .care-stats-section{\r\n --stats-bg:none; \/* add your image here later: url('your-image.jpg') *\/\r\n position:relative;\r\n overflow:hidden;\r\n padding:90px 20px;\r\n background:\r\n linear-gradient(135deg, rgba(91,91,91,0.92), rgba(176,143,109,0.76)),\r\n var(--stats-bg) center\/cover no-repeat;\r\n isolation:isolate;\r\n }\r\n\r\n .care-stats-section::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n radial-gradient(circle at 50% 10%, rgba(249,249,249,0.10), transparent 18%),\r\n radial-gradient(circle at 10% 85%, rgba(249,249,249,0.06), transparent 22%),\r\n radial-gradient(circle at 90% 75%, rgba(249,249,249,0.05), transparent 20%);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .care-stats-section::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(115deg, transparent 0 18%, rgba(249,249,249,0.04) 18% 19%, transparent 19% 100%),\r\n linear-gradient(70deg, transparent 0 68%, rgba(249,249,249,0.04) 68% 69%, transparent 69% 100%);\r\n z-index:0;\r\n pointer-events:none;\r\n }\r\n\r\n .care-stats-container{\r\n position:relative;\r\n z-index:2;\r\n max-width:1320px;\r\n margin:0 auto;\r\n display:grid;\r\n grid-template-columns:repeat(4, minmax(0, 1fr));\r\n gap:34px;\r\n align-items:start;\r\n }\r\n\r\n .care-stat-card{\r\n text-align:center;\r\n opacity:0;\r\n transform:translateY(40px);\r\n transition:opacity .7s ease, transform .7s ease;\r\n }\r\n\r\n .care-stat-card.is-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n\r\n .care-stat-card:nth-child(1){ transition-delay:.05s; }\r\n .care-stat-card:nth-child(2){ transition-delay:.12s; }\r\n .care-stat-card:nth-child(3){ transition-delay:.19s; }\r\n .care-stat-card:nth-child(4){ transition-delay:.26s; }\r\n\r\n .care-stat-icon{\r\n width:145px;\r\n height:130px;\r\n margin:0 auto 28px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n clip-path:polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);\r\n background:rgba(249,249,249,0.96);\r\n border:1px solid rgba(219,203,182,0.65);\r\n box-shadow:0 18px 38px rgba(0,0,0,0.14);\r\n transition:transform .35s ease, box-shadow .35s ease, background .35s ease;\r\n }\r\n\r\n .care-stat-card:hover .care-stat-icon{\r\n transform:translateY(-8px);\r\n box-shadow:0 24px 50px rgba(0,0,0,0.18);\r\n background:#fff;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:52px;\r\n color:var(--brand-neutral);\r\n line-height:1;\r\n }\r\n\r\n .care-stat-number{\r\n font-size:clamp(42px, 4vw, 68px);\r\n font-weight:800;\r\n color:var(--brand-light);\r\n line-height:1;\r\n letter-spacing:-1px;\r\n margin-bottom:16px;\r\n text-shadow:0 4px 20px rgba(0,0,0,0.10);\r\n }\r\n\r\n .care-stat-label{\r\n font-size:clamp(15px, 1.2vw, 22px);\r\n font-weight:600;\r\n color:var(--brand-pop);\r\n line-height:1.45;\r\n text-transform:uppercase;\r\n letter-spacing:2.4px;\r\n max-width:220px;\r\n margin:0 auto;\r\n }\r\n\r\n \/* =========================\r\n RESPONSIVE\r\n ========================== *\/\r\n\r\n @media (max-width: 1100px){\r\n .care-stats-container{\r\n gap:28px 20px;\r\n }\r\n\r\n .care-stat-icon{\r\n width:132px;\r\n height:120px;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:46px;\r\n }\r\n\r\n .care-stat-label{\r\n letter-spacing:2px;\r\n }\r\n }\r\n\r\n @media (max-width: 900px){\r\n .care-stats-section{\r\n padding:70px 18px;\r\n }\r\n\r\n .care-stats-container{\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n gap:34px 20px;\r\n }\r\n\r\n .care-stat-number{\r\n margin-bottom:12px;\r\n }\r\n }\r\n\r\n @media (max-width: 560px){\r\n .care-stats-section{\r\n padding:56px 14px;\r\n }\r\n\r\n .care-stats-container{\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n }\r\n\r\n .care-stat-card{\r\n max-width:320px;\r\n margin:0 auto;\r\n }\r\n\r\n .care-stat-icon{\r\n width:118px;\r\n height:106px;\r\n margin-bottom:20px;\r\n }\r\n\r\n .care-stat-icon i{\r\n font-size:40px;\r\n }\r\n\r\n .care-stat-number{\r\n font-size:50px;\r\n margin-bottom:10px;\r\n }\r\n\r\n .care-stat-label{\r\n font-size:16px;\r\n letter-spacing:1.6px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .care-stat-card,\r\n .care-stat-icon{\r\n transition:none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"care-stats-section\" style=\"--stats-bg:none;\">\r\n <div class=\"care-stats-container\">\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-house-medical\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"50\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Home Care<br>Services<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-hand-holding-medical\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"100\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Care Teams<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-users\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"50000\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Happy<br>Customers<\/p>\r\n <\/article>\r\n\r\n <article class=\"care-stat-card\">\r\n <div class=\"care-stat-icon\">\r\n <i class=\"fa-solid fa-award\"><\/i>\r\n <\/div>\r\n <h3 class=\"care-stat-number\">\r\n <span class=\"care-counter\" data-target=\"15\">0<\/span>\r\n <\/h3>\r\n <p class=\"care-stat-label\">Years of<br>Experience<\/p>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n const statCards = document.querySelectorAll('.care-stat-card');\r\n\r\n const statObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach((entry) => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n animateCounter(entry.target);\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, {\r\n threshold: 0.25\r\n });\r\n\r\n statCards.forEach((card) => statObserver.observe(card));\r\n\r\n function animateCounter(card){\r\n const counter = card.querySelector('.care-counter');\r\n if (!counter || counter.dataset.started === 'true') return;\r\n\r\n counter.dataset.started = 'true';\r\n\r\n const target = parseInt(counter.dataset.target, 10);\r\n const duration = target >= 1000 ? 1800 : 1400;\r\n const startTime = performance.now();\r\n\r\n function updateCounter(now){\r\n const elapsed = now - startTime;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 3);\r\n const current = Math.floor(target * eased);\r\n\r\n counter.textContent = current.toString();\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n counter.textContent = target.toString();\r\n }\r\n }\r\n\r\n requestAnimationFrame(updateCounter);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-775627e e-con-full e-flex e-con e-parent\" data-id=\"775627e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80b51a8 elementor-widget elementor-widget-html\" data-id=\"80b51a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Testimonials \u2014 Bionix On Call<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TESTIMONIALS SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.testi-section{\r\n padding:100px 40px;\r\n background:var(--pop);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Ambient glows matching hero style *\/\r\n.testi-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-120px; right:-160px;\r\n width:520px; height:520px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,.07) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n.testi-section::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-100px; left:-120px;\r\n width:400px; height:400px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,.09) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n\r\n\/* Deco circles \u2014 mirrors hero *\/\r\n.testi-deco{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,.08);\r\n pointer-events:none;\r\n}\r\n.testi-deco-1{width:360px;height:360px;top:-80px;left:-80px;}\r\n.testi-deco-2{width:200px;height:200px;bottom:60px;right:80px;border-color:rgba(219,203,182,.1);}\r\n\r\n.testi-wrapper{\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:1;\r\n}\r\n\r\n\/* \u2500\u2500 Section Header \u2500\u2500 *\/\r\n.testi-header{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:24px;\r\n margin-bottom:56px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.testi-header-left{}\r\n\r\n.testi-eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:8px 20px 8px 10px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.1);\r\n border:1px solid rgba(176,143,109,.2);\r\n margin-bottom:20px;\r\n}\r\n\r\n.testi-eyebrow-dot{\r\n width:32px; height:32px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid; place-items:center;\r\n color:#fff; font-size:12px;\r\n}\r\n\r\n.testi-eyebrow span{\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n}\r\n\r\n.testi-header h2{\r\n font-size:clamp(32px, 4.5vw, 56px);\r\n font-weight:800;\r\n letter-spacing:-.03em;\r\n line-height:1.05;\r\n color:#1a1a1a;\r\n}\r\n\r\n.testi-header h2 span{\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Google rating summary *\/\r\n.testi-rating-summary{\r\n display:flex;\r\n flex-direction:column;\r\n align-items:flex-end;\r\n gap:8px;\r\n flex-shrink:0;\r\n}\r\n\r\n.testi-rating-score{\r\n display:flex;\r\n align-items:center;\r\n gap:14px;\r\n}\r\n\r\n.testi-big-score{\r\n font-size:56px;\r\n font-weight:900;\r\n color:#1a1a1a;\r\n letter-spacing:-.04em;\r\n line-height:1;\r\n}\r\n\r\n.testi-score-meta{}\r\n\r\n.testi-stars{\r\n display:flex;\r\n gap:3px;\r\n margin-bottom:4px;\r\n}\r\n\r\n.testi-stars i{\r\n font-size:16px;\r\n color:var(--neutral);\r\n}\r\n\r\n.testi-score-meta p{\r\n font-size:13px;\r\n color:var(--dark);\r\n opacity:.7;\r\n font-weight:500;\r\n}\r\n\r\n.testi-google-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:7px 16px 7px 10px;\r\n border-radius:999px;\r\n background:#fff;\r\n border:1.5px solid rgba(176,143,109,.15);\r\n font-size:13px;\r\n font-weight:600;\r\n color:var(--dark);\r\n box-shadow:0 4px 14px rgba(0,0,0,.05);\r\n}\r\n\r\n.testi-google-badge i{\r\n font-size:16px;\r\n color:#4285F4;\r\n}\r\n\r\n\/* \u2500\u2500 Carousel Container \u2500\u2500 *\/\r\n.testi-track-wrap{\r\n position:relative;\r\n overflow:hidden;\r\n \/* fade edges *\/\r\n -webkit-mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);\r\n mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);\r\n}\r\n\r\n.testi-track{\r\n display:flex;\r\n gap:24px;\r\n transition:.6s var(--ease);\r\n will-change:transform;\r\n}\r\n\r\n\/* \u2500\u2500 Individual Card \u2500\u2500 *\/\r\n.testi-card{\r\n background:#fff;\r\n border:1.5px solid rgba(176,143,109,.12);\r\n border-radius:22px;\r\n padding:32px 28px;\r\n min-width:360px;\r\n max-width:360px;\r\n flex-shrink:0;\r\n position:relative;\r\n overflow:hidden;\r\n transition:.4s var(--ease);\r\n box-shadow:0 4px 20px rgba(0,0,0,.04);\r\n}\r\n\r\n.testi-card::before{\r\n content:\"\";\r\n position:absolute;\r\n bottom:0; left:0; right:0;\r\n height:3px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n transform:scaleX(0);\r\n transform-origin:left;\r\n transition:.4s var(--ease);\r\n}\r\n\r\n.testi-card:hover{\r\n transform:translateY(-6px);\r\n border-color:rgba(176,143,109,.28);\r\n box-shadow:0 20px 48px rgba(176,143,109,.12);\r\n}\r\n\r\n.testi-card:hover::before{\r\n transform:scaleX(1);\r\n}\r\n\r\n\/* Quote icon *\/\r\n.testi-quote{\r\n width:44px; height:44px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,.12), rgba(219,203,182,.18));\r\n border:1px solid rgba(176,143,109,.18);\r\n display:grid; place-items:center;\r\n color:var(--neutral);\r\n font-size:18px;\r\n margin-bottom:20px;\r\n}\r\n\r\n\/* Stars *\/\r\n.testi-card-stars{\r\n display:flex;\r\n gap:3px;\r\n margin-bottom:16px;\r\n}\r\n\r\n.testi-card-stars i{\r\n font-size:13px;\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Review text *\/\r\n.testi-card p{\r\n font-size:15px;\r\n line-height:1.75;\r\n color:var(--dark);\r\n font-weight:400;\r\n margin-bottom:24px;\r\n font-style:italic;\r\n opacity:.9;\r\n}\r\n\r\n\/* Author *\/\r\n.testi-author{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n padding-top:20px;\r\n border-top:1px solid rgba(176,143,109,.1);\r\n}\r\n\r\n.testi-avatar{\r\n width:46px; height:46px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:grid; place-items:center;\r\n font-size:18px;\r\n font-weight:700;\r\n color:#fff;\r\n flex-shrink:0;\r\n font-style:normal;\r\n}\r\n\r\n.testi-author-info{}\r\n\r\n.testi-author-name{\r\n font-size:15px;\r\n font-weight:700;\r\n color:#1a1a1a;\r\n margin-bottom:2px;\r\n}\r\n\r\n.testi-author-role{\r\n font-size:12px;\r\n font-weight:500;\r\n color:var(--neutral);\r\n display:flex;\r\n align-items:center;\r\n gap:5px;\r\n}\r\n\r\n.testi-author-role i{\r\n font-size:10px;\r\n}\r\n\r\n\/* Featured card *\/\r\n.testi-card.featured{\r\n background:linear-gradient(145deg, #2e2a26, #3a3630);\r\n border-color:rgba(219,203,182,.12);\r\n}\r\n\r\n.testi-card.featured .testi-quote{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:#fff;\r\n border-color:transparent;\r\n box-shadow:0 8px 20px rgba(176,143,109,.3);\r\n}\r\n\r\n.testi-card.featured .testi-card-stars i{\r\n color:var(--light);\r\n}\r\n\r\n.testi-card.featured p{\r\n color:#e8e0d8;\r\n opacity:1;\r\n}\r\n\r\n.testi-card.featured .testi-author{\r\n border-top-color:rgba(219,203,182,.1);\r\n}\r\n\r\n.testi-card.featured .testi-author-name{\r\n color:#fff;\r\n}\r\n\r\n.testi-card.featured .testi-author-role{\r\n color:var(--light);\r\n opacity:.8;\r\n}\r\n\r\n\/* \u2500\u2500 Navigation \u2500\u2500 *\/\r\n.testi-nav{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:16px;\r\n margin-top:44px;\r\n}\r\n\r\n.testi-btn{\r\n width:48px; height:48px;\r\n border-radius:50%;\r\n border:1.5px solid rgba(176,143,109,.2);\r\n background:#fff;\r\n color:var(--neutral);\r\n font-size:16px;\r\n display:grid; place-items:center;\r\n cursor:pointer;\r\n transition:.35s var(--ease);\r\n box-shadow:0 4px 14px rgba(0,0,0,.06);\r\n}\r\n\r\n.testi-btn:hover{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n color:#fff;\r\n border-color:transparent;\r\n transform:scale(1.08);\r\n box-shadow:0 10px 28px rgba(176,143,109,.28);\r\n}\r\n\r\n\/* Dots *\/\r\n.testi-dots{\r\n display:flex;\r\n gap:8px;\r\n align-items:center;\r\n}\r\n\r\n.testi-dot{\r\n width:8px; height:8px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.25);\r\n cursor:pointer;\r\n transition:.35s var(--ease);\r\n border:none;\r\n}\r\n\r\n.testi-dot.active{\r\n background:var(--neutral);\r\n width:24px;\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:960px){\r\n .testi-section{ padding:80px 28px }\r\n .testi-card{ min-width:300px; max-width:300px; }\r\n .testi-header{ flex-direction:column; align-items:flex-start; }\r\n .testi-rating-summary{ align-items:flex-start; }\r\n}\r\n\r\n@media(max-width:640px){\r\n .testi-section{ padding:64px 20px }\r\n .testi-header{ margin-bottom:36px }\r\n .testi-card{ min-width:calc(100vw - 56px); max-width:calc(100vw - 56px); padding:28px 22px }\r\n .testi-track-wrap{\r\n -webkit-mask-image:none;\r\n mask-image:none;\r\n }\r\n .testi-big-score{ font-size:44px }\r\n .testi-stars i{ font-size:14px }\r\n .testi-deco-1,.testi-deco-2{ display:none }\r\n}\r\n\r\n@media(max-width:400px){\r\n .testi-card{ min-width:calc(100vw - 40px); max-width:calc(100vw - 40px); }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"testi-section\">\r\n\r\n \r\n <div class=\"testi-deco testi-deco-1\"><\/div>\r\n <div class=\"testi-deco testi-deco-2\"><\/div>\r\n\r\n <div class=\"testi-wrapper\">\r\n\r\n \r\n <div class=\"testi-header\">\r\n <div class=\"testi-header-left\">\r\n <div class=\"testi-eyebrow\">\r\n <div class=\"testi-eyebrow-dot\"><i class=\"fa-solid fa-heart\"><\/i><\/div>\r\n <span>Patient Stories<\/span>\r\n <\/div>\r\n <h2>Trusted by Families<br>Across <span>Dubai<\/span><\/h2>\r\n <\/div>\r\n\r\n <div class=\"testi-rating-summary\">\r\n <div class=\"testi-rating-score\">\r\n <div class=\"testi-big-score\">4.9<\/div>\r\n <div class=\"testi-score-meta\">\r\n <div class=\"testi-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <p>Based on 200+ reviews<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-google-badge\">\r\n <i class=\"fa-brands fa-google\"><\/i>\r\n Google Reviews\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-track-wrap\">\r\n <div class=\"testi-track\" id=\"testiTrack\">\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"The nurse who visited was incredibly professional and kind. My elderly mother was nervous at first, but she was put completely at ease. The service was prompt and the care was exceptional.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">F<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Fatima Al Mansouri<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Jumeirah, Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card featured\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"I called at midnight when my father had a fever and the doctor arrived within 25 minutes. I was shocked by how fast and thorough the service was. Truly a lifesaver. Highly recommend to every family in Dubai.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">A<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Ahmed Khalid<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Downtown Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"We used Bionix On Call for post-surgery care for my husband. The physiotherapist visited daily and the progress was amazing. So convenient not having to travel to a clinic every day.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">S<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Sarah Thompson<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Dubai Marina<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star-half-stroke\"><\/i>\r\n <\/div>\r\n <p>\"Had a blood test done at home for the whole family. The technician was gentle, organised and explained everything clearly. Results came back quickly. Will definitely use again.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">R<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Ravi Nair<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Business Bay<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"As an expat with no family nearby, having Bionix On Call available 24\/7 gives me real peace of mind. The team is always warm, professional and genuinely caring. Absolutely worth it.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">L<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Laura M\u00fcller<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Palm Jumeirah<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-card\">\r\n <div class=\"testi-quote\"><i class=\"fa-solid fa-quote-left\"><\/i><\/div>\r\n <div class=\"testi-card-stars\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p>\"My newborn needed monitoring after discharge and the Bionix nurse was so gentle and knowledgeable. She also gave us new-parent advice that was incredibly helpful. Five stars, no question.\"<\/p>\r\n <div class=\"testi-author\">\r\n <div class=\"testi-avatar\">M<\/div>\r\n <div class=\"testi-author-info\">\r\n <div class=\"testi-author-name\">Mariam Hassan<\/div>\r\n <div class=\"testi-author-role\"><i class=\"fa-solid fa-location-dot\"><\/i> Al Barsha, Dubai<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"testi-nav\">\r\n <button class=\"testi-btn\" id=\"testiPrev\" aria-label=\"Previous\">\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"testi-dots\" id=\"testiDots\"><\/div>\r\n\r\n <button class=\"testi-btn\" id=\"testiNext\" aria-label=\"Next\">\r\n <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst track = document.getElementById('testiTrack');\r\nconst cards = track.querySelectorAll('.testi-card');\r\nconst dotsWrap = document.getElementById('testiDots');\r\nconst btnPrev = document.getElementById('testiPrev');\r\nconst btnNext = document.getElementById('testiNext');\r\n\r\nlet current = 0;\r\n\r\n\/* How many cards visible at once based on viewport *\/\r\nfunction visibleCount(){\r\n if(window.innerWidth <= 640) return 1;\r\n if(window.innerWidth <= 960) return 2;\r\n return 3;\r\n}\r\n\r\nconst totalSlides = () => Math.ceil(cards.length \/ visibleCount());\r\n\r\n\/* Build dots *\/\r\nfunction buildDots(){\r\n dotsWrap.innerHTML = '';\r\n for(let i = 0; i < totalSlides(); i++){\r\n const d = document.createElement('button');\r\n d.className = 'testi-dot' + (i === current ? ' active' : '');\r\n d.setAttribute('aria-label', `Slide ${i+1}`);\r\n d.addEventListener('click', () => goTo(i));\r\n dotsWrap.appendChild(d);\r\n }\r\n}\r\n\r\nfunction goTo(index){\r\n const total = totalSlides();\r\n current = (index + total) % total;\r\n\r\n const cardWidth = cards[0].offsetWidth + 24; \/* card + gap *\/\r\n const offset = current * visibleCount() * cardWidth;\r\n track.style.transform = `translateX(-${offset}px)`;\r\n\r\n dotsWrap.querySelectorAll('.testi-dot').forEach((d,i) => {\r\n d.classList.toggle('active', i === current);\r\n });\r\n}\r\n\r\nbtnPrev.addEventListener('click', () => goTo(current - 1));\r\nbtnNext.addEventListener('click', () => goTo(current + 1));\r\n\r\n\/* Touch \/ swipe support *\/\r\nlet startX = 0;\r\ntrack.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, {passive:true});\r\ntrack.addEventListener('touchend', e => {\r\n const diff = startX - e.changedTouches[0].clientX;\r\n if(Math.abs(diff) > 50) goTo(current + (diff > 0 ? 1 : -1));\r\n}, {passive:true});\r\n\r\n\/* Rebuild on resize *\/\r\nlet resizeTimer;\r\nwindow.addEventListener('resize', () => {\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(() => { current = 0; buildDots(); goTo(0); }, 200);\r\n});\r\n\r\n\/* Init *\/\r\nbuildDots();\r\ngoTo(0);\r\n\r\n\/* Auto-play *\/\r\nlet autoplay = setInterval(() => goTo(current + 1), 5000);\r\ntrack.addEventListener('mouseenter', () => clearInterval(autoplay));\r\ntrack.addEventListener('mouseleave', () => { autoplay = setInterval(() => goTo(current + 1), 5000); });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7f4d996 e-con-full e-flex e-con e-parent\" data-id=\"7f4d996\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57873c7 elementor-widget elementor-widget-html\" data-id=\"57873c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Bionix On Call \u2014 WhatsApp Banner<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --neutral: #B08F6D;\r\n --neutral-dark: #8a6b4e;\r\n --neutral-light: #c9aa8c;\r\n --white: #ffffff;\r\n --text: #1e1b18;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: #f6f2ee;\r\n padding: 60px 0;\r\n }\r\n\r\n \/* white outer section wrapper *\/\r\n .wa-section {\r\n background: #ffffff;\r\n padding: 40px;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BANNER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .wa-banner {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 24px;\r\n background: linear-gradient(120deg, #1DA851 0%, #25D366 50%, #20c05c 100%);\r\n padding: 52px 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 40px;\r\n min-height: 180px;\r\n }\r\n\r\n \/* large WhatsApp icon as background watermark *\/\r\n .wa-banner::before {\r\n content: \"\\f232\";\r\n font-family: \"Font Awesome 6 Brands\";\r\n font-weight: 400;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 340px;\r\n color: rgba(255,255,255,0.06);\r\n line-height: 1;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n \/* faint large ring *\/\r\n .wa-banner::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 380px;\r\n height: 380px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.07);\r\n pointer-events: none;\r\n }\r\n\r\n \/* extra outer ring *\/\r\n .ring {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 460px;\r\n height: 460px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,0.04);\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2500\u2500 LEFT: text \u2500\u2500 *\/\r\n .wa-content {\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n max-width: 560px;\r\n }\r\n\r\n .wa-label {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: rgba(255,255,255,0.85);\r\n letter-spacing: .3px;\r\n }\r\n\r\n .wa-title {\r\n font-size: clamp(1.6rem, 3.5vw, 2.4rem);\r\n font-weight: 800;\r\n color: var(--white);\r\n line-height: 1.15;\r\n letter-spacing: -.02em;\r\n }\r\n\r\n .wa-sub {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(255,255,255,0.78);\r\n line-height: 1.6;\r\n margin-top: 2px;\r\n }\r\n\r\n .wa-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 10px;\r\n padding: 13px 26px;\r\n border-radius: 999px;\r\n background: var(--white);\r\n color: #1A7A40;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n letter-spacing: .2px;\r\n width: fit-content;\r\n box-shadow: 0 6px 24px rgba(0,0,0,0.12);\r\n transition: transform .3s ease, box-shadow .3s ease, background .3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .wa-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0; left: -110%;\r\n width: 60%; height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(176,143,109,0.12), transparent);\r\n transition: left .5s ease;\r\n }\r\n\r\n .wa-btn:hover::after { left: 130%; }\r\n\r\n .wa-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(0,0,0,0.18);\r\n background: #f0fdf4;\r\n }\r\n\r\n .wa-btn i {\r\n font-size: 16px;\r\n color: #25D366;\r\n }\r\n\r\n .wa-btn .arrow {\r\n font-size: 11px;\r\n color: #1DA851;\r\n margin-left: 2px;\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT: big WhatsApp icon \u2500\u2500 *\/\r\n .wa-icon-block {\r\n position: relative;\r\n z-index: 2;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .wa-icon-circle {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.12);\r\n border: 2px solid rgba(255,255,255,0.2);\r\n display: grid;\r\n place-items: center;\r\n transition: transform .35s ease, background .35s ease;\r\n }\r\n\r\n .wa-banner:hover .wa-icon-circle {\r\n transform: scale(1.06);\r\n background: rgba(255,255,255,0.18);\r\n }\r\n\r\n .wa-icon-circle i {\r\n font-size: 40px;\r\n color: var(--white);\r\n }\r\n\r\n \/* pulse ring animation *\/\r\n .wa-icon-circle::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.15);\r\n animation: pulse-ring 2.2s ease-out infinite;\r\n }\r\n\r\n .wa-icon-circle::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(255,255,255,0.08);\r\n animation: pulse-ring 2.2s ease-out infinite .6s;\r\n }\r\n\r\n @keyframes pulse-ring {\r\n 0% { transform: scale(0.92); opacity: 1; }\r\n 100% { transform: scale(1.3); opacity: 0; }\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 900px) {\r\n .wa-section { padding: 28px; }\r\n .wa-banner { padding: 44px 40px; border-radius: 20px; }\r\n .wa-banner::before { font-size: 180px; right: 14%; }\r\n }\r\n\r\n @media (max-width: 680px) {\r\n .wa-section { padding: 20px; }\r\n .wa-banner {\r\n padding: 40px 28px;\r\n border-radius: 18px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 28px;\r\n min-height: unset;\r\n }\r\n .wa-banner::before { font-size: 140px; right: -2%; top: 40%; opacity: .6; }\r\n .wa-icon-block { align-self: flex-end; }\r\n .wa-icon-circle { width: 72px; height: 72px; }\r\n .wa-icon-circle i { font-size: 32px; }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .wa-section { padding: 14px; }\r\n .wa-banner { padding: 32px 20px; border-radius: 16px; }\r\n .wa-title { font-size: 1.5rem; }\r\n .wa-sub { font-size: 13px; }\r\n .wa-btn { font-size: 13px; padding: 11px 20px; }\r\n .wa-icon-circle { width: 60px; height: 60px; }\r\n .wa-icon-circle i { font-size: 26px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"wa-section\">\r\n<div class=\"wa-banner\">\r\n\r\n <div class=\"ring\"><\/div>\r\n\r\n \r\n <div class=\"wa-content\">\r\n <p class=\"wa-label\">Need Instant Help?<\/p>\r\n <h2 class=\"wa-title\">WhatsApp Us Now<\/h2>\r\n <p class=\"wa-sub\">\r\n Tell us your symptoms and we'll guide you<br>\r\n to the right doctor or treatment.\r\n <\/p>\r\n <a href=\"https:\/\/wa.me\/971501234567\" target=\"_blank\" class=\"wa-btn\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n Chat on WhatsApp\r\n <i class=\"fa-solid fa-arrow-right arrow\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-icon-block\">\r\n <div class=\"wa-icon-circle\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cd1dc6e e-con-full e-flex e-con e-parent\" data-id=\"cd1dc6e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b321f33 elementor-widget elementor-widget-html\" data-id=\"b321f33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>CTA Section<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--pop);\r\n}\r\n\r\n\/* ===== FULL WIDTH CTA ===== *\/\r\n\r\n.cta-section{\r\n width:100%;\r\n position:relative;\r\n overflow:hidden;\r\n background:linear-gradient(155deg, #3a3530 0%, #4a4440 25%, var(--dark) 50%, #4a4440 75%, #3a3530 100%);\r\n}\r\n\r\n\/* Shimmer *\/\r\n\r\n.cta-section::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:50%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(219,203,182,0.03), rgba(219,203,182,0.06), rgba(219,203,182,0.03), transparent);\r\n animation:ctaShimmer 8s ease-in-out infinite;\r\n z-index:1;\r\n pointer-events:none;\r\n}\r\n\r\n@keyframes ctaShimmer{\r\n 0%{ left:-100%; }\r\n 50%,100%{ left:160%; }\r\n}\r\n\r\n\/* Glows *\/\r\n\r\n.cta-glow{\r\n position:absolute;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.cta-glow-1{\r\n width:600px;\r\n height:600px;\r\n top:-40%;\r\n right:-5%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.15) 0%, transparent 55%);\r\n}\r\n\r\n.cta-glow-2{\r\n width:500px;\r\n height:500px;\r\n bottom:-40%;\r\n left:-5%;\r\n background:radial-gradient(circle, rgba(219,203,182,0.08) 0%, transparent 50%);\r\n}\r\n\r\n.cta-glow-3{\r\n width:300px;\r\n height:300px;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n background:radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 50%);\r\n}\r\n\r\n.cta-glow-4{\r\n width:250px;\r\n height:250px;\r\n top:10%;\r\n left:20%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 50%);\r\n}\r\n\r\n\/* Dot grids *\/\r\n\r\n.cta-dots{\r\n position:absolute;\r\n width:160px;\r\n height:160px;\r\n background-image:radial-gradient(rgba(219,203,182,0.06) 1.5px, transparent 1.5px);\r\n background-size:18px 18px;\r\n z-index:0;\r\n pointer-events:none;\r\n}\r\n\r\n.cta-dots-1{\r\n top:30px;\r\n right:60px;\r\n}\r\n\r\n.cta-dots-2{\r\n bottom:30px;\r\n left:60px;\r\n}\r\n\r\n.cta-dots-3{\r\n top:50%;\r\n left:48%;\r\n transform:translateY(-50%);\r\n width:100px;\r\n height:100px;\r\n opacity:.5;\r\n}\r\n\r\n\/* Rings *\/\r\n\r\n.cta-ring{\r\n position:absolute;\r\n border-radius:50%;\r\n border:1.5px solid rgba(219,203,182,0.04);\r\n pointer-events:none;\r\n z-index:0;\r\n}\r\n\r\n.cta-ring-1{\r\n width:250px;\r\n height:250px;\r\n bottom:-80px;\r\n right:-80px;\r\n}\r\n\r\n.cta-ring-2{\r\n width:380px;\r\n height:380px;\r\n bottom:-130px;\r\n right:-130px;\r\n}\r\n\r\n.cta-ring-3{\r\n width:200px;\r\n height:200px;\r\n top:-70px;\r\n left:-70px;\r\n}\r\n\r\n.cta-ring-4{\r\n width:320px;\r\n height:320px;\r\n top:-110px;\r\n left:-110px;\r\n}\r\n\r\n\/* ===== INNER CONTAINER ===== *\/\r\n\r\n.cta-inner{\r\n position:relative;\r\n z-index:2;\r\n max-width:1320px;\r\n margin:0 auto;\r\n padding:90px 60px;\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n align-items:center;\r\n gap:60px;\r\n}\r\n\r\n\/* ===== LEFT ===== *\/\r\n\r\n.cta-left{\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.cta-eyebrow{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n margin-bottom:22px;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:1.2px;\r\n text-transform:uppercase;\r\n color:rgba(255,255,255,0.55);\r\n}\r\n\r\n.cta-eyebrow-dot{\r\n width:8px;\r\n height:8px;\r\n border-radius:50%;\r\n background:var(--neutral);\r\n animation:ctaPulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes ctaPulse{\r\n 0%,100%{ opacity:1; transform:scale(1); }\r\n 50%{ opacity:0.4; transform:scale(0.6); }\r\n}\r\n\r\n.cta-left h2{\r\n font-size:46px;\r\n font-weight:800;\r\n color:var(--white);\r\n line-height:1.1;\r\n letter-spacing:-1.8px;\r\n margin-bottom:18px;\r\n}\r\n\r\n.cta-left h2 .cta-accent{\r\n background:linear-gradient(135deg, var(--light) 0%, var(--neutral) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.cta-left>p{\r\n font-size:17px;\r\n line-height:1.7;\r\n color:rgba(255,255,255,0.5);\r\n max-width:480px;\r\n margin-bottom:32px;\r\n}\r\n\r\n\/* Trust *\/\r\n\r\n.cta-trust{\r\n display:flex;\r\n align-items:center;\r\n gap:22px;\r\n flex-wrap:wrap;\r\n margin-bottom:36px;\r\n}\r\n\r\n.cta-trust-item{\r\n display:flex;\r\n align-items:center;\r\n gap:7px;\r\n font-size:13px;\r\n font-weight:500;\r\n color:rgba(255,255,255,0.5);\r\n}\r\n\r\n.cta-trust-item i{\r\n font-size:12px;\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Direct contact *\/\r\n\r\n.cta-direct{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:22px;\r\n}\r\n\r\n.cta-direct a{\r\n display:flex;\r\n align-items:center;\r\n gap:10px;\r\n text-decoration:none;\r\n color:var(--light);\r\n font-size:15px;\r\n font-weight:600;\r\n transition:all .3s ease;\r\n}\r\n\r\n.cta-direct a:hover{\r\n color:var(--white);\r\n transform:translateX(3px);\r\n}\r\n\r\n.cta-direct a .dir-icon{\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,0.18);\r\n display:grid;\r\n place-items:center;\r\n font-size:13px;\r\n color:var(--light);\r\n transition:all .3s ease;\r\n}\r\n\r\n.cta-direct a:hover .dir-icon{\r\n background:rgba(176,143,109,0.3);\r\n}\r\n\r\n\/* ===== RIGHT \u2014 FORM ===== *\/\r\n\r\n.cta-right{\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.cta-form-card{\r\n background:rgba(255,255,255,0.055);\r\n backdrop-filter:blur(22px);\r\n -webkit-backdrop-filter:blur(22px);\r\n border:1px solid rgba(219,203,182,0.1);\r\n border-radius:28px;\r\n padding:40px 36px;\r\n box-shadow:0 24px 60px rgba(0,0,0,0.18);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Form card inner glow *\/\r\n.cta-form-card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-50%;\r\n right:-30%;\r\n width:250px;\r\n height:250px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,0.08) 0%, transparent 60%);\r\n pointer-events:none;\r\n}\r\n\r\n.cta-form-header{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n margin-bottom:8px;\r\n}\r\n\r\n.cta-form-header-icon{\r\n width:42px;\r\n height:42px;\r\n border-radius:14px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.25), rgba(219,203,182,0.12));\r\n display:grid;\r\n place-items:center;\r\n color:var(--light);\r\n font-size:17px;\r\n}\r\n\r\n.cta-form-title{\r\n font-size:20px;\r\n font-weight:700;\r\n color:var(--white);\r\n}\r\n\r\n.cta-form-sub{\r\n font-size:13px;\r\n color:rgba(255,255,255,0.4);\r\n margin-bottom:26px;\r\n line-height:1.5;\r\n padding-left:54px;\r\n}\r\n\r\n.form-group{\r\n margin-bottom:16px;\r\n}\r\n\r\n.form-label{\r\n display:block;\r\n font-size:11px;\r\n font-weight:600;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n color:rgba(255,255,255,0.4);\r\n margin-bottom:6px;\r\n}\r\n\r\n.form-input,\r\n.form-select,\r\n.form-textarea{\r\n width:100%;\r\n padding:14px 16px;\r\n background:rgba(255,255,255,0.055);\r\n border:1.5px solid rgba(219,203,182,0.1);\r\n border-radius:14px;\r\n color:var(--white);\r\n font-size:14px;\r\n font-family:'Inter',sans-serif;\r\n font-weight:500;\r\n outline:none;\r\n transition:all .3s ease;\r\n -webkit-appearance:none;\r\n appearance:none;\r\n}\r\n\r\n.form-input::placeholder,\r\n.form-textarea::placeholder{\r\n color:rgba(255,255,255,0.22);\r\n}\r\n\r\n.form-input:focus,\r\n.form-select:focus,\r\n.form-textarea:focus{\r\n border-color:rgba(176,143,109,0.45);\r\n background:rgba(255,255,255,0.085);\r\n box-shadow:0 0 0 3px rgba(176,143,109,0.08);\r\n}\r\n\r\n.form-select{\r\n cursor:pointer;\r\n color:rgba(255,255,255,0.5);\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(219,203,182,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n background-repeat:no-repeat;\r\n background-position:right 14px center;\r\n padding-right:42px;\r\n}\r\n\r\n.form-select option{\r\n background:#3e3832;\r\n color:var(--white);\r\n}\r\n\r\n.form-select:valid{\r\n color:var(--white);\r\n}\r\n\r\n.form-row{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n}\r\n\r\n.form-textarea{\r\n resize:none;\r\n height:80px;\r\n}\r\n\r\n\/* Submit *\/\r\n\r\n.form-submit{\r\n width:100%;\r\n margin-top:10px;\r\n padding:17px 24px;\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border:none;\r\n border-radius:14px;\r\n font-size:15px;\r\n font-weight:700;\r\n font-family:'Inter',sans-serif;\r\n cursor:pointer;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:10px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n box-shadow:0 12px 30px rgba(176,143,109,0.3);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n.form-submit::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-100%;\r\n width:60%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);\r\n transition:left .6s ease;\r\n}\r\n\r\n.form-submit:hover::before{\r\n left:160%;\r\n}\r\n\r\n.form-submit:hover{\r\n transform:translateY(-3px) scale(1.02);\r\n box-shadow:0 18px 42px rgba(176,143,109,0.4);\r\n}\r\n\r\n.form-submit i{\r\n font-size:17px;\r\n transition:transform .3s ease;\r\n}\r\n\r\n.form-submit:hover i{\r\n transform:translateX(3px);\r\n}\r\n\r\n\/* Security note *\/\r\n\r\n.form-footer{\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:6px;\r\n margin-top:16px;\r\n font-size:11px;\r\n color:rgba(255,255,255,0.3);\r\n}\r\n\r\n.form-footer i{\r\n font-size:12px;\r\n color:rgba(255,255,255,0.25);\r\n}\r\n\r\n\/* ===== SCROLL ANIMATION ===== *\/\r\n\r\n.cta-animate{\r\n opacity:0;\r\n transform:translateY(50px);\r\n transition:all 1s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.cta-animate.cta-visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.cta-animate-delay-1{ transition-delay:.1s; }\r\n.cta-animate-delay-2{ transition-delay:.25s; }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:1100px){\r\n .cta-inner{\r\n padding:80px 44px;\r\n gap:44px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:40px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:34px 28px;\r\n }\r\n}\r\n\r\n@media(max-width:900px){\r\n .cta-inner{\r\n grid-template-columns:1fr;\r\n padding:60px 28px;\r\n gap:40px;\r\n text-align:center;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:36px;\r\n }\r\n\r\n .cta-left>p{\r\n margin:0 auto 28px;\r\n }\r\n\r\n .cta-trust{\r\n justify-content:center;\r\n }\r\n\r\n .cta-direct{\r\n justify-content:center;\r\n }\r\n\r\n .cta-form-card{\r\n max-width:520px;\r\n margin:0 auto;\r\n }\r\n\r\n .cta-form-sub{\r\n padding-left:0;\r\n text-align:center;\r\n }\r\n\r\n .cta-form-header{\r\n justify-content:center;\r\n }\r\n\r\n .cta-dots{\r\n display:none;\r\n }\r\n}\r\n\r\n@media(max-width:640px){\r\n .cta-inner{\r\n padding:48px 18px;\r\n gap:32px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:30px;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .cta-left h2 br{\r\n display:none;\r\n }\r\n\r\n .cta-left>p{\r\n font-size:14.5px;\r\n }\r\n\r\n .cta-trust{\r\n gap:12px;\r\n }\r\n\r\n .cta-trust-item{\r\n font-size:12px;\r\n }\r\n\r\n .cta-direct{\r\n flex-direction:column;\r\n align-items:center;\r\n gap:12px;\r\n }\r\n\r\n .cta-direct a{\r\n font-size:13px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:28px 20px;\r\n border-radius:22px;\r\n }\r\n\r\n .cta-form-title{\r\n font-size:17px;\r\n }\r\n\r\n .cta-form-sub{\r\n font-size:12px;\r\n }\r\n\r\n .form-row{\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-textarea{\r\n padding:13px 14px;\r\n font-size:13px;\r\n border-radius:12px;\r\n }\r\n\r\n .form-submit{\r\n padding:15px 20px;\r\n font-size:14px;\r\n border-radius:12px;\r\n }\r\n\r\n .cta-eyebrow{\r\n font-size:10px;\r\n justify-content:center;\r\n }\r\n\r\n .cta-glow-1{\r\n width:350px;\r\n height:350px;\r\n }\r\n\r\n .cta-glow-2{\r\n width:280px;\r\n height:280px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .cta-inner{\r\n padding:36px 14px;\r\n }\r\n\r\n .cta-left h2{\r\n font-size:26px;\r\n }\r\n\r\n .cta-form-card{\r\n padding:24px 16px;\r\n border-radius:18px;\r\n }\r\n\r\n .cta-form-header-icon{\r\n width:36px;\r\n height:36px;\r\n border-radius:11px;\r\n font-size:14px;\r\n }\r\n\r\n .cta-form-title{\r\n font-size:16px;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-textarea{\r\n padding:12px 12px;\r\n font-size:13px;\r\n }\r\n\r\n .form-submit{\r\n padding:14px 18px;\r\n font-size:13px;\r\n }\r\n\r\n .cta-trust-item{\r\n font-size:11px;\r\n }\r\n\r\n .cta-direct a{\r\n font-size:12px;\r\n }\r\n\r\n .cta-direct a .dir-icon{\r\n width:28px;\r\n height:28px;\r\n font-size:11px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"cta-section\">\r\n\r\n \r\n <div class=\"cta-glow cta-glow-1\"><\/div>\r\n <div class=\"cta-glow cta-glow-2\"><\/div>\r\n <div class=\"cta-glow cta-glow-3\"><\/div>\r\n <div class=\"cta-glow cta-glow-4\"><\/div>\r\n <div class=\"cta-dots cta-dots-1\"><\/div>\r\n <div class=\"cta-dots cta-dots-2\"><\/div>\r\n <div class=\"cta-dots cta-dots-3\"><\/div>\r\n <div class=\"cta-ring cta-ring-1\"><\/div>\r\n <div class=\"cta-ring cta-ring-2\"><\/div>\r\n <div class=\"cta-ring cta-ring-3\"><\/div>\r\n <div class=\"cta-ring cta-ring-4\"><\/div>\r\n\r\n <div class=\"cta-inner\">\r\n\r\n \r\n <div class=\"cta-left cta-animate\">\r\n\r\n <div class=\"cta-eyebrow\">\r\n <div class=\"cta-eyebrow-dot\"><\/div>\r\n Ready to Get Started\r\n <\/div>\r\n\r\n <h2>Book Your Home <br><span class=\"cta-accent\">Healthcare<\/span> Today<\/h2>\r\n\r\n <p>Get professional medical care delivered to your doorstep. Licensed doctors, nurses, and specialists available 24\/7 across Dubai.<\/p>\r\n\r\n <div class=\"cta-trust\">\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n DHA Licensed\r\n <\/div>\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n Available 24\/7\r\n <\/div>\r\n <div class=\"cta-trust-item\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n 2,500+ Patients\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-direct\">\r\n <a href=\"tel:+971501234567\">\r\n <span class=\"dir-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/span>\r\n +971 50 123 4567\r\n <\/a>\r\n <a href=\"mailto:care@bionixoncall.com\">\r\n <span class=\"dir-icon\"><i class=\"fa-solid fa-envelope\"><\/i><\/span>\r\n care@bionixoncall.com\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-right cta-animate cta-animate-delay-2\">\r\n <div class=\"cta-form-card\">\r\n\r\n <div class=\"cta-form-header\">\r\n <div class=\"cta-form-header-icon\"><i class=\"fa-solid fa-paper-plane\"><\/i><\/div>\r\n <div class=\"cta-form-title\">Send Us a Message<\/div>\r\n <\/div>\r\n <div class=\"cta-form-sub\">Fill in your details and we'll respond via WhatsApp instantly.<\/div>\r\n\r\n <form id=\"whatsappForm\" onsubmit=\"sendToWhatsApp(event)\">\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaName\">Full Name<\/label>\r\n <input class=\"form-input\" type=\"text\" id=\"ctaName\" placeholder=\"Your name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaPhone\">Phone Number<\/label>\r\n <input class=\"form-input\" type=\"tel\" id=\"ctaPhone\" placeholder=\"+971 50 XXX XXXX\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaEmail\">Email Address<\/label>\r\n <input class=\"form-input\" type=\"email\" id=\"ctaEmail\" placeholder=\"your@email.com\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaService\">Service Needed<\/label>\r\n <select class=\"form-select\" id=\"ctaService\" required>\r\n <option value=\"\" disabled selected>Select a service<\/option>\r\n <option value=\"IV Therapy\">IV Therapy<\/option>\r\n <option value=\"Home Nursing\">Home Nursing<\/option>\r\n <option value=\"Elderly Care\">Elderly Care<\/option>\r\n <option value=\"Doctor on Call\">Doctor on Call<\/option>\r\n <option value=\"Palliative Care\">Palliative Care<\/option>\r\n <option value=\"Wound Care\">Wound Care<\/option>\r\n <option value=\"Physiotherapy at Home\">Physiotherapy at Home<\/option>\r\n <option value=\"Lab Test at Home\">Lab Test at Home<\/option>\r\n <option value=\"Post-operative Care\">Post-operative Care<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\" for=\"ctaMessage\">Message (Optional)<\/label>\r\n <textarea class=\"form-textarea\" id=\"ctaMessage\" placeholder=\"Brief description of your needs...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"form-submit\">\r\n <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n Send via WhatsApp\r\n <\/button>\r\n\r\n <\/form>\r\n\r\n <div class=\"form-footer\">\r\n <i class=\"fa-solid fa-lock\"><\/i>\r\n Your details are secure & sent directly to our care team\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Scroll reveal\r\nconst ctaEls = document.querySelectorAll('.cta-animate');\r\n\r\nif ('IntersectionObserver' in window) {\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('cta-visible');\r\n obs.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n ctaEls.forEach(el => obs.observe(el));\r\n} else {\r\n ctaEls.forEach(el => el.classList.add('cta-visible'));\r\n}\r\n\r\n\/\/ WhatsApp form handler\r\nfunction sendToWhatsApp(e) {\r\n e.preventDefault();\r\n\r\n const name = document.getElementById('ctaName').value.trim();\r\n const phone = document.getElementById('ctaPhone').value.trim();\r\n const email = document.getElementById('ctaEmail').value.trim();\r\n const service = document.getElementById('ctaService').value;\r\n const message = document.getElementById('ctaMessage').value.trim();\r\n\r\n \/\/ Replace with your actual WhatsApp number (no + or spaces)\r\n const whatsappNumber = '971501234567';\r\n\r\n let text = `\ud83c\udfe5 *New Home Care Inquiry*\\n\\n`;\r\n text += `\ud83d\udc64 *Name:* ${name}\\n`;\r\n text += `\ud83d\udcf1 *Phone:* ${phone}\\n`;\r\n text += `\ud83d\udce7 *Email:* ${email}\\n`;\r\n text += `\ud83e\ude7a *Service:* ${service}\\n`;\r\n\r\n if (message) {\r\n text += `\ud83d\udcac *Message:* ${message}\\n`;\r\n }\r\n\r\n text += `\\n\ud83d\udccd *Source:* Bionix On Call Website`;\r\n\r\n const encoded = encodeURIComponent(text);\r\n const url = `https:\/\/wa.me\/${whatsappNumber}?text=${encoded}`;\r\n\r\n window.open(url, '_blank');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0a2658 e-con-full e-flex e-con e-parent\" data-id=\"e0a2658\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba497b7 elementor-widget elementor-widget-html\" data-id=\"ba497b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>FAQ Section<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\n:root{\r\n --dark:#5B5B5B;\r\n --dark-deep:#4a4a4a;\r\n --neutral:#B08F6D;\r\n --neutral-light:#c4a885;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --text:#2c2825;\r\n --muted:#7a7068;\r\n --white:#ffffff;\r\n}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:var(--white);\r\n}\r\n\r\n.faq-section{\r\n padding:90px 20px;\r\n background:var(--white);\r\n}\r\n\r\n.faq-container{\r\n max-width:780px;\r\n margin:auto;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n\r\n.faq-header{\r\n text-align:center;\r\n margin-bottom:54px;\r\n}\r\n\r\n.faq-header h2{\r\n font-size:42px;\r\n font-weight:800;\r\n letter-spacing:-1.2px;\r\n line-height:1.1;\r\n color:var(--text);\r\n margin-bottom:14px;\r\n}\r\n\r\n.faq-header h2 span{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n}\r\n\r\n.faq-header p{\r\n font-size:15px;\r\n color:var(--muted);\r\n line-height:1.7;\r\n max-width:480px;\r\n margin:0 auto;\r\n}\r\n\r\n\/* ===== FAQ LIST ===== *\/\r\n\r\n.faq-list{\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n}\r\n\r\n\/* ===== FAQ ITEM ===== *\/\r\n\r\n.faq-item{\r\n background:var(--white);\r\n border:1px solid rgba(176,143,109,0.1);\r\n border-radius:20px;\r\n overflow:hidden;\r\n box-shadow:0 8px 30px rgba(91,91,91,0.05), 0 2px 8px rgba(0,0,0,0.02);\r\n transition:all .45s cubic-bezier(0.19,1,0.22,1);\r\n position:relative;\r\n}\r\n\r\n.faq-item:hover{\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 40px rgba(176,143,109,0.1), 0 4px 12px rgba(0,0,0,0.03);\r\n border-color:rgba(176,143,109,0.16);\r\n}\r\n\r\n.faq-item.active{\r\n border-color:rgba(176,143,109,0.2);\r\n box-shadow:0 16px 48px rgba(176,143,109,0.12), 0 4px 14px rgba(0,0,0,0.03);\r\n background:var(--white);\r\n}\r\n\r\n\/* Left accent line *\/\r\n\r\n.faq-item::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:4px;\r\n height:0;\r\n background:linear-gradient(180deg, var(--neutral), var(--light), var(--neutral-light));\r\n border-radius:0 4px 4px 0;\r\n transition:height .5s cubic-bezier(0.19,1,0.22,1);\r\n z-index:3;\r\n}\r\n\r\n.faq-item.active::before{\r\n height:100%;\r\n}\r\n\r\n\/* ===== QUESTION ===== *\/\r\n\r\n.faq-question{\r\n padding:22px 24px;\r\n display:flex;\r\n align-items:center;\r\n gap:16px;\r\n cursor:pointer;\r\n user-select:none;\r\n transition:all .35s ease;\r\n}\r\n\r\n.faq-question:hover{\r\n background:rgba(176,143,109,0.03);\r\n}\r\n\r\n.faq-num{\r\n width:38px;\r\n height:38px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.08) 0%, rgba(219,203,182,0.08) 100%);\r\n border:1px solid rgba(176,143,109,0.1);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:13px;\r\n font-weight:700;\r\n color:var(--neutral);\r\n flex-shrink:0;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-item.active .faq-num{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n color:var(--white);\r\n border-color:transparent;\r\n box-shadow:0 6px 16px rgba(176,143,109,0.25);\r\n transform:scale(1.05);\r\n}\r\n\r\n.faq-q-text{\r\n flex:1;\r\n font-size:16.5px;\r\n font-weight:600;\r\n color:var(--text);\r\n line-height:1.4;\r\n transition:color .35s ease;\r\n}\r\n\r\n.faq-item.active .faq-q-text{\r\n color:var(--neutral);\r\n}\r\n\r\n\/* Toggle button *\/\r\n\r\n.faq-toggle{\r\n width:40px;\r\n height:40px;\r\n border-radius:12px;\r\n background:linear-gradient(135deg, rgba(176,143,109,0.06) 0%, rgba(219,203,182,0.06) 100%);\r\n border:1px solid rgba(176,143,109,0.1);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex-shrink:0;\r\n position:relative;\r\n transition:all .45s cubic-bezier(0.19,1,0.22,1);\r\n cursor:pointer;\r\n}\r\n\r\n.faq-toggle::before,\r\n.faq-toggle::after{\r\n content:\"\";\r\n position:absolute;\r\n background:var(--neutral);\r\n border-radius:2px;\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-toggle::before{\r\n width:14px;\r\n height:2px;\r\n}\r\n\r\n.faq-toggle::after{\r\n width:2px;\r\n height:14px;\r\n}\r\n\r\n.faq-item.active .faq-toggle{\r\n background:linear-gradient(135deg, var(--neutral) 0%, var(--neutral-light) 100%);\r\n border-color:transparent;\r\n box-shadow:0 6px 16px rgba(176,143,109,0.25);\r\n transform:rotate(45deg);\r\n}\r\n\r\n.faq-item.active .faq-toggle::before,\r\n.faq-item.active .faq-toggle::after{\r\n background:var(--white);\r\n}\r\n\r\n.faq-question:hover .faq-toggle{\r\n background:linear-gradient(135deg, rgba(176,143,109,0.12) 0%, rgba(219,203,182,0.12) 100%);\r\n border-color:rgba(176,143,109,0.18);\r\n transform:scale(1.06);\r\n}\r\n\r\n.faq-item.active .faq-question:hover .faq-toggle{\r\n transform:rotate(45deg) scale(1.06);\r\n}\r\n\r\n\/* ===== ANSWER ===== *\/\r\n\r\n.faq-answer{\r\n max-height:0;\r\n overflow:hidden;\r\n transition:max-height .5s cubic-bezier(0.19,1,0.22,1), padding .5s cubic-bezier(0.19,1,0.22,1);\r\n}\r\n\r\n.faq-answer-inner{\r\n padding:0 24px 0 78px;\r\n opacity:0;\r\n transform:translateY(-10px);\r\n transition:all .4s cubic-bezier(0.19,1,0.22,1) .1s;\r\n}\r\n\r\n.faq-item.active .faq-answer{\r\n max-height:300px;\r\n}\r\n\r\n.faq-item.active .faq-answer-inner{\r\n padding:0 24px 24px 78px;\r\n opacity:1;\r\n transform:translateY(0);\r\n}\r\n\r\n.faq-answer-inner p{\r\n font-size:14.5px;\r\n line-height:1.75;\r\n color:var(--muted);\r\n}\r\n\r\n.faq-answer-divider{\r\n width:40px;\r\n height:2px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n border-radius:2px;\r\n margin-bottom:12px;\r\n transform:scaleX(0);\r\n transform-origin:left;\r\n transition:transform .5s cubic-bezier(0.19,1,0.22,1) .15s;\r\n}\r\n\r\n.faq-item.active .faq-answer-divider{\r\n transform:scaleX(1);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n\r\n@media(max-width:600px){\r\n .faq-section{\r\n padding:56px 12px;\r\n }\r\n\r\n .faq-header h2{\r\n font-size:28px;\r\n letter-spacing:-0.8px;\r\n }\r\n\r\n .faq-header p{\r\n font-size:14px;\r\n }\r\n\r\n .faq-list{\r\n gap:12px;\r\n }\r\n\r\n .faq-item{\r\n border-radius:16px;\r\n }\r\n\r\n .faq-question{\r\n padding:18px 18px;\r\n gap:12px;\r\n }\r\n\r\n .faq-num{\r\n width:34px;\r\n height:34px;\r\n border-radius:10px;\r\n font-size:12px;\r\n }\r\n\r\n .faq-q-text{\r\n font-size:14.5px;\r\n }\r\n\r\n .faq-toggle{\r\n width:36px;\r\n height:36px;\r\n border-radius:10px;\r\n }\r\n\r\n .faq-toggle::before{ width:12px; }\r\n .faq-toggle::after{ height:12px; }\r\n\r\n .faq-item.active .faq-answer-inner{\r\n padding:0 18px 20px 64px;\r\n }\r\n\r\n .faq-answer-inner{\r\n padding:0 18px 0 64px;\r\n }\r\n\r\n .faq-answer-inner p{\r\n font-size:13.5px;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .faq-header h2{\r\n font-size:25px;\r\n }\r\n\r\n .faq-question{\r\n padding:16px 14px;\r\n gap:10px;\r\n }\r\n\r\n .faq-num{\r\n width:30px;\r\n height:30px;\r\n font-size:11px;\r\n border-radius:8px;\r\n }\r\n\r\n .faq-q-text{\r\n font-size:14px;\r\n }\r\n\r\n .faq-toggle{\r\n width:32px;\r\n height:32px;\r\n }\r\n\r\n .faq-item.active .faq-answer-inner{\r\n padding:0 14px 18px 54px;\r\n }\r\n\r\n .faq-answer-inner{\r\n padding:0 14px 0 54px;\r\n }\r\n\r\n .faq-answer-inner p{\r\n font-size:13px;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"faq-section\">\r\n <div class=\"faq-container\">\r\n\r\n <div class=\"faq-header\">\r\n <h2>Frequently Asked <span>Questions<\/span><\/h2>\r\n <p>Find answers to common questions about our home healthcare services across Dubai.<\/p>\r\n <\/div>\r\n\r\n <div class=\"faq-list\">\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">01<\/div>\r\n <div class=\"faq-q-text\">How do I book a doctor at home?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>You can easily book a doctor visit at home through our website or by contacting our support team. Our doctors are available across Dubai for consultations, check-ups, and ongoing treatment plans.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">02<\/div>\r\n <div class=\"faq-q-text\">Do you provide 24\/7 nursing staff?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes, our professional nurses are available 24\/7 for home healthcare, medication administration, wound care, and continuous patient monitoring throughout Dubai.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">03<\/div>\r\n <div class=\"faq-q-text\">Is home healthcare safe?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>All our healthcare professionals are DHA-licensed and continuously trained to provide safe, reliable, and hygienic home medical services following the highest standards.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">04<\/div>\r\n <div class=\"faq-q-text\">Do you offer elderly care services?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes. Our elderly care service includes daily assistance, physiotherapy, medical supervision, companionship, and personalized care plans designed for senior wellbeing.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">05<\/div>\r\n <div class=\"faq-q-text\">Can I book lab tests at home?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>Yes. We provide home sample collection services for diagnostic lab tests with quick and reliable reports delivered digitally to your email or app dashboard.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">\r\n <div class=\"faq-num\">06<\/div>\r\n <div class=\"faq-q-text\">What areas in Dubai do you cover?<\/div>\r\n <div class=\"faq-toggle\"><\/div>\r\n <\/div>\r\n <div class=\"faq-answer\">\r\n <div class=\"faq-answer-inner\">\r\n <div class=\"faq-answer-divider\"><\/div>\r\n <p>We provide home healthcare services across all major areas in Dubai including Downtown, Marina, JBR, Business Bay, Palm Jumeirah, and surrounding communities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst faqItems = document.querySelectorAll('.faq-item');\r\n\r\nfaqItems.forEach(item => {\r\n item.querySelector('.faq-question').addEventListener('click', () => {\r\n const wasActive = item.classList.contains('active');\r\n faqItems.forEach(el => el.classList.remove('active'));\r\n if (!wasActive) item.classList.add('active');\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba420f6 e-con-full e-flex e-con e-parent\" data-id=\"ba420f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d52f09 elementor-widget elementor-widget-html\" data-id=\"8d52f09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Footer \u2014 Bionix On Call<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* \u2500\u2500 Matches header CSS variables exactly \u2500\u2500 *\/\r\n:root{\r\n --dark:#5B5B5B;\r\n --neutral:#B08F6D;\r\n --light:#DBCBB6;\r\n --pop:#F9F9F9;\r\n --ease:cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n\r\nbody{\r\n font-family:'Inter',sans-serif;\r\n background:#fff;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.site-footer{\r\n background:#fff;\r\n color:var(--dark);\r\n padding-top:80px;\r\n border-top:1px solid rgba(176,143,109,.15);\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n\r\n\/* Subtle warm background texture \u2014 mirrors the hero's radial glow *\/\r\n.site-footer::before{\r\n content:\"\";\r\n position:absolute;\r\n top:-120px;\r\n right:-160px;\r\n width:480px;\r\n height:480px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(176,143,109,.06) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n.site-footer::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:-80px;\r\n left:-100px;\r\n width:340px;\r\n height:340px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(219,203,182,.07) 0%, transparent 70%);\r\n pointer-events:none;\r\n}\r\n\r\n.footer-container{\r\n position:relative;\r\n max-width:1200px;\r\n margin:auto;\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr 1fr;\r\n gap:48px;\r\n padding:0 40px;\r\n z-index:1;\r\n}\r\n\r\n\/* \u2500\u2500 COLUMN 1: About \u2500\u2500 *\/\r\n.footer-logo{\r\n width:150px;\r\n margin-bottom:22px;\r\n display:block;\r\n}\r\n\r\n.footer-about p{\r\n line-height:1.75;\r\n font-size:15px;\r\n font-weight:400;\r\n color:var(--dark);\r\n opacity:.85;\r\n margin-bottom:28px;\r\n max-width:320px;\r\n}\r\n\r\n\/* Social icons \u2014 match header's circular icon style *\/\r\n.footer-social{\r\n display:flex;\r\n gap:10px;\r\n}\r\n\r\n.footer-social a{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n width:38px;\r\n height:38px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,.1);\r\n border:1.5px solid rgba(176,143,109,.2);\r\n color:var(--neutral);\r\n text-decoration:none;\r\n font-size:15px;\r\n transition:.35s var(--ease);\r\n}\r\n\r\n.footer-social a:hover{\r\n background:linear-gradient(135deg, var(--neutral), #c4a07a);\r\n border-color:transparent;\r\n color:#fff;\r\n transform:translateY(-3px);\r\n box-shadow:0 8px 20px rgba(176,143,109,.28);\r\n}\r\n\r\n\/* \u2500\u2500 Column headings \u2014 mirror eyebrow style \u2500\u2500 *\/\r\n.footer-col h4{\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--neutral);\r\n margin-bottom:22px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n}\r\n\r\n\/* Small decorative dash before heading *\/\r\n.footer-col h4::before{\r\n content:\"\";\r\n display:inline-block;\r\n width:18px;\r\n height:2px;\r\n border-radius:999px;\r\n background:linear-gradient(90deg, var(--neutral), var(--light));\r\n}\r\n\r\n\/* \u2500\u2500 Links \u2500\u2500 *\/\r\n.footer-col ul{\r\n list-style:none;\r\n padding:0;\r\n}\r\n\r\n.footer-col ul li{\r\n margin-bottom:11px;\r\n}\r\n\r\n.footer-col ul li a{\r\n color:var(--dark);\r\n text-decoration:none;\r\n font-size:15px;\r\n font-weight:500;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:7px;\r\n transition:.3s var(--ease);\r\n opacity:.8;\r\n}\r\n\r\n.footer-col ul li a::before{\r\n content:\"\";\r\n display:inline-block;\r\n width:5px;\r\n height:5px;\r\n border-radius:50%;\r\n background:var(--light);\r\n flex-shrink:0;\r\n transition:.3s var(--ease);\r\n}\r\n\r\n.footer-col ul li a:hover{\r\n color:var(--neutral);\r\n opacity:1;\r\n transform:translateX(4px);\r\n}\r\n\r\n.footer-col ul li a:hover::before{\r\n background:var(--neutral);\r\n transform:scale(1.4);\r\n}\r\n\r\n\/* \u2500\u2500 Contact list \u2500\u2500 *\/\r\n.footer-contact{\r\n list-style:none;\r\n padding:0;\r\n}\r\n\r\n.footer-contact li{\r\n display:flex;\r\n align-items:flex-start;\r\n gap:12px;\r\n font-size:15px;\r\n font-weight:500;\r\n color:var(--dark);\r\n opacity:.85;\r\n margin-bottom:14px;\r\n line-height:1.5;\r\n}\r\n\r\n.footer-contact li i{\r\n width:32px;\r\n height:32px;\r\n border-radius:50%;\r\n background:rgba(176,143,109,.1);\r\n border:1px solid rgba(176,143,109,.18);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:12px;\r\n color:var(--neutral);\r\n flex-shrink:0;\r\n margin-top:1px;\r\n}\r\n\r\n\/* \u2500\u2500 Bottom bar \u2500\u2500 *\/\r\n.footer-bottom{\r\n position:relative;\r\n z-index:1;\r\n border-top:1px solid rgba(176,143,109,.12);\r\n margin-top:60px;\r\n padding:22px 40px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n flex-wrap:wrap;\r\n gap:12px;\r\n}\r\n\r\n.footer-bottom p{\r\n font-size:14px;\r\n font-weight:500;\r\n color:var(--dark);\r\n opacity:.6;\r\n}\r\n\r\n\/* Trust badge \u2014 mirrors the header trust-tag pill *\/\r\n.footer-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:6px 16px 6px 8px;\r\n border-radius:999px;\r\n background:rgba(176,143,109,.08);\r\n border:1px solid rgba(176,143,109,.18);\r\n font-size:13px;\r\n font-weight:600;\r\n color:var(--dark);\r\n letter-spacing:.03em;\r\n}\r\n\r\n.footer-badge-dot{\r\n width:24px;\r\n height:24px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg, var(--neutral), var(--light));\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:#fff;\r\n font-size:10px;\r\n}\r\n\r\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n@media(max-width:1000px){\r\n .footer-container{\r\n grid-template-columns:1fr 1fr;\r\n gap:36px;\r\n padding:0 30px;\r\n }\r\n .footer-about p{max-width:100%}\r\n}\r\n\r\n@media(max-width:600px){\r\n .site-footer{padding-top:56px}\r\n\r\n .footer-container{\r\n grid-template-columns:1fr;\r\n gap:32px;\r\n padding:0 24px;\r\n text-align:center;\r\n }\r\n\r\n .footer-logo{margin:0 auto 20px}\r\n .footer-about p{max-width:100%}\r\n\r\n .footer-social{justify-content:center}\r\n\r\n .footer-col h4{justify-content:center}\r\n .footer-col h4::before{display:none}\r\n\r\n .footer-col ul li a{justify-content:center}\r\n .footer-col ul li a::before{display:none}\r\n\r\n .footer-contact li{justify-content:center}\r\n\r\n .footer-bottom{\r\n flex-direction:column;\r\n align-items:center;\r\n text-align:center;\r\n padding:18px 24px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<footer class=\"site-footer\">\r\n <div class=\"footer-container\">\r\n\r\n \r\n <div class=\"footer-col footer-about\">\r\n <img decoding=\"async\" src=\"https:\/\/bionixoncall.justeasyshop.com\/wp-content\/uploads\/2026\/03\/bionix-on-call-logo.png\" class=\"footer-logo\" alt=\"Bionix On Call\">\r\n <p>\r\n Bionix On Call provides professional home healthcare services across Dubai. Our certified doctors, nurses and caregivers ensure compassionate care at your doorstep.\r\n <\/p>\r\n <div class=\"footer-social\">\r\n <a href=\"#\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"Twitter\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Quick Links<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Home<\/a><\/li>\r\n <li><a href=\"#\">About Us<\/a><\/li>\r\n <li><a href=\"#\">Services<\/a><\/li>\r\n <li><a href=\"#\">Doctor On Call<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Our Services<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Home Nursing<\/a><\/li>\r\n <li><a href=\"#\">Doctor Visit<\/a><\/li>\r\n <li><a href=\"#\">Elderly Care<\/a><\/li>\r\n <li><a href=\"#\">Physiotherapy<\/a><\/li>\r\n <li><a href=\"#\">Lab Test at Home<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-col\">\r\n <h4>Contact Info<\/h4>\r\n <ul class=\"footer-contact\">\r\n <li>\r\n <i class=\"fa-solid fa-location-dot\"><\/i>\r\n Dubai, United Arab Emirates\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-phone\"><\/i>\r\n +971 50 000 0000\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n info@bionixoncall.com\r\n <\/li>\r\n <li>\r\n <i class=\"fa-solid fa-clock\"><\/i>\r\n 24\/7 Healthcare Support\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Bionix On Call. All Rights Reserved.<\/p>\r\n <div style=\"display:flex;gap:10px;flex-wrap:wrap;justify-content:center\">\r\n <span class=\"footer-badge\">\r\n <span class=\"footer-badge-dot\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/span>\r\n DHA Approved\r\n <\/span>\r\n <span class=\"footer-badge\">\r\n <span class=\"footer-badge-dot\"><i class=\"fa-solid fa-bolt\"><\/i><\/span>\r\n 30 Min Response\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bionix On Call \u2014 Header Home About Services IV Therapy Home Nursing Elderly Care Doctor on Call Palliative Care Wound […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":268,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/bionixoncall.justeasyshop.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}