/* ===== Variables ===== */
:root {
    --navy: #0e243d;
    --navy-2: #1d3a5c;
    --red: #BA0F1A;
    ;
    --red-2: #E5354A;
    ;
    --text: #222;
    --white: #fff;
    --max: 1140px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
    background: #fff;
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

ul {
    list-style: none
}

/* ===== Base helpers ===== */
.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
  
}

.center {
    text-align: center
}

.red {
    color: var(--red);
    font-weight: 600
}

h2.red {
    font-size: 30px;
    margin-bottom: 20px
}

/* ===== Heading animation: bottom to top ===== */
h2.red.will-slide {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, opacity
}

h2.red.will-slide.is-visible {
    opacity: 1;
    transform: translateY(0)
}

@media (prefers-reduced-motion: reduce) {
    h2.red.will-slide {
        opacity: 1;
        transform: none;
        transition: none
    }
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #fff;
    padding: 8px 14px;
    z-index: 999
}

.skip-link:focus {
    left: 10px
}

:focus-visible {
    outline: 2px solid var(--red-2);
    outline-offset: 2px
}

/* ===== Header ===== */
.site-header {
    background: var(--navy);
    position: relative;      /* makes z-index work */
    top: 0;
    z-index: 1000
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px
}

.logo {
    display: flex;
    align-items: center;
    flex: none
}

.logo img {
    height: 50px;
    width: auto;
    max-width: 100%
}

/* ===== Main menu ===== */
.main-nav>ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px
}

.main-nav a {
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color .2s
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--red-2)
}

.caret {
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .2s
}

.has-sub {
    position: relative
}

.has-sub:hover .caret,
.has-sub.open .caret {
    transform: rotate(225deg);
    margin-top: 3px
}

/* ===== Dropdown ===== */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1100;
    width: max-content;
    min-width: 220px;
    padding: 0;
    background: var(--navy);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35)
}

.sub-menu li {
    display: block;
    width: 100%
}

.sub-menu a {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid rgb(220, 217, 217)
}

.sub-menu li:last-child a {
    border-bottom: 0
}

.sub-menu a:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--red-2)
}

.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.open .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

/* ===== Hamburger button (hidden on desktop) ===== */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px
}

.nav-toggle span {
    display: block;
    height: 3px;
    background: #fff;
    margin: 5px 0;
    border-radius: 2px;
    transition: .3s
}

.nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
}

/* ===== Small laptops ===== */
@media (max-width: 1150px) {
    .main-nav a {
        font-size: 15px;
        padding: 10px 8px
    }

    .sub-menu a {
        font-size: 15px
    }
}

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .container {
        padding: 0 30px
    }

    .nav-wrap {
        min-height: 74px
    }

    .nav-toggle {
        display: block
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy);
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
        border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .main-nav.open {
        max-height: calc(100vh - 74px);
        overflow-y: auto
    }

    .main-nav>ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 30px 16px
    }

    .main-nav a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 14px 4px;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    /* dropdown becomes an accordion */
    .sub-menu {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease
    }

    .has-sub:hover .sub-menu,
    .has-sub:focus-within .sub-menu {
        max-height: 0
    }

    .has-sub.open .sub-menu,
    .has-sub.open:hover .sub-menu,
    .has-sub.open:focus-within .sub-menu {
        max-height: 300px
    }

    .sub-menu a {
        padding: 12px 4px 12px 20px;
        font-size: 15px;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, .25)
    }

    .sub-menu li:last-child a {
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .has-sub:hover .caret {
        transform: rotate(45deg);
        margin-top: -3px
    }

    .has-sub.open .caret,
    .has-sub.open:hover .caret {
        transform: rotate(225deg);
        margin-top: 3px
    }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .container {
        padding: 0 20px
    }

    .nav-wrap {
        min-height: 68px
    }

    .logo img {
        height: 40px
    }

    .main-nav.open {
        max-height: calc(100vh - 68px)
    }

    .main-nav>ul {
        padding: 8px 20px 16px
    }

    .main-nav a {
        font-size: 15px
    }

    h2.red {
        font-size: 23px
    }
}
/* ===== Hero ===== */
.hero {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    overflow: hidden;               /* keeps the sliding title inside the hero */
    background:
        linear-gradient(rgba(30, 30, 30, 0.55), rgba(30, 30, 30, 0.55)),
        url('../images/view-anatomic-heart-model-educational-purpose-with-stethoscope-2-scaled.jpg') right center / cover no-repeat;
    background-color: #8a6b70;      /* shows if the image is missing */
}

.hero h1 {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
    line-height: 46px;
    letter-spacing: .5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    animation: heroDrop 1s cubic-bezier(.2, .7, .2, 1) both
}

/* top to bottom */
@keyframes heroDrop {
    from {
        opacity: 0;
        transform: translateY(-70px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 991px) {
    .hero { min-height: 290px }
    .hero h1 { font-size: 30px; line-height: 40px }
}

@media (max-width: 600px) {
    .hero {
        min-height: 240px;
        padding: 30px 20px;
        background-position: 70% center     /* keeps the heart model in view on phones */
    }
    .hero h1 { font-size: 23px; line-height: 32px }
}

/* respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    .hero h1 { animation: none }
}
/* ===== Sections ===== */
.section {
    padding: 45px 0
}

.intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: start;
    padding-top: 45px
}

.intro-text p {
    font-size: 16px;
    line-height: 26px
}

.intro-img img {
    width: 100%;
    max-width: 490px;
    margin-left: auto;
    object-fit: cover
}
/* Introduction heading: bottom to top */
.intro-text h2 {
    animation: headingUp 1s cubic-bezier(.2, .7, .2, 1) both
}

@keyframes headingUp {
    from {
        opacity: 0;
        transform: translateY(60px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-text h2 { animation: none }
}
/* Why join */
.why {
    padding-top: 10px;
    overflow-x: clip            /* stops a sideways scrollbar while text slides in */
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 30px
}

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

.why-text h3 {
    color: var(--navy);
    font-size: 25px;
    line-height: 33px;
    margin-bottom: 14px;
    font-weight: 600
}

.dot-list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 6px
}

.dot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #aaa;
    border-radius: 50%
}

/* ===== Slide-left animation (right to left) ===== */
.slide-left.will-slide-left {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, opacity
}

.slide-left.will-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

/* smaller movement on phones */
@media (max-width: 600px) {
    .slide-left.will-slide-left { transform: translateX(40px) }
    .slide-left.will-slide-left.is-visible { transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce) {
    .slide-left.will-slide-left {
        opacity: 1;
        transform: none;
        transition: none
    }
}
/* Hospitals */
.hospitals {
    padding-bottom: 30px
}

.cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 0 0;
    margin-top: 30px
}

.card {
    background: var(--navy);
    color: #fff;
    border-radius: 14px;
    padding: 12px 12px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25)
}

.card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px
}

.card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px
}

.card p {
    font-size: 14px;
    line-height: 23px;
}

/* ===== Ecosystem ===== */
.eco {
    overflow-x: clip            /* no sideways scrollbar while the list slides in */
}

.eco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 25px
}

.eco-img img {
    width: 100%;
    max-height: 370px;
    object-fit: cover
}

.arrow-list li {
    position: relative;
    padding-left: 46px;
    margin-bottom: 18px
}

/* bold arrow: shaft */
.arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--red-2);
    transition: transform .3s ease, background .3s ease
}

/* bold arrow: head */
.arrow-list li::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 11px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--red-2);
    border-right: 3px solid var(--red-2);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.arrow-list h3 {
    color: var(--navy);
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    transition: color .3s ease
}

.arrow-list p {
    font-size: 14px;
    line-height: 23px
}

/* hover: heading turns red, arrow turns navy and nudges right */
@media (hover: hover) {
    .arrow-list li:hover h3 {
        color: var(--red-2)
    }

    .arrow-list li:hover::before {
        background: var(--navy);
        transform: translateX(6px)
    }

    .arrow-list li:hover::after {
        border-color: var(--navy);
        transform: translateX(6px) rotate(45deg)
    }
}

/* ===== Slide toward left ===== */
.slide-left.will-slide-left {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, opacity
}

.slide-left.will-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

@media (prefers-reduced-motion: reduce) {
    .slide-left.will-slide-left {
        opacity: 1;
        transform: none;
        transition: none
    }

    .arrow-list li::before,
    .arrow-list li::after,
    .arrow-list h3 {
        transition: none
    }
}

/* ===== Ecosystem: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .eco-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .eco-img img {
        max-height: 320px
    }
}

/* ===== Ecosystem: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .slide-left.will-slide-left {
        transform: translateX(40px)
    }

    .slide-left.will-slide-left.is-visible {
        transform: translateX(0)
    }

    .arrow-list li {
        padding-left: 40px
    }

    .arrow-list li::before {
        width: 22px
    }

    .arrow-list li::after {
        left: 9px;
        width: 11px;
        height: 11px
    }

    .arrow-list h3 {
        font-size: 16px
    }

    .arrow-list p {
        font-size: 13.5px;
        line-height: 22px
    }
}

/* ===== Vision ===== */
.vision {
    position: relative;
    isolation: isolate;
    padding: 60px 20px;
    margin-top: 40px;
    background: url('../images/vision-bg.jpg') center / cover no-repeat;
    background-color: #3a4658;
    /* fallback if the image is missing */
}

/* section background overlay */
.vision::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(46, 35, 30, 0.4);
    /* change .65 to adjust */
    z-index: -1
}

.vision-box {
    position: relative;
    isolation: isolate;
    max-width: 1090px;
    margin: 0 auto 0 40px;
    color: #fff;
    text-align: center;
    padding: 36px 35px 40px;
    border-radius: 12px;
    overflow: hidden;
    background: url('../images/vision-box-bg.jpg') center / cover no-repeat;
    background-color: var(--navy);
    /* fallback if the image is missing */
}

/* ===== Zoom-in animation ===== */
.zoom-in.will-zoom {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    will-change: transform, opacity
}

.zoom-in.will-zoom.is-visible {
    opacity: 1;
    transform: scale(1)
}

@media (prefers-reduced-motion: reduce) {
    .zoom-in.will-zoom {
        opacity: 1;
        transform: none;
        transition: none
    }
}

.vision-box {
    position: relative;
    max-width: 1090px;
    margin: 0 auto 0 40px;
    color: #fff;
    text-align: center;
    padding: 36px 35px 40px;
    border-radius: 12px;
    background: rgba(6, 26, 46, 0.72);              /* transparent navy: change .45 */
    border: 1px solid rgba(255, 255, 255, .25);     /* thin glass edge */
    -webkit-backdrop-filter: blur(6px);             /* Safari */
    backdrop-filter: blur(6px);                     /* frosted blur */
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25)
}

.vision-box h2 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px
}

.vision-box p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 22px
}

.vision-box p:last-child {
    margin-bottom: 0
}

/* ===== Vision: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .vision {
        padding: 50px 30px
    }

    .vision-box {
        margin: 0 auto
    }
}

/* ===== Vision: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .vision {
        padding: 35px 15px;
        margin-top: 30px
    }

    .vision-box {
        padding: 26px 18px
    }

    .vision-box h2 {
        font-size: 19px
    }

    .vision-box p {
        font-size: 14px;
        margin-bottom: 18px
    }
}

/* ===== Footer ===== */
.site-footer {
    background: var(--navy);
    color: #fff
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.1fr;
    gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px
}

.f-logo {
    display: inline-block;
    margin-bottom: 30px
}

.f-logo img {
    height: 100px;
    width: auto;
    max-width: 100%
}

.f-about p {
    font-size: 17px;
    line-height: 1.85
}

.site-footer h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 14px
}

/* ----- Contact items (address, phone, email) ----- */
.c-item {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    cursor: default
}

.c-item svg {
    width: 30px;
    height: 30px;
    fill: var(--red);
    flex: none;
    margin-top: 5px;
    transition: fill .25s ease, transform .25s ease
}

.c-item h4 {
    color: var(--red-2);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    transition: color .25s ease
}

.c-item p,
.c-item a {
    font-size: 15px;
    line-height: 25px;
    overflow-wrap: anywhere;
    /* long email never overflows */
    transition: color .25s ease
}

/* hover: icon, heading and text turn white */
.c-item:hover svg,
.c-item:focus-within svg {
    fill: #fff;
    transform: scale(1.1)
}

.c-item:hover h4,
.c-item:focus-within h4,
.c-item a:hover,
.c-item a:focus-visible {
    color: #fff
}

.f-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 4px;
    filter: saturate(.9)
}

.copyright {
    border-top: 2px solid #fff;
    text-align: center;
    padding: 14px 20px;
    font-size: 16px
}

.copyright a {
    color: var(--red-2)
}



/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .hero h1 {
        font-size: 30px
    }

    .intro,
    .why-grid,
    .eco-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .intro-img img {
        margin: 0 auto;
        max-width: 100%
    }

    .cards {
        grid-template-columns: repeat(3, 1fr)
    }

    .vision-box {
        margin: 0 auto
    }

    /* footer: 2 columns, map full width below */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .f-map {
        grid-column: 1 / -1
    }

    .f-map iframe {
        height: 300px
    }

    .f-logo img {
        height: 85px
    }

    .f-about p {
        font-size: 16px
    }

    .site-footer h3 {
        font-size: 21px
    }

    .c-item svg {
        width: 28px;
        height: 28px
    }

    .c-item h4 {
        font-size: 19px
    }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    body {
        font-size: 14px
    }

    .hero {
        min-height: 240px
    }

    .hero h1 {
        font-size: 23px
    }

    h2.red {
        font-size: 23px
    }

    .section {
        padding: 32px 0
    }

    .why-text h3 {
        font-size: 19px
    }

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

    .card img {
        height: 170px
    }

    .vision {
        padding: 35px 15px
    }

    .vision-box {
        padding: 26px 18px
    }

    .vision-box h2 {
        font-size: 19px
    }

    /* footer: single column, centered logo and text */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 30px;
        padding-bottom: 24px
    }

    .f-about {
        text-align: center
    }

    .f-logo {
        margin-bottom: 14px
    }

    .f-logo img {
        height: 75px;
        margin: 0 auto
    }

    .f-about p {
        font-size: 15px;
        line-height: 1.75
    }

    .site-footer h3 {
        font-size: 20px;
        margin-bottom: 12px
    }

    .c-item {
        gap: 12px;
        margin-bottom: 16px
    }

    .c-item svg {
        width: 24px;
        height: 24px;
        margin-top: 3px
    }

    .c-item h4 {
        font-size: 18px
    }

    .c-item p,
    .c-item a {
        font-size: 14px;
        line-height: 22px
    }

    /* phones have no hover: show the white state while tapping */
    .c-item:active svg {
        fill: #fff
    }

    .c-item:active h4,
    .c-item a:active {
        color: #fff
    }

    .f-map iframe {
        height: 230px
    }

    .copyright {
        font-size: 13px;
        padding: 12px 16px;
        line-height: 1.6
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}
/*===========contact us====================*/
/* ===== Page banner ===== */
.page-banner {
    position: relative;
    isolation: isolate;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/Contact-Page-scaled.jpg') center / cover no-repeat;
    background-color: #090909;          /* fallback if the image is missing */
}

.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .70);  
    z-index: -1
}

.page-banner h1 {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
    line-height: 46px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.breadcrumb a { color: var(--red-2); transition: color .2s }
.breadcrumb a:hover { color: #fff }

/* ===== Info cards ===== */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 50px
}

.info-card {
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 10px 20px 30px;
    min-height: 245px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: -2px auto 10px;
    border-radius: 50%;
    background: var(--navy);
    transition: background .3s ease, transform .3s ease
}

.info-icon svg {
    width: 50px;
    height: 50px;
    fill: #fff;
    transition: transform .3s ease
}

.info-card h2 {
    color: var(--red);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 14px;
    transition: color .3s ease
}

.info-card p {
    font-size: 16px;
    line-height: 29px;
    overflow-wrap: anywhere;            /* long email never overflows */
    transition: color .3s ease
}

.info-card a {
    transition: color .3s ease
}

/* ===== Hover (only on devices with a mouse) ===== */
@media (hover: hover) {
    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .25)
    }

    /* icon: circle turns red, icon zooms in */
    .info-card:hover .info-icon {
        background: var(--red);
        transform: scale(1.08)
    }

    .info-card:hover .info-icon svg {
        transform: scale(1.1)
    }

    /* heading turns navy */
    .info-card:hover h2 {
        color: var(--navy)
    }

    /* text and links turn red */
    .info-card:hover p,
    .info-card:hover p a {
        color: var(--red)
    }
}

/* keyboard: same effect when tabbing to a link */
.info-card:focus-within .info-icon {
    background: var(--red)
}

.info-card:focus-within h2 {
    color: var(--navy)
}

.info-card:focus-within p a {
    color: var(--red)
}

/* touch screens: same state while tapping */
.info-card:active .info-icon {
    background: var(--red)
}

.info-card:active h2 {
    color: var(--navy)
}

.info-card:active p,
.info-card:active p a {
    color: var(--red)
}

/* ===== Info cards: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .contact-cards {
        gap: 20px;
        padding-top: 40px;
        padding-bottom: 40px
    }

    .info-card {
        padding: 10px 14px 24px;
        min-height: 220px
    }

    .info-icon {
        width: 72px;
        height: 72px
    }

    .info-icon svg {
        width: 44px;
        height: 44px
    }

    .info-card h2 {
        font-size: 19px;
        margin-bottom: 12px
    }

    .info-card p {
        font-size: 15px;
        line-height: 26px
    }
}

/* ===== Info cards: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .contact-cards {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 32px;
        padding-bottom: 28px
    }

    .info-card {
        min-height: 0;
        padding: 10px 16px 22px
    }

    .info-icon {
        width: 70px;
        height: 70px
    }

    .info-icon svg {
        width: 40px;
        height: 40px
    }

    .info-card h2 {
        font-size: 20px;
        margin-bottom: 10px
    }

    .info-card p {
        font-size: 15px;
        line-height: 26px
    }
}

@media (prefers-reduced-motion: reduce) {
    .info-card,
    .info-icon,
    .info-icon svg,
    .info-card h2,
    .info-card p,
    .info-card a {
        transition: none
    }

    .info-card:hover,
    .info-card:hover .info-icon,
    .info-card:hover .info-icon svg {
        transform: none
    }
}
/* ===== Map + form ===== */
.contact-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    padding-bottom: 50px
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: 0
}

.contact-form-wrap {
    background: #eef6fd;
    padding: 20px
}

.form-group { margin-bottom: 14px }

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px
}

.form-group input,
.form-group textarea {
    width: 100%;
    font: inherit;
    font-size: 14px;                    /* 16px stops iPhone zoom on focus */
    padding: 10px 12px;
    color: var(--text);
    background: #fff;
    border: 1px solid #c9d3de;
    border-radius: 3px;
    transition: border-color .2s, box-shadow .2s
}

.form-group input { height: 40px }
.form-group textarea { height: 100px; resize: vertical }

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(11, 34, 57, .15)
}

.form-group input.is-invalid { border-color: var(--red) }

.field-error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    font-size: 14px;
    color: var(--red)
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.btn-submit {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 4px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--navy);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .25s
}

.btn-submit:disabled { opacity: .7; cursor: wait }

.form-summary {
    margin-top: 22px;
    padding: 0px 5px;
    font-size: 14px;
    background: #fff;
    border: 2px solid #f0b400
}

.form-summary[hidden] { display: none }
.form-summary.is-success { border-color: #2e8b57; color: #1d6b3f }
.form-summary.is-error { border-color: #f0b400 }

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .page-banner { min-height: 260px }
    .page-banner h1 { font-size: 34px }
    .breadcrumb { font-size: 18px }

    .contact-cards { gap: 20px }
    .info-card { padding: 10px 14px 24px }
    .info-card p { font-size: 15px; line-height: 26px }

    .contact-main { grid-template-columns: 1fr; gap: 24px }
    .contact-map iframe { min-height: 360px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .page-banner { min-height: 210px; padding: 30px 20px }
    .page-banner h1 { font-size: 28px }
    .breadcrumb { font-size: 16px }

    .contact-cards {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 32px;
        padding-bottom: 28px
    }

    .info-card { min-height: 0; padding-bottom: 22px }
    .info-icon { width: 70px; height: 70px }
    .info-icon svg { width: 32px; height: 32px }
    .info-card h2 { font-size: 20px; margin-bottom: 10px }

    .contact-map iframe { min-height: 280px }
    .contact-form-wrap { padding: 16px }
    .contact-main { padding-bottom: 36px }
    .form-summary { font-size: 15px }
}

@media (prefers-reduced-motion: reduce) {
    .info-card,
    .btn-submit,
    .form-group input,
    .form-group textarea { transition: none }
    .info-card:hover { transform: none }
}
/*=============================services=================================*/
/* ===== Services banner ===== */
.services-banner {
    position: relative;
    isolation: isolate;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/life-insurance-concept-with-stethoscope-scaled.jpg') right center / cover no-repeat;
    background-color: #3a5560;          /* fallback if the image is missing */
}

.services-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .60);  /* change .55 to adjust */
    z-index: -1
}

.services-banner h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.services-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.services-breadcrumb a { color: var(--red-2); transition: color .2s }
.services-breadcrumb a:hover { color: #fff }

/* ===== Intro ===== */
.services-intro {
    max-width: 960px;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center
}

.services-intro h2.red {
    font-size: 40px;
    margin-bottom: 14px
}

.services-intro p {
    font-size: 16px;
    line-height: 26px
}

/* ===== Service rows ===== */
.service-list {
    padding-top: 30px;
    padding-bottom: 60px
}

.service-row {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 48px;
    align-items: center;
    padding: 24px 0
}

.service-img {
    margin: 0;
    overflow: hidden
}

.service-img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease
}

@media (hover: hover) {
    .service-row:hover .service-img img { transform: scale(1.05) }
}

.service-text h3 {
    color: var(--red);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 16px
}

.service-text .dot-list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 4px
}

.service-text .dot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #aaa;
    border-radius: 50%
}

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .services-banner { min-height: 260px }
    .services-banner h1 { font-size: 32px }
    .services-breadcrumb { font-size: 18px }

    .services-intro { padding-top: 40px }
    .services-intro h2.red { font-size: 32px }

    .service-row {
        grid-template-columns: 280px 1fr;
        gap: 28px
    }

    .service-text h3 { font-size: 20px }
    .service-text .dot-list li { font-size: 15px; line-height: 25px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .services-banner { min-height: 210px; padding: 30px 20px }
    .services-banner h1 { font-size: 28px }
    .services-breadcrumb { font-size: 16px }

    .services-intro { padding-top: 32px }
    .services-intro h2.red { font-size: 28px }
    .services-intro p { font-size: 15px; line-height: 27px }

    .service-list { padding-bottom: 40px }

    .service-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px 0 22px;
        border-bottom: 1px solid #e6e6e6
    }

    .service-row:last-child { border-bottom: 0 }

    .service-img img { aspect-ratio: 16 / 10 }

    .service-text h3 { font-size: 19px; margin-bottom: 12px }
    .service-text .dot-list li { font-size: 14.5px; line-height: 24px }
}

@media (prefers-reduced-motion: reduce) {
    .service-img img { transition: none }
    .service-row:hover .service-img img { transform: none }
}
/*=========================ourteam============================*/
/* ===== Member banner ===== */
.member-banner {
    position: relative;
    isolation: isolate;
    min-height: 325px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/Docter-Team-scaled.jpg') top / cover no-repeat;
    background-color: #4a4f57;          /* fallback if the image is missing */
}

.member-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, .55);  /* change .55 to adjust */
    z-index: -1
}

.member-banner h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.member-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.member-breadcrumb a { color: var(--red-2); transition: color .2s }
.member-breadcrumb a:hover { color: #fff }

/* ===== Team ===== */
.team {
    padding-top: 40px;
    padding-bottom: 60px
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start
}

.team-card {
    text-align: center
}

.team-card h2 {
    color: var(--red);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 22px
}
.team-photo {
    margin: 0 auto;
    width: 100%;
    max-width: 300px;               /* image size: lower = smaller */
    overflow: hidden
}

.team-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;            /* keeps all photos the same shape */
    object-fit: cover;
    object-position: top center;    /* keeps faces in view */
    transition: transform .5s ease
}

@media (hover: hover) {
    .team-card:hover .team-photo img { transform: scale(1.05) }
}

/* Tablet (991px and below) */
@media (max-width: 991px) {
    .team-photo { max-width: 200px }
}

/* Mobile (600px and below) */
@media (max-width: 600px) {
    .team-photo { max-width: 220px }
}

/* optional doctor name and details */
.team-card h3 {
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    margin-top: 16px
}

.team-card p {
     color: 
rgb(122, 122, 122);
    font-size: 15px;
    line-height: 25px
}

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .member-banner { min-height: 270px }
    .member-banner h1 { font-size: 32px }
    .member-breadcrumb { font-size: 18px }

    .team { padding-top: 34px; padding-bottom: 48px }
    .team-grid { gap: 22px }
    .team-card h2 { font-size: 19px; margin-bottom: 16px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .member-banner { min-height: 220px; padding: 30px 20px }
    .member-banner h1 { font-size: 28px }
    .member-breadcrumb { font-size: 16px }

    .team { padding-top: 28px; padding-bottom: 38px }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .team-card { max-width: 340px; margin: 0 auto; width: 100% }
    .team-card h2 { font-size: 20px; margin-bottom: 14px }
}

@media (prefers-reduced-motion: reduce) {
    .team-photo img { transition: none }
    .team-card:hover .team-photo img { transform: none }
}
/*=================================about us===================================*/
/* ===== About banner ===== */
.about-banner {
    position: relative;
    isolation: isolate;
    min-height: 327px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/life-insurance-concept-with-stethoscope-scaled.jpg') right center / cover no-repeat;
    background-color: #3a5560;          /* fallback if the image is missing */
}

.about-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(34, 34, 34, .60);  /* change .55 to adjust */
    z-index: -1
}

.about-banner h1 {
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.about-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.about-breadcrumb a { color: var(--red-2); transition: color .2s }
.about-breadcrumb a:hover { color: #fff }

/* ===== About content ===== */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 70px
}

.about-text h2.red {
    font-size: 34px;
    margin-bottom: 18px
}

.about-text p {
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 26px
}

.about-text p:last-child { margin-bottom: 0 }

.about-img {
    margin: 0;
    overflow: hidden;
    border-radius: 18px
}

.about-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s ease
}

@media (hover: hover) {
    .about-img:hover img { transform: scale(1.05) }
}

/* ===== About vision (background stays fixed while scrolling) ===== */
.about-vision {
    position: relative;
    isolation: isolate;
    padding: 60px 20px;
    background: url('../images/vision-bg.jpg') center / cover no-repeat fixed;
    background-color: #3a4658;          /* fallback if the image is missing */
}

/* section background overlay */
.about-vision::before {
    content: "";
    position: absolute;
    inset: 0;
    background:rgba(46, 35, 30, 0.4);  /* change .65 to adjust */
    z-index: -1
}

.about-vision-box {
    position: relative;
    max-width: 1090px;
    margin: 0 auto 0 40px;
    color: #fff;
    text-align: center;
    padding: 36px 35px 40px;
    border-radius: 12px;
    background: rgba(11, 34, 57, .75);              /* transparent navy: change .75 */
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(6px);             /* Safari */
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25)
}

.about-vision-box h2 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px
}

.about-vision-box p {
    font-size: 16px;
    line-height: 37px;
    margin-bottom: 22px
}

.about-vision-box p:last-child { margin-bottom: 0 }

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .about-banner { min-height: 270px }
    .about-banner h1 { font-size: 30px }
    .about-breadcrumb { font-size: 18px }

    .about-intro {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 34px;
        padding-bottom: 50px
    }

    /* image first on tablet, then the text */
    .about-img { order: -1 }
    .about-img img { aspect-ratio: 16 / 8 }

    .about-text h2.red { font-size: 30px }
    .about-text p { margin-bottom: 20px }

    .about-vision {
        padding: 50px 30px;
        background-attachment: scroll   /* fixed backgrounds are unreliable on phones */
    }

    .about-vision-box { margin: 0 auto }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .about-banner { min-height: 220px; padding: 30px 20px }
    .about-banner h1 { font-size: 26px }
    .about-breadcrumb { font-size: 16px }

    .about-intro { gap: 22px; padding-top: 28px; padding-bottom: 38px }
    .about-img { border-radius: 14px }
    .about-img img { aspect-ratio: 16 / 10 }

    .about-text h2.red { font-size: 26px; margin-bottom: 14px }
    .about-text p { font-size: 15px; line-height: 26px; margin-bottom: 16px }

    .about-vision { padding: 35px 15px }
    .about-vision-box { padding: 26px 18px }
    .about-vision-box h2 { font-size: 19px }
    .about-vision-box p { font-size: 14px; margin-bottom: 18px }
}

@media (prefers-reduced-motion: reduce) {
    .about-img img { transition: none }
    .about-img:hover img { transform: none }
    .about-vision { background-attachment: scroll }
}
/*=============================doctors===============================================*/
/* ===== Head ===== */
.doc-head {
    padding-top: 40px;
    text-align: center
}

.doc-head h2.red {
    font-size: 30px;
    margin-bottom: 10px
}

.doc-tagline {
    font-size: 18px;
    font-weight: 600;
    color: #111
}

/* ===== Shared image ===== */
.doc-img {
    margin: 0;
    overflow: hidden
}

.doc-img img {
    width: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

@media (hover: hover) {
    .doc-img:hover img { transform: scale(1.05) }
}

/* ===== Platform (image + text) ===== */
.doc-platform {
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: 60px;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px
}

.doc-platform .doc-img img { aspect-ratio: 3 / 2 }

.doc-platform-text h3 {
    color: var(--red);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px
}

.doc-platform-text p {
    font-size: 16px;
    line-height: 25px
}

/* ===== Text + image split (Why join / How it works) ===== */
.doc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 40px
}

.doc-split-text h2.red {
    font-size: 30px;
    margin-bottom: 18px
}

.doc-split .doc-img img { aspect-ratio: 3 / 2 }

/* ===== Bold arrow list ===== */
.doc-arrow-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px
}

.doc-arrow-list li:last-child { margin-bottom: 0 }

.doc-arrow-list li::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 4px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--navy);
    border-right: 3px solid var(--navy);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.doc-arrow-list h3 {
    color: var(--navy);
    font-size: 18px;
    font-weight: 600;
    line-height: 23px;
    transition: color .3s ease
}

.doc-arrow-list p {
    font-size: 15px;
    line-height: 25px
}

@media (hover: hover) {
    .doc-arrow-list li:hover h3 { color: var(--red) }

    .doc-arrow-list li:hover::before {
        border-color: var(--red);
        transform: translateX(5px) rotate(45deg)
    }
}

/* ===== What you get (background stays fixed while scrolling) ===== */
.doc-benefits {
    position: relative;
    isolation: isolate;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
    background: url('../images/medical-banner-with-doctor-holding-tablet-1024x683.jpg') center / cover no-repeat fixed;
    background-color: #4a5a68;                 /* fallback if the image is missing */
}

/* overlay */
.doc-benefits::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(46, 35, 30, .4);          /* change .4 to adjust */
    z-index: -1
}

.doc-benefits h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 14px
}

.doc-benefits p {
    font-size: 16px;
    line-height: 28px
}

.doc-benefits .doc-join {
    margin-top: 18px;
    font-size: 16px
}

/* Tablet (991px and below): fixed backgrounds are unreliable on phones and tablets */
@media (max-width: 991px) {
    .doc-benefits {
        padding: 50px 20px;
        background-attachment: scroll
    }

    .doc-benefits h2 { font-size: 26px }
}

/* Mobile (600px and below) */
@media (max-width: 600px) {
    .doc-benefits { padding: 40px 16px }
    .doc-benefits h2 { font-size: 23px }
    .doc-benefits p { font-size: 15px; line-height: 26px }
}

/* Reduced motion: no parallax */
@media (prefers-reduced-motion: reduce) {
    .doc-benefits { background-attachment: scroll }
}

/* ===== Doctor's growth ===== */
.doc-growth {
    padding-top: 40px;
    padding-bottom: 20px
}

.doc-growth h2.red {
    text-align: center;
    font-size: 30px;
    margin-bottom: 18px
}

.doc-case {
    font-size: 18px;
    margin-bottom: 18px
}

/* ===== Accordion ===== */
.doc-accordion {
    border: 2px solid #d9dde2
}

.acc-item + .acc-item { border-top: 2px solid #d9dde2 }

.acc-title { font-size: inherit; font-weight: inherit }

.acc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    color: #111;
    background: #fff;
    border: 0;
    cursor: pointer;
    transition: background .25s, color .25s
}

.acc-btn:hover { background: #f3f7fb; color: var(--red) }

.acc-icon {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform .3s ease
}

.acc-item.is-open .acc-icon {
    transform: rotate(225deg);
    margin-top: 2px
}

.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .35s ease, visibility .35s
}

.acc-item.is-open .acc-panel {
    grid-template-rows: 1fr;
    visibility: visible
}

.acc-body {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid transparent
}

.acc-item.is-open .acc-body { border-top-color: #d9dde2 }

.acc-body p {
    padding: 22px 20px 26px;
    font-size: 16px;
    line-height: 27px
}

/* paragraph followed by a list: less space underneath */
.acc-body p:has(+ .acc-list) {
    padding-bottom: 10px
}

/* ===== Unordered list inside the accordion ===== */
.acc-list {
    list-style: none;
    padding: 25px 50px 30px
}

.acc-list li {
    position: relative;
    padding-left: 22px;
  
    font-size: 16px;
    line-height: 26px
}

.acc-list li:last-child { margin-bottom: 0 }

.acc-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    background: 
rgb(122, 122, 122);
    border-radius: 50%
}

/* ===== Growth: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .doc-growth { padding-top: 34px }
    .doc-growth h2.red { font-size: 26px }
}

/* ===== Growth: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .doc-growth { padding-top: 28px }
    .doc-growth h2.red { font-size: 23px }
    .doc-case { font-size: 16px }

    .acc-btn { font-size: 15px; padding: 12px }
    .acc-body p { padding: 16px 14px 20px; font-size: 15px; line-height: 25px }
    .acc-body p:has(+ .acc-list) { padding-bottom: 8px }

    .acc-list { padding: 0 14px 20px }
    .acc-list li { font-size: 15px; line-height: 25px; padding-left: 20px }
    .acc-list li::before { top: 10px }
}

@media (prefers-reduced-motion: reduce) {
    .acc-btn,
    .acc-icon,
    .acc-panel { transition: none }
}

/* ===== How it works ===== */
.doc-how { padding-bottom: 60px }

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .doc-head { padding-top: 34px }
    .doc-head h2.red,
    .doc-split-text h2.red,
    .doc-benefits h2,
    .doc-growth h2.red { font-size: 26px }

    .doc-platform {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 34px;
        padding-bottom: 34px
    }

    .doc-platform .doc-img img { aspect-ratio: 16 / 9 }
    .doc-platform-text { text-align: center }

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

    .doc-split .doc-img img { aspect-ratio: 16 / 9 }

    .doc-benefits { padding: 50px 20px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .doc-head { padding-top: 28px }
    .doc-head h2.red,
    .doc-split-text h2.red,
    .doc-benefits h2,
    .doc-growth h2.red { font-size: 23px }

    .doc-tagline { font-size: 16px }

    .doc-platform { padding-top: 26px; padding-bottom: 26px }
    .doc-platform .doc-img img,
    .doc-split .doc-img img { aspect-ratio: 16 / 10 }

    .doc-platform-text h3 { font-size: 18px }

    .doc-arrow-list li { padding-left: 34px }
    .doc-arrow-list h3 { font-size: 15.5px }
    .doc-arrow-list p { font-size: 14px }

    .doc-benefits { padding: 40px 16px }
    .doc-benefits p { font-size: 15px; line-height: 26px }

    .doc-case { font-size: 16px }
    .acc-btn { font-size: 15px; padding: 12px }
    .acc-body p { padding: 16px 14px 20px; font-size: 15px; line-height: 25px }

    .doc-how { padding-bottom: 40px }
}

@media (prefers-reduced-motion: reduce) {
    .doc-img img,
    .doc-arrow-list li::before,
    .doc-arrow-list h3,
    .acc-btn,
    .acc-icon,
    .acc-panel { transition: none }

    .doc-img:hover img { transform: none }
}
/*==============hospital===================================*/
/* ===== Hospital banner ===== */
.hospital-banner {
    position: relative;
    isolation: isolate;
    min-height: 327px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/logo_make_11_06_2023_412-scaled.jpg') center / cover no-repeat;
    background-color: #2f4a52;          /* fallback if the image is missing */
}

.hospital-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.59);  /* change .55 to adjust */
    z-index: -1
}

.hospital-banner h1 {
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.hospital-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.hospital-breadcrumb a { color: var(--red-2); transition: color .2s }
.hospital-breadcrumb a:hover { color: #fff }

/* ===== Heading and intro ===== */
.hospital-head {
    padding-top: 50px;
    text-align: center
}

.hospital-head h2.red {
    font-size: 34px;
    line-height: 1.3;
    margin-bottom: 18px
}

.hospital-tagline {
    font-size: 20px;
    font-weight: 600;
    color: #111
}

.hospital-about {
    max-width: 1000px;
    padding-top: 50px;
    padding-bottom: 40px;
    text-align: center
}

.hospital-brand {
    display: inline-block;
    color: var(--red);
    font-size: 30px;
    font-weight: 600;
    line-height: 39px;
    text-decoration: underline;
    text-underline-offset: 5px;
    margin-bottom: 20px
}

.hospital-about p {
    font-size: 16px;
    line-height: 27px;
    color: var(--navy)
}

/* ===== Text + image split ===== */
.hospital-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 50px
}

.hospital-split-text h2.red {
    font-size: 30px;
    margin-bottom: 18px
}

.hospital-img {
    margin: 0;
    overflow: hidden
}

.hospital-img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease
}

@media (hover: hover) {
    .hospital-img:hover img { transform: scale(1.05) }
}

/* ===== Bold arrow list ===== */
.hospital-arrow-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px
}

.hospital-arrow-list li:last-child { margin-bottom: 0 }

.hospital-arrow-list li::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 4px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--navy);
    border-right: 3px solid var(--navy);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.hospital-arrow-list h3 {
    color: var(--navy);
    font-size: 18px;
    font-weight: 600;
    line-height: 23px;
    transition: color .3s ease
}

.hospital-arrow-list p {
    font-size: 16px;
    line-height: 26px
}

@media (hover: hover) {
    .hospital-arrow-list li:hover h3 { color: var(--red) }

    .hospital-arrow-list li:hover::before {
        border-color: var(--red);
        transform: translateX(5px) rotate(45deg)
    }
}

/* ===== What you get (background stays fixed while scrolling) ===== */
.hospital-benefits {
    position: relative;
    isolation: isolate;
    padding: 60px 20px;
    text-align: center;
    color: #fff;
    background: url('../images/Vision-bg.jpg') center / cover no-repeat fixed;
    background-color: #4a5a68;          /* fallback if the image is missing */
}

/* overlay */
.hospital-benefits::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.59);   /* change .6 to adjust */
    z-index: -1
}

.hospital-benefits h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 14px
}

.hospital-benefits p {
    font-size: 16px;
    line-height: 28px
}

.hospital-benefits .hospital-cta {
    margin-top: 20px
}

/* Tablet (991px and below): fixed backgrounds are unreliable on phones and tablets */
@media (max-width: 991px) {
    .hospital-benefits {
        padding: 50px 20px;
        background-attachment: scroll
    }

    .hospital-benefits h2 { font-size: 26px }
}

/* Mobile (600px and below) */
@media (max-width: 600px) {
    .hospital-benefits { padding: 40px 16px }
    .hospital-benefits h2 { font-size: 23px }
    .hospital-benefits p { font-size: 15px; line-height: 26px }
}

/* Reduced motion: no parallax */
@media (prefers-reduced-motion: reduce) {
    .hospital-benefits { background-attachment: scroll }
}

/* ===== Hospital impact ===== */
.hospital-impact {
    padding-top: 50px;
    padding-bottom: 30px
}

.hospital-impact h2.red {
    text-align: center;
    font-size: 30px;
    margin-bottom: 16px
}

.hospital-case {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px
}

/* ===== Accordion ===== */
.hospital-accordion {
    border: 1px solid #d9dde2
}

.hacc-item + .hacc-item { border-top: 2px solid #d9dde2 }

.hacc-title { font-size: inherit; font-weight: inherit }

.hacc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    color: #111;
    background: #fff;
    border: 0;
    cursor: pointer;
    transition: background .25s, color .25s
}

.hacc-btn:hover { background: #f3f7fb; color: var(--red) }

.hacc-icon {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform .3s ease
}

.hacc-item.is-open .hacc-icon {
    transform: rotate(225deg);
    margin-top: 2px
}

.hacc-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .35s ease, visibility .35s
}

.hacc-item.is-open .hacc-panel {
    grid-template-rows: 1fr;
    visibility: visible
}

.hacc-body {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid transparent
}

.hacc-item.is-open .hacc-body { border-top-color: #d9dde2 }

.hacc-body p {
    padding: 22px 20px 26px;
    font-size: 16px;
    line-height: 27px
}

.hacc-body p:has(+ .hacc-list) { padding-bottom: 10px }

.hacc-list {
    list-style: none;
    padding: 25px 50px 30px
}

.hacc-list li {
    position: relative;
    padding-left: 22px;
  
    font-size: 16px;
    line-height: 27px
}

.hacc-list li:last-child { margin-bottom: 0 }

.hacc-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    background: 
rgb(122, 122, 122);
    border-radius: 50%
}

/* ===== How it works ===== */
.hospital-how { padding-top: 50px; padding-bottom: 60px }

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .hospital-banner { min-height: 270px }
    .hospital-banner h1 { font-size: 30px }
    .hospital-breadcrumb { font-size: 18px }

    .hospital-head { padding-top: 40px }
    .hospital-head h2.red { font-size: 28px }
    .hospital-tagline { font-size: 18px }

    .hospital-about { padding-top: 38px; padding-bottom: 34px }
    .hospital-brand { font-size: 30px }

    .hospital-split {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-bottom: 40px
    }

    .hospital-split-text h2.red,
    .hospital-benefits h2,
    .hospital-impact h2.red { font-size: 26px }

    .hospital-img img { aspect-ratio: 16 / 9 }

    .hospital-benefits { padding: 50px 20px }
    .hospital-impact { padding-top: 40px }
    .hospital-how { padding-top: 34px; padding-bottom: 50px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .hospital-banner { min-height: 220px; padding: 30px 20px }
    .hospital-banner h1 { font-size: 26px }
    .hospital-breadcrumb { font-size: 16px }

    .hospital-head { padding-top: 30px }
    .hospital-head h2.red { font-size: 23px; margin-bottom: 14px }
    .hospital-tagline { font-size: 16px }

    .hospital-about { padding-top: 28px; padding-bottom: 26px }
    .hospital-brand { font-size: 26px; margin-bottom: 14px }
    .hospital-about p { font-size: 15px; line-height: 26px }

    .hospital-split-text h2.red,
    .hospital-benefits h2,
    .hospital-impact h2.red { font-size: 23px }

    .hospital-img img { aspect-ratio: 16 / 10 }

    .hospital-arrow-list li { padding-left: 34px }
    .hospital-arrow-list h3 { font-size: 16px }
    .hospital-arrow-list p { font-size: 14.5px; line-height: 24px }

    .hospital-benefits { padding: 40px 16px }
    .hospital-benefits p { font-size: 15px; line-height: 26px }

    .hospital-impact { padding-top: 32px }
    .hospital-case { font-size: 16px }

    .hacc-btn { font-size: 15px; padding: 12px }
    .hacc-body p { padding: 16px 14px 20px; font-size: 15px; line-height: 25px }
    .hacc-body p:has(+ .hacc-list) { padding-bottom: 8px }
    .hacc-list { padding: 0 14px 20px }
    .hacc-list li { font-size: 15px; line-height: 25px; padding-left: 20px }
    .hacc-list li::before { top: 10px }

    .hospital-how { padding-top: 26px; padding-bottom: 38px }
}

@media (prefers-reduced-motion: reduce) {
    .hospital-img img,
    .hospital-arrow-list li::before,
    .hospital-arrow-list h3,
    .hacc-btn,
    .hacc-icon,
    .hacc-panel { transition: none }

    .hospital-img:hover img { transform: none }
}
/*================network=====================================*/
/* ===== Network banner ===== */
.network-banner {
    position: relative;
    isolation: isolate;
    min-height: 327px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/medical-banner-with-doctor-wearing-mask-scaled.jpg') center / cover no-repeat;
    background-color: #3d6670;          /* fallback if the image is missing */
}

.network-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.59);  /* teal overlay: change .4 to adjust */
    z-index: -1
}

.network-banner h1 {
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.network-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.network-breadcrumb a { color: var(--red-2); transition: color .2s }
.network-breadcrumb a:hover { color: #fff }

/* ===== Intro ===== */
.net-intro {
    max-width: 1180px;
    padding-top: 50px;
    text-align: center
}

.net-intro h2.red {
    font-size: 34px;
    margin-bottom: 18px
}

.net-intro p {
    font-size: 16px;
    line-height: 25px
}

/* ===== Text blocks ===== */
.net-block {
    max-width: 1120px;
    padding-top: 50px;
    padding-bottom:50px;
    text-align: center
}

.net-block h3 {
    color: var(--navy);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px
}

.net-block p {
    font-size: 15.5px;
    line-height: 24px
}

/* ===== Partner hubs ===== */
.net-hubs {
    max-width: 1620px;
    margin: 0 auto;
    padding: 0px 14px 0
}

.net-hubs h2.red {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

/* the li carries the zoom-in; the inner card carries the hover */
.hub-item {
    display: flex;
    padding: 6px 0 12px                 /* room so the hover shadow isn't clipped */
}

.hub-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 10px 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease
}

@media (hover: hover) {
    .hub-card:hover {
        transform: translateY(-4px);
        color: var(--red);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
    }
}

/* fast zoom-in for the hub cards */
.hub-item.zoom-in.will-zoom {
    transform: scale(.92);
    transition: opacity .35s ease-out, transform .35s ease-out
}

.hub-item.zoom-in.will-zoom.is-visible {
    transform: scale(1)
}

.net-opd { padding-top: 40px }

/* ===== Partner hubs: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .net-hubs { padding: 42px 20px 0 }
    .net-hubs h2.red { font-size: 28px }
    .hub-grid { grid-template-columns: repeat(3, 1fr) }
}

/* ===== Partner hubs: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .net-hubs { padding: 32px 16px 0 }
    .net-hubs h2.red { font-size: 24px; margin-bottom: 16px }
    .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 10px }
    .hub-card { min-height: 64px; font-size: 14px; padding: 8px 10px }
    .net-opd { padding-top: 30px }
}

/* ===== Very small phones (400px and below) ===== */
@media (max-width: 400px) {
    .hub-grid { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
    .hub-card { transition: none }
    .hub-card:hover { transform: none }

    .hub-item.zoom-in.will-zoom {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* ===== How the network works ===== */
.net-how {
    max-width: 1000px;
    padding-top: 60px;
    padding-bottom: 60px;
    overflow-x: clip                    /* no sideways scrollbar while the list slides in */
}

.net-how-title {
    text-align: center;
    color: var(--navy);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 36px
}

.net-how-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    margin-bottom:50px;
    align-items: center
}

/* ===== Image ===== */
.net-img {
    margin: 0;
    overflow: hidden
}

.net-img img {
    width: 100%;
    max-width: 330px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto;
    transition: transform .5s ease
}

@media (hover: hover) {
    .net-img:hover img { transform: scale(1.05) }
}

/* ===== Bold arrow list ===== */
.net-arrow-list li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 20px
}

.net-arrow-list li:last-child { margin-bottom: 0 }

.net-arrow-list li::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 4px;
    top: 8px;
    width: 13px;
    height: 13px;
    border-top: 4px solid var(--navy);
    border-right: 4px solid var(--navy);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.net-arrow-list h4 {
    color: var(--navy);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 22px;
    transition: color .3s ease
}

.net-arrow-list p {
    font-size: 15.5px;
    line-height: 25px
}

/* hover: heading turns red, arrow turns red and nudges right */
@media (hover: hover) {
    .net-arrow-list li:hover h4 { color: var(--red) }

    .net-arrow-list li:hover::before {
        border-color: var(--red);
        transform: translateX(5px) rotate(45deg)
    }
}

/* ===== List animation: shifts to the right when the section is visited ===== */
.net-arrow-list li.slide-left.will-slide-left {
    opacity: 0;
    transform: translateX(-90px);                /* starts on the left */
    transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1)
}

.net-arrow-list li.slide-left.will-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

/* items arrive one after another */
.net-arrow-list li.slide-left.will-slide-left:nth-child(1) { transition-delay: 0s }
.net-arrow-list li.slide-left.will-slide-left:nth-child(2) { transition-delay: .12s }
.net-arrow-list li.slide-left.will-slide-left:nth-child(3) { transition-delay: .24s }
.net-arrow-list li.slide-left.will-slide-left:nth-child(4) { transition-delay: .36s }

/* ===== How it works: Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .net-how { padding-top: 46px; padding-bottom: 48px }
    .net-how-title { font-size: 19px }
    .net-how-grid { grid-template-columns: 1fr; gap: 28px }
    .net-img { order: -1 }                       /* image first, then the list */
    .net-img img { max-width: 300px }
}

/* ===== How it works: Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .net-how { padding-top: 36px; padding-bottom: 38px }
    .net-how-title { font-size: 18px; margin-bottom: 22px }

    .net-arrow-list li { padding-left: 32px }
    .net-arrow-list h4,
    .net-arrow-list p { font-size: 15px }

    .net-img img { max-width: 260px }

    /* smaller slide distance on phones */
    .net-arrow-list li.slide-left.will-slide-left { transform: translateX(-40px) }
    .net-arrow-list li.slide-left.will-slide-left.is-visible { transform: translateX(0) }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .net-img img,
    .net-arrow-list li::before,
    .net-arrow-list h4 { transition: none }

    .net-img:hover img { transform: none }

    .net-arrow-list li.slide-left.will-slide-left {
        opacity: 1;
        transform: none;
        transition: none
    }
}
/*====================referral-network==============================*/
/* ===== Banner ===== */
.care-banner {
    position: relative;
    isolation: isolate;
    min-height: 327px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/90449.jpg') center / cover no-repeat;
    background-color: #123d46;          /* fallback if the image is missing */
}

.care-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.70);   /* change .45 to adjust */
    z-index: -1
}

.care-banner h1 {
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.care-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.care-breadcrumb a { color: var(--red-2); transition: color .2s }
.care-breadcrumb a:hover { color: #fff }

/* ===== Intro ===== */
.care-intro {
    max-width: 900px;
    padding-top: 50px;
    text-align: center
}

.care-intro h2.red {
    font-size: 34px;
    margin-bottom: 18px
}

.care-intro p {
    font-size: 15.5px;
    line-height: 25px
}

.care-hl { color: var(--red-2) }

/* ===== Principles + image ===== */
.care-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 50px;
    overflow-x: clip                    /* no sideways scrollbar while the list slides in */
}

.care-img {
    margin: 0;
    overflow: hidden
}

.care-img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease
}

@media (hover: hover) {
    .care-img:hover img { transform: scale(1.05) }
}

/* ===== Bold arrow list ===== */
.care-arrow-list li {
    position: relative;
    padding-left: 46px;
    margin-bottom: 22px
}

.care-arrow-list li:last-child { margin-bottom: 0 }

.care-arrow-list li::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 8px;
    top: 9px;
    width: 12px;
    height: 12px;
    border-top: 4px solid var(--navy);
    border-right: 4px solid var(--navy);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.care-arrow-list h3 {
    color: var(--navy);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    transition: color .3s ease
}

.care-arrow-list p {
    font-size: 15.5px;
    line-height: 25px
}

@media (hover: hover) {
    .care-arrow-list li:hover h3 { color: var(--red) }

    .care-arrow-list li:hover::before {
        border-color: var(--red);
        transform: translateX(5px) rotate(45deg)
    }
}

/* list shifts to the left when the section is visited */
.care-arrow-list li.slide-left.will-slide-left {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1)
}

.care-arrow-list li.slide-left.will-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.care-arrow-list li.slide-left.will-slide-left:nth-child(2) { transition-delay: .1s }
.care-arrow-list li.slide-left.will-slide-left:nth-child(3) { transition-delay: .2s }
.care-arrow-list li.slide-left.will-slide-left:nth-child(4) { transition-delay: .3s }

/* ===== Why cards ===== */
.care-why {
    padding-top: 20px;
    padding-bottom: 40px
}

.care-why h2.red {
    text-align: center;
    font-size: 28px;
    margin-bottom: 28px
}

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

.care-item {
    display: flex;
    padding: 4px 0 12px                 /* room so the hover shadow isn't clipped */
}

.care-card {
    flex: 1;
    padding: 20px 10px 30px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    transition: transform .25s ease, box-shadow .25s ease
}

.care-card h3 {
    color: var(--navy);
    font-size: 21px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 18px;
    transition: color .25s ease
}

.care-card p {
    font-size: 16px;
    line-height: 26.5px
}

@media (hover: hover) {
    .care-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .25)
    }

    .care-card:hover h3 { color: var(--red) }
}

/* cards zoom in when the section is visited */
.care-item.zoom-in.will-zoom {
    opacity: 0;
    transform: scale(.7);
    transition: opacity .45s ease-out, transform .55s cubic-bezier(.34, 1.4, .64, 1)
}

.care-item.zoom-in.will-zoom.is-visible {
    opacity: 1;
    transform: scale(1)
}

/* ===== Digital tools ===== */
.care-tools {
    padding-top: 20px;
    padding-bottom: 70px
}

.care-tools h2.red {
    font-size: 28px;
    margin-bottom: 18px
}

.care-tools-list {
    padding-left: 30px
}

.care-tools-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 27px
}

.care-tools-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #111;
    border-radius: 50%
}

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .care-banner { min-height: 270px }
    .care-banner h1 { font-size: 30px }
    .care-breadcrumb { font-size: 18px }

    .care-intro { padding-top: 40px }
    .care-intro h2.red { font-size: 30px }

    .care-split {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 44px;
        padding-bottom: 40px
    }

    .care-img { order: -1 }
    .care-img img { aspect-ratio: 16 / 9 }

    .care-why h2.red,
    .care-tools h2.red { font-size: 26px }

    .care-grid { grid-template-columns: repeat(2, 1fr); gap: 12px }

    /* cards wrap onto rows, so no stagger delay */
    .care-item.zoom-in.will-zoom:nth-child(n) { transition-delay: 0s }

    .care-tools { padding-bottom: 55px }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .care-banner { min-height: 220px; padding: 30px 20px }
    .care-banner h1 { font-size: 25px }
    .care-breadcrumb { font-size: 16px }

    .care-intro { padding-top: 30px }
    .care-intro h2.red { font-size: 26px; margin-bottom: 14px }
    .care-intro p { font-size: 15px }

    .care-split { padding-top: 34px; padding-bottom: 30px }
    .care-img img { aspect-ratio: 16 / 10 }

    .care-arrow-list li { padding-left: 38px; margin-bottom: 18px }
    .care-arrow-list li::before { left: 6px }
    .care-arrow-list h3 { font-size: 17px }
    .care-arrow-list p { font-size: 15px }

    .care-arrow-list li.slide-left.will-slide-left { transform: translateX(40px) }
    .care-arrow-list li.slide-left.will-slide-left.is-visible { transform: translateX(0) }

    .care-why h2.red,
    .care-tools h2.red { font-size: 23px }
    .care-why h2.red { margin-bottom: 20px }

    .care-grid { grid-template-columns: 1fr; gap: 6px }
    .care-card { padding: 20px 16px 24px }
    .care-card h3 { font-size: 19px; margin-bottom: 12px }
    .care-card p { font-size: 15px; line-height: 25px }

    .care-tools { padding-bottom: 40px }
    .care-tools-list { padding-left: 4px }
    .care-tools-list li { font-size: 15px; line-height: 25px }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .care-img img,
    .care-arrow-list li::before,
    .care-arrow-list h3,
    .care-card { transition: none }

    .care-img:hover img,
    .care-card:hover { transform: none }

    .care-arrow-list li.slide-left.will-slide-left,
    .care-item.zoom-in.will-zoom {
        opacity: 1;
        transform: none;
        transition: none
    }
}
/*=====================cvsi=============================*/
/* ===== Banner ===== */
.found-banner {
    position: relative;
    isolation: isolate;
    min-height: 327px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    background: url('../images/Heart-image-1-2048x1365.jpg') center / cover no-repeat;
    background-color: #5a5f66;          /* fallback if the image is missing */
}

.found-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .70);  /* change .70 to adjust */
    z-index: -1
}

.found-banner h1 {
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.found-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--red-2)
}

.found-breadcrumb a { color: var(--red-2); transition: color .2s }
.found-breadcrumb a:hover { color: #fff }

/* ===== Intro ===== */
.found-intro {
    max-width: 960px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center
}

.found-intro h2.red {
    font-size: 34px;
    margin-bottom: 18px
}

.found-intro p {
    font-size: 15.5px;
    line-height: 25px
}

/* ===== Overlay sections (background stays fixed while scrolling) ===== */
.found-mission,
.found-academic {
    position: relative;
    isolation: isolate;
    padding: 50px 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed
}

.found-mission {
    background-image: url('../images/Vision-bg.jpg');
    background-color: #3a4658           /* fallback if the image is missing */
}

.found-academic {
    padding: 50px 20px 60px;
    background-image: url('../images/doctor-with-white-coat-stethoscope-scaled.jpg');
    background-color: #1b3350           /* fallback if the image is missing */
}

/* section overlay */
.found-mission::before,
.found-academic::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1
}

.found-mission::before { background: rgba(17, 17, 17, .50) }    /* change .50 to adjust */
.found-academic::before { background: rgba(17, 17, 17, .50) }   /* change .50 to adjust */

/* ===== Glass box ===== */
.found-box {
    max-width: 1090px;
    margin: 0 auto 0 40px;
    padding: 30px 40px 36px;
    color: #fff;
    border-radius: 12px;
    background: rgba(11, 34, 57, .72);               /* transparent navy: change .72 */
    border: 1px solid rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(6px);              /* Safari */
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25)
}

/* same zoom-in for the Mission and Academic boxes */
.found-box.zoom-in.will-zoom {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.found-box.zoom-in.will-zoom.is-visible {
    opacity: 1;
    transform: scale(1)
}

.found-box h2 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 16px
}

.found-box p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 26px
}

.found-box > :last-child { margin-bottom: 0 }

.found-box h2:not(:first-child) { margin-top: 8px }

/* ===== Bullets inside the glass boxes ===== */
.found-bullets {
    margin-bottom: 26px
}

.found-bullets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 27px
}

.found-bullets li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%
}

/* ===== Key initiatives ===== */
.found-initiatives {
    padding-top: 36px;
    padding-bottom: 60px;
    overflow-x: clip                    /* no sideways scrollbar while the list slides in */
}

.found-initiatives h2.red {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px
}

.found-list li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 22px
}

.found-list li:last-child { margin-bottom: 0 }

/* bold red arrow: shaft */
.found-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 14px;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--red-2);
    transition: transform .3s ease, background .3s ease
}

/* bold red arrow: head */
.found-list li::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 12px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--red-2);
    border-right: 3px solid var(--red-2);
    transform: rotate(45deg);
    transition: transform .3s ease, border-color .3s ease
}

.found-list h3 {
    color: var(--navy);
    font-size: 21px;
    font-weight: 600;
    line-height: 30px;
    transition: color .3s ease
}

.found-list p {
    font-size: 15.5px;
    line-height: 25px
}

@media (hover: hover) {
    .found-list li:hover h3 { color: var(--red) }

    .found-list li:hover::before {
        background: var(--navy);
        transform: translateX(5px)
    }

    .found-list li:hover::after {
        border-color: var(--navy);
        transform: translateX(5px) rotate(45deg)
    }
}

/* list items arrive one after another */
.found-list li.slide-left.will-slide-left:nth-child(2) { transition-delay: .08s }
.found-list li.slide-left.will-slide-left:nth-child(3) { transition-delay: .16s }
.found-list li.slide-left.will-slide-left:nth-child(4) { transition-delay: .24s }
.found-list li.slide-left.will-slide-left:nth-child(5) { transition-delay: .32s }

/* ===== Tablet (991px and below) ===== */
@media (max-width: 991px) {
    .found-banner { min-height: 270px }
    .found-banner h1 { font-size: 30px }
    .found-breadcrumb { font-size: 18px }

    .found-intro { padding-top: 40px; padding-bottom: 40px }
    .found-intro h2.red { font-size: 30px }

    /* fixed backgrounds are unreliable on phones and tablets */
    .found-mission,
    .found-academic {
        padding: 44px 30px;
        background-attachment: scroll
    }

    .found-box { margin: 0 auto; padding: 28px 30px 32px }
    .found-box h2 { font-size: 24px }

    .found-initiatives { padding-top: 30px; padding-bottom: 50px }
    .found-initiatives h2.red { font-size: 28px }
    .found-list h3 { font-size: 19px }

    /* no stagger on smaller screens */
    .found-list li.slide-left.will-slide-left:nth-child(n) { transition-delay: 0s }
}

/* ===== Mobile (600px and below) ===== */
@media (max-width: 600px) {
    .found-banner { min-height: 220px; padding: 30px 20px }
    .found-banner h1 { font-size: 24px }
    .found-breadcrumb { font-size: 15px }

    .found-intro { padding-top: 30px; padding-bottom: 30px }
    .found-intro h2.red { font-size: 25px; margin-bottom: 14px }
    .found-intro p { font-size: 15px }

    .found-mission,
    .found-academic { padding: 32px 14px }

    .found-box { padding: 22px 18px 26px }
    .found-box h2 { font-size: 21px; margin-bottom: 12px }
    .found-box p { font-size: 15px; line-height: 25px; margin-bottom: 20px }

    .found-bullets { margin-bottom: 20px }
    .found-bullets li { font-size: 15px; line-height: 25px; padding-left: 20px }
    .found-bullets li::before { left: 4px; top: 10px }

    .found-initiatives { padding-top: 26px; padding-bottom: 40px }
    .found-initiatives h2.red { font-size: 24px; margin-bottom: 16px }

    .found-list li { padding-left: 40px; margin-bottom: 18px }
    .found-list li::before { width: 18px; top: 13px }
    .found-list li::after { left: 8px; top: 7px; width: 11px; height: 11px }
    .found-list h3 { font-size: 17.5px; line-height: 26px }
    .found-list p { font-size: 15px }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .found-mission,
    .found-academic { background-attachment: scroll }

    .found-box.zoom-in.will-zoom {
        opacity: 1;
        transform: none;
        transition: none
    }

    .found-list li::before,
    .found-list li::after,
    .found-list h3 { transition: none }
}