/* ==========================================================================
   zydus-ahmedabad.css
   Inner-page styles for /zydus-ahmedabad. Everything is scoped under .zpage
   so the existing site header, navigation and footer are untouched.
   Built to match the supplied design reference (2160 x 15647 @1.5x = 1440 CSS).
   ========================================================================== */
.d-flex {
    display: flex;
}

.gap-10 {
    gap: 10px;
}

.zpage {
    /* ---- palette sampled from the reference design ---- */
    --z-teal: #059EA6;
    --z-teal-bright: #00A5A5;
    --z-teal-deep: #0A7C8C;
    --z-teal-soft: #A2DBDE;
    --z-teal-tint: #E9F6F7;
    --z-mag: #AA56A0;
    --z-mag-deep: #953181;
    --z-mag-soft: #E9B9DA;
    --z-mag-tint: #FBEFF6;
    --z-purple: #841185;
    --z-black: #0B0B0B;
    --z-navy: #0C1C46;
    --z-ink: #1A253C;
    --z-slate: #2c2c2c;
    --z-muted: #6B7280;
    --z-line: #E6EBF0;
    --z-line-soft: #EEF2F5;

    --z-shadow-xs: 0 1px 2px rgba(12, 28, 70, .05);
    --z-shadow-sm: 0 6px 18px -10px rgba(12, 28, 70, .18);
    --z-shadow-md: 0 18px 44px -26px rgba(12, 28, 70, .26);
    --z-shadow-lg: 0 30px 70px -34px rgba(12, 28, 70, .30);

    --z-gutter: max(24px, calc((100vw - 1320px) / 2));
    --z-ease: cubic-bezier(.22, 1, .36, 1);

    font-family: 'Nunito Sans', system-ui, sans-serif;
    color: var(--z-slate);
    overflow-x: clip;
}

/* Element resets are wrapped in :where() so they stay at .zpage specificity
   and never outrank the component rules below. */
.zpage :where(h1, h2, h3, h4) {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    color: var(--z-black);
    letter-spacing: -.01em;
    line-height: 1.18;
    margin: 0;
}

.zpage :where(p) {
    margin: 0
}

.zpage :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none
}

/* height:auto keeps intrinsic aspect when width/height attributes are set;
   component rules (e.g. object-fit:cover media) override via higher specificity */
.zpage :where(img) {
    max-width: 100%;
    height: auto;
    display: block
}

.zpage :where(a) {
    color: inherit;
    text-decoration: none
}

.zpage :where(svg) {
    flex: none
}

.zwrap {
    width: 100%;
    padding-left: var(--z-gutter);
    padding-right: var(--z-gutter)
}

/* offset anchor/keyboard scrolling below the existing sticky site header */
.zpage section,
.zpage [id],
.zfaq__q {
    scroll-margin-top: 84px
}

/* ---- shared type ---- */
/* Sizes below are derived by measuring the reference PNG: each heading's
   font-size is the value at which its rendered string width equals the
   reference's, at the 1440px design width. */
.z-h2 {
    font-size: clamp(26px, 3.02vw, 43.5px);
    font-weight: 700
}

.z-h2--lg {
    font-size: clamp(27px, 3.02vw, 43.5px);
    font-weight: 700
}

.z-t {
    color: var(--z-teal)
}

.z-m {
    color: var(--z-mag)
}

.z-n {
    color: var(--z-navy)
}

.z-p {
    color: var(--z-purple)
}

.z-lede {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: var(--z-slate)
}

.z-eyebrow {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, .95vw, 14px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--z-teal-bright);
}

/* ---- shared buttons ---- */
.z-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.05vw, 15px);
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 16px 26px;
    min-height: 52px;
    cursor: pointer;
    transition: .2s var(--z-ease);
}

.z-btn svg {
    width: 17px;
    height: 17px
}

.z-btn--teal {
    background: var(--z-teal);
    color: #fff
}

.z-btn--teal:hover {
    background: #04868D;
    transform: translateY(-2px)
}

.z-btn--outline {
    background: #fff;
    color: var(--z-ink);
    border-color: #DDE3E9
}

.z-btn--outline:hover {
    border-color: var(--z-teal);
    color: var(--z-teal-deep);
    transform: translateY(-2px)
}

.z-btn--ghostw {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
    border-radius: 999px;
    min-height: 46px;
    padding: 13px 24px;
    font-size: 14px
}

.z-btn--ghostw:hover {
    background: rgba(255, 255, 255, .16)
}

.z-btn--pill {
    border-radius: 12px
}

/* ---- shared carousel controls ---- */
.z-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 34px
}

.z-carousel button {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--z-teal);
    display: grid;
    place-items: center;
    border-radius: 50%
}

.z-carousel button svg {
    width: 34px;
    height: 22px
}

.z-carousel button:hover {
    color: var(--z-teal-deep)
}

.z-dots {
    display: flex;
    align-items: center;
    gap: 8px
}

.z-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--z-teal);
    display: block
}

.z-dots span.is-active {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2.5px solid var(--z-teal)
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.badge-stip {
    margin-top: -40px;
}

.zhero__inner .contnet-box {
    position: relative;
    top: 50px;
}

.zhero {
    position: relative;
    background: #fff;
    overflow: hidden
}

.zhero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 47%;
    height: 100%;
    z-index: 1
}

.zhero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.zhero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 7%, rgba(255, 255, 255, .35) 18%, rgba(255, 255, 255, 0) 30%);
}

.zhero__inner {
    position: relative;
    z-index: 3;
    padding: 60px var(--z-gutter) 60px
}

/*.zhero__inner>*{
    max-width:900px
}*/
.zhero h1 {
    font-size: clamp(31px, 3.77vw, 54.3px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 18px 0 0;
}

.zhero__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 52px 0 0
}

.zstat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 26px 2px 0;
    margin-right: 26px;
    border-right: 1px solid #E3E8EC
}

.zstat:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0
}

/* reference alternates the stat glyph colour teal / magenta */
.zstat__i {
    color: var(--z-teal-bright);
    display: grid;
    place-items: center
}

.zstat:nth-child(even) .zstat__i {
    color: var(--z-mag)
}

.zstat__i svg {
    width: 24px;
    height: 24px
}

.zstat b {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(19px, 1.7vw, 24px);
    color: var(--z-ink);
    line-height: 1.1
}

.zstat small {
    display: block;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--z-muted);
    margin-top: 3px
}

.zhero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 44px
}

/* award ribbon */
.zhero__ribbon {
    position: relative;
    z-index: 4;
    width: 79%;
    background: #fff;
    border-top: 2px solid var(--z-teal-bright);
    border-bottom: 2px solid #C98BC0;
    padding: 16px 0 16px var(--z-gutter);
}

.zhero__ribbon p {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 1.9vw, 27px);
    line-height: 1.25;
    letter-spacing: .005em;
    color: var(--z-mag-deep);
    text-transform: uppercase;
}

.zhero__ribbon .z-t {
    color: #009DA4
}

.zhero__ribbon b {
    font-weight: 700
}

/* ==========================================================================
   2. INTRO CARD
   ========================================================================== */
.zintro {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: linear-gradient(118deg, #EEF9FE 0%, #F5F6FC 46%, #FAF3FB 100%);
}

.zintro__card {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .4) 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    box-shadow: var(--z-shadow-md);
    padding: clamp(32px, 4vw, 62px) clamp(20px, 4.4vw, 64px);
}

.zintro__rule {
    display: flex;
    justify-content: center;
    margin: 18px 0 30px
}

.zintro__rule i {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--z-teal-bright);
    border-radius: 2px
}

.zintro__rule i+i {
    background: var(--z-purple)
}

.zintro__card p {
    max-width: 1020px;
    margin: 0 auto;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.85;
    color: var(--z-slate);
}

.zintro__card p+p {
    margin-top: 26px
}

.zacc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 44px 0 6px
}

.zacc__label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--z-navy)
}

.zacc__rule {
    position: relative;
    flex: 1;
    max-width: 200px;
    height: 1.5px;
    background: var(--z-teal-bright)
}

.zacc__rule::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--z-teal-bright)
}

.zacc__rule--r {
    background: var(--z-purple)
}

.zacc__rule--r::after {
    right: auto;
    left: 0;
    background: var(--z-purple)
}

.zacc__logos {
    margin: 0 auto;
    width: min(272px, 68%)
}

/* decorative dot fields */
.zintro__dots {
    position: absolute;
    top: 120px;
    width: 120px;
    height: 180px;
    opacity: .5;
    background-image: radial-gradient(#C9D6EA 1.6px, transparent 1.6px);
    background-size: 18px 18px
}

.zintro__dots--l {
    left: 14px
}

.zintro__dots--r {
    right: 14px;
    top: 230px;
    background-image: radial-gradient(#DFC7E4 1.6px, transparent 1.6px)
}

/* ==========================================================================
   3. TWO-CIRCLE CARE BAND
   ========================================================================== */
.zcare {
    background: #F8FAFC;
    padding: 34px 0 44px
}

.zcare__band {
    border-radius: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "left media right";
    align-items: stretch;
    gap: 0 10px;
}

.zcare__col_left,
.zcare__col_right {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 270px;
    background-repeat: no-repeat;
    background-size: cover;
}

.zcare__col_left {
    background-image: url(../images/zydus-ahmedabad/advanced-technology-img-left.png);
    background-position: left center;

    .content-box {
        width: 100%;
        max-width: 380px;
        padding: 26px 18px 26px 36px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

.zcare__col_right {
    background-image: url(../images/zydus-ahmedabad/multidisciplinary-care.png);
    background-position: right center;
    justify-content: right;

    .content-box {
        width: 100%;
        max-width: 380px;
        margin-left: auto;
        padding: 26px 36px 26px 18px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

.zcare__col {
    grid-area: left
}

.zcare__col h3 {
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    margin-bottom: 12px
}

.zcare__col p {
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.6;
    color: var(--z-slate)
}

.zcare__more {
    display: none;
}

.zcare__dots {
    display: inline;
}

.zcare__toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--z-teal);
    border-radius: 20px;
    padding: 5px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--z-teal);
    cursor: pointer;
    transition: all 0.25s var(--z-ease);
    outline: none;
    line-height: 1;
}

.content-box.is-expanded .zcare__toggle-btn {
    margin-top: 14px;
}

.zcare__toggle-btn:hover {
    background: var(--z-teal);
    color: #fff;
    border-color: var(--z-teal);
    box-shadow: 0 4px 12px rgba(5, 158, 166, 0.25);
    text-decoration: none;
}

.zcare__toggle-btn:hover .zcare__btn-icon {
    stroke: #fff;
}

.zcare__btn-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.zcare__toggle-btn[aria-expanded="true"] .zcare__btn-icon {
    transform: rotate(180deg);
}

.zcare__col--r {
    grid-area: right;
    padding-left: 8px
}

/* The artwork is two 648x320 exports, each holding one circle flush to an edge
   with the rest of the frame white. --zcare-h drives the whole composition:
   the wrappers crop each export back to its circle, and the badge scales with
   it, so one value per breakpoint is all that needs to change. */
.zcare__media {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
}

.zcare__circle {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    height: var(--zcare-h);
    aspect-ratio: 264/320;
}

.zcare__circle img {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
}

.zcare__circle--l img {
    right: 0
}

.zcare__circle--r img {
    left: 0
}

/* ==========================================================================
   4. ADVANCED HEALTHCARE TECHNOLOGY
   ========================================================================== */
.ztech {
    background: linear-gradient(90deg, #F0F5FA 0%, #F4F2F9 60%, #F7F2FB 100%);
    padding: 60px 0;
}

.zsec-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px
}

.zsec-head .z-lede {
    margin-top: 14px
}

/* ---- card (design reference: lavender tile, white media panel, magenta CTA) ---- */
.ztech__card {
    background: rgba(243 231 241 / 45%);
    border-radius: 20px;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ztech__thumb {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 398/364
}

.ztech__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ztech__card h3 {
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.25;
    color: #101114;
    margin: 20px 0 10px;
}

.ztech__card p {
    font-size: clamp(14px, 1.05vw, 15px);
    line-height: 1.62;
    color: #5C6675;
    flex: 1;
    /* keeps every card's copy block to three lines so the CTA row stays aligned */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-bottom: 25px;
}

.ztech__go {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ---- Owl Carousel skin ---- */
.ztech__car {
    width: 100%
}

/* equal-height cards regardless of copy length */
.ztech__car .owl-stage {
    display: flex
}

.ztech__car .owl-item {
    display: flex;
    height: auto
}

/* cards are visible before Owl initialises (no-JS / slow CDN fallback) */
.ztech__car:not(.owl-loaded) {
    display: flex;
    gap: 24px;
    overflow: hidden
}

.ztech__car:not(.owl-loaded) .ztech__card {
    flex: 0 0 calc(25% - 18px)
}

/* nav + dots share the existing .z-carousel row; display:contents lets Owl's
   two buttons become flex items of that row so they can sit around the dots */
.z-carousel--owl .z-owl-nav {
    display: contents
}

.z-carousel--owl .owl-prev {
    order: 1
}

.z-carousel--owl .z-dots {
    order: 2
}

.z-carousel--owl .owl-next {
    order: 3
}

.z-carousel--owl .owl-prev,
.z-carousel--owl .owl-next {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--z-teal);
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: .2s var(--z-ease);
}

.z-carousel--owl .owl-prev:hover,
.z-carousel--owl .owl-next:hover {
    color: var(--z-teal-deep)
}

.z-carousel--owl .owl-prev.disabled,
.z-carousel--owl .owl-next.disabled {
    opacity: .35;
    cursor: default
}

.z-carousel--owl .owl-prev svg,
.z-carousel--owl .owl-next svg {
    width: 34px;
    height: 22px
}

.z-carousel--owl .owl-dot {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px
}

.z-carousel--owl .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--z-teal);
    display: block;
    transition: .2s var(--z-ease)
}

.z-carousel--owl .owl-dot.active span {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2.5px solid var(--z-teal)
}

/* Owl marks the injected nav/dot containers .disabled when they aren't needed */
.z-carousel--owl .z-owl-nav.disabled,
.z-carousel--owl .z-owl-dots.disabled {
    display: none
}

/* ==========================================================================
   5. CLINICAL SPECIALTIES
   ========================================================================== */
.zspec {
    background: linear-gradient(180deg, #F5FAFC 0%, #FAFCFD 100%);
    padding: 66px 0 74px
}

.zspec__head {
    text-align: center;
    margin-bottom: 40px
}

.zspec__head h2 {
    font-size: clamp(28px, 3.03vw, 43.6px);
    font-weight: 700;
    margin-top: 10px
}

.zspec__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: start
}

.zspec__nav {
    position: relative
}

/* the dropdown trigger only exists below 1080px — see the media query */
.zspec__select {
    display: none
}

.zspec__list {
    background: #fff;
    border: 1px solid var(--z-line-soft);
    border-radius: 20px;
    padding: 12px;
    box-shadow: var(--z-shadow-sm)
}

.zspec__tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 15.55px 14px;
    border-radius: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--z-ink);
    transition: .18s var(--z-ease);
}

.zspec__tab i svg path {
    stroke: #8FA3B5;
}

.zspec__tab.is-active {
    i svg path {
        stroke: #059ea6;
    }
}

.zspec__tab i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EDF3F8;
    color: #8FA3B5;
    display: grid;
    place-items: center;
    flex: none
}

.zspec__tab i svg {
    width: 18px;
    height: 18px
}

.zspec__tab:hover {
    background: #F4F9FC
}

.zspec__tab.is-active {
    background: #E9F3FA
}

.zspec__tab.is-active i {
    background: #D5EEF0;
    color: var(--z-teal)
}

.zspec__panel {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 620px;
    background: linear-gradient(118deg, #EDF3FB 0%, #E2ECF9 46%, #D2E1F5 100%);
    padding: 35px;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.zspec__panel img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 58%;
    object-fit: cover;
    object-position: left center;
    z-index: 1;
}

.zspec__body {
    position: relative;
    z-index: 3;
    max-width: min(430px, 52%)
}

.zspec__body h3 {
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 800;
    color: #10305F;
    margin-bottom: 10px
}

.zspec__body>p {
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.72;
    color: #2B3A54
}

.zspec__key {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--z-teal);
    margin: 20px 0 5px
}

.zspec__body ul {
    display: grid;
    gap: 5px;
    margin-bottom: 28px
}

.zspec__body li {
    position: relative;
    padding-left: 16px;
    font-size: clamp(14px, 1.15vw, 16px);
    color: #23304A
}

.zspec__body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--z-teal)
}

/* ==========================================================================
   6. MORE HEALTHCARE NEEDS
   ========================================================================== */
.zneeds {
    /*background:linear-gradient(90deg,#AA56A0 0%,#AA56A0 66%,#C08BBB 86%,#D9C0D7 100%);*/
    padding: 60px 0;
    color: #fff;
    background-image: url(../images/zydus-ahmedabad/more-healthcare-needs-bg-img.jpg);
    background-position: center;
    background-size: cover;
}

.zneeds__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: center
}

.zneeds__intro h2 {
    color: #fff;
    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: 700
}

.zneeds__intro hr {
    width: 64px;
    height: 3px;
    background: #fff;
    border: 0;
    border-radius: 2px;
    margin: 14px 0 20px
}

.zneeds__intro p {
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .9)
}

.zneeds__intro .z-btn {
    margin-top: 20px;
}

.zneeds__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.zneeds__cards {
    img {
        align-self: start;
    }
}

.zneeds__card {
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    transition: .25s var(--z-ease);
    justify-content: space-between;
}

.zneeds__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--z-shadow-lg)
}

.zneeds__card i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--z-mag-tint);
    color: var(--z-mag);
    display: grid;
    place-items: center;
    margin-bottom: 16px
}

.zneeds__card i svg {
    width: 21px;
    height: 21px
}

.zneeds__card h3 {
    font-size: clamp(16px, 1.35vw, 17px);
    font-weight: 700;
    margin-bottom: 6px
}

.zneeds__card p {
    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.4;
    color: #6B7280;
    flex: 1
}

.zneeds__go {
    align-self: flex-end;
    margin-top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.8px solid var(--z-mag);
    color: var(--z-mag);
    display: grid;
    place-items: center;
    transition: .2s var(--z-ease);
}

.zneeds__go svg {
    width: 18px;
    height: 18px
}

.zneeds__go:hover {
    background: var(--z-mag);
    color: #fff
}

/* ==========================================================================
   7. LABORATORY MEDICINE
   ========================================================================== */
.zlab {
    background: #fff;
    padding: 56px 0
}

.zlab__card {
    background: #FBFBFD;
    border: 1px solid #EDF1F5;
    border-radius: 20px;
    display: grid;
    grid-template-columns: .8fr .9fr .9fr 1.3fr;
    gap: 6px;
    align-items: center;
    padding: 30px;
}

.zlab__intro hr {
    width: 60px;
    height: 3px;
    background: var(--z-teal);
    border: 0;
    border-radius: 2px;
    margin: 0 0 16px
}

.zlab__kicker {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-ink)
}

.zlab__intro h2 {
    font-size: clamp(26px, 2.7vw, 40px);
    font-weight: 700;
    line-height: 1.14;
    margin: 6px 0 22px
}

.zlab__intro h2 span {
    display: block;
    color: var(--z-mag)
}

.zlab__intro ul {
    display: grid;
    gap: 7px
}

.zlab__intro li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--z-ink);
    font-weight: 700;
}

.zlab__intro li i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--z-teal);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none
}

.zlab__intro li i svg {
    width: 12px;
    height: 12px
}

/* multiply blends the asset's white studio background into the card surface */
.zlab__media img {
    width: 100%;
    max-width: 270px;
    height: auto;
    mix-blend-mode: darken;
}

.zlab__copy {
    font-size: 13px;
    line-height: 1.6;
    color: var(--z-slate)
}

.zlab__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.zlab__fact {
    border: 1px solid var(--z-line);
    border-radius: 20px;
    padding: 20px 17px;
    background: #fff
}

.zlab__fact i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
}

.zlab__fact i svg {
    width: 22px;
    height: 22px
}

.zlab__fact--teal i {
    background: var(--z-teal)
}

.zlab__fact--mag i {
    background: var(--z-mag)
}

.zlab__fact h3 {
    font-size: clamp(15px, 1.25vw, 15px);
    font-weight: 700;
    line-height: 1.25;
    align-self: center;
}

.zlab__fact hr {
    width: 22px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    margin: 12px 0;
    background: var(--z-teal)
}

.zlab__fact--mag hr {
    background: var(--z-mag)
}

.zlab__fact p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--z-slate)
}

/* ==========================================================================
   8. WHY CHOOSE ZYDUS
   ========================================================================== */
.zwhy {
    background: #F8FAFB;
    padding: 60px 0;
}

.zwhy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

/* gradient borders sampled from the reference: pink cards fade white->pink
   toward the bottom edge, teal cards fade teal->white from the top edge */
.zwhy__card {
    border-radius: 20px;
    border: 2px solid transparent;
    padding: 26px 24px 28px;
    min-height: 210px;
    transition: .25s var(--z-ease);
}

.zwhy__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--z-shadow-md)
}

.zwhy__card i {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 22px
}

.zwhy__card i svg {
    width: 26px;
    height: 26px
}

.zwhy__card p {
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.6;
    color: #1E2A3A;
    margin-top: 10px;
}

.zwhy__card.is-pink {
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, #FFFFFF 0%, #EDDBEB 55%, #D5ABD0 100%) border-box;
}

.zwhy__card.is-pink i {
    background: var(--z-mag-tint);
    color: var(--z-mag)
}

.zwhy__card.is-teal {
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, #8FD4D7 0%, #B6E3E5 45%, #FFFFFF 100%) border-box;
}

.zwhy__card.is-teal i {
    background: var(--z-teal-tint);
    color: var(--z-teal)
}

/* ==========================================================================
   9 + 10. EMERGENCY / PREVENTIVE SPLIT BANDS
   ========================================================================== */
.zsplit {
    background: #fff;
    padding: 60px 0
}

.zsplit__band {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.zsplit__body {
    padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.4vw, 48px)
}

.zsplit__body h2 {
    font-size: clamp(28px, 3.45vw, 49.7px);
    font-weight: 900;
    line-height: 1.14
}

.zsplit__body h2 span {
    display: block
}

.zsplit__body hr {
    width: 70px;
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: var(--z-teal);
    margin: 20px 0 22px
}

.zsplit__body>p {
    font-size: clamp(14px, 1.15vw, 14px);
    line-height: 1.72;
    color: #3A4A5C;
    max-width: 46ch
}

.zsplit__keyhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 18px
}

.zsplit__band_1 {
    background-image: url(../images/zydus-ahmedabad/preventive-healthcare-bg-img.png) !important;
    background-position: center !important;
    background-size: cover !important;
}

.zsplit__band_1 {
    display: flex;
    justify-content: end;
}

.zsplit__keyhead h3 {
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
}

.zsplit__keyhead i {
    position: relative;
    flex: 1;
    max-width: 96px;
    height: 1.5px;
    background: currentColor
}

.zsplit__keyhead i::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor
}

.zsplit__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    width: 480px;
}

.zsplit__list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 0;
}

.zsplit__list li i {
    width: 50px;
    height: 50px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #DEE7EE;
    color: var(--z-teal);
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: 0 0 7px hsl(182.98deg 94.15% 33.53% / 14%);
}

.zsplit__list li i svg {
    width: 30px;
    height: 30px;
}

.zsplit__list li span {
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.4;
    color: var(--z-ink);
    font-weight: 600;
}

.zsplit__media {
    position: relative;
    overflow: hidden;
    min-height: 520px
}

.zsplit__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* emergency (photo right, arc carved on its left) */
.zemg .zsplit__band {
    background-image: url(../images/zydus-ahmedabad/emergency-critical-care-bg.png);
    background-position: center;
    background-size: cover;
}

.zemg .zsplit__body h2 span:first-child {
    color: #0FA0A8
}

.zemg .zsplit__body h2 span:last-child {
    color: #C33E92
}

.zemg .zsplit__keyhead {
    color: var(--z-teal)
}

.zemg .zsplit__media {
    border-radius: 44% 0 0 44% / 50% 0 0 50%
}

.zemg .zsplit__arc {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 3px solid #6FC0C8;
    border-right: 0;
    border-radius: inherit;
    transform: translateX(4px);
}

.zemg__badge {
    position: absolute;
    left: 40%;
    bottom: clamp(16px, 2.6vw, 55px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 999px;
    padding: 8px 30px 8px 8px;
    box-shadow: var(--z-shadow-md);
}

.zemg__badge i {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--z-teal);
    color: #fff;
    display: grid;
    place-items: center;
    line-height: 1;
    flex: none;
}

.zemg__badge i b {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    display: block
}

.zemg__badge i em {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    display: block;
    margin-top: 1px
}

.zemg__badge p {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.32;
    color: var(--z-navy)
}

.zemg__badge p span {
    color: var(--z-teal)
}

/* preventive (photo left, content right) */
.zprev .zsplit__band {
    background: #F4F8FB
}

.zprev .zsplit__media {
    order: 1
}

.zprev .zsplit__body {
    order: 2
}

.zprev .zsplit__media img {
    object-position: left center
}

.zprev .zsplit__body h2 span:first-child {
    color: #B93A8E
}

.zprev .zsplit__body h2 span:last-child {
    color: #0FA0A8
}

.zprev .zsplit__keyhead {
    color: var(--z-mag)
}

.zprev .zsplit__list li {
    border-bottom: 0;
}

.zprev__dots {
    position: absolute;
    top: 38px;
    right: 38px;
    width: 104px;
    height: 104px;
    z-index: 2;
    background-image: radial-gradient(#D77FBE 2px, transparent 2px);
    background-size: 19px 19px
}

/* ==========================================================================
   11. REAL STORIES
   ========================================================================== */
.zstories {
    background: linear-gradient(115deg, #EFF5FA 0%, #F5F4FA 55%, #F9F2F8 100%);
    padding: 60px 0
}

/* ---- Owl Carousel skin (card design unchanged) ---- */
.zstories__car {
    width: 100%
}

/* equal-height cards regardless of quote length */
.zstories__car .owl-stage {
    display: flex
}

.zstories__car .owl-item {
    display: flex;
    height: auto
}

/* the stage clips overflow, so give it room for the card shadow */
.zstories__car .owl-stage-outer {
    padding: 8px 0 20px;
    margin: -8px 0 -20px
}

/* cards are visible before Owl initialises (no-JS / slow CDN fallback) */
.zstories__car:not(.owl-loaded) {
    display: flex;
    gap: 24px;
    overflow: hidden
}

.zstories__car:not(.owl-loaded) .zstory {
    flex: 0 0 calc(33.333% - 16px)
}

.zstory {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--z-shadow-sm);
    display: flex;
    flex-direction: column;
    width: 100%
}

.zstory__q {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 52px;
    line-height: .6;
    height: 30px;
    color: var(--z-mag)
}

/* alternating quote-mark colour — set per card in the markup rather than by
   :nth-child, because Owl clones slides and shifts the DOM order */
.zstory--alt .zstory__q {
    color: var(--z-teal)
}

.zstory p {
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.7;
    color: var(--z-slate);
    margin-top: 22px;
    flex: 1
}

.quotes-img {
    width: 36px;
    height: 36px;
}

.zstory__stars {
    display: flex;
    gap: 0;
    margin: 24px 0 16px;
    color: #F5B301
}

.zstory__stars svg {
    width: 20px;
    height: 20px
}

.zstory b {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--z-black)
}

.zstory small {
    display: block;
    font-size: 13.5px;
    color: #7A8794;
    margin-top: 3px
}

/* ==========================================================================
   12. ADVANCED MULTISPECIALITY TREATMENTS
   ========================================================================== */
.ztreat {
    background: linear-gradient(115deg, #EFF4FA 0%, #F4F3FA 50%, #F9F2F8 100%);
    padding: 34px 0 54px
}

.ztreat__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 44px;
    align-items: center
}

.ztreat__media img {
    width: min(100%, 260px);
    margin: 0 auto
}

.ztreat__body h2 {
    font-size: clamp(24px, 2.4vw, 34.6px);
    font-weight: 700;
    color: var(--z-navy)
}

.ztreat__body p {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    color: #33415C;
    margin-top: 18px
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.zfaq {
    background: #fff;
    padding: 70px 0 76px
}

.zfaq h2 {
    text-align: center;
    font-size: clamp(29px, 3.09vw, 44.5px);
    font-weight: 700;
    color: var(--z-teal);
    margin-bottom: 44px
}

.zfaq__item {
    border-bottom: 1px solid var(--z-line)
}

.zfaq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 26px 0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 1.25vw, 17.5px);
    color: var(--z-black);
}

.zfaq__q svg {
    width: 20px;
    height: 20px;
    transition: transform .25s var(--z-ease)
}

.zfaq__q[aria-expanded="false"] svg {
    transform: rotate(180deg)
}

.zfaq__a {
    display: none;
    background: #F3F8F9;
    border-radius: 10px;
    padding: 24px 28px;
    margin: 0 0 24px
}

.zfaq__a[data-open] {
    display: block
}

.zfaq__a p {
    font-size: clamp(14.5px, 1.2vw, 17px);
    line-height: 1.75;
    color: #3A4658
}

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */
.zcta {
    background: linear-gradient(90deg, #059DA6 0%, #A756A0 100%);
    padding: 66px 0 74px;
    text-align: center;
    color: #fff
}

.zcta h2 {
    color: #fff;
    font-size: clamp(27px, 3.33vw, 47.9px);
    font-weight: 700
}

.zcta__lede {
    max-width: 1000px;
    margin: 22px auto 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .94)
}

.zcta__sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(16px, 1.45vw, 20px);
    color: #fff;
    margin: 32px 0 20px
}

.zcta__pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background: linear-gradient(90deg, #AB54F2 0%, #ED4A97 100%);
    border-radius: 12px;
    padding: 10px 26px;
    box-shadow: 0 16px 34px -18px rgba(12, 28, 70, .5);
}

.zcta__pill a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 26px;
    min-height: 44px;
    color: #fff;
    font-size: clamp(14px, 1.35vw, 19px);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500
}

.zcta__pill a+a {
    border-left: 1px solid rgba(255, 255, 255, .45)
}

.zcta__pill a i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    flex: none
}

.zcta__pill a i svg {
    width: 20px;
    height: 20px
}

.zcta__pill a:hover {
    text-decoration: underline
}

/* ==========================================================================
   15. VISIT US / MAP
   ========================================================================== */
.zvisit {
    position: relative;
    background: #EDEFF1 url("../images/zydus-ahmedabad/map-bg.jpg") center/cover no-repeat;
    padding: 60px 0;
    min-height: 640px;
    display: flex;
    align-items: center;
    background-position: top;
}

.zvisit>.zwrap {
    width: 100%
}

.zvisit__card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--z-shadow-lg);
    max-width: 470px;
    padding: clamp(26px, 2.6vw, 38px);
}

.zvisit__card h2 {
    font-size: clamp(25px, 2.52vw, 36.3px);
    font-weight: 700;
    color: var(--z-navy)
}

.zvisit__card>p {
    font-size: clamp(14px, 1.15vw, 16px);
    color: var(--z-slate);
    margin-top: 10px
}

.zvisit__card hr {
    border: 0;
    border-top: 1px solid var(--z-line);
    margin: 24px 0
}

.zvisit__row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px
}

.zvisit__row:last-child {
    margin-bottom: 0
}

.zvisit__row i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--z-teal-tint);
    color: var(--z-teal);
    display: grid;
    place-items: center;
    flex: none
}

.zvisit__row i svg {
    width: 19px;
    height: 19px
}

.zvisit__row--mag i {
    background: var(--z-mag-tint);
    color: var(--z-mag)
}

.zvisit__row h3 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--z-navy);
    margin-bottom: 6px
}

.zvisit__row p {
    font-size: clamp(13.5px, 1.1vw, 15.5px);
    line-height: 1.6;
    color: var(--z-slate)
}

.zvisit__row p b {
    color: var(--z-ink)
}

.zvisit__row a {
    color: var(--z-teal)
}

.zvisit__row a:hover {
    text-decoration: underline
}

.zsplit__band_1 .mob-img,
.zsplit__body .mob-img {
    display: none;
}

.zspec__panel img {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- large laptop --- */
@media (max-width:1279px) {

    /* three columns leave the copy too narrow — give the artwork its own row
       and let the two blocks of copy sit side by side beneath it */
    .zcare__band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "media media"
            "left  right";
        gap: 28px 40px;
        padding: 30px 32px
    }

    .zcare__media {
        --zcare-h: clamp(190px, 26vw, 300px);
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
        grid-area: media;
    }

    .zcare__col--r {
        padding-left: 0
    }

    .zspec__grid {
        grid-template-columns: 290px minmax(0, 1fr);
        gap: 28px
    }

    .zspec__body {
        max-width: min(400px, 56%)
    }

    .zlab__card {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 32px
    }

    .zlab__facts {
        grid-template-columns: 1fr 1fr
    }

    .ztreat__grid {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 32px
    }
}

/* --- tablet landscape --- */
@media (max-width:1080px) {
    .zhero__media {
        width: 46%
    }

    .zhero__media::after {
        background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, 0) 46%)
    }

    .zhero__inner {
        padding: 56px var(--z-gutter) 52px
    }

    .zhero__inner>* {
        max-width: none
    }

    .zhero__ribbon {
        width: 100%
    }

    .zneeds__cards,
    .zwhy__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ztech__car:not(.owl-loaded) .ztech__card {
        flex: 0 0 calc(50% - 12px)
    }

    .zneeds__grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .zspec__grid {
        grid-template-columns: 1fr;
        gap: 26px
    }

    /* ---- specialties list becomes a dropdown ---- */
    .zspec__select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        background: #fff;
        border: 1px solid var(--z-line-soft);
        border-radius: 14px;
        padding: 15px 18px;
        box-shadow: var(--z-shadow-sm);
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.3;
        text-align: left;
        color: var(--z-ink);
        cursor: pointer;
    }

    .zspec__select svg {
        width: 20px;
        height: 20px;
        color: var(--z-teal);
        transition: transform .2s var(--z-ease)
    }

    .zspec__select[aria-expanded="true"] {
        border-color: var(--z-teal-soft)
    }

    .zspec__select[aria-expanded="true"] svg {
        transform: rotate(180deg)
    }

    .zspec__list {
        position: absolute;
        z-index: 20;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        max-height: min(62vh, 430px);
        overflow-y: auto;
        border-radius: 14px;
        box-shadow: var(--z-shadow-md), 0 0 0 1px rgba(12, 28, 70, .04);
    }

    .zspec__list.is-open {
        display: block
    }

    .zspec__panel {
        min-height: 0;
        padding: 36px;
        display: flex;
        flex-direction: column
    }

    .zspec__panel img {
        position: relative;
        order: 2;
        width: 100%;
        height: 260px;
        margin: 26px 0 0;
        border-radius: 14px;
        object-fit: cover;
        object-position: center;
    }

    .zspec__body {
        order: 1
    }

    .zspec__panel::after {
        display: none
    }

    .zspec__body {
        max-width: none
    }

    .zstories__car:not(.owl-loaded) .zstory {
        flex: 0 0 calc(50% - 12px)
    }

    .zwhy__card,
    .zneeds__card {
        min-height: 0
    }

    .zspec__panel {
        background-position: top !important;
    }
}

/* --- tablet portrait --- */
@media (max-width:900px) {
    .zhero__media {
        position: relative;
        width: 100%;
        height: clamp(230px, 54vw, 420px);
        margin-top: 34px;
        border-radius: 0
    }

    .zhero__media img {
        object-position: 62% 72%
    }

    .zhero__media::after {
        display: none
    }

    .zhero__inner {
        padding: 60px var(--z-gutter) 60px
    }

    .zhero {
        display: flex;
        flex-direction: column
    }

    .zhero__inner {
        order: 1
    }

    .zhero__media {
        order: 2
    }

    .zhero__ribbon {
        order: 3;
        padding-right: var(--z-gutter)
    }

    .zcare__band {
        gap: 24px 28px;
        padding: 28px 0
    }

    .zlab__card {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .zlab__media img {
        max-width: 420px;
        margin: 0 auto
    }

    .zsplit__band {
        grid-template-columns: 1fr
    }

    .zsplit__media {
        min-height: 0;
        aspect-ratio: 16/11;
        order: 2
    }

    .zsplit__body {
        order: 1
    }

    .zemg .zsplit__media {
        border-radius: 0
    }

    .zemg .zsplit__arc {
        display: none
    }

    .zemg__badge {
        left: 16px;
        bottom: 16px;
        padding: 6px 22px 6px 6px
    }

    .zemg__badge i {
        width: 52px;
        height: 52px
    }

    .zprev .zsplit__media {
        order: 2
    }

    .zprev .zsplit__body {
        order: 1
    }

    .zprev__dots {
        display: none
    }

    .ztreat__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center
    }

    .ztreat__media img {
        max-width: 190px
    }

    .ztreat__body p {
        text-align: center
    }

    .zvisit {
        background-position: 60% center
    }

    .zvisit__card {
        max-width: none
    }

    .zemg .zsplit__band {
        background-image: url(../images/zydus-ahmedabad/emergency-critical-care-mob-bg.png) !important;
    }

    .zsplit__band_1 {
        background-image: !important;
    }

    .zsplit__body>p {
        max-width: 100%;
    }

    .zsplit__list li {
        padding: 6px 0;
    }

    .zemg__badge {
        display: none;
    }

    .zsplit__body {
        min-width: 100%;
        position: relative;

        .mob-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 125px;
            display: block;
        }
    }

    .zsplit__band_1 {
        .mob-img {
            position: absolute;
            left: 0;
            right: 0;
            width: 115px;
            display: block;
        }

        #zprev-h {
            padding-left: 3.8em;
        }
    }

    .zsplit__band_1 .zsplit__body hr {
        left: 108px;
        position: relative;
    }

    .zspec__panel {
        background-position: top !important;
    }

    .badge-stip {
        margin-top: 0;
    }

    .zcare__col_left,
    .zcare__col_right {
        background-color: #fff;
        background-image: none !important;
        border-radius: 12px;
        box-shadow: var(--z-shadow-xs);
    }

    .zcare__col_left .content-box,
    .zcare__col_right .content-box {
        max-width: 100%;
        padding: 30px 24px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .zstat {
        padding: 2px 20px 2px 0;
        margin-right: 20px;
    }

    .zhero__inner {
        padding: 50px var(--z-gutter) 50px;
    }

    .badge-stip {
        margin-top: 0;
        width: 100%;
    }

    .zhero__inner .contnet-box {
        position: relative;
        top: 20px;
    }

    .zcare__col_left,
    .zcare__col_right {
        background-color: #fff;
        background-image: none !important;
        border-radius: 14px;
        box-shadow: var(--z-shadow-sm);
        min-height: 0 !important;
        height: auto !important;
    }

    .zcare__col_left .content-box,
    .zcare__col_right .content-box {
        max-width: 100%;
        padding: 24px 20px;
        min-height: 0 !important;
        height: auto !important;
    }

    .zcare__toggle-btn {
        margin-top: 14px !important;
    }

    .zcare__media {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100px;
        height: 100px;
        margin: -24px auto -24px auto;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zcare__badge {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .zneeds__cards {
        grid-template-columns: 2fr 2fr !important;

        .d-flex {
            display: flex;
            flex-direction: column;
        }
    }

    .zemg .zsplit__band {
        background-position: left;
    }

    .zsplit__band_1 {
        background-position: right !important;
    }

    .zemg__badge {
        display: none;
    }

    .zsplit__list {
        width: 440px;
        gap: 0 15px;
    }
}

/* --- large phone --- */
@media (max-width:680px) {

    .zcare__col_left,
    .zcare__col_right {
        background-color: #fff;
        background-image: none !important;
        border-radius: 14px;
        box-shadow: var(--z-shadow-sm);
        min-height: 0 !important;
        height: auto !important;
    }

    .zcare__col_left .content-box,
    .zcare__col_right .content-box {
        max-width: 100%;
        padding: 24px 20px;
        min-height: 0 !important;
        height: auto !important;
    }

    .zcare__toggle-btn {
        margin-top: 14px !important;
    }

    .zcare__media {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100px;
        height: 100px;
        margin: -24px auto -24px auto;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zcare__badge {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .zneeds__cards {
        grid-template-columns: 2fr 2fr !important;

        .d-flex {
            display: flex;
            flex-direction: column;
        }
    }

    .zemg .zsplit__band {
        background-position: left;
    }

    .zsplit__body {
        min-width: 100%;
        position: relative;

        .mob-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 125px;
        }
    }

    .zsplit__band_1 {
        .mob-img {
            position: absolute;
            left: 0;
            right: 0;
            width: 115px;
        }

        #zprev-h {
            padding-left: 3.8em;
        }
    }

    .zsplit__band_1 .zsplit__body hr {
        left: 108px;
        position: relative;
    }

    .zemg__badge {
        display: none;
    }

    .zhero {
        background-position: left !important;
    }

    .zemg .zsplit__band {
        background-image: url(../assets/emergency-critical-care-mob-bg.png) !important;
    }

    .zsplit__band_1 {
        background-image: url(../assets/preventive-healthcare-bg-mob-img.png) !important;
    }

    .zsplit__body>p {
        max-width: 100%;
    }

    .zsplit__list li {
        padding: 6px 0;
    }

    .zspec__panel img {
        display: block;
    }



    .zpage {
        --z-gutter: 20px
    }

    /* single column: artwork, then each block of copy */
    .zcare {
        padding: 24px 0 70px;
    }

    .zcare__band {
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: left;
        padding: 15px 0;
    }

    .zcare__col_left {
        order: 1;
    }

    .zcare__media {
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100px;
        height: 100px;
        margin: -24px auto -24px auto;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .zcare__col_right {
        order: 3;
    }

    .zcare__col p {
        max-width: none;
        margin: 0;
    }

    .zcare__col h3 {
        margin-bottom: 10px
    }

    .zhero__inner .contnet-box {
        position: relative;
        top: 0;
    }

    .badge-stip {
        margin-top: 20px;
        max-width: 100%;
    }

    .zhero__inner {
        padding: 60px var(--z-gutter) 60px;
    }

    .zhero__stats {
        margin-top: 30px;
        gap: 18px 0
    }

    .zstat small {
        font-size: 12px
    }

    .zstat {
        width: 50%;
        margin-right: 0;
        padding-right: 14px;
        border-right: 0
    }

    .zstat+.zstat {
        border-left: 1px solid #E3E8EC;
        padding-left: 14px
    }

    .zstat:nth-child(odd) {
        border-left: 0;
        padding-left: 0
    }

    .zhero__cta {
        margin-top: 30px
    }

    .zhero__cta .z-btn {
        flex: 1 1 100%
    }

    .zhero__ribbon {
        padding-top: 14px;
        padding-bottom: 14px
    }

    .zhero__ribbon p {
        font-size: clamp(14px, 3.7vw, 20px)
    }

    .zintro {
        padding: 40px 0 46px
    }

    .zintro__card {
        border-radius: 20px;
        padding: 25px 15px;
    }

    .zintro__dots {
        display: none
    }

    .zacc {
        gap: 12px;
        margin-top: 32px
    }

    .zacc__rule {
        max-width: 60px
    }

    .ztech,
    .zspec,
    .zwhy,
    .zstories,
    .zfaq,
    .zcta,
    .zneeds {
        padding-top: 46px;
        padding-bottom: 48px
    }

    .zneeds__cards,
    .zwhy__grid {
        grid-template-columns: 1fr
    }

    .ztech__car:not(.owl-loaded) .ztech__card,
    .zstories__car:not(.owl-loaded) .zstory {
        flex: 0 0 100%
    }

    .zstory {
        padding: 26px 22px
    }

    .ztech__card {
        padding: 18px 18px 20px;
        border-radius: 20px
    }

    .ztech__go {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        margin-top: 22px
    }

    .z-carousel--owl {
        gap: 20px
    }

    .zneeds__card {
        min-height: 0
    }

    .zwhy__card {
        min-height: 0
    }

    .zspec__list {
        padding: 8px
    }

    .zspec__tab {
        padding: 12px 10px;
        font-size: 14.5px;
        gap: 11px
    }

    .zspec__panel {
        padding: 26px 22px;
        background-color: #e6ecf8;
        background-image: initial !important;
    }

    .zspec__panel img {
        height: auto;
        max-width: 100%;
    }

    .zlab__card {
        padding: 25px 15px;
    }

    .zlab__card>*,
    .zlab__facts>* {
        min-width: 0
    }

    .zlab__intro h2 {
        font-size: clamp(24px, 7.4vw, 32px)
    }

    .zlab__facts {
        grid-template-columns: 1fr
    }

    .zsplit {
        padding: 14px 0
    }

    .zsplit__band {
        border-radius: 14px
    }

    .zsplit__list {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
    }

    .zsplit__keyhead i {
        max-width: 60px
    }

    .zcta__pill {
        padding: 8px 10px;
        flex-direction: column;
        align-items: stretch;
        border-radius: 26px;
        max-width: 100%
    }

    .zcta__pill a {
        padding: 10px 8px;
        gap: 10px;
        font-size: 14px;
        justify-content: flex-start;
        min-width: 0;
        overflow-wrap: anywhere
    }

    .zcta__pill a i {
        width: 34px;
        height: 34px
    }

    .zcta__pill a i svg {
        width: 17px;
        height: 17px
    }

    .zcta__pill a+a {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .45)
    }

    .zfaq__q {
        padding: 20px 0;
        gap: 14px
    }

    .zfaq__a {
        padding: 18px 20px;
        margin-bottom: 18px
    }

    .zvisit {
        padding: 34px 0
    }
}

/* --- small phone --- */
@media (max-width:359px) {
    .zpage {
        --z-gutter: 16px
    }

    .zstat {
        width: 100%;
        border-left: 0 !important;
        padding-left: 0 !important
    }

    .zcare__band {
        padding: 24px 18px
    }

    .zvisit__card {
        padding: 22px
    }
}

@media (prefers-reduced-motion:reduce) {
    .zpage * {
        transition: none !important
    }
}