/* ============================================================
   ARHA GENERAL MEDICINE
   PORCELAIN WHITE + MEDICAL BLUE + AQUA + MINT
   ============================================================ */


#arhaMedicinePage {

    --med-white:#FFFFFF;
    --med-porcelain:#FAFCFC;
    --med-ice:#F1F7F8;
    --med-mint:#EAF5F1;

    --med-navy:#153B4B;
    --med-blue:#28758E;
    --med-blue-dark:#1A6077;

    --med-aqua:#59B8BE;
    --med-green:#5D9586;

    --med-text:#334F5A;
    --med-muted:#72858C;

    --med-red:#BA4D53;
    --med-red-soft:#F7E9EA;

    --med-border:#DCE8E9;

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

    width:100%;
    overflow:hidden;

    background:
        var(--med-porcelain);

    color:
        var(--med-text);

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


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


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


#arhaMedicinePage a {
    text-decoration:none;
}


.medicine-container {

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

    margin-inline:auto;
}


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

#arhaMedicinePage [data-medicine-reveal] {

    opacity:0;

    transform:translateY(28px);

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


#arhaMedicinePage
[data-medicine-reveal].medicine-visible {

    opacity:1;
    transform:none;
}


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

.medicine-hero {

    position:relative;

    padding:
        80px 0 100px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(89,184,190,.13),
            transparent 28%
        ),

        linear-gradient(
            118deg,
            #FFFFFF,
            #F3F9F9
        );
}


.medicine-grid-pattern {

    position:absolute;

    inset:0;

    opacity:.2;

    background-image:

        linear-gradient(
            rgba(40,117,142,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(40,117,142,.05) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000,
            transparent
        );
}


.medicine-glow {

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    animation:
        medicineGlow 8s
        ease-in-out infinite alternate;
}


.medicine-glow-one {

    width:480px;
    height:480px;

    right:-230px;
    top:-260px;

    background:
        rgba(89,184,190,.08);
}


.medicine-glow-two {

    width:250px;
    height:250px;

    left:-130px;
    bottom:-100px;

    background:
        rgba(93,149,134,.07);

    animation-delay:2s;
}


@keyframes medicineGlow {

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


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

.medicine-hero-layout {

    position:relative;
    z-index:2;

    display:grid;

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

    align-items:center;

    gap:80px;
}


.medicine-breadcrumb {

    margin-bottom:28px;

    display:flex;
    align-items:center;

    gap:8px;

    font-size:9px;

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


.medicine-breadcrumb a {
    color:var(--med-blue);
}


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


.medicine-kicker,
.medicine-section-label {

    display:block;

    margin-bottom:10px;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.25px;

    color:
        var(--med-blue);
}


.medicine-hero h1 {

    max-width:710px;

    margin:0;

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

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

    font-weight:800;

    line-height:.98;

    letter-spacing:-2.3px;

    color:
        var(--med-navy);
}


.medicine-hero h1 strong {

    display:block;

    color:
        var(--med-aqua);
}


.medicine-hero-description {

    max-width:650px;

    margin:
        24px 0 0;

    font-size:14.5px;

    line-height:1.8;

    color:
        var(--med-text);
}


/* ============================================================
   ACTIONS
   ============================================================ */

.medicine-actions {

    margin-top:30px;

    display:flex;
    flex-wrap:wrap;

    gap:10px;
}


.medicine-primary,
.medicine-secondary {

    min-height:55px;

    padding:
        0 18px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    border-radius:8px;

    font-size:11px;

    font-weight:700;
}


.medicine-primary {

    background:
        var(--med-blue);

    color:#fff !important;

    box-shadow:
        0 13px 28px rgba(40,117,142,.16);

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


.medicine-primary:hover {

    transform:translateY(-3px);

    box-shadow:
        0 18px 36px rgba(40,117,142,.23);
}


.medicine-secondary {

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

    background:#fff;

    color:
        var(--med-navy) !important;
}


.medicine-care-pills {

    margin-top:26px;

    display:flex;
    flex-wrap:wrap;

    gap:7px;
}


.medicine-care-pills span {

    padding:
        8px 11px;

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

    border-radius:30px;

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

    font-size:9px;

    font-weight:600;

    color:
        var(--med-text);
}


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

.medicine-hero-visual {
    position:relative;
}


.medicine-main-photo {

    position:relative;

    height:565px;

    overflow:hidden;

    border-radius:
        18px 100px 18px 100px;

    box-shadow:
        0 30px 65px rgba(34,71,82,.13);
}


.medicine-main-photo img {

    height:100%;

    object-fit:cover;

    transition:transform 7s ease;
}


.medicine-main-photo:hover img {
    transform:scale(1.05);
}


.medicine-photo-overlay {

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(21,59,75,.73),
            transparent 52%
        );
}


.medicine-photo-caption {

    position:absolute;

    left:23px;
    right:23px;
    bottom:22px;

    display:flex;
    flex-direction:column;
}


.medicine-photo-caption small {

    font-size:8px;

    font-weight:800;

    letter-spacing:.9px;

    color:#AEE1E0;
}


.medicine-photo-caption strong {

    margin-top:4px;

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

    font-size:20px;

    color:#fff;
}


.medicine-floating-card {

    position:absolute;

    left:-50px;
    bottom:70px;

    padding:
        13px 15px;

    display:flex;
    align-items:center;

    gap:11px;

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

    border-radius:10px;

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

    box-shadow:
        0 15px 35px rgba(34,71,82,.11);

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


@keyframes medicineFloat {

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


.medicine-floating-card > span {

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:9px;

    background:
        var(--med-mint);

    color:
        var(--med-green);
}


.medicine-floating-card div {
    display:flex;
    flex-direction:column;
}


.medicine-floating-card small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.7px;

    color:
        var(--med-blue);
}


.medicine-floating-card strong {

    margin-top:3px;

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

    font-size:11px;
}


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

.medicine-heading {

    max-width:860px;

    margin-bottom:45px;
}


.medicine-heading h2,
.medicine-consult-content h2,
.medicine-diagnostic-copy h2,
.medicine-health-heading h2,
.medicine-coordination-heading h2,
.medicine-family-content h2 {

    margin:0;

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

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

    line-height:1.05;

    letter-spacing:-1.1px;

    color:
        var(--med-navy);
}


.medicine-heading h2 em {

    display:block;

    font-style:normal;

    color:
        var(--med-aqua);
}


.medicine-heading > p {

    max-width:720px;

    margin:
        17px 0 0;

    font-size:13px;

    line-height:1.8;

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


/* ============================================================
   CONDITIONS
   ============================================================ */

.medicine-conditions {

    padding:
        105px 0;

    background:
        var(--med-porcelain);
}


.medicine-condition-grid {

    display:grid;

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

    gap:12px;
}


.medicine-condition-card {

    position:relative;

    min-height:225px;

    padding:23px;

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

    border-radius:12px;

    background:#fff;

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


.medicine-condition-card:hover {

    transform:translateY(-5px);

    box-shadow:
        0 17px 37px rgba(34,71,82,.07);
}


.medicine-condition-card > span {

    position:absolute;

    right:18px;
    top:17px;

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

    font-size:9px;

    color:#A0AFB3;
}


.medicine-condition-card > i {

    width:43px;
    height:43px;

    margin-bottom:23px;

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

    border-radius:10px;

    background:
        var(--med-ice);

    color:
        var(--med-blue);
}


.medicine-condition-card.medicine-feature > i {

    background:
        var(--med-mint);

    color:
        var(--med-green);
}


.medicine-condition-card h3 {

    margin:0;

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

    font-size:17px;

    color:
        var(--med-navy);
}


.medicine-condition-card p {

    margin:
        9px 0 0;

    font-size:10.5px;

    line-height:1.68;

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


/* ============================================================
   CONSULTATION
   ============================================================ */

.medicine-consultation {

    padding:
        110px 0;

    background:
        var(--med-ice);
}


.medicine-consult-layout {

    display:grid;

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

    align-items:center;

    gap:80px;
}


.medicine-consult-photo {

    position:relative;

    height:580px;

    overflow:hidden;

    border-radius:
        90px 18px 90px 18px;
}


.medicine-consult-photo img {

    height:100%;
    object-fit:cover;
}


.medicine-photo-tag {

    position:absolute;

    left:20px;
    bottom:20px;

    max-width:315px;

    padding:
        13px 15px;

    display:flex;

    align-items:center;

    gap:11px;

    border-radius:9px;

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

    box-shadow:
        0 12px 30px rgba(34,71,82,.12);
}


.medicine-photo-tag > i {
    color:var(--med-blue);
}


.medicine-photo-tag span {
    display:flex;
    flex-direction:column;
}


.medicine-photo-tag small {

    font-size:7px;

    color:
        var(--med-green);
}


.medicine-photo-tag span {

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

    font-size:11px;

    font-weight:700;
}


.medicine-consult-content > p {

    margin:
        18px 0 0;

    font-size:13px;

    line-height:1.8;

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


.medicine-consult-steps {

    margin-top:27px;

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


.medicine-consult-steps > div {

    padding:
        15px 0;

    display:grid;

    grid-template-columns:
        37px 1fr;

    gap:12px;

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


.medicine-consult-steps > div > span {

    width:28px;
    height:28px;

    display:flex;

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

    border-radius:50%;

    background:
        var(--med-blue);

    color:#fff;

    font-size:8px;

    font-weight:800;
}


.medicine-consult-steps strong {

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

    font-size:12px;
}


.medicine-consult-steps p {

    margin:
        4px 0 0;

    font-size:9.5px;

    line-height:1.55;

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


/* ============================================================
   FEVER SECTION
   ============================================================ */

.medicine-fever {

    padding:
        100px 0;

    background:#fff;
}


.medicine-fever-panel {

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    overflow:hidden;

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

    border-radius:16px;

    background:
        linear-gradient(
            120deg,
            #F4FAFA,
            #ECF6F5
        );
}


.medicine-fever-copy {

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}


.medicine-fever-copy h2 {

    margin:0;

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

    font-size:
        clamp(31px,3.6vw,45px);

    line-height:1.07;

    color:
        var(--med-navy);
}


.medicine-fever-copy > p {

    margin:
        16px 0 0;

    font-size:12px;

    line-height:1.75;

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


.medicine-fever-points {

    margin-top:22px;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;
}


.medicine-fever-points span {

    display:flex;
    align-items:center;

    gap:7px;

    font-size:9.5px;

    color:
        var(--med-text);
}


.medicine-fever-points i {
    color:var(--med-green);
}


.medicine-fever-image {

    min-height:440px;
}


.medicine-fever-image img {

    height:100%;
    object-fit:cover;
}


/* ============================================================
   CHRONIC
   ============================================================ */

.medicine-chronic {

    padding:
        105px 0;

    background:
        var(--med-porcelain);
}


.medicine-heading-center {

    margin:
        0 auto 45px;

    text-align:center;
}


.medicine-chronic-grid {

    display:grid;

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

    gap:13px;
}


.medicine-chronic-grid article {

    overflow:hidden;

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

    border-radius:12px;

    background:#fff;

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


.medicine-chronic-grid article:hover {

    transform:translateY(-5px);

    box-shadow:
        0 17px 36px rgba(34,71,82,.07);
}


.medicine-chronic-photo {

    height:220px;
    overflow:hidden;
}


.medicine-chronic-photo img {

    height:100%;
    object-fit:cover;

    transition:transform .5s ease;
}


.medicine-chronic-grid article:hover img {

    transform:scale(1.045);
}


.medicine-chronic-copy {

    padding:21px;
}


.medicine-chronic-copy > i {

    margin-bottom:12px;

    color:
        var(--med-blue);
}


.medicine-chronic-copy h3 {

    margin:0;

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

    font-size:18px;

    color:
        var(--med-navy);
}


.medicine-chronic-copy p {

    margin:
        8px 0 0;

    font-size:10px;

    line-height:1.65;

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


/* ============================================================
   COORDINATION
   ============================================================ */

.medicine-coordination {

    padding:
        100px 0;

    background:
        var(--med-mint);
}


.medicine-coordination-layout {

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    align-items:center;

    gap:75px;
}


.medicine-coordination-heading > p {

    margin:
        16px 0 0;

    font-size:12px;

    line-height:1.75;

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


.medicine-specialist-links {

    display:grid;

    gap:9px;
}


.medicine-specialist-links > a {

    min-height:88px;

    padding:16px;

    display:grid;

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

    align-items:center;

    gap:12px;

    border:
        1px solid rgba(40,117,142,.12);

    border-radius:10px;

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

    color:
        var(--med-navy) !important;

    transition:
        transform .25s ease,
        background .25s ease;
}


.medicine-specialist-links > a:hover {

    transform:translateX(5px);

    background:#fff;
}


.medicine-specialist-links > a > span {

    width:39px;
    height:39px;

    display:flex;

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

    border-radius:9px;

    background:
        var(--med-ice);

    color:
        var(--med-blue);
}


.medicine-specialist-links
.medicine-red-icon {

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

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


.medicine-specialist-links div {
    display:flex;
    flex-direction:column;
}


.medicine-specialist-links small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.7px;

    color:
        var(--med-blue);
}


.medicine-specialist-links strong {

    margin-top:3px;

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

    font-size:12px;
}


/* ============================================================
   DIAGNOSTICS
   ============================================================ */

.medicine-diagnostics {

    padding:
        105px 0;

    background:#fff;
}


.medicine-diagnostic-layout {

    display:grid;

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

    align-items:center;

    gap:80px;
}


.medicine-diagnostic-image {

    position:relative;

    height:470px;

    overflow:hidden;

    border-radius:15px;
}


.medicine-diagnostic-image img {

    height:100%;
    object-fit:cover;
}


.medicine-diagnostic-image > div {

    position:absolute;

    left:18px;
    bottom:17px;

    padding:
        11px 13px;

    display:flex;
    flex-direction:column;

    border-radius:8px;

    background:
        rgba(21,59,75,.78);

    color:#fff;
}


.medicine-diagnostic-image small {

    font-size:7px;

    color:#AFE0E0;
}


.medicine-diagnostic-image strong {

    margin-top:2px;

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

    font-size:13px;
}


.medicine-diagnostic-copy > p {

    margin:
        17px 0 0;

    font-size:12px;

    line-height:1.75;

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


.medicine-diagnostic-items {

    margin-top:24px;

    display:grid;

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

    gap:9px;
}


.medicine-diagnostic-items span {

    min-height:58px;

    padding:
        0 14px;

    display:flex;

    align-items:center;

    gap:9px;

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

    border-radius:8px;

    background:
        var(--med-porcelain);

    font-size:10px;

    font-weight:700;
}


.medicine-diagnostic-items i {

    color:
        var(--med-blue);
}


/* ============================================================
   URGENT
   ============================================================ */

.medicine-urgent {

    padding:
        70px 0;

    background:
        var(--med-porcelain);
}


.medicine-urgent-panel {

    padding:
        25px 28px;

    display:grid;

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

    align-items:center;

    gap:20px;

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

    border-radius:13px;

    background:#fff;
}


.medicine-urgent-icon {

    width:50px;
    height:50px;

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

    border-radius:10px;

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

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


.medicine-urgent-panel small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.7px;

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


.medicine-urgent-panel h2 {

    margin:
        4px 0 0;

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

    font-size:21px;

    color:
        var(--med-navy);
}


.medicine-urgent-panel p {

    max-width:760px;

    margin:
        5px 0 0;

    font-size:9.5px;

    line-height:1.55;

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


.medicine-urgent-panel > a {

    display:flex;

    align-items:center;

    gap:8px;

    color:
        var(--med-red) !important;

    font-size:10px;

    font-weight:700;
}


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

.medicine-final {

    padding:
        62px 0;

    background:
        var(--med-navy);

    color:#fff;
}


.medicine-final-layout {

    display:flex;

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

    gap:50px;
}


.medicine-final-layout > div:first-child > span {

    font-size:8px;

    font-weight:800;

    letter-spacing:.9px;

    color:#9DDCDB;
}


.medicine-final h2 {

    margin:
        6px 0 0;

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

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


.medicine-final p {

    margin:
        8px 0 0;

    font-size:10px;

    color:#BED0D5;
}


.medicine-final-actions {

    display:flex;

    gap:9px;
}


.medicine-final-primary,
.medicine-final-call {

    min-height:51px;

    padding:
        0 16px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    font-size:10px;

    font-weight:700;
}


.medicine-final-primary {

    background:
        var(--med-aqua);

    color:#fff !important;
}


.medicine-final-call {

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

    color:#fff !important;
}


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

.medicine-mobile-bar {
    display:none;
}


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

@media(max-width:950px) {

    .medicine-hero-layout,
    .medicine-consult-layout,
    .medicine-coordination-layout,
    .medicine-diagnostic-layout {

        grid-template-columns:1fr;

        gap:45px;
    }


    .medicine-hero-visual {
        max-width:680px;
    }


    .medicine-floating-card {
        left:20px;
    }


    .medicine-condition-grid {

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


    .medicine-fever-panel {
        grid-template-columns:1fr;
    }


    .medicine-fever-image {
        min-height:350px;
    }

}


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

@media(max-width:600px) {

    #arhaMedicinePage {
        padding-bottom:60px;
    }


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


    .medicine-mobile-bar {

        position:fixed;

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

        z-index:8500;

        height:60px;

        display:grid;

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

        background:#fff;

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

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


    .medicine-mobile-bar a {

        display:flex;

        flex-direction:column;

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

        gap:4px;

        font-size:8px;

        font-weight:700;

        color:
            var(--med-navy) !important;
    }


    .medicine-mobile-bar
    .medicine-mobile-primary {

        background:
            var(--med-blue);

        color:#fff !important;
    }


    .medicine-hero {
        padding:50px 0 65px;
    }


    .medicine-hero h1 {

        font-size:
            clamp(38px,11vw,48px);

        letter-spacing:-1.4px;
    }


    .medicine-hero-description {
        font-size:12.5px;
    }


    .medicine-actions {
        flex-direction:column;
    }


    .medicine-primary,
    .medicine-secondary {
        width:100%;
    }


    .medicine-main-photo {

        height:380px;

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


    .medicine-floating-card {

        position:relative;

        left:auto;
        bottom:auto;

        margin:-25px 13px 0;
    }


    .medicine-conditions,
    .medicine-consultation,
    .medicine-fever,
    .medicine-chronic,
    .medicine-coordination,
    .medicine-diagnostics {

        padding:72px 0;
    }


    .medicine-heading {
        margin-bottom:31px;
    }


    .medicine-heading h2,
    .medicine-consult-content h2,
    .medicine-diagnostic-copy h2,
    .medicine-coordination-heading h2 {

        font-size:32px;
    }


    .medicine-condition-grid {
        grid-template-columns:1fr;
    }


    .medicine-condition-card {
        min-height:195px;
    }


    .medicine-consult-photo {
        height:350px;
        border-radius:60px 13px 60px 13px;
    }


    .medicine-fever-copy {
        padding:30px 20px;
    }


    .medicine-fever-points {
        grid-template-columns:1fr;
    }


    .medicine-fever-image {
        min-height:280px;
    }


    .medicine-chronic-grid {
        grid-template-columns:1fr;
    }


    .medicine-urgent-panel {

        grid-template-columns:
            45px 1fr;

        padding:20px;
    }


    .medicine-urgent-panel > a {

        grid-column:span 2;

        padding-top:12px;

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


    .medicine-final-layout {

        align-items:flex-start;

        flex-direction:column;

        gap:25px;
    }


    .medicine-final-actions {

        width:100%;

        flex-direction:column;
    }


    .medicine-final-primary,
    .medicine-final-call {
        width:100%;
    }

}


@media(max-width:380px) {

    .medicine-care-pills {

        display:grid;

        grid-template-columns:
            1fr 1fr;
    }


    .medicine-diagnostic-items {
        grid-template-columns:1fr;
    }

}


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

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

    #arhaMedicinePage *,
    #arhaMedicinePage *::before,
    #arhaMedicinePage *::after {

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


    #arhaMedicinePage
    [data-medicine-reveal] {

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

}