/* ============================================================
   ARHA DOCTORS DIRECTORY
   MILKY WHITE + DEEP BLUE GREY + TEAL + CHAMPAGNE
   ============================================================ */

#arhaDoctorsPage {

    --doc-white:#FFFFFF;
    --doc-milk:#FAFAF7;
    --doc-soft:#F2F6F5;
    --doc-teal-soft:#E6F0EE;

    --doc-dark:#193640;
    --doc-slate:#455C63;
    --doc-muted:#74858A;

    --doc-teal:#347C7D;
    --doc-teal-dark:#265F61;

    --doc-gold:#B89558;
    --doc-gold-soft:#F5EDDD;

    --doc-red:#B94B50;
    --doc-red-soft:#F7E7E8;

    --doc-border:#DFE7E5;

    --doc-heading:'Outfit',sans-serif;
    --doc-body:'Inter',sans-serif;

    width:100%;
    overflow:hidden;

    background:var(--doc-milk);

    color:var(--doc-slate);

    font-family:var(--doc-body);
}


#arhaDoctorsPage *,
#arhaDoctorsPage *::before,
#arhaDoctorsPage *::after {
    box-sizing:border-box;
}


#arhaDoctorsPage img {
    width:100%;
    display:block;
}


#arhaDoctorsPage a {
    text-decoration:none;
}


.arha-doc-container {

    width:min(
        1280px,
        calc(100% - 56px)
    );

    margin-inline:auto;
}


/* ============================================================
   REVEAL
   ============================================================ */

#arhaDoctorsPage [data-doctor-reveal] {

    opacity:0;

    transform:translateY(28px);

    transition:
        opacity .72s ease,
        transform .72s cubic-bezier(.2,.7,.2,1);
}


#arhaDoctorsPage
[data-doctor-reveal].arha-doc-visible {

    opacity:1;
    transform:none;
}


/* ============================================================
   HERO
   ============================================================ */

.arha-doc-hero {

    position:relative;

    padding:82px 0 108px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 82% 20%,
            rgba(52,124,125,.12),
            transparent 28%
        ),

        linear-gradient(
            120deg,
            #FFFFFF,
            #F3F7F6
        );
}


.arha-doc-hero-grid {

    position:absolute;
    inset:0;

    opacity:.18;

    background-image:
        radial-gradient(
            rgba(52,124,125,.18) 1px,
            transparent 1px
        );

    background-size:34px 34px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 55%,
            transparent
        );
}


.arha-doc-orbit {

    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(52,124,125,.11);

    animation:
        arhaDocOrbit
        9s ease-in-out infinite alternate;
}


.arha-doc-orbit-one {

    width:570px;
    height:570px;

    right:-270px;
    top:-280px;
}


.arha-doc-orbit-two {

    width:230px;
    height:230px;

    left:-110px;
    bottom:-90px;

    border-color:
        rgba(184,149,88,.13);

    animation-delay:2s;
}


@keyframes arhaDocOrbit {

    to {
        transform:
            translate(30px,35px)
            scale(1.06);
    }
}


/* ============================================================
   HERO LAYOUT
   ============================================================ */

.arha-doc-hero-layout {

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        .96fr 1fr;

    align-items:center;

    gap:85px;
}


.arha-doc-breadcrumb {

    margin-bottom:28px;

    display:flex;
    align-items:center;

    gap:8px;

    font-size:9px;

    color:var(--doc-muted);
}


.arha-doc-breadcrumb a {
    color:var(--doc-teal);
}


.arha-doc-breadcrumb i {
    font-size:6px;
}


.arha-doc-kicker,
.arha-doc-section-label {

    display:block;

    margin-bottom:10px;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.25px;

    color:var(--doc-teal);
}


.arha-doc-hero h1 {

    max-width:720px;

    margin:0;

    font-family:var(--doc-heading);

    font-size:
        clamp(50px,5.3vw,74px);

    font-weight:800;

    line-height:.97;

    letter-spacing:-2.4px;

    color:var(--doc-dark);
}


.arha-doc-hero h1 strong {

    display:block;

    color:var(--doc-teal);
}


.arha-doc-hero-copy > p {

    max-width:650px;

    margin:25px 0 0;

    font-size:14.5px;

    line-height:1.8;

    color:var(--doc-slate);
}


/* ============================================================
   HERO BUTTONS
   ============================================================ */

.arha-doc-hero-actions {

    margin-top:31px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}


.arha-doc-primary,
.arha-doc-secondary {

    min-height:55px;

    padding:0 18px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    border-radius:8px;

    font-size:11px;

    font-weight:700;
}


.arha-doc-primary {

    background:var(--doc-teal);

    color:#fff !important;

    box-shadow:
        0 13px 28px
        rgba(52,124,125,.17);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.arha-doc-primary:hover {

    transform:translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(52,124,125,.24);
}


.arha-doc-secondary {

    border:
        1px solid var(--doc-border);

    background:#fff;

    color:var(--doc-dark) !important;
}


/* ============================================================
   HERO DOCTOR COMPOSITION
   ============================================================ */

.arha-doc-hero-visual {
    position:relative;
}


.arha-doc-team-visual {

    position:relative;

    min-height:585px;
}


.arha-doc-portrait {

    overflow:hidden;

    background:#e8eceb;

    box-shadow:
        0 25px 60px
        rgba(35,62,68,.12);
}


.arha-doc-portrait img {

    height:100%;

    object-fit:cover;

    object-position:center top;
}


.arha-doc-portrait-main {

    position:absolute;

    right:50px;
    top:15px;

    width:61%;
    height:535px;

    border-radius:
        105px 16px 105px 16px;
}


.arha-doc-portrait-small {

    position:absolute;

    width:30%;
    height:220px;

    border:7px solid #fff;

    border-radius:
        15px 60px 15px 60px;
}


.arha-doc-p1 {

    left:5px;
    top:50px;
}


.arha-doc-p2 {

    left:25px;
    bottom:20px;
}


.arha-doc-hero-card {

    position:absolute;

    right:0;
    bottom:25px;

    max-width:275px;

    padding:14px 16px;

    display:flex;

    align-items:center;

    gap:11px;

    border:
        1px solid var(--doc-border);

    border-radius:11px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 15px 35px
        rgba(35,62,68,.12);

    animation:
        arhaDocFloat
        4s ease-in-out infinite;
}


@keyframes arhaDocFloat {

    50% {
        transform:translateY(-7px);
    }
}


.arha-doc-hero-card > span {

    width:40px;
    height:40px;

    min-width:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:var(--doc-gold-soft);

    color:var(--doc-gold);
}


.arha-doc-hero-card div {

    display:flex;
    flex-direction:column;
}


.arha-doc-hero-card small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.7px;

    color:var(--doc-teal);
}


.arha-doc-hero-card strong {

    margin-top:3px;

    font-family:var(--doc-heading);

    font-size:11px;

    color:var(--doc-dark);
}


/* ============================================================
   SHARED HEADING
   ============================================================ */

.arha-doc-heading {

    max-width:850px;

    margin-bottom:36px;
}


.arha-doc-heading h2,
.arha-doc-appt-copy h2 {

    margin:0;

    font-family:var(--doc-heading);

    font-size:
        clamp(35px,4vw,50px);

    line-height:1.05;

    letter-spacing:-1.1px;

    color:var(--doc-dark);
}


.arha-doc-heading h2 em {

    font-style:normal;

    color:var(--doc-teal);
}


.arha-doc-heading > p {

    max-width:680px;

    margin:16px 0 0;

    font-size:12.5px;

    line-height:1.75;

    color:var(--doc-muted);
}


/* ============================================================
   DIRECTORY
   ============================================================ */

.arha-doc-directory {

    padding:105px 0;

    background:var(--doc-milk);
}


/* ============================================================
   SEARCH
   ============================================================ */

.arha-doc-search-area {

    max-width:670px;

    margin-bottom:20px;
}


.arha-doc-search {

    position:relative;
}


.arha-doc-search > i {

    position:absolute;

    left:19px;
    top:50%;

    transform:translateY(-50%);

    color:var(--doc-teal);
}


.arha-doc-search input {

    width:100%;
    height:57px;

    padding:
        0 52px 0 49px;

    outline:0;

    border:
        1px solid var(--doc-border);

    border-radius:11px;

    background:#fff;

    font-family:var(--doc-body);

    font-size:11px;

    color:var(--doc-dark);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.arha-doc-search input:focus {

    border-color:
        rgba(52,124,125,.5);

    box-shadow:
        0 0 0 4px
        rgba(52,124,125,.07);
}


.arha-doc-search button {

    position:absolute;

    right:8px;
    top:8px;

    width:41px;
    height:41px;

    border:0;

    border-radius:8px;

    background:var(--doc-soft);

    color:var(--doc-muted);

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:opacity .2s ease;
}


.arha-doc-search.has-value button {

    opacity:1;

    pointer-events:auto;
}


/* ============================================================
   FILTERS
   ============================================================ */

.arha-doc-filters {

    margin-bottom:36px;

    display:flex;

    flex-wrap:wrap;

    gap:7px;
}


.arha-doc-filter {

    min-height:39px;

    padding:0 14px;

    border:
        1px solid var(--doc-border);

    border-radius:30px;

    background:#fff;

    color:var(--doc-slate);

    font-family:var(--doc-body);

    font-size:9px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.arha-doc-filter:hover,
.arha-doc-filter.active {

    border-color:var(--doc-teal);

    background:var(--doc-teal);

    color:#fff;
}


/* ============================================================
   DOCTOR CARDS
   ============================================================ */

.arha-doc-grid {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}


.arha-doc-card {

    overflow:hidden;

    border:
        1px solid var(--doc-border);

    border-radius:14px;

    background:#fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.arha-doc-card:hover {

    transform:translateY(-6px);

    box-shadow:
        0 20px 42px
        rgba(35,62,68,.09);
}


.arha-doc-card[hidden] {
    display:none !important;
}


.arha-doc-card-image {

    position:relative;

    height:365px;

    overflow:hidden;

    background:#e9eeee;
}


.arha-doc-card-image > img {

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:
        transform .6s ease;
}


.arha-doc-card:hover
.arha-doc-card-image > img {

    transform:scale(1.035);
}


.arha-doc-image-gradient {

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(25,54,64,.72),
            transparent 43%
        );
}


.arha-doc-inhouse {

    position:absolute;

    z-index:3;

    left:14px;
    top:14px;

    padding:7px 10px;

    display:inline-flex;

    align-items:center;

    gap:5px;

    border-radius:30px;

    background:
        rgba(255,255,255,.94);

    color:var(--doc-teal-dark);

    font-size:7.5px;

    font-weight:800;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.08);
}


.arha-doc-speciality-overlay {

    position:absolute;

    z-index:3;

    left:15px;
    right:15px;
    bottom:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#fff !important;

    font-size:8px;

    font-weight:800;

    letter-spacing:.5px;
}


/* ============================================================
   DOCTOR INFO
   ============================================================ */

.arha-doc-card-body {

    padding:22px;
}


.arha-doc-department {

    display:block;

    margin-bottom:6px;

    font-size:7px;

    font-weight:800;

    letter-spacing:.9px;

    color:var(--doc-teal);
}


.arha-doc-card h3 {

    margin:0;

    font-family:var(--doc-heading);

    font-size:23px;

    line-height:1.15;

    color:var(--doc-dark);
}


.arha-doc-qualification {

    margin:5px 0 0;

    font-size:9px;

    font-weight:700;

    color:var(--doc-gold);
}


.arha-doc-focus {

    min-height:46px;

    margin:12px 0 0;

    font-size:10px;

    line-height:1.65;

    color:var(--doc-muted);
}


.arha-doc-card-actions {

    margin-top:18px;

    padding-top:15px;

    display:grid;

    grid-template-columns:
        1fr auto;

    gap:8px;

    border-top:
        1px solid var(--doc-border);
}


.arha-doc-service-btn,
.arha-doc-book-btn {

    min-height:43px;

    padding:0 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    border-radius:8px;

    font-size:9px;

    font-weight:700;
}


.arha-doc-service-btn {

    background:var(--doc-soft);

    color:var(--doc-teal-dark) !important;
}


.arha-doc-book-btn {

    background:var(--doc-teal);

    color:#fff !important;
}


/* ============================================================
   NO RESULTS
   ============================================================ */

.arha-doc-no-results {

    padding:60px 20px;

    text-align:center;
}


.arha-doc-no-results > span {

    width:58px;
    height:58px;

    margin:0 auto 16px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--doc-teal-soft);

    color:var(--doc-teal);
}


.arha-doc-no-results h3 {

    margin:0;

    font-family:var(--doc-heading);

    font-size:23px;

    color:var(--doc-dark);
}


.arha-doc-no-results p {

    margin:7px 0 16px;

    font-size:10px;

    color:var(--doc-muted);
}


.arha-doc-no-results button {

    min-height:42px;

    padding:0 15px;

    border:0;

    border-radius:8px;

    background:var(--doc-teal);

    color:#fff;

    font-weight:700;

    cursor:pointer;
}


/* ============================================================
   SPECIALITY DIRECTORY
   ============================================================ */

.arha-doc-specialities {

    padding:100px 0;

    background:var(--doc-soft);
}


.arha-doc-heading-center {

    margin:
        0 auto 43px;

    text-align:center;
}


.arha-doc-speciality-grid {

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:10px;
}


.arha-doc-speciality-grid > a {

    min-height:100px;

    padding:17px;

    display:grid;

    grid-template-columns:
        40px 1fr auto;

    align-items:center;

    gap:11px;

    border:
        1px solid var(--doc-border);

    border-radius:10px;

    background:
        rgba(255,255,255,.75);

    color:var(--doc-dark) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.arha-doc-speciality-grid > a:hover {

    transform:translateY(-4px);

    background:#fff;

    box-shadow:
        0 13px 28px
        rgba(35,62,68,.07);
}


.arha-doc-speciality-icon {

    width:39px;
    height:39px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:var(--doc-teal-soft);

    color:var(--doc-teal);
}


.arha-doc-emergency {

    background:var(--doc-red-soft);

    color:var(--doc-red);
}


.arha-doc-speciality-grid > a > div {

    display:flex;

    flex-direction:column;
}


.arha-doc-speciality-grid small {

    font-size:7px;

    font-weight:800;

    color:var(--doc-teal);
}


.arha-doc-speciality-grid strong {

    margin-top:3px;

    font-family:var(--doc-heading);

    font-size:12px;
}


/* ============================================================
   APPOINTMENT
   ============================================================ */

.arha-doc-appointment {

    padding:105px 0;

    background:#fff;
}


.arha-doc-appointment-layout {

    display:grid;

    grid-template-columns:
        1fr .58fr;

    align-items:center;

    gap:100px;
}


.arha-doc-appt-copy > p {

    max-width:650px;

    margin:17px 0 0;

    font-size:12.5px;

    line-height:1.75;

    color:var(--doc-muted);
}


.arha-doc-appt-points {

    margin-top:27px;

    border-top:
        1px solid var(--doc-border);
}


.arha-doc-appt-points > div {

    padding:14px 0;

    display:grid;

    grid-template-columns:
        35px 1fr;

    gap:11px;

    border-bottom:
        1px solid var(--doc-border);
}


.arha-doc-appt-points span {

    width:27px;
    height:27px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--doc-teal-soft);

    color:var(--doc-teal);

    font-size:8px;

    font-weight:800;
}


.arha-doc-appt-points p {

    margin:5px 0 0;

    font-size:10px;

    color:var(--doc-slate);
}


/* ============================================================
   APPOINTMENT CARD
   ============================================================ */

.arha-doc-appt-card {

    padding:37px;

    border-radius:
        70px 15px 15px 15px;

    background:var(--doc-dark);

    color:#fff;
}


.arha-doc-appt-icon {

    width:50px;
    height:50px;

    margin-bottom:23px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.1);

    color:#D7BC83;
}


.arha-doc-appt-card > small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

    color:#A7D5D1;
}


.arha-doc-appt-card h3 {

    margin:8px 0 0;

    font-family:var(--doc-heading);

    font-size:29px;

    line-height:1.07;
}


.arha-doc-appt-card p {

    margin:10px 0 22px;

    font-size:10px;

    line-height:1.6;

    color:#C3D0D3;
}


.arha-doc-appt-card > a {

    min-height:49px;

    padding:0 13px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    border-radius:8px;

    font-size:10px;

    font-weight:700;
}


.arha-doc-appt-primary {

    background:var(--doc-teal);

    color:#fff !important;
}


.arha-doc-appt-call {

    margin-top:8px;

    border:
        1px solid rgba(255,255,255,.18);

    color:#fff !important;
}


/* ============================================================
   EMERGENCY
   ============================================================ */

.arha-doc-emergency-strip {

    padding:65px 0;

    background:var(--doc-milk);
}


.arha-doc-emergency-inner {

    padding:25px 28px;

    display:grid;

    grid-template-columns:
        52px 1fr auto;

    align-items:center;

    gap:20px;

    border:
        1px solid var(--doc-border);

    border-radius:13px;

    background:#fff;
}


.arha-doc-emergency-icon {

    width:50px;
    height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:var(--doc-red-soft);

    color:var(--doc-red);
}


.arha-doc-emergency-inner small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

    color:var(--doc-red);
}


.arha-doc-emergency-inner h2 {

    margin:4px 0 0;

    font-family:var(--doc-heading);

    font-size:21px;

    color:var(--doc-dark);
}


.arha-doc-emergency-inner p {

    margin:5px 0 0;

    font-size:9.5px;

    color:var(--doc-muted);
}


.arha-doc-emergency-inner > a {

    min-height:46px;

    padding:0 14px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    background:var(--doc-red);

    color:#fff !important;

    font-size:10px;

    font-weight:700;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.arha-doc-final {

    position:relative;

    padding:63px 0;

    overflow:hidden;

    background:var(--doc-dark);

    color:#fff;
}


.arha-doc-final-orbit {

    position:absolute;

    width:430px;
    height:430px;

    right:-190px;
    top:-225px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.07);
}


.arha-doc-final-layout {

    position:relative;
    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}


.arha-doc-final-layout
> div:first-child > span {

    font-size:8px;

    font-weight:800;

    letter-spacing:.9px;

    color:#ADD4D1;
}


.arha-doc-final h2 {

    margin:6px 0 0;

    font-family:var(--doc-heading);

    font-size:
        clamp(29px,3.4vw,43px);
}


.arha-doc-final p {

    margin:8px 0 0;

    font-size:10px;

    color:#C4D1D4;
}


.arha-doc-final-actions {

    display:flex;

    gap:9px;
}


.arha-doc-final-primary,
.arha-doc-final-call {

    min-height:51px;

    padding:0 16px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    font-size:10px;

    font-weight:700;
}


.arha-doc-final-primary {

    background:var(--doc-teal);

    color:#fff !important;
}


.arha-doc-final-call {

    border:
        1px solid rgba(255,255,255,.2);

    color:#fff !important;
}


/* ============================================================
   MOBILE BAR
   ============================================================ */

.arha-doc-mobile-bar {
    display:none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1050px) {

    .arha-doc-speciality-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:950px) {

    .arha-doc-hero-layout,
    .arha-doc-appointment-layout {

        grid-template-columns:1fr;

        gap:48px;
    }


    .arha-doc-team-visual {

        max-width:650px;

        min-height:550px;
    }


    .arha-doc-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .arha-doc-appt-card {

        max-width:500px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px) {

    #arhaDoctorsPage {
        padding-bottom:60px;
    }


    .arha-doc-container {
        width:calc(100% - 30px);
    }


    .arha-doc-mobile-bar {

        position:fixed;

        z-index:8500;

        left:0;
        right:0;
        bottom:0;

        height:60px;

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        background:#fff;

        border-top:
            1px solid var(--doc-border);

        box-shadow:
            0 -7px 25px
            rgba(0,0,0,.1);
    }


    .arha-doc-mobile-bar a {

        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:4px;

        color:var(--doc-dark) !important;

        font-size:8px;

        font-weight:700;
    }


    .arha-doc-mobile-bar
    .arha-doc-mobile-primary {

        background:var(--doc-teal);

        color:#fff !important;
    }


    .arha-doc-hero {

        padding:50px 0 68px;
    }


    .arha-doc-hero h1 {

        font-size:
            clamp(39px,11vw,49px);

        letter-spacing:-1.5px;
    }


    .arha-doc-hero-copy > p {
        font-size:12.5px;
    }


    .arha-doc-hero-actions {

        flex-direction:column;
    }


    .arha-doc-primary,
    .arha-doc-secondary {

        width:100%;
    }


    /* Hero doctors */

    .arha-doc-team-visual {

        min-height:430px;
    }


    .arha-doc-portrait-main {

        right:0;

        width:68%;
        height:390px;

        border-radius:
            65px 13px 65px 13px;
    }


    .arha-doc-portrait-small {

        width:38%;
        height:155px;

        border-width:5px;
    }


    .arha-doc-p1 {

        left:0;
        top:40px;
    }


    .arha-doc-p2 {

        left:10px;
        bottom:25px;
    }


    .arha-doc-hero-card {

        right:8px;
        bottom:-12px;

        max-width:240px;
    }


    /* Sections */

    .arha-doc-directory,
    .arha-doc-specialities,
    .arha-doc-appointment {

        padding:72px 0;
    }


    .arha-doc-heading {
        margin-bottom:30px;
    }


    .arha-doc-heading h2,
    .arha-doc-appt-copy h2 {

        font-size:32px;
    }


    /* Filters */

    .arha-doc-filters {

        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:5px;

        scrollbar-width:none;
    }


    .arha-doc-filters::-webkit-scrollbar {
        display:none;
    }


    .arha-doc-filter {

        flex:0 0 auto;
    }


    /* Doctors */

    .arha-doc-grid {
        grid-template-columns:1fr;
    }


    .arha-doc-card-image {
        height:410px;
    }


    .arha-doc-focus {
        min-height:0;
    }


    /* Specialities */

    .arha-doc-speciality-grid {
        grid-template-columns:1fr;
    }


    .arha-doc-appt-card {

        padding:30px 22px;

        border-radius:
            55px 13px 13px 13px;
    }


    /* emergency */

    .arha-doc-emergency-inner {

        grid-template-columns:
            45px 1fr;

        padding:20px;
    }


    .arha-doc-emergency-inner > a {

        grid-column:span 2;

        justify-content:center;

        margin-top:5px;
    }


    /* Final */

    .arha-doc-final-layout {

        align-items:flex-start;

        flex-direction:column;

        gap:25px;
    }


    .arha-doc-final-actions {

        width:100%;

        flex-direction:column;
    }


    .arha-doc-final-primary,
    .arha-doc-final-call {

        width:100%;
    }

}


@media(max-width:380px) {

    .arha-doc-card-image {
        height:350px;
    }


    .arha-doc-team-visual {
        min-height:395px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce) {

    #arhaDoctorsPage *,
    #arhaDoctorsPage *::before,
    #arhaDoctorsPage *::after {

        animation:none !important;
        transition:none !important;
    }


    #arhaDoctorsPage
    [data-doctor-reveal] {

        opacity:1 !important;
        transform:none !important;
    }

}