/* Shifara Health - homepage styles. Layout and responsiveness come from Bootstrap 5.3. */
/* Layout and responsiveness come from Bootstrap; this sheet only carries the Shifara look. */
:root {
    --navy: #102949;
    --navy-2: #132b48;
    --teal: #48B5B2;
    --teal-d: #2f8f8c;
    --teal-soft: #e6f5f4;
    --coral: #EB6861;
    --coral-d: #d9524b;
    --blush: #FCF4F2;
    --sand: #EAD8D0;
    --slate: #68788C;
    --ink: #16202e;
    --line: #e7e9ee;
    --soft: #f6f8fb;
    --radius: 20px;
    --shadow: 0 10px 30px -12px rgba(16, 41, 73, .18);
    --shadow-lg: 0 30px 60px -20px rgba(16, 41, 73, .28);
    --sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    --bs-body-font-family: var(--sans);
    --bs-body-color: var(--ink);
    --bs-body-line-height: 1.6;
    --bs-link-color-rgb: 16, 41, 73;
    --bs-link-hover-color-rgb: 235, 104, 97;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

a {
    text-decoration: none
}

img {
    max-width: 100%
}

.container {
    max-width: 1240px
}

svg.i {
    width: 20px;
    height: 20px;
    flex: none
}

/* ---------- Shared section pieces ---------- */
.sec {
    padding: clamp(64px, 4vw, 104px) 0
}

.sec-head {
    max-width: 780px;
    margin: 0 auto 26px;
    text-align: center
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-d);
    background: var(--teal-soft);
    padding: 7px 14px;
    border-radius: 999px
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--coral);
    border-radius: 50%
}

.title {
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.15;
    color: var(--navy);
    margin: 16px 0 14px;
    letter-spacing: -.025em
}

.title em {
    font-style: normal;
    color: var(--teal-d)
}

.lead-text {
    color: var(--slate);
    font-size: clamp(15.5px, 1.4vw, 17px);
    max-width: 640px;
    margin: 0 auto
}

.dark .title {
    color: #fff
}

.dark .title em {
    color: var(--teal)
}

.dark .lead-text {
    color: #b8c4d3
}

.dark .eyebrow {
    background: rgba(72, 181, 178, .15);
    color: var(--teal)
}

.sec-foot {
    margin-top: clamp(32px, 4vw, 48px)
}

/* Buttons */
/* Every word in button labels starts with a capital ("Get Free Quote") */
.btn,
.cc-btn,
.link-arrow,
.spec .more,
.svc-more,
.mega-all,
.sm-viewall,
.sm-filter,
.fab-wa,
.mbar a {
    text-transform: capitalize
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 700;
    font-size: 15px;
    border: 1.5px solid transparent;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-coral {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 12px 24px -10px rgba(235, 104, 97, .7)
}

.btn-coral:hover,
.btn-coral:focus {
    background: var(--coral-d);
    color: #fff
}

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

.btn-navy:hover {
    background: #0b1d35;
    color: #fff
}

.btn-arrow svg {
    transition: transform .25s
}

.btn-arrow:hover svg {
    transform: translateX(4px)
}

.btn-ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy)
}

.btn-ghost:hover {
    background: var(--navy);
    color: #fff
}

.btn-wa {
    background: #25D366;
    color: #fff
}

.btn-wa:hover {
    background: #1ebe5a;
    color: #fff
}

.btn-white {
    background: #fff;
    color: var(--navy)
}

.btn-white:hover {
    background: var(--coral);
    color: #fff
}

.btn-outline-w {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4)
}

.btn-outline-w:hover {
    background: #fff;
    color: var(--navy)
}

.link-arrow {
    font-weight: 700;
    color: var(--navy);
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border-bottom: 2px solid var(--coral);
    padding-bottom: 2px
}

.link-arrow:hover {
    color: var(--coral)
}

/* Reveal on scroll */
.rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease
}

.rv.in {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .rv {
        opacity: 1;
        transform: none
    }

    .track {
        animation: none !important
    }

    html {
        scroll-behavior: auto
    }
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy);
    color: #cfd8e3;
    font-size: 13px
}

.topbar a {
    color: #cfd8e3;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.topbar a:hover {
    color: #fff
}

.topbar select {
    background: transparent;
    color: #cfd8e3;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12.5px
}

.topbar select option {
    color: var(--ink)
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ee089;
    animation: pulse 2s infinite
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(62, 224, 137, .6)
    }

    70% {
        box-shadow: 0 0 0 8px rgba(62, 224, 137, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(62, 224, 137, 0)
    }
}

/* ---------- Navbar ---------- */
.site-nav {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 1px 0
}

.site-nav .navbar-brand img {
    height: 65px;
    width: auto
}

.site-nav .nav-link {
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    padding: 10px 14px !important;
    border-radius: 10px
}

.site-nav .nav-link:hover,
.site-nav .nav-link.show {
    background: var(--blush);
    color: var(--navy)
}

.site-nav .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 10px;
    min-width: 250px
}

.site-nav .dropdown-item {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    white-space: normal
}

.site-nav .dropdown-item small {
    display: block;
    font-weight: 500;
    color: var(--slate);
    font-size: 12.5px
}

.site-nav .dropdown-item:hover {
    background: var(--teal-soft)
}

.site-nav .navbar-toggler {
    border: 0;
    padding: 6px;
    box-shadow: none !important
}

.site-nav .btn {
    padding: 11px 20px;
    font-size: 14px
}

@media (min-width:992px) {
    .site-nav .dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0
    }
}

/* ---------- Mega menu (Treatments, Hospitals, Doctors) ---------- */
.mega-menu {
    border: 0;
    padding: 8px 0 4px;
    min-width: 0
}

.mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px
}

.mega-title {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--navy);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--mc, var(--teal))
}

.mega-title:hover {
    color: var(--teal-d)
}

.mega-col li a {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.35;
    color: #3d4b5c;
    transition: color .15s, transform .15s
}

.mega-col li a:hover {
    color: var(--teal-d);
    transform: translateX(3px)
}

.mega-col li a .ar {
    color: var(--coral);
    font-weight: 700
}

.mega-col li a small {
    display: block;
    font-size: 12px;
    color: var(--slate)
}

.mega-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--coral)
}

.mega-all:hover {
    color: var(--coral-d)
}

@media (min-width:992px) {
    .site-nav .dropdown-mega {
        position: static
    }

    .site-nav .mega-menu {
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        margin-top: 0;
        padding: 30px 0;
        border-top: 1px solid var(--line);
        border-radius: 0 0 24px 24px;
        box-shadow: 0 30px 60px -24px rgba(16, 41, 73, .3)
    }

    /* invisible bridge so the menu stays open while the cursor moves down from the link */
    .site-nav .mega-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -24px;
        height: 24px
    }
}

@media (max-width:991.98px) {

    /* the navbar is sticky, so an open menu taller than the screen could never be scrolled:
       let the menu itself scroll between the header and the fixed mobile bar */
    .site-nav .navbar-collapse {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px
    }

    .site-nav .navbar-nav {
        padding: 8px 0 16px !important
    }

    .site-nav .nav-item {
        border-bottom: 1px solid var(--line)
    }

    .site-nav .nav-item:last-child {
        border-bottom: 0
    }

    .site-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 12px !important;
        font-size: 16px
    }

    .site-nav .dropdown-menu,
    .site-nav .mega-menu {
        border: 0;
        box-shadow: none;
        background: var(--soft);
        border-radius: 14px;
        margin: 0 0 12px;
        padding: 14px 12px
    }

    .site-nav .mega-menu .container {
        padding: 0
    }

    .site-nav .mega-menu .row {
        --bs-gutter-y: 14px
    }
}

/* ---------- Site search ---------- */
.search-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--soft);
    color: var(--slate);
    font-size: 14px;
    font-weight: 500;
    transition: .2s
}

.search-btn:hover {
    border-color: var(--teal);
    background: #fff;
    color: var(--navy)
}

.search-btn svg {
    width: 18px;
    height: 18px;
    color: var(--navy)
}

.search-btn kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--slate);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
    box-shadow: none
}

#searchModal .modal-dialog {
    max-width: 760px
}

#searchModal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(11, 29, 53, .45)
}

.modal-backdrop.show {
    opacity: .55;
    background: #0b1d35
}

.sm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line)
}

.sm-head>svg {
    width: 22px;
    height: 22px;
    color: var(--teal-d);
    flex: none
}

.sm-head input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    background: transparent
}

.sm-head input::placeholder {
    color: #9aa6b5
}

.sm-clear {
    border: 0;
    background: var(--soft);
    color: var(--slate);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px
}

.sm-clear:hover {
    background: var(--blush);
    color: var(--coral)
}

.sm-esc {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--slate);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 8px
}

.sm-filters {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none
}

.sm-filters::-webkit-scrollbar {
    display: none
}

.sm-filter {
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: .15s
}

.sm-filter:hover {
    border-color: var(--teal)
}

.sm-filter.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.sm-body {
    max-height: min(62vh, 560px);
    overflow-y: auto;
    padding: 20px
}

.sm-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 10px
}

.sm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    transition: .15s
}

.sm-chip:hover {
    border-color: var(--teal);
    color: var(--teal-d)
}

.sm-chip svg {
    width: 14px;
    height: 14px;
    color: var(--coral)
}

.sm-group+.sm-group {
    margin-top: 22px
}

.sm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.sm-group-head .sm-label {
    margin: 0
}

.sm-viewall {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--coral)
}

.sm-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--ink);
    transition: background .15s
}

.sm-item:hover,
.sm-item.active {
    background: var(--teal-soft);
    color: var(--ink)
}

.sm-item .sm-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--soft);
    color: var(--teal-d);
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden
}

.sm-item .sm-ic svg {
    width: 20px;
    height: 20px
}

.sm-item .sm-ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff
}

.sm-item .sm-ic img.flag {
    object-fit: cover
}

.sm-item b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy)
}

.sm-item b mark {
    background: rgba(72, 181, 178, .25);
    color: inherit;
    padding: 0 1px;
    border-radius: 3px
}

.sm-item small {
    display: block;
    font-size: 12.5px;
    color: var(--slate)
}

.sm-item .sm-go {
    margin-left: auto;
    color: var(--slate);
    opacity: 0;
    transition: .15s
}

.sm-item:hover .sm-go,
.sm-item.active .sm-go {
    opacity: 1;
    color: var(--coral)
}

.sm-item .sm-go svg {
    width: 16px;
    height: 16px
}

.sm-empty {
    text-align: center;
    padding: 24px 10px 8px
}

.sm-empty .ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--coral);
    display: grid;
    place-items: center;
    margin: 0 auto 14px
}

.sm-empty .ico svg {
    width: 26px;
    height: 26px
}

.sm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--soft);
    font-size: 12.5px;
    color: var(--slate)
}

.sm-foot a {
    color: #1aa851;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sm-foot svg {
    width: 16px;
    height: 16px
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: var(--blush);
    overflow: hidden;
    padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 5vw, 64px);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(1.02) saturate(1.04);
    transform: scale(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(252, 244, 242, 0.82) 0%, rgba(252, 244, 242, 0.7) 45%, rgba(255, 255, 255, 0.45) 72%, rgba(255, 255, 255, 0.6) 100%),
        linear-gradient(180deg, rgba(252, 244, 242, 0.3) 0%, transparent 60%, #ffffff 100%);
}

@media (max-width: 991.98px) {
    .hero-overlay {
        background:
            linear-gradient(180deg, rgba(252, 244, 242, 0.95) 0%, rgba(252, 244, 242, 0.90) 50%, rgba(255, 255, 255, 0.85) 85%, #ffffff 100%);
    }
}

.hero::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 181, 178, .22), transparent 65%);
    z-index: 1;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    left: -200px;
    bottom: -240px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 104, 97, .12), transparent 65%);
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy)
}

.pill b {
    background: var(--teal);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.08;
    color: var(--navy);
    margin: 22px 0 20px;
    letter-spacing: -.035em
}

.hero h1 em {
    font-style: normal;
    color: var(--teal-d)
}

.hero h1 .u {
    position: relative;
    z-index: 0
}

.hero h1 .u::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 10px;
    background: var(--sand);
    z-index: -1;
    border-radius: 4px
}

.hero .sub {
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--slate);
    max-width: 560px
}

.hero-ticks li {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--navy)
}

.hero-ticks svg {
    color: var(--teal)
}

.trust-row {
    border-top: 1px dashed #d9cfc9
}

.trust-row .n {
    display: block;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(24px, 2.4vw, 28px);
    color: var(--navy);
    line-height: 1.2
}

.trust-row .l {
    font-size: 13px;
    color: var(--slate)
}

/* Quote card */
.quote-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--line);
    position: relative
}

.qc-badge {
    position: absolute;
    top: -14px;
    right: 24px;
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 999px
}

.quote-card h3 {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 24px;
    color: var(--navy);
    line-height: 1.2
}

.qc-sub {
    color: var(--slate);
    font-size: 14.5px
}

.steps-dots span {
    flex: 1;
    height: 5px;
    border-radius: 5px;
    background: var(--line)
}

.steps-dots span.on {
    background: var(--teal)
}

.form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px
}

.form-control,
.form-select {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    background-color: #fbfcfd
}

.form-control:focus,
.form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(72, 181, 178, .15);
    background-color: #fff
}

.qc-step {
    display: none
}

.qc-step.on {
    display: block;
    animation: fade .35s
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.chip {
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    transition: .15s
}

.chip:hover {
    border-color: var(--teal)
}

.chip.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.qc-foot {
    font-size: 12.5px;
    color: var(--slate)
}

.qc-foot svg {
    color: var(--teal)
}

.ok-ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-d);
    display: grid;
    place-items: center;
    margin: 0 auto 14px
}

/* ---------- Hospital logos ---------- */
.logos {
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(235, 104, 97, .13), transparent 62%),
        radial-gradient(760px 380px at 0% 100%, rgba(234, 216, 208, .75), transparent 62%),
        radial-gradient(600px 320px at 0% 0%, rgba(72, 181, 178, .08), transparent 60%),
        linear-gradient(180deg, #fff6f3 0%, #fdf1ed 100%);
    border-top: 1px solid rgba(72, 181, 178, .14);
    border-bottom: 1px solid rgba(72, 181, 178, .14)
}

.accr-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy)
}

.accr-badges svg {
    width: 16px;
    height: 16px;
    color: var(--teal-d)
}

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: scroll 50s linear infinite
}

.track.rev {
    animation-direction: reverse;
    animation-duration: 56s
}

.marquee:hover .track {
    animation-play-state: paused
}

.lg {
    width: clamp(124px, 13vw, 164px);
    height: clamp(62px, 6.5vw, 78px);
    flex: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

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

.lg:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: transparent
}

@keyframes scroll {
    to {
        transform: translateX(-50%)
    }
}

/* ---------- Specialities ---------- */
.spec {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    text-align: left;
    overflow: hidden;
    transition: .25s;
    color: inherit
}

.spec:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    color: inherit
}

.spec .ic {
    grid-row: 1/3;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--teal-soft);
    color: var(--teal-d);
    transition: .25s
}

.spec:hover .ic {
    background: var(--navy);
    color: #fff
}

.spec .ic svg {
    width: 28px;
    height: 28px
}

.spec h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 4px;
    align-self: end
}

.spec .more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--coral)
}

.spec .more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.spec:hover .more svg {
    transform: translateX(4px)
}

/* ---------- Cost ---------- */
.cost {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden
}

.cost::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 400px at 50% 0%, rgba(72, 181, 178, .22), transparent 60%);
    pointer-events: none
}

.cost .container {
    position: relative
}

.cc {
    height: 100%;
    background: #fff;
    color: var(--ink);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .25s, box-shadow .25s
}

.cc:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
    color: var(--ink)
}

.cc h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
    margin: 0
}

.cc-price {
    background: var(--soft);
    border-radius: 12px;
    padding: 10px 14px
}

.cc-price small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate)
}

.cc-price b {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--navy);
    line-height: 1.2
}

.cc-price span {
    font-size: 12.5px;
    color: var(--slate)
}

.cc-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    transition: .2s
}

.cc-btn svg {
    width: 16px;
    height: 16px
}

.cc:hover .cc-btn {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff
}

.cc-includes {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    padding: 22px
}

.cc-includes .lbl {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px
}

.cc-includes span:not(.lbl) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #e2e9f1;
    background: rgba(255, 255, 255, .07);
    padding: 8px 14px;
    border-radius: 999px
}

.cc-includes svg {
    width: 16px;
    height: 16px;
    color: var(--teal)
}

.cost-note {
    font-size: 13px;
    color: #93a3b7;
    max-width: 640px
}

/* ---------- Process ---------- */
.proc-sec {
    background:
        radial-gradient(820px 380px at 50% 100%, rgba(72, 181, 178, .14), transparent 65%),
        radial-gradient(520px 300px at 0% 30%, rgba(235, 104, 97, .07), transparent 60%),
        linear-gradient(180deg, #fff 0%, #f1f8f8 100%)
}

.ps-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s
}

.ps-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg)
}

.ps-img {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 22px 22px 0 0;
    overflow: hidden
}

.ps-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s
}

.ps-card:hover .ps-img img {
    transform: scale(1.06)
}

.ps-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 41, 73, 0) 45%, rgba(16, 41, 73, .55) 100%)
}

.ps-num {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px #fff, 0 12px 24px -8px rgba(235, 104, 97, .7);
    transition: background .25s
}

.ps-card:hover .ps-num {
    background: var(--navy)
}

.ps-body {
    position: relative;
    padding: 42px 22px 26px;
    text-align: center
}

.ps-body h3 {
    font-size: 18.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px
}

.ps-body p {
    font-size: 14.5px;
    color: var(--slate);
    margin: 0
}

.ps-next {
    position: absolute;
    top: 37.5%;
    right: -27px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px var(--soft)
}

.ps-next svg {
    width: 15px;
    height: 15px
}

/* ---------- Services ---------- */
.services {
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(235, 104, 97, .13), transparent 62%),
        radial-gradient(760px 380px at 0% 100%, rgba(234, 216, 208, .75), transparent 62%),
        radial-gradient(600px 320px at 0% 0%, rgba(72, 181, 178, .08), transparent 60%),
        linear-gradient(180deg, #fff6f3 0%, #fdf1ed 100%)
}

/* Feature: Medical Tourism */
.svc-hero {
    background: var(--navy);
    border-radius: 26px;
    overflow: hidden;
    color: #fff
}

.svc-hero-img {
    position: relative;
    min-height: 280px;
    height: 100%
}

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

.svc-hero-body {
    position: relative;
    padding: clamp(28px, 4vw, 52px)
}

.svc-hero-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 260px at 100% 0%, rgba(72, 181, 178, .22), transparent 70%);
    pointer-events: none
}

.svc-hero-body>* {
    position: relative
}

.svc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal)
}

.svc-kicker svg {
    width: 18px;
    height: 18px
}

.svc-hero-body h3 {
    font-weight: 800;
    letter-spacing: -.025em;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.15;
    margin: 12px 0 10px
}

.svc-hero-body p {
    color: #b8c4d3;
    font-size: 16px;
    margin: 0
}

.svc-feat li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #e2e9f1
}

.svc-feat .ck {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(72, 181, 178, .18);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex: none
}

.svc-feat .ck svg {
    width: 13px;
    height: 13px
}

/* Photo cards */
.svc-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 320px;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    isolation: isolate
}

.svc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s
}

.svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(16, 41, 73, 0) 30%, rgba(16, 41, 73, .92) 100%)
}

.svc-card:hover {
    color: #fff
}

.svc-card:hover img {
    transform: scale(1.06)
}

.svc-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px
}

.svc-card .ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 12px
}

.svc-card .ic svg {
    width: 22px;
    height: 22px
}

.svc-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px
}

.svc-card p {
    font-size: 14px;
    color: #d5dde7;
    margin: 0 0 12px
}

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.svc-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.svc-card:hover .svc-more svg {
    transform: translateX(4px)
}

/* Compact icon cards */
.svc-mini {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    background: #fff;
    border: 1px solid #f0e3dd;
    border-radius: 22px;
    padding: 22px 24px;
    color: var(--ink);
    transition: transform .25s, box-shadow .25s
}

.svc-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--ink)
}

.svc-mini .ic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--coral);
    display: grid;
    place-items: center;
    flex: none;
    transition: .25s
}

.svc-mini:hover .ic {
    background: var(--coral);
    color: #fff
}

.svc-mini .ic svg {
    width: 26px;
    height: 26px
}

.svc-mini h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 4px
}

.svc-mini p {
    font-size: 14px;
    color: var(--slate);
    margin: 0
}

.svc-mini .go {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    color: var(--navy);
    display: grid;
    place-items: center;
    flex: none;
    margin-left: auto;
    transition: .2s
}

.svc-mini:hover .go {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.svc-mini .go svg {
    width: 16px;
    height: 16px
}

/* ---------- Why India ---------- */
.st {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(20px, 2.5vw, 30px) 18px;
    text-align: center;
    transition: .25s
}

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

.st b {
    display: block;
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: clamp(30px, 3.4vw, 42px);
    color: var(--navy);
    line-height: 1
}

.st b span {
    color: var(--coral)
}

.st p {
    font-size: 14px;
    color: var(--slate);
    margin: 10px 0 0
}

.st.hl {
    background: var(--teal-soft);
    border-color: transparent
}

.compare {
    max-width: 820px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: var(--shadow)
}

.compare h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy)
}

.bar-row {
    font-size: 13.5px;
    color: var(--slate)
}

.bar-row .t {
    height: 10px;
    border-radius: 10px;
    background: var(--line);
    overflow: hidden
}

.bar-row .t i {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: var(--slate);
    width: 0;
    transition: width 1.2s cubic-bezier(.2, .8, .2, 1)
}

.bar-row.in .t i {
    background: var(--teal)
}

.bar-row.in {
    color: var(--navy);
    font-weight: 700
}

/* ---------- Countries ---------- */
.cpills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto
}

.cpill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 20px 9px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    transition: border-color .2s, box-shadow .2s, color .2s
}

.cpill:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
    color: var(--navy)
}

.cpill img {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    flex: none
}

@media (max-width: 575.98px) {
    .cpills {
        gap: 8px
    }

    .cpill {
        font-size: 13.5px;
        padding: 7px 14px 7px 12px;
        gap: 8px
    }

    .cpill img {
        width: 22px;
        height: 15px
    }
}

.ct-more {
    background: var(--navy);
    border-radius: 20px;
    padding: 22px 26px;
    color: #fff;
    transition: .25s
}

.ct-more:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: #fff
}

.ct-more .globe {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(72, 181, 178, .18);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex: none
}

.ct-more .globe svg {
    width: 26px;
    height: 26px
}

.ct-more small {
    color: #b8c4d3
}

/* ---------- Free services ---------- */
.free {
    padding: clamp(36px, 5vw, 60px) clamp(18px, 4vw, 48px)
}

.free-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 20px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--navy);
    transition: .2s
}

.free-item:hover {
    border-color: rgba(72, 181, 178, .45);
    box-shadow: var(--shadow);
    transform: translateY(-2px)
}

.free-item svg {
    color: var(--teal-d)
}

/* ---------- Blog ---------- */
.blog-sec {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(72, 181, 178, .16), transparent 62%),
        radial-gradient(760px 380px at 100% 100%, rgba(72, 181, 178, .12), transparent 62%),
        radial-gradient(600px 300px at 100% 0%, rgba(235, 104, 97, .06), transparent 60%),
        linear-gradient(180deg, #f1f8f8 0%, #f6fafb 100%)
}

.post {
    height: 100%;
    display: flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    color: inherit
}

.post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    color: inherit
}

.post .cover {
    position: relative;
    overflow: hidden;
    background: var(--blush)
}

.post .cover>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s
}

.post:hover .cover>img {
    transform: scale(1.05)
}

.post .body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.post .meta {
    font-size: 12.5px;
    color: var(--slate);
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center
}

.post .meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sand)
}

.post h3 {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
    margin: 0
}

.post p {
    font-size: 14.5px;
    color: var(--slate);
    margin: 0
}

.post .more {
    margin-top: auto;
    font-weight: 700;
    font-size: 14px;
    color: var(--coral);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.post-lg {
    flex-direction: column
}

.post-lg .cover {
    flex: 1;
    min-height: clamp(210px, 28vw, 330px)
}

.post-lg .body {
    padding: clamp(20px, 2.6vw, 30px)
}

.post-lg h3 {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(22px, 2.2vw, 26px);
    line-height: 1.2
}

.post-sm .cover {
    width: 38%;
    max-width: 200px;
    min-height: 150px;
    flex: none
}

.post-sm .cat {
    top: 10px;
    left: 10px;
    font-size: 11px;
    padding: 4px 10px
}

.post-sm p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.topic {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: 999px;
    transition: .2s
}

.topic:hover {
    border-color: var(--teal);
    color: var(--teal-d)
}

/* ---------- FAQ (Bootstrap accordion skin) ---------- */
/* Homepage tinted sections: brand-colour glows + a faint dot texture that fades out toward the middle */
.countries-sec {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(72, 181, 178, .16), transparent 62%),
        radial-gradient(760px 380px at 100% 100%, rgba(72, 181, 178, .12), transparent 62%),
        radial-gradient(600px 300px at 100% 0%, rgba(235, 104, 97, .06), transparent 60%),
        linear-gradient(180deg, #f1f8f8 0%, #f6fafb 100%)
}

.logos,
.proc-sec,
.services,
.countries-sec,
.blog-sec {
    position: relative;
    isolation: isolate
}

.logos::before,
.proc-sec::before,
.services::before,
.countries-sec::before,
.blog-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(16, 41, 73, .09) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, #000 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, #000 100%)
}

.services::before {
    background-image: radial-gradient(rgba(235, 104, 97, .16) 1px, transparent 1.4px)
}

.faq .accordion-item {
    background: #fff
}

.faq .accordion {
    --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--navy)
}

.faq .accordion-item {
    border: 1px solid var(--line);
    border-radius: 16px !important;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s
}

.faq .accordion-item:has(.accordion-collapse.show) {
    box-shadow: var(--shadow);
    border-color: transparent
}

.faq .accordion-button {
    font-weight: 700;
    font-size: clamp(15.5px, 1.4vw, 17px);
    color: var(--navy);
    padding: 20px 22px;
    gap: 16px
}

.faq .accordion-button:not(.collapsed) {
    box-shadow: none
}

.faq .accordion-button::after {
    background-image: none;
    content: "+";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--coral);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 500;
    transform: none;
    transition: .25s;
    flex: none
}

.faq .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background: var(--coral);
    color: #fff
}

.faq .accordion-body {
    color: var(--slate);
    font-size: 15.5px;
    padding: 0 22px 22px
}

.faq-help {
    background: var(--navy);
    color: #fff;
    border-radius: 22px;
    padding: clamp(26px, 3vw, 36px)
}

.faq-help h4 {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 22px
}

.faq-help p {
    color: #b8c4d3;
    font-size: 14.5px
}

/* ---------- Final CTA ---------- */
.final {
    background: var(--navy);
    border-radius: 32px;
    padding: clamp(32px, 5vw, 64px) clamp(18px, 4vw, 56px);
    color: #fff;
    position: relative;
    overflow: hidden
}

.final::before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 104, 97, .3), transparent 65%);
    pointer-events: none
}

.final::after {
    content: "";
    position: absolute;
    left: -140px;
    top: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 181, 178, .2), transparent 65%);
    pointer-events: none
}

.final>* {
    position: relative;
    z-index: 1
}

.contact-line {
    display: flex;
    gap: 14px;
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    transition: .2s
}

.contact-line:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff
}

.contact-line .ci {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(72, 181, 178, .18);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex: none
}

.contact-line small {
    display: block;
    color: #93a3b7;
    font-size: 12px
}

.contact-line b {
    font-size: 15px;
    font-weight: 700
}

.final form {
    background: #fff;
    border-radius: 22px;
    padding: clamp(22px, 3vw, 32px);
    color: var(--ink)
}

.final form h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy)
}

.consent {
    font-size: 12px;
    color: var(--slate)
}

.consent a,
.consent-check a {
    color: var(--teal-d);
    font-weight: 600;
    text-decoration: underline
}

/* DPDP consent checkbox on enquiry forms */
.consent-check {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 2px 0;
    text-align: left
}

.consent-check .form-check-input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    border-color: #c5ccd6;
    cursor: pointer
}

.consent-check .form-check-input:checked {
    background-color: var(--teal-d);
    border-color: var(--teal-d)
}

.consent-check .form-check-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(72, 181, 178, .2)
}

.consent-check .form-check-label {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate);
    cursor: pointer
}

/* Legal pages (privacy policy, disclaimer) */
.lp-hero.lp-hero-page {
    padding-bottom: clamp(20px, 3vw, 32px)
}

.legal {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px);
    color: var(--ink)
}

.legal h2 {
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
    margin: 36px 0 12px;
    scroll-margin-top: 110px
}

.legal h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 22px 0 8px
}

.legal p,
.legal li {
    font-size: 15.5px;
    line-height: 1.75
}

.legal ul {
    padding-left: 1.2em
}

.legal li {
    margin-bottom: 6px
}

.legal a {
    color: var(--teal-d);
    text-decoration: underline
}

.legal .legal-meta {
    font-size: 13.5px;
    color: var(--slate)
}

.legal .legal-note {
    background: var(--teal-soft);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 20px 0
}

.legal .legal-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    background: #fff
}

.legal .ph {
    background: #fff3c4;
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600
}

.legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 8px 0 16px
}

.legal th,
.legal td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    vertical-align: top;
    text-align: left
}

.legal th {
    background: var(--soft);
    color: var(--navy)
}

@media (max-width: 575.98px) {

    .legal table,
    .legal tbody,
    .legal tr,
    .legal td,
    .legal th {
        display: block;
        width: 100%
    }

    .legal thead {
        display: none
    }

    .legal td {
        border-top: 0
    }

    .legal tr {
        border-top: 1px solid var(--line);
        margin-bottom: 10px
    }
}

.form-ok {
    display: none
}

.form-ok.on {
    display: block
}

/* Contact side panel */
.cta-side {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cta-photo {
    position: relative;
    flex: 1;
    min-height: 210px;
    border-radius: 20px;
    overflow: hidden
}

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

.cta-next {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 20px 22px
}

.cta-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal)
}

.cta-next ol {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 14px
}

.cta-next li {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.cta-next li>span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex: none
}

.cta-next b {
    display: block;
    font-size: 14.5px;
    color: #fff
}

.cta-next small {
    display: block;
    font-size: 12.5px;
    color: #9fb0c3
}

.cta-q {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: .2s
}

.cta-q:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transform: translateY(-2px)
}

.cta-q svg {
    width: 20px;
    height: 20px;
    color: var(--teal)
}

.cta-q.wa svg {
    color: #25D366
}

.cta-addr {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    font-size: 12.5px;
    color: #93a3b7
}

.cta-addr svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px
}

/* Contact form */
.form-sub {
    font-size: 14px;
    color: var(--slate);
    margin: 0
}

.free-tag {
    background: var(--teal-soft);
    color: var(--teal-d);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap
}

.form-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy)
}

.form-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.form-trust svg {
    width: 16px;
    height: 16px;
    color: var(--teal-d)
}

/* ---------- Footer ---------- */
footer {
    position: relative;
    background:
        radial-gradient(600px 320px at 92% 0%, rgba(72, 181, 178, .16), transparent 70%),
        radial-gradient(520px 300px at 0% 100%, rgba(235, 104, 97, .08), transparent 70%),
        #0b1d35;
    color: #aab6c5;
    padding: 0 0 8px;
    /* margin-top: clamp(64px, 8vw, 104px); */
    font-size: 14.5px;
    overflow: hidden
}

footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--coral), var(--teal) 55%, var(--navy))
}

footer a {
    color: #aab6c5;
    transition: color .15s
}

footer a:hover {
    color: #fff
}

/* Contact strip */
.fcontact {
    position: relative;
    padding: clamp(36px, 5vw, 52px) 0 clamp(32px, 4vw, 44px)
}

.fcontact::after {
    content: "";
    position: absolute;
    left: calc(var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5);
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, .08)
}

.fc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .2s, border-color .2s, transform .2s
}

a.fc-card:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(72, 181, 178, .45);
    transform: translateY(-2px)
}

.fc-ic {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(72, 181, 178, .14);
    color: var(--teal)
}

.fc-ic.fc-wa {
    background: rgba(37, 211, 102, .14);
    color: #3ddc84
}

.fc-ic svg {
    width: 21px;
    height: 21px
}

.fc-card small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7e8ca0
}

.fc-card b {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word
}

/* Main columns */
.fmain {
    padding: clamp(40px, 5vw, 60px) 0 clamp(32px, 4vw, 44px)
}

.flogo {
    display: inline-block;
    background: #fff;
    border-radius: 14px;
    padding: 10px 16px
}

.flogo img {
    height: 38px
}

.fabout {
    margin: 18px 0 20px;
    max-width: 340px;
    line-height: 1.7
}

.fflags small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7e8ca0;
    margin-bottom: 8px
}

.fflags div {
    display: flex;
    align-items: center
}

.fflags img,
.fflags span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #0b1d35;
    object-fit: cover;
    margin-left: -4px;
    background: #1a2f4d
}

.fflags img:first-child {
    margin-left: 0
}

.fflags span {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 30px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff
}

.social {
    display: flex;
    gap: 8px;
    margin-top: 22px
}

.social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    color: #dfe6ee;
    transition: background .2s, color .2s, transform .2s
}

.social a:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    transform: translateY(-2px)
}

.social svg {
    width: 19px;
    height: 19px
}

footer h5 {
    position: relative;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 16px
}

footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--coral)
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 11px
}

footer ul a {
    display: inline-flex;
    align-items: center
}

footer ul a::before {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
    transition: width .2s, margin .2s
}

footer ul a:hover::before {
    width: 10px;
    margin-right: 6px
}

footer ul small {
    margin-left: 6px
}

footer ul small {
    font-size: 11px;
    font-weight: 700;
    color: #7e8ca0;
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    padding: 1px 7px
}

/* Accreditation + disclaimer + bottom bar */
.faccr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08)
}

.faccr-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(72, 181, 178, .14);
    color: var(--teal)
}

.faccr-ic svg {
    width: 18px;
    height: 18px
}

.faccr p {
    margin: 0;
    color: #dfe6ee;
    font-weight: 600
}

.accr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto
}

.accr span {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    padding: 5px 12px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .08em;
    color: #fff
}

.disclaimer {
    font-size: 12.5px;
    color: #7e8ca0;
    line-height: 1.7;
    margin: 22px 0 0
}

.disclaimer b {
    color: #aab6c5
}

.disclaimer a {
    color: var(--teal);
    text-decoration: underline
}

.fbottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    margin-top: 22px;
    padding: 20px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px
}

@media (min-width: 768px) {

    /* keep the legal links clear of the floating "Need help?" button */
    .fbottom {
        padding-right: 170px
    }
}

.fbottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px
}

/* agency credit after the copyright: its own line on phones */
.fcredit {
    display: inline-block;
    margin-left: 6px
}

.fcredit a {
    color: #fff;
    font-weight: 600
}

.fcredit a:hover {
    color: var(--coral)
}

@media (max-width: 767.98px) {
    .fcredit {
        display: block;
        margin: 4px 0 0
    }
}

@media (max-width: 767.98px) {
    .fmain .col-lg-4 {
        text-align: center
    }

    .fabout {
        margin-left: auto;
        margin-right: auto
    }

    .fflags div,
    .social {
        justify-content: center
    }

    .accr {
        margin-left: 0
    }

    .fbottom {
        flex-direction: column;
        text-align: center
    }

    .fbottom nav {
        justify-content: center
    }
}

/* ---------- Floating CTAs ---------- */
.fab-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1030;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px 12px 14px;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7);
    font-weight: 700;
    font-size: 14.5px;
    transition: .2s
}

.fab-wa:hover {
    transform: translateY(-3px);
    color: #fff
}

.fab-wa svg {
    width: 26px;
    height: 26px
}

.mbar {
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -10px rgba(16, 41, 73, .2)
}

.mbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    border-radius: 12px;
    padding: 6px;
    height: 100%
}

.mbar a.q {
    background: var(--coral);
    color: #fff;
    flex-direction: row;
    gap: 8px;
    font-size: 14px
}

.mbar a.w {
    color: #1aa851
}

@media (max-width:767.98px) {
    body {
        padding-bottom: 76px
    }
}
/* ---------- Doctor videos slider (homepage) ---------- */
.vs {
    position: relative
}

.vs-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 12px;
    scrollbar-width: none
}

.vs-track::-webkit-scrollbar {
    display: none
}

@media (min-width: 576px) {
    .vs-track {
        grid-auto-columns: calc((100% - 32px) / 3)
    }
}

@media (min-width: 992px) {
    .vs-track {
        grid-auto-columns: calc((100% - 64px) / 5);
        gap: 16px
    }
}

.vs-item {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: var(--navy);
    box-shadow: var(--shadow);
    scroll-snap-align: start
}

.vs-item iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.vs-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow);
    transform: translateY(-50%);
    transition: background .2s, color .2s, opacity .2s
}

.vs-nav:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff
}

.vs-nav[disabled] {
    opacity: 0;
    pointer-events: none
}

.vs-nav svg.flip {
    transform: scaleX(-1)
}

.vs-prev {
    left: -14px
}

.vs-next {
    right: -14px
}

/* phones swipe; the arrows are for mouse users */
@media (max-width: 767.98px) {
    .vs-nav {
        display: none
    }
}