/*
 Theme Name:   Medvill Child
 Theme URI:    https://rstheme.com/products/wordpress/medvill/
 Description:  Medvill Child theme — Health Plus Home Health Care
 Author:       Health Plus Home Health Care
 Template:     medvill
 Version:      3.0
 License:      GNU General Public License v2 or later
*/

/* ===========================================================================
   Health Plus — design tokens
   =========================================================================== */
:root {
    --hp-blue:        #1A2A6C;   /* deep navy blue used in header + footer */
    --hp-blue-2:      #0F76B0;   /* mid blue */
    --hp-blue-light:  #E6F2FA;
    --hp-accent:      #25D366;   /* WhatsApp green / accent */
    --hp-green:       #5DBE2A;
    --hp-red:         #E1242A;
    --hp-text:        #2A2F3A;
    --hp-muted:       #6B7280;
    --hp-bg-soft:     #F6FAFD;
    --hp-radius:      14px;
    --hp-radius-sm:   8px;
    --hp-shadow:      0 10px 30px rgba(8, 42, 77, 0.08);
    --hp-shadow-strong: 0 20px 50px rgba(8, 42, 77, 0.18);
    --hp-container:   1280px;
}

/* ===========================================================================
   Service carousel (home page "Our Major Services") — Slick-powered
   slider, 4 per row on desktop, with blue dot navigation at the bottom.
   The slider is initialised from functions.php on .service-carousel.
   =========================================================================== */
/* Force every card in the visible Slick row to be the same height so the
   arrow button at the bottom of each card sits on the same baseline. */
.service-carousel .slick-track { display: flex !important; align-items: stretch !important; }
.service-carousel .slick-track > .service-item { height: auto !important; display: flex !important; }

.service-carousel .service-item {
    padding: 0 12px;
    box-sizing: border-box;
    flex-direction: column;
}
.service-carousel .service-item > * { width: 100%; }
.service-carousel .service-item .service-img { aspect-ratio: 4/3; overflow: hidden; }
.service-carousel .service-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
}
/* services-desc: column flex so we can push the arrow to the bottom */
.service-carousel .service-item .services-desc {
    padding: 18px 0 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Arrow button always at the bottom of its card */
.service-carousel .service-item .icon-button { margin-top: auto !important; padding-top: 14px; }

/* Slick dot pagination on the white services section — blue dots */
.service-carousel .slick-dots,
.service-carousel ~ .slick-dots {
    position: static !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 30px 0 0 !important;
    padding: 0;
    width: 100%;
}
.service-carousel .slick-dots li,
.service-carousel ~ .slick-dots li {
    margin: 0 !important; padding: 0 !important;
    line-height: 0;
    width: auto !important; height: auto !important;
}
.service-carousel .slick-dots li button,
.service-carousel ~ .slick-dots li button {
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--hp-blue-2) !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.service-carousel .slick-dots li.slick-active button,
.service-carousel ~ .slick-dots li.slick-active button {
    background: var(--hp-blue-2) !important;
    transform: scale(1.2);
}

/* Hide arrows; dots are the only navigation */
.service-carousel .slick-arrow,
.service-carousel ~ .slick-arrow,
.owl-nav, .owl-dots { display: none !important; }

/* ===========================================================================
   cl_testimonial slider — keep Slick's native L→R slider behaviour
   (3 per row, dot pagination at the bottom). Cards stretch to equal height
   inside each slide via a flex track. Dots are white because the section
   sits on the dark-blue Health Plus background.
   =========================================================================== */

/* Make every card in the visible slide the same height — flex the track,
   then let each slide stretch and the inner card fill it. */
.cl-testimonial .slick-track { display: flex !important; align-items: stretch !important; }
.cl-testimonial .slick-track > .testimonial-item { height: auto !important; display: flex !important; }

/* Each card: clean white panel, blue accent bar, author pinned to bottom */
.cl-testimonial .single-testimonial {
    background: #fff;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    padding: 18px 22px 22px;     /* tighter top so text sits close to card top */
    margin: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.cl-testimonial .image-testimonial {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 !important;       /* plugin set 60px top here for a quote icon — drop it */
    margin: 0 !important;
}
.cl-testimonial .single-testimonial::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    background: var(--hp-blue-2);
    border-radius: 2px;
}
/* Original archived <p> uses an inline `margin-bottom:82px` and the
   cl_testimonial plugin's CSS sets padding-left:30px. Override both. */
.cl-testimonial .image-testimonial > p,
.cl-testimonial .image-testimonial p[style] {
    padding-left: 12px !important;
    margin-bottom: 14px !important;
    color: var(--hp-text);
    line-height: 1.65;
    flex: 0 0 auto;
    text-align: left !important;
}

/* Global rule — no justified text anywhere on the site */
[style*="text-align:justify"],
[style*="text-align: justify"],
.text-justify { text-align: left !important; }

/* The "BOOK APPOINTMENT" heading was inline-styled white for a dark-bg
   section we don't render. Restore visibility for it specifically by
   targeting its containing vc_row only — leaves "Our Happy Clients"
   inside #reviews untouched (that one is still white on dark blue). */
.vc_custom_1736870551492 .rs-heading h2.title,
.vc_custom_1736870551492 .rs-heading h2 { color: var(--hp-blue) !important; }

/* ===========================================================================
   "Why Choose Our Homecare" cards — make each card a horizontal row
   (icon on the left, title on the right). The archive used a vertical
   stack which leaves the text floating below tiny thumbnail icons.
   =========================================================================== */
/* Scope all of these to .services-style-2 ONLY — the "Why Choose" cards.
   The same .rs-services class also wraps the blue AFFORDABLE PRICE /
   PERSONALIZED CARE / CERTIFIED EXPERTS cards (.services-style-7), which
   already have their own inline white text colour and shouldn't be touched. */
.rs-services .services-style-2 .services-item {
    display: flex !important;
    align-items: center;
    gap: 0 !important;
    padding: 0 0 22px;
}
.rs-services .services-style-2 .services-desc { padding-left: 4px; flex: 1; min-width: 0; }
.rs-services .services-style-2 .services-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hp-blue-light);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;       /* override Medvill's padding-right:25px */
}
/* Hide photo-as-icon and replace with a meaningful SVG per card */
.rs-services .services-style-2 .services-icon img { display: none !important; }
.rs-services .services-style-2 .services-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: var(--hp-blue-2);
    -webkit-mask: var(--svc2-icon, none) center / contain no-repeat;
            mask: var(--svc2-icon, none) center / contain no-repeat;
    margin: auto;
}
/* Identify each card by its (now-hidden) image src — :has() reads attributes
   regardless of display state, so this still works even though img is hidden. */
/* Card 1 — Emergency Services: ambulance */
.services-style-2:has(img[src*="Ambulance"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M19 7h-3V5.5C16 4.12 14.88 3 13.5 3h-3C9.12 3 8 4.12 8 5.5V7H5c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h.41c.46 1.16 1.58 2 2.89 2s2.43-.84 2.89-2h1.62c.46 1.16 1.58 2 2.89 2s2.43-.84 2.89-2H19c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 5.5c0-.28.22-.5.5-.5h3c.28 0 .5.22.5.5V7h-4V5.5zM8.3 19.7c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm7.4 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zM13 13h-2v2H9v-2H7v-2h2V9h2v2h2v2z'/></svg>");
}
/* Card 2 — A Dedicated Team: group of people (image: Nursing-image-Banner) */
.services-style-2:has(img[src*="Nursing-image-Banner"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>");
}
/* Card 3 — Free Assessments: clipboard with check (image: Doctor-Consultation) */
.services-style-2:has(img[src*="Doctor-Consultation"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/></svg>");
}
/* Card 4 — Cost-effective Solutions: money (image: Support-at-Oldage) */
.services-style-2:has(img[src*="Support-at-Oldage"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/></svg>");
}
/* Card 5 — Expert Professionals: award (image: Nursing-Service-Sec) */
.services-style-2:has(img[src*="Nursing-Service-Sec"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M9.68 13.69L12 11.93l2.31 1.76-.88-2.85L15.75 9h-2.84L12 6.19 11.09 9H8.25l2.31 1.84-.88 2.85zM20 10c0-4.42-3.58-8-8-8s-8 3.58-8 8c0 2.03.76 3.87 2 5.28V23l6-2 6 2v-7.72c1.24-1.41 2-3.25 2-5.28zm-8-6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6zm0 15l-4 1.02v-3.1c1.18.69 2.54 1.08 4 1.08s2.82-.39 4-1.08v3.1L12 19z'/></svg>");
}
/* Card 6 — 24/7 Availability: clock (image: Blood-tests) */
.services-style-2:has(img[src*="Blood-tests"]) .services-icon::before {
    --svc2-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>");
}
.rs-services .services-style-2 .services-desc .services-title,
.rs-services .services-style-2 .services-desc h2,
.rs-services .services-style-2 .services-desc h3,
.rs-services .services-style-2 .services-desc h4 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700;
    color: var(--hp-blue) !important;
    line-height: 1.3;
}
.rs-services .services-style-2 .services-desc .services-title a,
.rs-services .services-style-2 .services-desc h2 a {
    color: var(--hp-blue) !important;
    text-decoration: none;
}
.rs-services .services-style-2 .services-desc p:empty { display: none; }

/* ===========================================================================
   AFFORDABLE PRICE / PERSONALIZED CARE / CERTIFIED EXPERTS cards
   (.services-style-7 — dark-blue background cards). Keep heading text
   white, centre the circular icon, drop the legacy 34px text padding.
   =========================================================================== */
/* Centre the whole card stack: circle on top, heading, paragraph */
.vc_row.top-services-dark .services-style-7 .services-item {
    align-items: stretch !important;        /* let desc fill full width */
    text-align: center;
    padding: 26px 24px !important;
}
.vc_row.top-services-dark .services-style-7 .services-desc {
    width: 100% !important;
    flex: 1 1 100% !important;
    text-align: center;
    margin-top: 22px;             /* gap between circle and heading */
    padding-left: 0 !important;   /* drop the 4px nudge inherited from Why-Choose rules */
}
.vc_row.top-services-dark .services-style-7 .services-desc p,
.vc_row.top-services-dark .services-style-7 .services-desc .services-title {
    text-align: center !important;
}

.services-style-7 .services-icon {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    margin: 0 auto;               /* centre the circle horizontally */
    padding: 0 !important;        /* parent theme sets padding-right:25px which pushes the icon left */
}
/* Hide the awkward photo-as-icon — replace with a clean SVG icon per card */
.services-style-7 .services-icon img { display: none !important; }
.services-style-7 .services-icon::before {
    content: "";
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
    background-color: #fff;
    -webkit-mask: var(--svc-icon, none) center / contain no-repeat;
            mask: var(--svc-icon, none) center / contain no-repeat;
    margin: auto !important;     /* belt-and-suspenders centring inside the circle */
}
/* Card 1 — AFFORDABLE PRICE: dollar/cash icon (monetization_on) */
.vc_row.top-services-dark > .vc_col-sm-4:nth-child(1) .services-style-7 .services-icon::before {
    --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/></svg>");
}
/* Card 2 — PERSONALIZED CARE: heart */
.vc_row.top-services-dark > .vc_col-sm-4:nth-child(2) .services-style-7 .services-icon::before {
    --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>");
}
/* Card 3 — CERTIFIED EXPERTS: verified badge */
.vc_row.top-services-dark > .vc_col-sm-4:nth-child(3) .services-style-7 .services-icon::before {
    --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z'/></svg>");
}

/* Make all three cards in the row the same height — flex the row + columns
   so each card stretches to match the tallest sibling. */
.vc_row.top-services-dark { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.vc_row.top-services-dark > .wpb_column.vc_col-sm-4 { display: flex !important; flex-direction: column; }
.vc_row.top-services-dark > .wpb_column.vc_col-sm-4 > .vc_column-inner,
.vc_row.top-services-dark > .wpb_column.vc_col-sm-4 .wpb_wrapper { display: flex !important; flex-direction: column; flex: 1; }
.vc_row.top-services-dark .rs-services,
.vc_row.top-services-dark .service-inner.services-style-7,
.vc_row.top-services-dark .services-style-7 .services-wrap,
.vc_row.top-services-dark .services-style-7 .services-item { display: flex !important; flex-direction: column; flex: 1; }
.vc_row.top-services-dark .services-style-7 .services-desc { flex: 1; }
/* One column has a stray vc_empty_space below the card — hide so all three
   columns have identical content height. */
.vc_row.top-services-dark .vc_empty_space { display: none !important; }
.services-style-7 .services-desc .services-title,
.services-style-7 .services-desc .services-title a,
.services-style-7 .services-desc h2,
.services-style-7 .services-desc h3,
.services-style-7 .services-desc h4 {
    color: #fff !important;
}
/* Drop the inline padding-bottom:34px the archive shipped on these cards. */
.services-style-7 .services-desc p[style*="padding-bottom"] { padding-bottom: 0 !important; }
.services-style-7 .services-desc p:empty { display: none; }

/* ===========================================================================
   Contact Form 7 / Appointment form on the home page — proper input
   styling, balanced two-column layout, prominent submit button.
   =========================================================================== */
.wpcf7-form .contact-page1.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.wpcf7-form .contact-page1.row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;          /* Bootstrap sets col-sm-6 max-width:50% which fights our grid */
    flex: 0 0 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wpcf7-form .contact-page1 p { margin: 0 !important; }
.wpcf7-form .wpcf7-form-control:not([type="submit"]) {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    background: #fff !important;
    color: var(--hp-text) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: none !important;
    box-sizing: border-box;
    line-height: 1.4;
}
.wpcf7-form .wpcf7-form-control:not([type="submit"])::placeholder { color: #9ca3af; }
.wpcf7-form .wpcf7-form-control:not([type="submit"]):focus {
    outline: none;
    border-color: var(--hp-blue-2) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 176, 0.15) !important;
}
/* Wrap the <select> so we can paint a chevron via ::after — more robust
   than data-URIs across CSS parsers and respects parent theme overrides. */
.wpcf7-form .wpcf7-form-control-wrap[data-name*="menu"],
.wpcf7-form .select-doctors,
.wpcf7-form .col-sm-6:has(> p > .wpcf7-form-control-wrap > select) {
    position: relative;
}
/* Need to beat .wpcf7-form .wpcf7-form-control:not([type="submit"]) on specificity */
.wpcf7-form .wpcf7-form-control.wpcf7-select.wpcf7-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff !important;
    padding-right: 42px !important;
    cursor: pointer;
    /* Make the selected option text visibly crisp */
    color: var(--hp-text) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.wpcf7-form .select-doctors > p { position: relative; margin: 0 !important; }
/* Down-arrow chevron painted via ::after on the wrapper <p>.
   Using two rotated borders is more reliable than a data-URI SVG. */
.wpcf7-form .select-doctors > p::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -6px;        /* visually centre the diamond shape */
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--hp-blue-2);
    border-bottom: 2px solid var(--hp-blue-2);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 2;
}
/* Make sure the dropdown options (when opened) are readable */
.wpcf7-form .wpcf7-select option {
    color: var(--hp-text);
    background: #fff;
    padding: 6px 10px;
}
.wpcf7-form textarea.wpcf7-textarea {
    min-height: 130px !important;
    resize: vertical;
}
/* The full-width textarea + button row */
.wpcf7-form .contact-page1.row .col-sm-12 {
    grid-column: 1 / -1;
}
/* Submit button — make it a proper CTA */
.wpcf7-form .wpcf7-submit {
    display: inline-block !important;
    background: var(--hp-blue-2) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 118, 176, 0.35);
    transition: background .15s ease, transform .15s ease;
}
.wpcf7-form .wpcf7-submit:hover {
    background: var(--hp-blue) !important;
    transform: translateY(-1px);
}

/* ===========================================================================
   Home page two-column rows used by both "Meet Our Chairperson" and
   "Welcome To Health Plus" sections (both share vc_custom_1563529423658).
   Vertically centre the right-side image against the left-side text and
   give the image rounded corners + a subtle shadow.
   =========================================================================== */
.vc_custom_1563529423658 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
}
.vc_custom_1563529423658 > .wpb_column {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.vc_custom_1563529423658 .wpb_single_image img,
.vc_custom_1563529423658 .vc_single_image-wrapper img {
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    height: auto;
    display: block;
}
/* Welcome section's portrait photo — cap the height so it doesn't dominate
   the row. Cover-crop with face anchored toward the top keeps the subject. */
.vc_custom_1563529423658 .wpb_single_image img[src*="Debashis-Roy"] {
    max-height: 450px !important;
    height: 450px !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* ===========================================================================
   Contact-Us page — the archive shipped contact-title in white (originally
   for a dark-bg section we don't render). Make them brand-blue so the
   "Call Us", "E-mail Address", "Address" labels are visible on white.
   =========================================================================== */
.contact-2-info .contact-title,
.contact-2-info .address-item h3,
.contact-2-info .address-item h4 {
    color: var(--hp-blue) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
}
.contact-2-info .address-text {
    color: var(--hp-text);
}
.contact-2-info .address-item {
    padding: 16px 18px;
    border-radius: var(--hp-radius);
    background: rgba(15, 118, 176, 0.05);
    margin-bottom: 14px;
    align-items: center;
    gap: 16px;
    display: flex;
}
/* Circle badge wrapper for the icon — light-blue with white SVG icon
   inside, matching the home page "Why Choose Our Homecare" cards. */
/* Beat parent theme's #rs-contact .contact-address.style3 .address-item
   .address-icon { background: transparent !important; } */
#rs-contact .contact-address.style3 .address-item .address-icon.address-icon,
.contact-2-info .address-item .address-icon {
    flex: 0 0 64px;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background-color: var(--hp-blue-2) !important;
    background-image: none !important;
    background: var(--hp-blue-2) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin-right: 0 !important;
    line-height: 64px !important;
}
/* Hide the broken icon-font glyph (the theme's icon font isn't loaded) */
.contact-2-info .address-icon i { display: none !important; }
/* Match parent theme specificity to beat its
   `#rs-contact .contact-address.style3 ...::before { display: none !important }`
   AND the parent's `::before { opacity: 0 }` (only shown on hover by default) */
#rs-contact .contact-address.style3 .address-item .address-icon::before,
#rs-contact .contact-address.style3 .address-item:hover .address-icon::before,
.contact-2-info .address-icon::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    width: 30px !important;
    height: 30px !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-mask: var(--contact-icon, none) center / contain no-repeat !important;
            mask: var(--contact-icon, none) center / contain no-repeat !important;
}
/* Also kill any transition on the icon circle itself so it doesn't animate
   on hover (border-color change, etc.) */
#rs-contact .contact-address.style3 .address-item .address-icon,
.contact-2-info .address-icon { transition: none !important; }
/* Phone icon for "Call Us" — also bumped to ID-level specificity */
#rs-contact .contact-address.style3 .address-item:nth-child(1) .address-icon::before {
    --contact-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/></svg>") !important;
}
/* Mail icon for "E-mail Address" */
#rs-contact .contact-address.style3 .address-item:nth-child(2) .address-icon::before {
    --contact-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>") !important;
}
/* Location pin icon for "Address" */
#rs-contact .contact-address.style3 .address-item:nth-child(3) .address-icon::before {
    --contact-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") !important;
}
/* Beat parent theme's
   `.contact-2-info .rs-contact .contact-address .address-item .address-text a { color: #fff !important }` */
.contact-2-info .rs-contact .contact-address .address-item .address-text a,
.contact-2-info .rs-contact .contact-address .address-item .address-text p,
.contact-2-info .rs-contact .contact-address .address-item .address-text > *:not(.contact-title) {
    color: var(--hp-text) !important;
}
.contact-2-info .rs-contact .contact-address .address-item .address-text a:hover {
    color: var(--hp-blue) !important;
}

/* Drop the soft card shadow around the form column */
.rs-contact .vc_column-inner { box-shadow: none !important; }

/* Tighten the empty space above the "Get In Touch" heading */
.rs-contact .vc_column-inner { padding-top: 0 !important; }
.rs-contact .rs-heading { margin-top: 0 !important; padding-top: 0 !important; }
.rs-contact .rs-heading h2.title,
.rs-contact .rs-heading h2 { margin-top: 0 !important; padding-top: 0 !important; }

/* ===========================================================================
   Counter / stats strip on the home page — the archive rendered every
   counter number/label with inline `color:#ffffff` because the section
   was meant to live on a dark background. The WPBakery custom CSS that
   would have set that background isn't generated for us, so the white
   text was invisible on white. Restore a dark gradient + style icons.
   =========================================================================== */
.vc_row.responsive2col {
    background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-2)) !important;
    padding: 60px 24px !important;
    margin: 40px 0 !important;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-strong);
}
.vc_row.responsive2col .rs-counter-list {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: flex-start;
}
/* Hide the photo-as-icon and replace with a meaningful SVG icon per counter */
.vc_row.responsive2col .counter-icon { padding: 0 !important; }
.vc_row.responsive2col .counter-icon img { display: none !important; }
.vc_row.responsive2col .counter-icon::before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-mask-image: var(--counter-icon, none);
            mask-image: var(--counter-icon, none);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 36px 36px;
            mask-size: 36px 36px;
}
/* Use a single white-on-translucent disc instead of masking — keeps the
   circle AND draws the icon over it via an inner ::after */
.vc_row.responsive2col .counter-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.3);
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}
.vc_row.responsive2col .counter-icon::before {
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
}
/* Counter 1 — HAPPY PATIENTS: smiley face */
.vc_row.responsive2col .rs-counter-list:nth-child(1) .counter-icon::before,
.vc_row.responsive2col .wpb_column:nth-child(1) .counter-icon::before {
    --counter-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/></svg>");
}
/* Counter 2 — DEPARTMENTS: hospital building */
.vc_row.responsive2col .wpb_column:nth-child(2) .counter-icon::before {
    --counter-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M19 8h-2V3H7v5H5c-1.1 0-2 .9-2 2v11h8v-4h2v4h8V10c0-1.1-.9-2-2-2zM7 18H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V8h2v2zm4 4H9v-2h2v2zm0-4H9V8h2v2zm0-4H9V4h2v2zm4 8h-2v-2h2v2zm0-4h-2V8h2v2zm0-4h-2V4h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2v-2h2v2z'/></svg>");
}
/* Counter 3 — EXPERT DOCTORS: doctor / stethoscope */
.vc_row.responsive2col .wpb_column:nth-child(3) .counter-icon::before {
    --counter-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M19 8c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1s-1 .45-1 1v.5c-1.97 1.04-3.84 1-5.5 1S8.97 5.54 7 4.5V4c0-.55-.45-1-1-1s-1 .45-1 1v3c0 .55.45 1 1 1 .55 0 1-.45 1-1v-.27c.94.42 2 .67 3 .78V9c0 2.21 1.79 4 4 4s4-1.79 4-4V7.51c1-.11 2.06-.36 3-.78V7c0 .55.45 1 1 1zm-7 4c-1.66 0-3-1.34-3-3v-.16c.4.07 2.6.07 3 .07s2.6 0 3-.07V9c0 1.66-1.34 3-3 3zm5 4h-1v3c0 1.1-.9 2-2 2s-2-.9-2-2v-1.5c0-.83-.67-1.5-1.5-1.5S9 14.67 9 15.5v3.05c-.83.49-1.85.65-2.85.45-1.4-.28-2.41-1.58-2.41-3.02V14c2.21 0 4-1.79 4-4h2c0 2.76-2.24 5-5 5v1.99c0 .55.18 1.06.49 1.46.16.21.36.41.6.57.32.21.55.5.61.84.04.21.12.42.24.61.46.71 1.27 1.13 2.11 1.13.66 0 1.29-.24 1.78-.66.49-.42.79-1.01.84-1.66.04-.51.32-.98.74-1.27.42-.29.71-.79.71-1.34V14h-2v-2c0-.55.45-1 1-1s1 .45 1 1v3c0 .55.45 1 1 1z'/></svg>");
}
.vc_row.responsive2col .count-text,
.vc_row.responsive2col .count-text .count-number,
.vc_row.responsive2col .count-text .rs-counter,
.vc_row.responsive2col .count-text h2,
.vc_row.responsive2col .count-text h3,
.vc_row.responsive2col .count-text h4,
.vc_row.responsive2col .count-text span { color: #fff !important; }

/* Keep "100" and "+" on the same line — the source HTML had a literal
   newline between the two spans which the browser would otherwise wrap. */
.vc_row.responsive2col .count-text .count-number { white-space: nowrap; }
.vc_row.responsive2col .count-text .count-number > span { display: inline; }
/* Small visible gap between the number and the + */
.vc_row.responsive2col .count-text .count-number > .rs-counter + span { margin-left: 6px; }
.vc_row.responsive2col .count-text .rs-counter,
.vc_row.responsive2col .count-text .count-number > span {
    font-size: 40px !important;
    font-weight: 700;
    line-height: 1.1 !important;
}
.vc_row.responsive2col .count-text h2,
.vc_row.responsive2col .count-text h3,
.vc_row.responsive2col .count-text h4 {
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 6px 0 0 !important;
    font-weight: 600;
}
.vc_row.responsive2col .count-text h3 span,
.vc_row.responsive2col .count-text h4 span {
    font-size: inherit !important;
}
.cl-testimonial .image-testimonial > p > i:empty { display: none; }
.cl-testimonial .testimonial-image:empty { display: none; }

/* Author block pinned to the bottom of every card */
.cl-testimonial .cl-author-info {
    list-style: none;
    padding: 0 !important;
    margin-top: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 12px !important;
}
.cl-testimonial .cl-author-info li { margin: 0; padding: 0; line-height: 1.4; }
.cl-testimonial .cl-author-info li:first-child {
    font-weight: 700;
    color: var(--hp-blue) !important;
    font-size: 15px;
}
.cl-testimonial .cl-author-info li:empty { display: none; }

/* The "OUR HAPPY CLIENTS" section had 71px of empty space above the heading
   and the dots were rendering 15px BELOW the blue background. Tighten the
   top, give the dots room to live inside the section. */
#reviews { padding: 0 0 25px !important; margin-top: 70px !important; }
/* The column-inner inside #reviews had padding-top:35px from WPBakery — drop it */
#reviews > .container > * > .vc_column_container > .vc_column-inner,
#reviews .vc_column-inner { padding-top: 30px !important; }
/* The H2 also has its own 36px margin-top — keep it modest */
#reviews .rs-heading h2.title { margin-top: 0 !important; }

/* === Slick dot pagination — white dots for the dark-blue section =========== */
.cl-testimonial .slick-dots {
    position: static !important;          /* plugin sets absolute bottom:-25px — drop it */
    bottom: auto !important;
    display: flex !important;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 25px 0 0 !important;
    padding: 0;
    width: 100%;
}
.cl-testimonial .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    width: auto !important;
    height: auto !important;
}
/* Override parent theme's #cl-testimonial.cl-testimonial9 ... border rule */
.cl-testimonial .slick-dots li button {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background .15s ease, transform .15s ease;
}
.cl-testimonial .slick-dots li button:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}
.cl-testimonial .slick-dots li.slick-active button {
    background: #fff !important;
    transform: scale(1.25);
}

/* Hide prev/next arrows — dots are the only navigation */
.cl-testimonial .slick-prev,
.cl-testimonial .slick-next { display: none !important; }

/* If a row has a "bg-fixed" parallax intent but image is missing,
   give it a sensible solid background */
.vc_row.bg-fixed:not([style*="background"]) { background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-2)); color:#fff; }
.vc_row.vc_row-has-fill { background-clip: padding-box; }

/* Counter / stats section */
.rs-counter,
.counter-item { text-align: center; }
.counter-item h2, .counter-number {
    color: var(--hp-blue);
    font-size: 48px;
    font-weight: 800;
    margin: 0;
}
.counter-item h4, .counter-title {
    color: var(--hp-text);
    font-weight: 600;
    letter-spacing: .04em;
    margin: 6px 0 0;
}

/* Force WPBakery row gutters not to break full-width sections */
.vc_row.vc_row-fluid { margin-left: 0; margin-right: 0; }
.vc_row[data-vc-full-width="true"] { width: 100% !important; max-width: 100% !important; left: 0 !important; }
.vc_row .wpb_column { padding-left: 15px; padding-right: 15px; }

/* Inner-row vc_row should not have wrapping issues */
.vc_row .vc_row.vc_inner { margin-left: -15px; margin-right: -15px; }

@media (max-width: 991px) {
    /* (service carousel responsive handled by Slick options) */
    .rs-blog-slider, .rs-testimonial-slider { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    /* (service carousel responsive handled by Slick options) */
    .rs-blog-slider, .rs-testimonial-slider { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Base resets so the parent theme's heavy chrome doesn't interfere
   =========================================================================== */
body { margin: 0; color: var(--hp-text); font-family: 'Poppins', 'Open Sans', system-ui, -apple-system, sans-serif; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--hp-blue-2); text-decoration: none; }
a:hover { color: var(--hp-blue); }

/* Hide the parent theme's header & footer chrome — we render our own */
.hp-site #rs-header,
.hp-site .rs-footer-main,
.hp-site .footer-bottom-bar,
.hp-site .rs-footer,
.hp-site footer:not(.hp-footer),
.hp-site header:not(.hp-nav-wrap):not(.hp-topbar) { display: none !important; }
.hp-site .rs-breadcrumbs,
.hp-site .rs-breadcrumbs-inner,
.hp-site .inner-page-title { display: none !important; }

/* Parent theme's "sidenav" mobile drawer — keep hidden by default */
ul.sidenav { transform: translateX(100%) !important; transition: transform .25s ease !important; }

/* Parent body padding/preloader removal */
.preloader-area, .pre-loader, #pre-loader { display: none !important; }

/* ===========================================================================
   TOP BAR — logo + 3 contact pills
   =========================================================================== */
.hp-topbar {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 0;
}
.hp-topbar-inner {
    max-width: var(--hp-container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.hp-topbar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.hp-topbar-logo .hp-logo-img {
    max-height: 76px;
    width: auto;
    display: block;
}
.hp-logo-text {
    font-weight: 800;
    color: var(--hp-blue);
    font-size: 22px;
    letter-spacing: .04em;
}
.hp-topbar-info {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hp-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--hp-text);
    text-decoration: none;
    transition: background .15s ease;
}
.hp-topbar-item:hover {
    background: var(--hp-blue-light);
    color: var(--hp-text);
}
.hp-topbar-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hp-blue-light);
    color: var(--hp-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.hp-topbar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hp-topbar-label {
    font-weight: 700;
    color: var(--hp-blue);
    font-size: 15px;
}
.hp-topbar-value {
    color: var(--hp-muted);
    font-size: 13.5px;
}

/* ===========================================================================
   PRIMARY NAV BAR — blue band with menu + icons
   =========================================================================== */
.hp-nav-wrap {
    background: var(--hp-blue);
    position: relative;
    top: 0;
    z-index: 998;
    box-shadow: 0 4px 10px rgba(26, 42, 108, 0.08);
    transition: box-shadow .2s ease, padding .2s ease;
}
/* When scrolled past the contact bar, pin the nav to the viewport top.
   JS toggles `is-stuck` on .hp-nav-wrap. We also reserve space via
   body padding-top so content doesn't jump under the fixed bar. */
.hp-nav-wrap.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 0 8px 24px rgba(26, 42, 108, 0.22);
    transform: translateY(0);
}
.hp-nav-wrap.is-stuck.hp-nav-slide-in { animation: hp-nav-slide-down .25s ease forwards; }
@keyframes hp-nav-slide-down {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
/* Spacer keeps layout stable when nav switches to fixed */
.hp-nav-spacer { display: none; }
.hp-nav-spacer.is-active { display: block; }
.hp-nav-inner {
    max-width: var(--hp-container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 60px;
}
.hp-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 10px;
    cursor: pointer;
}
.hp-nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    margin: 5px 0;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.hp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hp-nav { flex: 1; }
.hp-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hp-menu > li { position: relative; }
.hp-menu > li > a {
    display: inline-block;
    padding: 20px 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13.5px;
    transition: color .15s ease, background .15s ease;
}
.hp-menu > li > a:hover,
.hp-menu > li.current-menu-item > a,
.hp-menu > li.current-page-ancestor > a,
.hp-menu > li.current-menu-parent > a {
    color: #ffd86b;
}
.hp-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    border-radius: 0 0 12px 12px;
    border-top: 3px solid var(--hp-blue-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1000;
}
.hp-menu > li:hover > .sub-menu,
.hp-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hp-menu .sub-menu a {
    display: block;
    padding: 10px 18px;
    color: var(--hp-text);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
}
.hp-menu .sub-menu li:last-child a { border-bottom: 0; }
.hp-menu .sub-menu a:hover { background: var(--hp-blue-light); color: var(--hp-blue); }

.hp-nav-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hp-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.hp-icon-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.hp-icon-btn.hp-social-fb:hover { background: #1877F2; }
.hp-icon-btn.hp-social-in:hover { background: #0A66C2; }
.hp-icon-btn.hp-social-ig:hover { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }

/* ===========================================================================
   MAIN content area
   =========================================================================== */
.hp-main { background: #fff; }
.hp-main > article > .hp-home-content > * { margin-block: 0; }

/* Suppress parent theme's container squash on standard pages */
.main-contain,
.site-content { padding: 0 !important; max-width: none !important; }
.container, .container-fluid { max-width: var(--hp-container); width: 100%; padding-inline: 24px; }
body.page article, body.single-services article, body.single-post article {
    max-width: var(--hp-container);
    margin: 0 auto;
    padding: 40px 24px 60px;
}
body.home article { max-width: none; margin: 0; padding: 0; }

/* ===========================================================================
   HOME — HERO
   =========================================================================== */
.hp-hero {
    padding: 100px 24px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    position: relative;
}
.hp-hero-inner { max-width: 900px; margin: 0 auto; }
.hp-hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(4px);
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.hp-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5.5vw, 60px);
    margin: 0 0 18px;
    line-height: 1.1;
    font-weight: 800;
}
.hp-hero p { font-size: clamp(15px, 1.6vw, 18px); margin: 0 auto 28px; max-width: 720px; opacity: .94; }
.hp-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hp-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    border: 2px solid transparent;
}
.hp-btn-primary { background: var(--hp-blue-2); color: #fff; box-shadow: 0 8px 20px rgba(15,118,176,.35); }
.hp-btn-primary:hover { background: var(--hp-blue); color: #fff; transform: translateY(-1px); }
.hp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.hp-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ===========================================================================
   HOME — section wrappers
   =========================================================================== */
.hp-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 12px;
    font-weight: 700;
    color: var(--hp-blue-2);
    margin-bottom: 12px;
}
.hp-eyebrow-light { color: #cfe6f5; }
.hp-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.hp-section-head h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; color: var(--hp-blue); font-weight: 800; }
.hp-section-head p { color: var(--hp-muted); font-size: 17px; }

.hp-usp {
    max-width: var(--hp-container);
    margin: -60px auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 4;
}
.hp-usp-card {
    background: #fff;
    border-radius: var(--hp-radius);
    padding: 36px 28px;
    box-shadow: var(--hp-shadow);
    text-align: center;
    border-top: 4px solid var(--hp-blue-2);
    transition: transform .2s, box-shadow .2s;
}
.hp-usp-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-strong); }
.hp-usp-card h3 { margin: 0 0 12px; color: var(--hp-blue); font-size: 22px; font-weight: 700; }
.hp-usp-card p { color: var(--hp-muted); margin: 0; }

.hp-welcome, .hp-chair, .hp-services, .hp-appointment, .hp-testimonials, .hp-blogs {
    max-width: var(--hp-container);
    margin: 0 auto 100px;
    padding: 0 24px;
}
.hp-welcome-grid, .hp-chair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.hp-chair { background: var(--hp-bg-soft); padding: 60px 24px; border-radius: var(--hp-radius); }
.hp-welcome-text h2, .hp-chair-text h2 { color: var(--hp-blue); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 16px; font-weight: 800; }
.hp-welcome-text p, .hp-chair-text p { color: var(--hp-muted); margin: 0 0 14px; line-height: 1.7; }
.hp-welcome-img img, .hp-chair-img img { width: 100%; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow-strong); display: block; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.service-card {
    background: #fff;
    border-radius: var(--hp-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--hp-shadow);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--hp-shadow-strong); color: inherit; }
.service-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hp-blue-light); }
.service-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.service-card:hover figure img { transform: scale(1.05); }
.service-card h3, .service-card h4 {
    margin: 18px 22px 6px;
    color: var(--hp-blue);
    font-size: 18px;
    font-weight: 700;
}
.service-card p { margin: 0 22px 18px; color: var(--hp-muted); font-size: 14px; line-height: 1.55; }
.service-card-cta { margin: auto 22px 18px; font-weight: 600; color: var(--hp-blue-2); font-size: 14px; }

.hp-stats {
    max-width: var(--hp-container);
    margin: 0 auto 100px;
    padding: 60px 24px;
    background: linear-gradient(135deg, var(--hp-blue-2), var(--hp-blue));
    color: #fff;
    border-radius: var(--hp-radius);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
.hp-stat-num { display: block; font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1; margin-bottom: 8px; }
.hp-stat-label { letter-spacing: .18em; text-transform: uppercase; font-size: 13px; opacity: .9; }

.hp-why {
    margin: 0 0 100px;
    padding: 90px 24px;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.hp-why-inner { max-width: var(--hp-container); margin: 0 auto; }
.hp-why h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 40px; font-weight: 800; }
.hp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-why-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--hp-radius);
    padding: 28px;
}
.hp-why-card h3 { margin: 0 0 10px; color: #fff; font-size: 20px; }
.hp-why-card p { margin: 0; opacity: .9; line-height: 1.6; }

.hp-appointment-inner {
    background: var(--hp-blue-light);
    border-radius: var(--hp-radius);
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: center;
    box-shadow: var(--hp-shadow);
}
.hp-appointment-text h2 { color: var(--hp-blue); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 16px; }
.hp-appointment-text p { color: var(--hp-muted); margin: 0 0 14px; line-height: 1.7; }
.hp-appointment-image img { width: 100%; border-radius: var(--hp-radius); display: block; }

/* Flex layout so a partial last row is centered (e.g. 5 testimonials → 3 + 2 centred) */
.hp-testimonial-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.hp-testimonial {
    flex: 0 0 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    background: #fff;
    margin: 0;
    padding: 28px 28px 28px 36px;     /* room for the left accent bar */
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}
/* Vertical blue accent bar on the left (replaces the old curly-quote glyph)
   — matches the home page testimonial card. */
.hp-testimonial::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 28px;
    bottom: 28px;
    width: 3px;
    background: var(--hp-blue-2);
    border-radius: 2px;
    font-family: inherit;
    opacity: 1;
    color: transparent;
    font-size: 0;
}
.hp-testimonial blockquote {
    margin: 0 0 18px !important;       /* override theme's 35px default blockquote margin */
    padding: 0 0 0 14px !important;    /* override theme's 50/60/40/0 padding; leave a tiny gap to the accent bar */
    border: 0 !important;
    background: transparent !important; /* override theme's #fbfbfb panel background */
    font-style: italic;
    flex: 0 0 auto;
}
/* Kill the parent theme's own blockquote::before/::after — those were drawing
   a second blue bar and a decorative tail, on top of our accent bar. */
.hp-testimonial blockquote::before,
.hp-testimonial blockquote::after { content: none !important; display: none !important; }
.hp-testimonial blockquote p {
    color: var(--hp-text);
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
    font-style: italic;
}
.hp-testimonial figcaption {
    color: var(--hp-blue) !important;
    font-weight: 800;
    font-size: 18px;
    margin-top: auto !important;       /* push the name to the bottom of the card */
    padding: 18px 0 0 !important;
    text-align: center;
    font-style: normal;
}
/* Strip any leading em-dash content the figcaption may carry (e.g. "— Name") */
.hp-testimonial figcaption { text-indent: 0; }

/* The testimonials page wrapper had 40/60 padding around the grid — tighten it. */
.hp-page-article:has(.hp-testimonial-grid) { padding: 16px 0 64px !important; }
.hp-testimonial-grid { margin-bottom: 48px; }

/* ===========================================================================
   HOME PAGE HERO SLIDER (replaces the missing RevSlider)
   =========================================================================== */
.hp-hero-slider {
    position: relative;
    width: 100vw;
    /* Break out of any container so the banner spans the full viewport */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    height: 680px;
    max-height: 85vh;
    overflow: hidden;
    background: #021b79;
}
.hp-hero-slides { position: absolute; inset: 0; }
.hp-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
    z-index: 1;
}
.hp-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity .8s ease, visibility 0s;
}
/* Dark gradient overlay for text legibility (left side darker, fades right) */
.hp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 121, 0.85) 0%, rgba(2, 27, 121, 0.65) 55%, rgba(2, 27, 121, 0.25) 100%);
}
.hp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding: 60px 48px;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hp-hero-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 18px;
    align-self: flex-start;
}
.hp-hero-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hp-hero-sub {
    font-size: 18px;
    line-height: 1.55;
    color: #fff !important;
    font-weight: 500;
    margin: 0 0 28px;
    max-width: 580px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--hp-blue) !important;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transition: transform .15s ease, background .15s ease, color .15s ease;
    align-self: flex-start;
}
.hp-hero-cta:hover {
    background: var(--hp-blue-2);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Prev / Next arrows — chevron drawn with CSS borders for crispness */
.hp-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: transparent;          /* hide the text glyph; we draw the chevron via ::before */
    font-size: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease, background .15s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-hero-slider:hover .hp-hero-arrow,
.hp-hero-slider:focus-within .hp-hero-arrow { opacity: 1; }
.hp-hero-arrow:hover { background: rgba(255, 255, 255, 0.45); }
.hp-hero-arrow::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 3px solid #fff !important;
    border-right: 3px solid #fff !important;
    border-radius: 1px !important;
    box-sizing: border-box !important;
}
.hp-hero-prev { left: 28px !important; right: auto !important; }
.hp-hero-prev::before { transform: rotate(-135deg) !important; margin-left: 5px; }
.hp-hero-next { right: 28px !important; left: auto !important; }
.hp-hero-next::before { transform: rotate(45deg) !important; margin-right: 5px; }
/* Ensure the arrow button itself isn't getting padding/border from parent button styles */
.hp-hero-arrow {
    padding: 0 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
}

/* Dot pagination */
.hp-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hp-hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.hp-hero-dot:hover { background: rgba(255, 255, 255, 0.4); }
.hp-hero-dot.is-active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 900px) {
    .hp-hero-slider { height: 460px; max-height: 60vh; }
    .hp-hero-inner { padding: 40px 28px; }
    .hp-hero-title { font-size: 30px; }
    .hp-hero-sub { font-size: 15px; }
    .hp-hero-arrow { display: none; }
}
@media (max-width: 600px) {
    .hp-hero-slider { height: 380px; }
    .hp-hero-title { font-size: 24px; line-height: 1.2; }
    .hp-hero-cta { padding: 11px 22px; font-size: 13px; }
}

/* ===========================================================================
   About Us page — "Key Takeaways" section
   This row (.home2services) was originally a dark-bg section with white
   headings. The WPBakery custom CSS that gave it a colour isn't generated
   for us, so the white H3s sit invisible on white. Restore a dark gradient
   and present the 5 takeaways as soft white-on-blue cards.
   =========================================================================== */
.vc_row.home2services {
    background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-2)) !important;
    padding: 24px 24px !important;            /* tightened top/bottom from 60 to 24 */
    margin: 56px 0 32px !important;            /* more space above so it isn't glued to the "Our Services" button */
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-strong);
}
/* Remove the "View All Services" button inside the Key Takeaways section */
.vc_row.home2services .rs-btn,
.vc_row.home2services a.readon { display: none !important; }

/* About Us page — top "About Us" row: image left, text right with
   vertical centering + soft rounded corners on the image. */
.vc_row.home1-about-sec {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
}
.vc_row.home1-about-sec > .wpb_column {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.vc_row.home1-about-sec > .wpb_column > .vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.vc_row.home1-about-sec .wpb_single_image img,
.vc_row.home1-about-sec .vc_single_image-wrapper img {
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    height: auto;
    display: block;
}
/* Reduce the About Us page wrapper top/bottom padding (was 40/60) */
.hp-page-article:has(.home1-about-sec) { padding: 12px 0 24px !important; }
/* Vision / Mission inner row — strip any extra padding so it sits flush
   against the About Us text above it */
.vc_row.home1-about-sec .vc_row.vc_inner { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 8px !important; margin-bottom: 0 !important; }
.vc_row.home1-about-sec .vc_row.vc_inner > .wpb_column > .vc_column-inner { padding: 0 !important; }
.vc_row.home1-about-sec .vc_row.vc_inner h2,
.vc_row.home1-about-sec .vc_row.vc_inner h3 { margin-top: 0 !important; }
.vc_row.home2services .rs-heading h2.title,
.vc_row.home2services .rs-heading h2,
.vc_row.home2services > .container > .vc_row > * h2 {
    color: #fff !important;
}
/* Each takeaway item — vertically-listed row with icon left + text right */
.vc_row.home2services .vc_inner.vc_row-fluid > .wpb_column.vc_col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}
/* No border on the very last takeaway (the one inside the final inner row) */
.vc_row.home2services .vc_inner.vc_custom_1737205620775 .wpb_column.vc_col-sm-6 {
    border-bottom: 0 !important;
}
.vc_row.home2services h3 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700;
    margin: 0 0 8px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vc_row.home2services p,
.vc_row.home2services .wpb_text_column,
.vc_row.home2services .wpb_text_column p {
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1.6;
    margin: 0;
}

/* The cards inside .home2services use .services-style-7 — same class as the
   home page AFFORDABLE/PERSONALIZED/CERTIFIED cards. Override theme + my
   home page styling to make this a clean horizontal row, no white panels. */
.vc_row.home2services .services-style-7,
.vc_row.home2services .services-style-7 .services-wrap,
.vc_row.home2services .services-style-7 .service-inner {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}
.vc_row.home2services .services-style-7 .services-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    text-align: left;
    padding: 0 !important;
    gap: 18px;
    background: transparent !important;
}
/* Icon container — circular tinted backdrop with an SVG icon inside */
.vc_row.home2services .services-style-7 .services-icon {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
/* Hide the photo image — we render an SVG icon via ::before */
.vc_row.home2services .services-style-7 .services-icon img { display: none !important; }
.vc_row.home2services .services-style-7 .services-icon::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-mask: var(--takeaway-icon, none) center / contain no-repeat !important;
            mask: var(--takeaway-icon, none) center / contain no-repeat !important;
}
/* Icons matched to each takeaway — selected by the (now-hidden) photo's
   filename in the markup. For the two cards that share the same image, we
   also gate on the parent inner-row's vc_custom_ class. */

/* 1) Expert Medical Team — stethoscope */
.vc_row.home2services .services-style-7:has(img[src*="Nursing-Service-Sec"]) .services-icon::before {
    --takeaway-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M19 3h-2v3h-2V3h-2v3.41C13 8.96 11.13 11 8.81 11h-1.6C4.85 11 3 9 3 6.45V3H1v3.45C1 9.93 3.6 12.81 7 12.97V19c0 1.66 1.34 3 3 3s3-1.34 3-3v-6.03c1.95-.13 3.69-1.07 4.83-2.49.93.51 1.57 1.5 1.57 2.64V18h-1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1h-1v-3.88C20.4 11.86 18.97 10 17 9.51V3zM10 20.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/></svg>") !important;
}
/* 2) Diverse Paramedic Support — group of people */
.vc_row.home2services .services-style-7:has(img[src*="Blood-tests"]) .services-icon::before {
    --takeaway-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>") !important;
}
/* 3) Strong Workforce — team / business people */
.vc_row.home2services .vc_custom_1737205497408 .vc_col-sm-6:nth-child(1) .services-icon::before {
    --takeaway-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73L18 18H6l.01-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.6-.91 4.23-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 0 0 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0 0 20 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z'/></svg>") !important;
}
/* 4) Comprehensive Coverage — shield with checkmark */
.vc_row.home2services .services-style-7:has(img[src*="Doctor-Consultation"]) .services-icon::before {
    --takeaway-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/></svg>") !important;
}
/* 5) Affordability & Accessibility — wallet / money */
.vc_row.home2services .vc_custom_1737205620775 .vc_col-sm-6 .services-icon::before {
    --takeaway-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M21 7.28V5c0-1.1-.9-2-2-2H5C3.89 3 3 3.9 3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.38-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5zm11-5.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5z'/></svg>") !important;
}
.vc_row.home2services .services-style-7 .services-desc {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
}
.vc_row.home2services .services-style-7 .services-title,
.vc_row.home2services .services-style-7 h3 {
    margin: 0 0 4px !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.vc_row.home2services .services-style-7 .services-title a,
.vc_row.home2services .services-style-7 h3 a {
    color: #fff !important;
}
.vc_row.home2services .services-style-7 .services-desc p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 !important;
}
.vc_row.home2services .services-style-7 .services-desc p:empty { display: none !important; }

/* ===========================================================================
   Our Services page — service grid cards (.rs-service-style2)
   Fixes: equal card heights, vertically-centred title bar, visible hover
   overlay, centred "Read More" button.
   =========================================================================== */
.rs-service-grid.rs-service-style2 .row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; }
.rs-service-grid.rs-service-style2 .row > [class*="col-"] { display: flex; flex-direction: column; }
.rs-service-grid.rs-service-style2 .service-item {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    background: #fff;
}
/* Image fills the top of the card with a fixed aspect ratio so every card
   has the same height regardless of the original photo dimensions. */
.rs-service-grid.rs-service-style2 .service-item .service-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex: 0 0 auto;
}
.rs-service-grid.rs-service-style2 .service-item .service-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
/* Kill the parent theme's ::before/::after on .service-img — they each
   render a 90px dark-blue strip above/below the image, which gave the
   "extra blue band above the title" look. */
.rs-service-grid.rs-service-style2 .service-item .service-img::before,
.rs-service-grid.rs-service-style2 .service-item .service-img::after {
    content: none !important;
    display: none !important;
}
/* Title bar pinned at the bottom of the image — vertically centred text */
.rs-service-grid.rs-service-style2 .service-item .p-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 14px 18px;
    background: rgba(15, 35, 95, 0.85);
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    text-align: center;
}
.rs-service-grid.rs-service-style2 .service-item .p-title br,
.rs-service-grid.rs-service-style2 .service-item .p-title .show_cate_ser { display: none !important; }
.rs-service-grid.rs-service-style2 .service-item .p-title a {
    color: #fff !important;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    text-decoration: none;
    display: inline-block;
}

/* Hover overlay — make the description + button fully visible on top of the
   image (full coverage, dark backdrop, white text) */
.rs-service-grid.rs-service-style2 .service-item .service-content {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 42, 108, 0.94), rgba(15, 118, 176, 0.94));
    color: #fff;
    padding: 24px 22px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.rs-service-grid.rs-service-style2 .service-item:hover .service-content,
.rs-service-grid.rs-service-style2 .service-item:focus-within .service-content {
    opacity: 1;
    transform: translateY(0);
}
.rs-service-grid.rs-service-style2 .service-item .service-excerpt .excerpt-content {
    color: #fff !important;
    margin: 0 0 18px;
    line-height: 1.55;
    font-size: 14.5px;
    /* Clamp to 4 lines and show "…" if the description is longer */
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.rs-service-grid.rs-service-style2 .service-item .service-button { width: 100%; display: flex; justify-content: center; }
.rs-service-grid.rs-service-style2 .service-item .readon.rs_button,
.rs-service-grid.rs-service-style2 .service-item a.readon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: var(--hp-blue) !important;
    padding: 10px 28px !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.rs-service-grid.rs-service-style2 .service-item .readon.rs_button:hover {
    background: var(--hp-blue-2) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ===========================================================================
   FAQ page — accordion built with <details>/<summary>
   =========================================================================== */
.hp-faq-intro { max-width: 820px; margin: 0 auto 28px; text-align: center; }
.hp-faq-intro p { color: var(--hp-text); font-size: 16px; line-height: 1.6; margin: 0; }
.hp-faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hp-faq-item {
    background: #fff;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    border: 1px solid #e6e9ef;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.hp-faq-item[open] { box-shadow: var(--hp-shadow-strong); border-color: var(--hp-blue-2); }
.hp-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 18px 56px 18px 22px;
    position: relative;
    font-weight: 700;
    font-size: 16px;
    color: var(--hp-blue);
    line-height: 1.4;
    user-select: none;
}
.hp-faq-q::-webkit-details-marker { display: none; }
.hp-faq-q::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    color: var(--hp-blue-2);
    transition: transform .2s ease;
    line-height: 1;
}
.hp-faq-item[open] .hp-faq-q::after {
    content: "−";
    transform: translateY(-50%) rotate(180deg);
}
.hp-faq-q:hover { color: var(--hp-blue-2); }
.hp-faq-a {
    padding: 0 22px 18px;
    color: var(--hp-text);
    font-size: 15px;
    line-height: 1.65;
    border-top: 1px solid #f0f3f7;
    padding-top: 16px;
    margin-top: -1px;     /* meets the top border cleanly */
}
.hp-faq-a p { margin: 0; }
@media (max-width: 900px) {
    .hp-testimonial { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
    .hp-testimonial { flex: 0 0 100%; max-width: 100%; }
}

.hp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-blog-card {
    background: #fff;
    border-radius: var(--hp-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--hp-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.hp-blog-card:hover { transform: translateY(-5px); box-shadow: var(--hp-shadow-strong); color: inherit; }
.hp-blog-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.hp-blog-card figure img { width: 100%; height: 100%; object-fit: cover; }
.hp-blog-card h3 { margin: 18px 24px 8px; color: var(--hp-blue); font-size: 18px; line-height: 1.35; font-weight: 700; }
.hp-blog-card p { margin: 0 24px 14px; color: var(--hp-muted); font-size: 14px; line-height: 1.6; }
.hp-blog-cta { margin: auto 24px 22px; color: var(--hp-blue-2); font-weight: 600; font-size: 14px; }

/* ===========================================================================
   PAGE — generic content typography (services / about / etc.)
   =========================================================================== */
.hp-page-banner {
    background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-2));
    color: #fff;
    text-align: center;
    padding: 80px 24px;
    margin-bottom: 60px;
}
.hp-page-banner h1 { font-size: clamp(28px, 4vw, 44px); margin: 0; font-weight: 800; color: #fff; }
.hp-page-banner p { margin: 12px 0 0; opacity: .9; }

article.page .entry-content,
article.type-services .entry-content,
article.type-post .entry-content,
.hp-page-content {
    max-width: var(--hp-container);
    margin: 0 auto;
    padding: 0 24px;
}
article.page h2, article.type-services h2, article.type-post h2 {
    color: var(--hp-blue); font-weight: 700; margin-top: 36px;
}
article.page h3, article.type-services h3, article.type-post h3 { color: var(--hp-blue); font-weight: 700; }
article.page p, article.type-services p, article.type-post p { color: var(--hp-text); line-height: 1.75; font-size: 16px; }
article.page ul li, article.type-services ul li, article.type-post ul li { padding: 4px 0; }

.service-banner img { width: 100%; border-radius: var(--hp-radius); margin-bottom: 28px; display: block; box-shadow: var(--hp-shadow); }
.service-intro { font-size: 18px; line-height: 1.7; color: var(--hp-text); margin-bottom: 28px; }
.service-features { padding-left: 22px; }
.cta-box {
    margin-top: 36px;
    background: var(--hp-blue-light);
    border-left: 4px solid var(--hp-blue-2);
    padding: 22px 26px;
    border-radius: var(--hp-radius-sm);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0 40px;
}
.contact-card {
    background: #fff;
    border-radius: var(--hp-radius);
    padding: 28px;
    text-align: center;
    box-shadow: var(--hp-shadow);
    border-top: 4px solid var(--hp-blue-2);
}
.contact-card h3 { color: var(--hp-blue); margin: 0 0 8px; }
.contact-card p { margin: 0; color: var(--hp-muted); }
.contact-card a { color: var(--hp-blue-2); font-weight: 600; }

.hp-contact-form {
    background: var(--hp-bg-soft);
    padding: 32px;
    border-radius: var(--hp-radius);
}
.hp-contact-form label { display: block; font-weight: 600; color: var(--hp-blue); margin-bottom: 8px; }
.hp-contact-form input, .hp-contact-form select, .hp-contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: var(--hp-radius-sm);
    font-size: 15px;
    background: #fff;
}
.hp-contact-form button {
    background: var(--hp-blue-2);
    color: #fff;
    border: 0;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}
.hp-contact-form button:hover { background: var(--hp-blue); }

/* Service detail two-column layout */
.hp-service-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}
.hp-service-sidebar {
    background: #fff;
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    padding: 28px 24px;
    position: sticky;
    top: 90px;
}
.hp-service-sidebar h3 {
    margin: 0 0 18px;
    color: var(--hp-blue);
    font-weight: 700;
    font-size: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hp-accent);
}
.hp-service-list { list-style: none; margin: 0; padding: 0; }
.hp-service-list li { border-bottom: 1px solid #eef2f7; }
.hp-service-list li:last-child { border-bottom: 0; }
.hp-service-list a {
    display: block;
    padding: 10px 8px;
    color: var(--hp-text);
    font-size: 14.5px;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}
.hp-service-list a:hover { color: var(--hp-blue-2); padding-left: 12px; }
.hp-service-list li.is-active a {
    color: var(--hp-blue-2);
    font-weight: 700;
    padding-left: 12px;
    border-left: 3px solid var(--hp-accent);
}
.hp-service-cta {
    margin-top: 22px;
    background: var(--hp-blue);
    color: #fff;
    border-radius: var(--hp-radius);
    padding: 24px;
    text-align: center;
}
.hp-service-cta h4 { color: #fff !important; margin: 0 0 6px; font-size: 18px; }
.hp-service-cta p  { color: #fff !important; font-size: 14px; margin: 0 0 14px; }
.hp-service-cta .hp-btn { padding: 12px 20px; font-size: 14px; }
.hp-service-body img { border-radius: var(--hp-radius); }

/* === Service detail content normalisation ============================
   Each of the 19 archived service pages was hand-built with its own
   WPBakery markup — some wrap in .wpb-content-wrapper, some add
   .vc_section, some use vc_col-sm-8 / vc_col-sm-9 / vc_col-sm-7 for the
   main column. We use WPBakery's own .vc_inner convention to single out
   the OUTER row (the one that isn't .vc_inner) and treat its column as
   the wrapper that used to sit alongside the archive's sidebar. This
   works for every service page regardless of wrapper depth.            */

/* Expand the outer wrapper column to full width (our sidebar is rendered
   separately by the child template). */
.hp-service-body .vc_row:not(.vc_inner) > .wpb_column[class*="vc_col-sm-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    float: none !important;
}

/* Drop WPBakery's 15px gutter on EVERY .vc_column-inner inside the
   service body — outer wrapper and inner rows alike — so the injected
   archive content uses the full available width without per-column
   gutters eating into the content area. Sibling spacing for inner
   columns is preserved by the row's negative margins. */
.hp-service-body .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide the archive's original sidebar if any remnant slipped past the
   injector (the inject script already strips #sidebar-services). */
.hp-service-body #sidebar-services { display: none; }

/* Service-card padding compaction:
   The theme's .services-wrap was sized for a circular icon at the top
   (padding: 70px 35px 45px). After the icon's empty wrapper was stripped
   from the content, that top padding leaves a huge void. Use :has() to
   only tighten cards that no longer have an .services-icon child — cards
   that still ship with an icon keep the original layout. */
.hp-service-body .services-wrap:not(:has(> .services-icon)) {
    padding: 30px 25px !important;
}

/* Book Appointment / rs_button CTAs need breathing room from whatever
   sits underneath them in the WPBakery flow. */
.hp-service-body .readon,
.hp-service-body .rs_button {
    display: inline-block;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .hp-service-layout { grid-template-columns: 1fr; gap: 24px; }
    .hp-service-sidebar { position: static; }
}

.faq-list { display: grid; gap: 12px; margin-top: 20px; }
.faq-item {
    background: #fff;
    border-radius: var(--hp-radius);
    border: 1px solid #e2e8f0;
}
.faq-item summary {
    cursor: pointer;
    padding: 18px 24px;
    list-style: none;
    font-weight: 600;
    color: var(--hp-blue);
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--hp-blue-2);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item > div { padding: 0 24px 22px; color: var(--hp-muted); line-height: 1.7; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.hp-footer {
    background: var(--hp-blue);
    color: rgba(255,255,255,.85);
    padding-top: 70px;
    position: relative;
}
.hp-footer-inner {
    max-width: var(--hp-container);
    margin: 0 auto;
    padding: 0 24px 50px;
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.15fr 1.1fr;
    gap: 40px;
}
.hp-footer-col { min-width: 0; }
.hp-footer-logo { display: inline-block; margin-bottom: 22px; }
.hp-footer-logo img { max-height: 80px; width: auto; display: block; background: rgba(255,255,255,.95); padding: 8px 14px; border-radius: 12px; }
.hp-footer-heading {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 22px;
    position: relative;
    padding-bottom: 12px;
}
.hp-footer-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--hp-accent);
    border-radius: 2px;
}
.hp-footer-heading-spaced { margin-top: 32px; }

.hp-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-hours li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 14.5px;
}
.hp-hours li span:first-child { font-weight: 600; color: #fff; }

.hp-footer-links { list-style: none; margin: 0; padding: 0; }
.hp-footer-links li { padding: 5px 0; }
.hp-footer-links a {
    color: rgba(255,255,255,.78);
    font-size: 14.5px;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
    display: inline-block;
}
.hp-footer-links a::before {
    content: "›";
    color: var(--hp-accent);
    margin-right: 8px;
    font-weight: bold;
}
.hp-footer-links a:hover { color: #fff; padding-left: 4px; }

.hp-footer-posts { list-style: none; margin: 0; padding: 0; }
.hp-footer-posts li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.hp-footer-posts li:last-child { border-bottom: 0; }
.hp-footer-post { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.hp-footer-post-thumb {
    width: 70px;
    height: 70px;
    flex: none;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}
.hp-footer-post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-footer-post-title {
    color: #fff;
    font-weight: 600;
    line-height: 1.35;
    font-size: 14.5px;
}
.hp-footer-post-date {
    color: rgba(255,255,255,.6);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hp-footer-post-date::before {
    content: "📅";
    font-size: 12px;
}

.hp-footer-contact {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.hp-footer-contact li {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 7px 0;
    font-size: 14.5px;
    color: rgba(255,255,255,.85);
    line-height: 1.55;
}
.hp-footer-contact .hp-footer-ico {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: var(--hp-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.hp-footer-contact a { color: rgba(255,255,255,.85); text-decoration: none; }
.hp-footer-contact a:hover { color: #fff; }

.hp-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.hp-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.hp-footer-social a:hover { background: var(--hp-blue-2); color: #fff; }

.hp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 24px;
    text-align: center;
}
.hp-footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.7);
}

/* ===========================================================================
   FLOATING WHATSAPP — bottom-LEFT (moved from bottom-right so it doesn't
   collide with the scroll-to-top button)
   =========================================================================== */
.hp-whatsapp {
    position: fixed;
    bottom: 26px;
    left: 26px;
    right: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    z-index: 999;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: hp-wa-pulse 2s infinite;
}
.hp-whatsapp:hover {
    transform: scale(1.08) rotate(-6deg);
    color: #fff;
}
@keyframes hp-wa-pulse {
    0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); }
    50%      { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.65), 0 0 0 12px rgba(37, 211, 102, 0.15); }
}

/* ===========================================================================
   SCROLL-TO-TOP — bottom-RIGHT. Hidden until JS adds .is-visible.
   Using display none/flex (instead of opacity) because Medvill's stylesheet
   was overriding opacity in ways that resisted !important.
   =========================================================================== */
.hp-scroll-top {
    display: none;
}
.hp-scroll-top.is-visible {
    position: fixed !important;
    bottom: 26px !important;
    right: 26px !important;
    left: auto !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--hp-blue-2) !important;
    color: #fff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(15, 118, 176, 0.45);
    z-index: 998;
}
.hp-scroll-top.is-visible:hover {
    background: var(--hp-blue) !important;
    transform: translateY(-3px);
    transition: background .15s ease, transform .15s ease;
}
.hp-scroll-top::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    margin-top: 4px;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1200px) {
    .hp-topbar-inner { gap: 18px; }
    .hp-topbar-item { padding: 6px 10px; }
    .hp-topbar-value { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .hp-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
    .hp-welcome-grid, .hp-chair-grid { gap: 40px; }
    .hp-appointment-inner { grid-template-columns: 1fr; }
    .hp-menu > li > a { padding: 18px 12px; font-size: 12.5px; letter-spacing: .04em; }
}
@media (max-width: 900px) {
    .hp-topbar-info { width: 100%; justify-content: center; }
    .hp-topbar-item { flex: 1 1 calc(50% - 18px); justify-content: flex-start; }
    .hp-nav-toggle { display: inline-block; }
    .hp-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--hp-blue);
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        z-index: 999;
    }
    .hp-nav.open { max-height: 80vh; overflow-y: auto; }
    .hp-menu { flex-direction: column; padding: 12px 0; }
    .hp-menu > li > a { padding: 14px 24px; text-align: left; display: block; }
    .hp-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(255,255,255,.05);
        box-shadow: none;
        border-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
        padding: 0;
    }
    .hp-menu .sub-menu.open { max-height: 1000px; padding: 4px 0; }
    .hp-menu .sub-menu a { color: rgba(255,255,255,.85); padding: 10px 36px; border-bottom: 0; }
    .hp-usp, .hp-stats, .hp-why-grid, .hp-testimonial-grid, .hp-blog-grid, .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-welcome-grid, .hp-chair-grid { grid-template-columns: 1fr; gap: 30px; }
    .hp-hero { padding: 70px 20px; }
}
@media (max-width: 600px) {
    .hp-topbar-item { flex: 1 1 100%; }
    .hp-footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 22px 40px; }
    .hp-usp, .hp-stats, .hp-why-grid, .hp-testimonial-grid, .hp-blog-grid, .contact-grid { grid-template-columns: 1fr; }
    .hp-stats { padding: 36px 22px; }
    .hp-why { padding: 60px 20px; }
    .services-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .hp-appointment-inner { padding: 36px 24px; }
    .hp-icon-btn { width: 32px; height: 32px; }
    .hp-whatsapp { width: 52px; height: 52px; bottom: 18px; left: 18px; right: auto; }
    .hp-scroll-top { width: 44px; height: 44px; bottom: 18px; right: 18px; }
}
@media (max-width: 400px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Service detail page cards: hide the empty floating circle
   ---------------------------------------------------------
   The card markup has <div class="services-icon"></div> with
   no <img>. The parent theme styles render this as a floating
   white circle above the card. Per request, hide it entirely
   so cards show only title + description.
   ========================================================= */
.rs-services .services-style-9 .services-wrap .services-item .services-icon:empty {
    display: none !important;
}
/* Cards no longer have a floating icon, so reduce the wasted
   top padding the parent theme reserved for it, and tighten the
   row gap. */
.rs-services .services-style-9 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
.rs-services .services-style-9 .services-wrap {
    padding: 40px 35px 35px 35px !important;
}
/* Inner rows that hold service cards: keep enough gap between
   adjacent rows so floating icons clear the row above. */
.vc_row.vc_inner:has(.services-style-9) {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
/* Equal-height cards within a row: stretch every wrapper layer
   so the tallest card sets the height for the rest. */
.vc_row.vc_inner:has(.services-style-9) > .wpb_column {
    display: flex !important;
    flex-direction: column !important;
}
.vc_row.vc_inner:has(.services-style-9) > .wpb_column > .vc_column-inner,
.vc_row.vc_inner:has(.services-style-9) > .wpb_column > .vc_column-inner > .wpb_wrapper,
.vc_row.vc_inner:has(.services-style-9) .rs-services,
.vc_row.vc_inner:has(.services-style-9) .rs-services > .services-style-9 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
.vc_row.vc_inner:has(.services-style-9) .services-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
/* Strip inline margin-bottom on paragraphs and hide stray empty <p>s
   so card heights are driven purely by real text content. */
.vc_row.vc_inner:has(.services-style-9) .services-desc p {
    margin-bottom: 0 !important;
}
.vc_row.vc_inner:has(.services-style-9) .services-desc p:empty {
    display: none !important;
}