/* =========================================================
   JPC PREMIUM HERO
========================================================= */

.jpc-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #f5fcfb 0%,
            #ffffff 48%,
            #e9f8f4 100%
        );
    padding: 40px 0 0;
}

/* =========================================================
   BACKGROUND
========================================================= */

.jpc-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(0, 108, 99, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(0, 108, 99, 0.06),
            transparent 30%
        );
    pointer-events: none;
}

.jpc-hero-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(0, 108, 99, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 108, 99, 0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.jpc-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.jpc-hero-orb-1 {
    width: 260px;
    height: 260px;
    top: 100px;
    right: -150px;
    background: rgba(0, 108, 99, 0.07);
}

.jpc-hero-orb-2 {
    width: 180px;
    height: 180px;
    bottom: 80px;
    left: -120px;
    background: rgba(0, 108, 99, 0.05);
}


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

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


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

.jpc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 0.95fr);
    align-items: center;
    gap: 55px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.jpc-hero-copy {
    padding: 25px 0 70px;
}

.jpc-hero-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 15px;

    border: 1px solid rgba(0, 108, 99, 0.14);
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.75);

    color: var(--primary);
    font-size: 14px;
    font-weight: 600;

    box-shadow: 0 5px 20px rgba(0, 64, 61, 0.05);
}

.jpc-hero-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--primary);
    color: var(--white);

    font-size: 12px;
    font-weight: 700;
}

.jpc-hero-eyebrow {
    margin: 27px 0 13px;

    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

.jpc-hero-copy h1 {
    max-width: 650px;
    margin: 0;

    color: var(--dark);

    font-size: clamp(46px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -2px;
}

.jpc-hero-copy h1 span {
    display: block;
    color: var(--primary);
}

.jpc-hero-lead {
    max-width: 580px;

    margin: 25px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   BENEFITS
========================================================= */

.jpc-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;

    margin-top: 23px;
    display: none;
}

.jpc-hero-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;
}

.jpc-hero-benefits i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: var(--light);
    color: var(--primary);

    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}


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

.jpc-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 31px;
}

.jpc-hero-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    min-height: 54px;
    padding: 0 20px;

    border-radius: 10px;

    background: var(--primary);
    color: var(--white);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(0, 108, 99, 0.20);

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

.jpc-hero-primary-btn:hover {
    background: var(--primary-dark);
    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(0, 108, 99, 0.24);
}

.jpc-hero-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    font-size: 17px;
}

.jpc-hero-btn-arrow {
    margin-left: 4px;
    font-size: 17px;
}

.jpc-hero-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 54px;
    padding: 0 17px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.75);

    color: var(--text);
    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.jpc-hero-call-btn:hover {
    border-color: rgba(0, 108, 99, 0.35);
    color: var(--text);

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(0, 64, 61, 0.08);
}

.jpc-hero-call-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--light);

    color: var(--primary);

    font-size: 15px;
}

.jpc-hero-call-btn span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jpc-hero-call-btn small {
    color: var(--muted);
    font-size: 11px;
}

.jpc-hero-call-btn strong {
    color: var(--dark);
    font-size: 14px;
}


/* =========================================================
   REASSURANCE
========================================================= */

.jpc-hero-reassurance {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;

    color: var(--muted);
    font-size: 14px;
}

.jpc-hero-reassurance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: var(--light);
    color: var(--primary);

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.jpc-hero-visual {
    position: relative;

    min-width: 0;

    padding: 15px 0 70px;
}

.jpc-hero-image-wrap {
    position: relative;

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

    /*min-height: 560px;*/
}


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

.jpc-hero-image {
    position: relative;
    z-index: 3;

    width: min(100%, 540px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--light);

    box-shadow:
        0 25px 60px rgba(0, 64, 61, 0.12);
}

.jpc-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.jpc-hero-ring {
    position: absolute;

    border: 1px solid rgba(0, 108, 99, 0.15);

    border-radius: 50%;

    pointer-events: none;
}

.jpc-hero-ring-1 {
    width: 570px;
    height: 570px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.jpc-hero-ring-2 {
    width: 630px;
    height: 630px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-color: rgba(0, 108, 99, 0.07);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.jpc-hero-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow: 0 15px 35px rgba(0, 64, 61, 0.13);

    backdrop-filter: blur(10px);
}

.jpc-hero-floating-icon,
.jpc-hero-specialist-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: var(--light);

    color: var(--primary);

    font-size: 16px;
    font-weight: 800;
}

.jpc-hero-floating-card div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jpc-hero-floating-card strong {
    color: var(--dark);
    font-size: 14px;
    line-height: 1.3;
}

.jpc-hero-floating-card span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.jpc-hero-experience-card {
    top: 115px;
    left: -20px;
}

.jpc-hero-experience-card strong {
    font-size: 19px;
}

.jpc-hero-specialist-card {
    right: -15px;
    bottom: 105px;
}


/* =========================================================
   PLUS ELEMENTS
========================================================= */

.jpc-hero-plus {
    position: absolute;
    z-index: 2;

    color: rgba(0, 108, 99, 0.28);

    font-size: 34px;
    font-weight: 300;

    pointer-events: none;
}

.jpc-hero-plus-1 {
    top: 70px;
    right: 40px;
}

.jpc-hero-plus-2 {
    bottom: 70px;
    left: 35px;

    font-size: 25px;
}


/* =========================================================
   STATS
========================================================= */

.jpc-hero-stats {
    position: relative;
    z-index: 6;

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

    margin-top: -15px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.90);

    box-shadow: 0 -5px 30px rgba(0, 64, 61, 0.05);
}

.jpc-hero-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 95px;
    padding: 15px 20px;

    text-align: center;

    border-right: 1px solid var(--border);
}

.jpc-hero-stat:last-child {
    border-right: 0;
}

.jpc-hero-stat strong {
    display: block;

    color: var(--primary);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.jpc-hero-stat span {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.4;
}


/* =========================================================
   HOVER / MOTION
========================================================= */

.jpc-hero-image,
.jpc-hero-floating-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.jpc-hero-floating-card:hover {
    transform: translateY(-4px);
}


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

@media (max-width: 1100px) {

    .jpc-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
        gap: 35px;
    }

    .jpc-hero-copy h1 {
        font-size: clamp(42px, 5vw, 58px);
    }

    .jpc-hero-image-wrap {
        min-height: 500px;
    }

    .jpc-hero-ring-1 {
        width: 510px;
        height: 510px;
    }

    .jpc-hero-ring-2 {
        width: 560px;
        height: 560px;
    }

    .jpc-hero-experience-card {
        left: -5px;
    }

    .jpc-hero-specialist-card {
        right: -5px;
    }
}


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

@media (max-width: 900px) {

    .jpc-hero {
        padding-top: 50px;
    }

    .jpc-hero-grid {
        grid-template-columns: 1fr;
    }

    .jpc-hero-copy {
        padding-bottom: 20px;
    }

    .jpc-hero-visual {
        padding-top: 10px;
        padding-bottom: 35px;
    }

    .jpc-hero-image-wrap {
        min-height: 520px;
    }

    .jpc-hero-image {
        width: min(100%, 500px);
    }

    .jpc-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
        border-radius: 14px;
    }

    .jpc-hero-stat:nth-child(2) {
        border-right: 0;
    }

    .jpc-hero-stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

}


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

@media (max-width: 600px) {

    .jpc-hero > .container {
        width: min(100% - 28px, 1180px);
    }

    .jpc-hero {
        padding-top: 35px;
    }

    .jpc-hero-copy {
        padding-top: 10px;
    }

    .jpc-hero-trust-pill {
        font-size: 13px;
        padding: 8px 12px;
    }

    .jpc-hero-eyebrow {
        margin-top: 22px;
        font-size: 13px;
    }

    .jpc-hero-copy h1 {
        font-size: clamp(38px, 11vw, 48px);
        letter-spacing: -1.5px;
    }

    .jpc-hero-lead {
        margin-top: 20px;
        font-size: 16px;
    }

    .jpc-hero-benefits {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }

    .jpc-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jpc-hero-primary-btn,
    .jpc-hero-call-btn {
        width: 100%;
        justify-content: center;
    }

    .jpc-hero-reassurance {
        font-size: 13px;
    }

    .jpc-hero-image-wrap {
        min-height: 390px;
    }

    .jpc-hero-image {
        width: min(100%, 390px);
/*         border-radius: 44% 44% 18% 18%; */
    }

    .jpc-hero-ring-1 {
        width: 400px;
        height: 400px;
    }

    .jpc-hero-ring-2 {
        width: 440px;
        height: 440px;
    }

    .jpc-hero-floating-card {
        padding: 10px 11px;
        gap: 8px;
    }

    .jpc-hero-floating-icon,
    .jpc-hero-specialist-check {
        width: 32px;
        height: 32px;
    }

    .jpc-hero-floating-card strong {
        font-size: 13px;
    }

    .jpc-hero-floating-card span {
        font-size: 11px;
    }

    .jpc-hero-experience-card {
        top: 50px;
        left: 0;
    }

    .jpc-hero-specialist-card {
        right: 0;
        bottom: 45px;
    }

    .jpc-hero-plus {
        display: none;
    }

    .jpc-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .jpc-hero-stat {
        min-height: 85px;
        padding: 12px 8px;
    }

    .jpc-hero-stat strong {
        font-size: 21px;
    }

    .jpc-hero-stat span {
        font-size: 13px;
    }

}


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

@media (max-width: 380px) {

    .jpc-hero-copy h1 {
        font-size: 35px;
    }

    .jpc-hero-image-wrap {
        min-height: 350px;
    }

    .jpc-hero-ring-1 {
        width: 350px;
        height: 350px;
    }

    .jpc-hero-ring-2 {
        width: 380px;
        height: 380px;
    }

    .jpc-hero-experience-card {
        left: -5px;
    }

    .jpc-hero-specialist-card {
        right: -5px;
    }

}


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

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

    .jpc-hero-primary-btn,
    .jpc-hero-call-btn,
    .jpc-hero-image,
    .jpc-hero-floating-card {
        transition: none;
    }

}

/* =========================================================
   HOMEPAGE — LATEST HEALTH ARTICLES
========================================================= */

.jpc-home-blog-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0,108,99,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fcfb 100%
        );
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.jpc-home-blog-bg-shape {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

.jpc-home-blog-bg-shape-1 {
    width: 280px;
    height: 280px;
    top: -120px;
    right: -80px;
    background: rgba(0,108,99,.07);
}

.jpc-home-blog-bg-shape-2 {
    width: 180px;
    height: 180px;
    bottom: -80px;
    left: -50px;
    background: rgba(139,216,202,.10);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.jpc-home-blog-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
    margin-bottom: 48px;
}

.jpc-home-blog-heading-content {
    max-width: 680px;
}

.jpc-home-blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;

    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.jpc-home-blog-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;

    border-radius: 10px;
    background: var(--primary);
}

.jpc-home-blog-heading h2 {
    margin: 0;

    color: var(--dark);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.jpc-home-blog-heading p {
    max-width: 620px;

    margin: 16px 0 0;

    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   VIEW ALL
========================================================= */

.jpc-home-blog-view-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    padding: 13px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--primary);
    background: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    box-shadow: 0 8px 25px rgba(0,64,61,.05);

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

.jpc-home-blog-view-arrow {
    font-size: 18px;

    transition: transform .3s ease;
}

.jpc-home-blog-view-all:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,64,61,.10);

    background: var(--light);
}

.jpc-home-blog-view-all:hover
.jpc-home-blog-view-arrow {
    transform: translateX(4px);
}


/* =========================================================
   BLOG GRID
========================================================= */

.jpc-home-blog-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.jpc-home-blog-card {
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(220,236,234,.9);
    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 10px 35px rgba(0,64,61,.06);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;

    animation-delay: var(--jpc-blog-delay);
}

.jpc-home-blog-card:hover {
    transform: translateY(-10px);

    border-color: rgba(0,108,99,.18);

    box-shadow:
        0 25px 55px rgba(0,64,61,.13);
}


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

.jpc-home-blog-image {
    position: relative;

    display: block;

    height: 265px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    text-decoration: none;
}

.jpc-home-blog-img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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

.jpc-home-blog-card:hover
.jpc-home-blog-img {
    transform: scale(1.08);

    filter: saturate(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.jpc-home-blog-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,64,61,.05) 35%,
            rgba(0,40,38,.72) 100%
        );

    opacity: .9;

    transition: opacity .4s ease;
}

.jpc-home-blog-card:hover
.jpc-home-blog-image-overlay {
    opacity: 1;
}


/* =========================================================
   CATEGORY
========================================================= */

.jpc-home-blog-category {
    position: absolute;
    top: 18px;
    left: 18px;

    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

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

    color: #fff;
    background: rgba(0,64,61,.55);

    backdrop-filter: blur(10px);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}


/* =========================================================
   NUMBER
========================================================= */

.jpc-home-blog-number {
    position: absolute;
    right: 18px;
    bottom: 17px;

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

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* =========================================================
   IMAGE ARROW
========================================================= */

.jpc-home-blog-image-arrow {
    position: absolute;

    right: 18px;
    top: 18px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    color: #fff;
    background: rgba(0,64,61,.5);

    backdrop-filter: blur(10px);

    font-size: 18px;

    opacity: 0;
    transform: translate(8px, -8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.jpc-home-blog-card:hover
.jpc-home-blog-image-arrow {
    opacity: 1;
    transform: translate(0,0);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.jpc-home-blog-card-content {
    padding: 26px 27px 28px;
}

.jpc-home-blog-meta {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}

.jpc-home-blog-meta-dot {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--primary);
}


.jpc-home-blog-title {
    margin: 0;

    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -.3px;
}

.jpc-home-blog-title a {
    color: var(--dark);
    text-decoration: none;

    transition: color .25s ease;
}

.jpc-home-blog-card:hover
.jpc-home-blog-title a {
    color: var(--primary);
}


/* =========================================================
   EXCERPT
========================================================= */

.jpc-home-blog-excerpt {
    margin: 13px 0 22px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   READ MORE
========================================================= */

.jpc-home-blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

.jpc-home-blog-read-arrow {
    display: inline-block;

    font-size: 17px;

    transition: transform .3s ease;
}

.jpc-home-blog-read-more:hover
.jpc-home-blog-read-arrow {
    transform: translateX(6px);
}


/* =========================================================
   EMPTY
========================================================= */

.jpc-home-blog-empty {
    grid-column: 1 / -1;

    padding: 50px;

    border: 1px dashed var(--border);
    border-radius: 18px;

    color: var(--muted);

    text-align: center;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */
.jpc-home-blog-reveal {
    opacity: 1;
    transform: translateY(0);

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

.jpc-home-blog-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 1024px) {

    .jpc-home-blog-section {
        padding: 85px 0;
    }

    .jpc-home-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jpc-home-blog-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
        width: 100%;
    }

}


@media (max-width: 767px) {

    .jpc-home-blog-section {
        padding: 70px 0;
    }

    .jpc-home-blog-heading {
        display: block;
        margin-bottom: 35px;
    }

    .jpc-home-blog-heading h2 {
        font-size: 35px;
    }

    .jpc-home-blog-heading p {
        font-size: 14px;
    }

    .jpc-home-blog-view-all {
        margin-top: 22px;
    }

    .jpc-home-blog-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .jpc-home-blog-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .jpc-home-blog-image {
        height: 235px;
    }

    .jpc-home-blog-card-content {
        padding: 23px;
    }

    .jpc-home-blog-title {
        font-size: 20px;
    }

}


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

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

    .jpc-home-blog-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .jpc-home-blog-card,
    .jpc-home-blog-img,
    .jpc-home-blog-view-all,
    .jpc-home-blog-image-arrow,
    .jpc-home-blog-read-arrow {
        transition: none;
    }

}

/* =========================================================
   TREATMENT JOURNEY
========================================================= */

.treatment-journey-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0,108,99,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f5fcfb 0%,
            #ffffff 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.treatment-journey-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(0,108,99,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,108,99,.04) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


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

.journey-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 70px;
}

.journey-heading-content {
    max-width: 760px;
}

.journey-heading .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.journey-heading .section-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: var(--primary);
}

.journey-heading h2 {
    margin: 0;

    color: var(--dark);

    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.journey-heading h2 span {
    color: var(--primary);
}

.journey-heading p {
    max-width: 680px;

    margin: 20px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   BADGE
========================================================= */

.journey-heading-badge {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    padding: 15px 18px;

    border: 1px solid var(--border);
    border-radius: 14px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.06);
}

.journey-badge-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #fff;
    background: var(--primary);

    font-weight: 900;
}

.journey-heading-badge strong {
    display: block;

    color: var(--dark);

    font-size: 15px;
}

.journey-heading-badge small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   TIMELINE
========================================================= */

.journey-timeline {
    position: relative;
    z-index: 2;

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

    gap: 20px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.journey-line {
    position: absolute;

    top: 40px;
    left: 9%;
    right: 9%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            rgba(0,108,99,.12),
            var(--primary)
        );

    z-index: -1;
}


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

.journey-card {
    position: relative;

    padding: 32px 26px 26px;

    border: 1px solid var(--border);
    border-radius: 22px;

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

    box-shadow:
        0 12px 35px rgba(0,64,61,.06);

    transition:
        transform .4s cubic-bezier(.2,.7,.2,1),
        box-shadow .4s ease,
        border-color .3s ease;
}

.journey-card:hover {
    transform: translateY(-9px);

    border-color: rgba(0,108,99,.25);

    box-shadow:
        0 25px 50px rgba(0,64,61,.12);
}


/* =========================================================
   NUMBER
========================================================= */

.journey-card-number {
    position: absolute;

    top: -17px;
    left: 24px;

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

    width: 52px;
    height: 52px;

    border: 5px solid #f5fcfb;
    border-radius: 50%;

    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    font-size: 14px;
    font-weight: 900;

    box-shadow:
        0 8px 20px rgba(0,108,99,.20);

    transition:
        transform .35s ease;
}

.journey-card:hover .journey-card-number {
    transform: scale(1.08) rotate(-5deg);
}


/* =========================================================
   ICON
========================================================= */

.journey-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;

    margin-bottom: 23px;

    border-radius: 15px;

    color: var(--primary);

    background: var(--light);

    font-size: 22px;
    font-weight: 900;

    transition:
        transform .35s ease,
        background .35s ease;
    display: none;
}

.journey-card-content {
    margin-top: 30px;
}
.journey-card:hover .journey-card-icon {
    transform: scale(1.08);

    color: #fff;

    background: var(--primary);
}


/* =========================================================
   CONTENT
========================================================= */

.journey-card-label {
    display: block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.journey-card h3 {
    margin: 0;

    color: var(--dark);

    font-size: 21px;
    line-height: 1.3;
}

.journey-card-description {
    min-height: 82px;

    margin: 14px 0 22px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   WHAT TO EXPECT
========================================================= */

.journey-card-subtitle {
    margin-bottom: 12px;
    color: var(--dark);
    display: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.journey-card-points {
    margin: 0;
    padding: 0;
    display: none;
    list-style: none;
}

.journey-card-points li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 10px;

    color: var(--text);

    font-size: 12px;
    line-height: 1.55;
}

.journey-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    color: var(--primary);

    background: var(--light);

    font-size: 9px;
    font-weight: 900;
}


/* =========================================================
   OUTCOME
========================================================= */

.journey-card-outcome {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 23px;
    padding-top: 18px;

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

.journey-outcome-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    color: var(--primary);

    background: var(--light);

    font-size: 12px;
    font-weight: 900;
}

.journey-card-outcome small {
    display: block;

    color: var(--muted);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.journey-card-outcome strong {
    display: block;

    margin-top: 3px;

    color: var(--dark);

    font-size: 13px;
    line-height: 1.4;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.journey-bottom {
    position: relative;
    z-index: 2;

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

    gap: 40px;

    margin-top: 55px;
    padding: 30px 35px;

    border-radius: 20px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    box-shadow:
        0 18px 45px rgba(0,64,61,.15);
        display: none;
}

.journey-bottom-content > span {
    display: block;

    margin-bottom: 7px;

    color: rgba(255,255,255,.65);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.journey-bottom h3 {
    margin: 0;

    color: #fff;

    font-size: 22px;
}

.journey-bottom p {
    margin: 7px 0 0;

    color: rgba(255,255,255,.7);

    font-size: 12px;
}

.journey-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    flex-shrink: 0;

    min-height: 50px;

    padding: 0 23px;

    border-radius: 10px;

    color: var(--primary);

    background: #fff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

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

.journey-cta:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.18);
}

.journey-cta-arrow {
    font-size: 17px;

    transition:
        transform .3s ease;
}

.journey-cta:hover .journey-cta-arrow {
    transform: translateX(5px);
}


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

@media (max-width: 1100px) {

    .journey-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .journey-line {
        display: none;
    }

    .journey-card-description {
        min-height: auto;
    }

}


@media (max-width: 767px) {

    .treatment-journey-section {
        padding: 32px 0;
    }

    .journey-heading {
        display: block;

        margin-bottom: 55px;
    }

    .journey-heading h2 {
        font-size: 36px;
    }

    .journey-heading p {
        font-size: 14px;
    }

    .journey-heading-badge {
        display: inline-flex;

        margin-top: 25px;
    }

    .journey-timeline {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .journey-card {
        padding: 30px 23px 23px;
    }

    .journey-card-icon {
        margin-bottom: 20px;
    }

    .journey-bottom {
        display: block;

        padding: 28px 24px;
    }

    .journey-bottom h3 {
        font-size: 20px;
    }

    .journey-cta {
        width: 100%;

        margin-top: 23px;
    }

}


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

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

    .journey-card,
    .journey-card-number,
    .journey-card-icon,
    .journey-cta {
        transition: none;
    }

}

/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-choose-section {
    position: relative;
    overflow: hidden;

    padding: 60px 0;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(0,108,99,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fcfb 100%
        );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.why-choose-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(0,108,99,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,108,99,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


/* =========================================================
   HEADING
   SAME STRUCTURE AS TREATMENT JOURNEY
========================================================= */

.why-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 65px;
}

.why-heading-content {
    max-width: 760px;
}

.why-heading .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.why-heading .section-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: var(--primary);
}

.why-heading h2 {
    margin: 0;

    color: var(--dark);

    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.why-heading h2 span {
    display: block;

    color: var(--primary);
}

.why-heading p {
    max-width: 680px;

    margin: 20px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HEADING BADGE
========================================================= */

.why-heading-badge {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    padding: 15px 18px;

    border: 1px solid var(--border);
    border-radius: 14px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.06);
}

.why-badge-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #fff;
    background: var(--primary);

    font-size: 14px;
    font-weight: 900;
}

.why-heading-badge strong {
    display: block;

    color: var(--dark);

    font-size: 15px;
}

.why-heading-badge small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   GRID
========================================================= */

.why-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 22px;
}


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

.why-item {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;

    padding: 27px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 21px;

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

    box-shadow:
        0 10px 32px rgba(0,64,61,.05);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;
}

.why-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    transform: scaleX(0);
    transform-origin: left;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #8bd8ca
        );

    transition:
        transform .45s ease;
}

.why-item:hover {
    transform: translateY(-9px);

    border-color: rgba(0,108,99,.22);

    box-shadow:
        0 25px 55px rgba(0,64,61,.12);
}

.why-item:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   CARD TOP
========================================================= */

.why-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;
}


/* =========================================================
   NUMBER
========================================================= */

.why-number {
    color: rgba(0,108,99,.22);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* =========================================================
   ICON
========================================================= */

.why-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: var(--primary);

    background: var(--light);

    font-size: 21px;
    font-weight: 900;

    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease;
}

.why-item:hover .why-icon {
    transform:
        rotate(-6deg)
        scale(1.08);

    color: #fff;

    background: var(--primary);
}


/* =========================================================
   CONTENT
========================================================= */

.why-item-content {
    flex: 1;
}

.why-item-content h3 {
    margin: 0;

    color: var(--dark);

    font-size: 21px;
    line-height: 1.3;

    transition:
        color .25s ease;
}

.why-item:hover .why-item-content h3 {
    color: var(--primary);
}

.why-item-content p {
    margin: 13px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER
========================================================= */

.why-item-footer {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 25px;
    padding-top: 17px;

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

    color: var(--primary);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
}

.why-check {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--primary);

    background: var(--light);

    font-size: 9px;
}

.why-arrow {
    margin-left: auto;

    font-size: 16px;

    transition:
        transform .3s ease;
}

.why-item:hover .why-arrow {
    transform: translateX(5px);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.why-trust-strip {
    position: relative;
    z-index: 2;

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

    gap: 20px;

    margin-top: 35px;
    padding: 22px 27px;

    border: 1px solid var(--border);
    border-radius: 18px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.04);
}

.why-trust-item {
    display: flex;
    align-items: center;

    gap: 10px;
}

.why-trust-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: var(--primary);

    background: var(--light);

    font-size: 12px;
    font-weight: 900;
}

.why-trust-item strong {
    display: block;

    color: var(--dark);

    font-size: 11px;
}

.why-trust-item small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}

.why-trust-divider {
    width: 1px;
    height: 35px;

    background: var(--border);
}


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

@media (max-width: 1050px) {

    .why-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .why-trust-strip {
        flex-wrap: wrap;
    }

    .why-trust-divider {
        display: none;
    }

}


@media (max-width: 767px) {

    .why-choose-section {
        padding: 32px 0;
    }

    .why-heading {
        display: block;

        margin-bottom: 45px;
    }

    .why-heading h2 {
        font-size: 36px;
    }

    .why-heading p {
        font-size: 14px;
    }

    .why-heading-badge {
        display: inline-flex;

        margin-top: 25px;
    }

    .why-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .why-item {
        min-height: auto;

        padding: 24px;
    }

    .why-trust-strip {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 18px;

        padding: 20px;
    }

}


@media (max-width: 480px) {

    .why-trust-strip {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   HOMEPAGE — TREATMENTS
========================================================= */

.jpc-home-treatments-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(0,108,99,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fcfb 100%
        );
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.jpc-home-treatments-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(0,108,99,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,108,99,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


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

.jpc-home-treatments-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}

.jpc-home-treatments-heading-content {
    max-width: 760px;
}

.jpc-home-treatments-heading .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.jpc-home-treatments-heading .section-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: var(--primary);
}

.jpc-home-treatments-heading h2 {
    margin: 0;

    color: var(--dark);

    font-size: clamp(38px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.jpc-home-treatments-heading h2 span {
    display: block;

    color: var(--primary);
}

.jpc-home-treatments-heading p {
    max-width: 700px;

    margin: 20px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HEADING RIGHT SIDE
========================================================= */

.jpc-home-treatments-heading-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 16px;

    flex-shrink: 0;
}


/* =========================================================
   TRUST BADGE
========================================================= */

.jpc-home-treatments-trust {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border: 1px solid var(--border);
    border-radius: 14px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.05);
}

.jpc-home-treatments-trust-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #fff;
    background: var(--primary);

    font-size: 14px;
    font-weight: 900;
}

.jpc-home-treatments-trust strong {
    display: block;

    color: var(--dark);

    font-size: 14px;
}

.jpc-home-treatments-trust small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   VIEW ALL
========================================================= */

.jpc-home-treatments-view-all {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 13px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--primary);
    background: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

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

.jpc-home-treatments-view-all:hover {
    transform: translateY(-3px);

    background: var(--light);

    box-shadow:
        0 12px 28px rgba(0,64,61,.08);
}


/* =========================================================
   GRID
========================================================= */

.jpc-home-treatments-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 22px;
}


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

.jpc-home-treatment-card {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-width: 0;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 10px 32px rgba(0,64,61,.06);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;
}

.jpc-home-treatment-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(0,108,99,.22);

    box-shadow:
        0 25px 55px rgba(0,64,61,.13);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.jpc-home-treatment-featured {
    border-color:
        rgba(0,108,99,.20);

    box-shadow:
        0 15px 40px rgba(0,64,61,.08);
}


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

.jpc-home-treatment-image {
    position: relative;

    display: block;

    height: 245px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    text-decoration: none;
}

.jpc-home-treatment-img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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

.jpc-home-treatment-card:hover
.jpc-home-treatment-img {
    transform: scale(1.08);

    filter: saturate(1.08);
}


/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.jpc-home-treatment-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: rgba(255,255,255,.9);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   OVERLAY
========================================================= */

.jpc-home-treatment-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,40,38,.05) 35%,
            rgba(0,40,38,.72) 100%
        );

    transition:
        opacity .4s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.jpc-home-treatment-number {
    position: absolute;

    left: 18px;
    bottom: 17px;

    color: rgba(255,255,255,.82);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* =========================================================
   IMAGE ARROW
========================================================= */

.jpc-home-treatment-image-arrow {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    color: #fff;

    background:
        rgba(0,64,61,.52);

    backdrop-filter: blur(10px);

    font-size: 19px;

    opacity: 0;

    transform:
        translate(8px,-8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.jpc-home-treatment-card:hover
.jpc-home-treatment-image-arrow {
    opacity: 1;

    transform:
        translate(0,0);
}


/* =========================================================
   CONTENT
========================================================= */

.jpc-home-treatment-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 25px 25px 24px;
}


/* =========================================================
   LABEL
========================================================= */

.jpc-home-treatment-label {
    margin-bottom: 9px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.jpc-home-treatment-content h3 {
    margin: 0;

    font-size: 21px;
    line-height: 1.3;
}

.jpc-home-treatment-content h3 a {
    color: var(--dark);

    text-decoration: none;

    transition:
        color .25s ease;
}

.jpc-home-treatment-card:hover
.jpc-home-treatment-content h3 a {
    color: var(--primary);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jpc-home-treatment-content p {
    margin: 13px 0 23px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER
========================================================= */

.jpc-home-treatment-footer {
    margin-top: auto;

    padding-top: 18px;

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

.jpc-home-treatment-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--primary);

    text-decoration: none;

    font-size: 14px;
    font-weight: 900;
}

.jpc-home-treatment-arrow {
    font-size: 18px;

    transition:
        transform .3s ease;
}

.jpc-home-treatment-link:hover
.jpc-home-treatment-arrow {
    transform:
        translateX(6px);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.jpc-home-treatments-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 32px;
    padding: 20px 24px;

    border: 1px solid var(--border);
    border-radius: 18px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.04);
}

.jpc-home-treatments-bottom-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: var(--primary);

    background: var(--light);

    font-size: 14px;
    font-weight: 900;
}

.jpc-home-treatments-bottom-content {
    flex: 1;
}

.jpc-home-treatments-bottom-content strong {
    display: block;

    color: var(--dark);

    font-size: 14px;
}

.jpc-home-treatments-bottom-content span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.5;
}

.jpc-home-treatments-bottom-btn {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    min-height: 45px;

    padding: 0 18px;

    border-radius: 9px;

    color: #fff;

    background: var(--primary);

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

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

.jpc-home-treatments-bottom-btn:hover {
    transform: translateY(-2px);

    background: var(--primary-dark);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.jpc-home-treatment-empty {
    grid-column: 1 / -1;

    padding: 50px;

    border: 1px dashed var(--border);
    border-radius: 18px;

    text-align: center;
}

.jpc-home-treatment-empty strong {
    display: block;

    color: var(--dark);

    font-size: 16px;
}

.jpc-home-treatment-empty p {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 14px;
}


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

@media (max-width: 1150px) {

    .jpc-home-treatments-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .jpc-home-treatment-image {
        height: 260px;
    }

}


@media (max-width: 767px) {

    .jpc-home-treatments-section {
        padding: 32px 0;
    }

    .jpc-home-treatments-heading {
        display: block;

        margin-bottom: 40px;
    }

    .jpc-home-treatments-heading h2 {
        font-size: 36px;
    }

    .jpc-home-treatments-heading p {
        font-size: 16px;
    }

    .jpc-home-treatments-heading-side {
        align-items: flex-start;

        margin-top: 25px;
    }

    .jpc-home-treatments-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .jpc-home-treatment-image {
        height: 250px;
    }

    .jpc-home-treatment-content {
        padding: 24px;
    }

    .jpc-home-treatment-content h3 {
        font-size: 21px;
    }

    .jpc-home-treatment-content p {
        font-size: 16px;
    }

    .jpc-home-treatments-bottom {
        display: block;

        padding: 22px;
    }

    .jpc-home-treatments-bottom-icon {
        margin-bottom: 12px;
    }

    .jpc-home-treatments-bottom-btn {
        width: 100%;

        margin-top: 18px;

        justify-content: center;
    }

}
 /* =========================================================
    HOMEPAGE — DOCTORS
 ========================================================= */

.jpc-home-doctors-section {
    position: relative;
    overflow: hidden;

    padding: 60px 0;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(0,108,99,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fcfb 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.jpc-home-doctors-pattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(0,108,99,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,108,99,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


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

.jpc-home-doctors-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}

.jpc-home-doctors-heading-content {
    max-width: 760px;
}

.jpc-home-doctors-heading .section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.jpc-home-doctors-heading .section-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: var(--primary);
}

.jpc-home-doctors-heading h2 {
    margin: 0;

    color: var(--dark);

    font-size: clamp(38px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.jpc-home-doctors-heading h2 span {
    display: block;

    color: var(--primary);
}

.jpc-home-doctors-heading p {
    max-width: 700px;

    margin: 20px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HEADING SIDE
========================================================= */

.jpc-home-doctors-heading-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 16px;

    flex-shrink: 0;
}


/* =========================================================
   TRUST
========================================================= */

.jpc-home-doctors-trust {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border: 1px solid var(--border);
    border-radius: 14px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.05);
}

.jpc-home-doctors-trust-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #fff;
    background: var(--primary);

    font-size: 14px;
    font-weight: 900;
}

.jpc-home-doctors-trust strong {
    display: block;

    color: var(--dark);

    font-size: 14px;
}

.jpc-home-doctors-trust small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   VIEW ALL
========================================================= */

.jpc-home-doctors-view-all {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 13px 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--primary);
    background: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

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

.jpc-home-doctors-view-all:hover {
    transform: translateY(-3px);

    background: var(--light);

    box-shadow:
        0 12px 28px rgba(0,64,61,.08);
}


/* =========================================================
   GRID
========================================================= */

.jpc-home-doctors-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 16px;
}


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

.jpc-home-doctor-card {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 23px;

    background: #fff;

    box-shadow:
        0 10px 32px rgba(0,64,61,.06);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;
}

.jpc-home-doctor-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(0,108,99,.22);

    box-shadow:
        0 28px 58px rgba(0,64,61,.14);
}


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

.jpc-home-doctor-image {
    position: relative;

    display: block;
    max-height: 300px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    text-decoration: none;
}

.jpc-home-doctor-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
    object-position: top;
}

.jpc-home-doctor-card:hover
.jpc-home-doctor-img {
    transform: scale(1.055);

    filter: saturate(1.05);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.jpc-home-doctor-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: rgba(255,255,255,.9);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    font-size: 18px;
    font-weight: 800;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.jpc-home-doctor-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(0,40,38,.68) 100%
        );

    transition:
        opacity .4s ease;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.jpc-home-doctor-experience {
    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;

    min-width: 105px;

    padding: 10px 13px;

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

    color: #fff;

    background:
        rgba(0,64,61,.62);

    backdrop-filter: blur(10px);
}

.jpc-home-doctor-experience strong {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.jpc-home-doctor-experience small {
    margin-top: 3px;

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

    font-size: 14px;
}


/* =========================================================
   IMAGE ARROW
========================================================= */

.jpc-home-doctor-image-arrow {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    color: #fff;

    background:
        rgba(0,64,61,.52);

    backdrop-filter: blur(10px);

    font-size: 20px;

    opacity: 0;

    transform:
        translate(8px,-8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.jpc-home-doctor-card:hover
.jpc-home-doctor-image-arrow {
    opacity: 1;

    transform:
        translate(0,0);
}


/* =========================================================
   CONTENT
========================================================= */

.jpc-home-doctor-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 16px;
}


/* =========================================================
   TOP
========================================================= */

.jpc-home-doctor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}

.jpc-home-doctor-label {
    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.jpc-home-doctor-number {
    color: rgba(0,108,99,.20);

    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   NAME
========================================================= */

.jpc-home-doctor-content h3 {
    margin: 0;

    font-size: 20px;
    line-height: 1.25;
}

.jpc-home-doctor-content h3 a {
    color: var(--dark);

    text-decoration: none;

    transition:
        color .25s ease;
}

.jpc-home-doctor-card:hover
.jpc-home-doctor-content h3 a {
    color: var(--primary);
}


/* =========================================================
   DESIGNATION
========================================================= */

.jpc-home-doctor-designation {
    margin-top: 7px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
}


/* =========================================================
   QUALIFICATION
========================================================= */

.jpc-home-doctor-qualification {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 14px;

    color: var(--text);

    font-size: 14px;
    line-height: 1.5;
}

.jpc-home-doctor-qualification > span {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--primary);

    background: var(--light);

    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jpc-home-doctor-description {
    margin: 15px 0 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   SPECIALIZATION
========================================================= */

.jpc-home-doctor-specialization {
    display: inline-block;

    align-self: flex-start;

    margin-top: 15px;
    padding: 7px 11px;

    border-radius: 8px;

    color: var(--primary);

    background: var(--light);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   FOOTER
========================================================= */

.jpc-home-doctor-footer {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 24px;
    padding-top: 18px;

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

.jpc-home-doctor-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: var(--primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.jpc-home-doctor-arrow {
    font-size: 18px;

    transition:
        transform .3s ease;
}

.jpc-home-doctor-profile:hover
.jpc-home-doctor-arrow {
    transform:
        translateX(5px);
}

.jpc-home-doctor-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 9px;
    color: #fff;
    background: var(--primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: transform .3s ease, background .3s ease;
}

.jpc-home-doctor-book:hover {
    transform: translateY(-2px);

    background: var(--primary-dark);
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.jpc-home-doctors-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 32px;
    padding: 20px 24px;

    border: 1px solid var(--border);
    border-radius: 18px;

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

    box-shadow:
        0 10px 30px rgba(0,64,61,.04);
}

.jpc-home-doctors-bottom-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: var(--primary);

    background: var(--light);

    font-size: 14px;
    font-weight: 900;
}

.jpc-home-doctors-bottom-content {
    flex: 1;
}

.jpc-home-doctors-bottom-content strong {
    display: block;

    color: var(--dark);

    font-size: 14px;
}

.jpc-home-doctors-bottom-content span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.5;
}

.jpc-home-doctors-bottom-btn {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    min-height: 45px;

    padding: 0 18px;

    border-radius: 9px;

    color: #fff;

    background: var(--primary);

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

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

.jpc-home-doctors-bottom-btn:hover {
    transform: translateY(-2px);

    background: var(--primary-dark);
}


/* =========================================================
   EMPTY
========================================================= */

.jpc-home-doctor-empty {
    grid-column: 1 / -1;

    padding: 50px;

    border: 1px dashed var(--border);
    border-radius: 18px;

    text-align: center;
}

.jpc-home-doctor-empty strong {
    display: block;

    color: var(--dark);

    font-size: 16px;
}

.jpc-home-doctor-empty p {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 14px;
}


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

@media (max-width: 1100px) {

    .jpc-home-doctors-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .jpc-home-doctor-image {
        height: 370px;
    }

}


@media (max-width: 767px) {

    .jpc-home-doctors-section {
        padding: 32px 0;
    }

    .jpc-home-doctors-heading {
        display: block;

        margin-bottom: 40px;
    }

    .jpc-home-doctors-heading h2 {
        font-size: 36px;
    }

    .jpc-home-doctors-heading p {
        font-size: 16px;
    }

    .jpc-home-doctors-heading-side {
        align-items: flex-start;

        margin-top: 25px;
    }

    .jpc-home-doctors-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .jpc-home-doctor-image {
        height: 380px;
    }

    .jpc-home-doctor-content {
        padding: 24px;
    }

    .jpc-home-doctor-content h3 {
        font-size: 23px;
    }

    .jpc-home-doctor-description {
        font-size: 16px;
    }

    .jpc-home-doctors-bottom {
        display: block;

        padding: 22px;
    }

    .jpc-home-doctors-bottom-icon {
        margin-bottom: 12px;
    }

    .jpc-home-doctors-bottom-btn {
        width: 100%;

        margin-top: 18px;

        justify-content: center;
    }

}


@media (max-width: 480px) {

    .jpc-home-doctor-image {
        height: 350px;
    }

    .jpc-home-doctor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .jpc-home-doctor-profile {
        justify-content: center;
    }

    .jpc-home-doctor-book {
        width: 100%;
    }

}

/* =========================================
   HOMEPAGE CLINICS SECTION
========================================= */

.jpc-home-clinics {
    padding: 80px 0;
    background: var(--light-2);
}


/* =========================================
   SECTION HEADER
========================================= */

.jpc-home-clinics .jpc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.jpc-home-clinics .jpc-section-heading {
    max-width: 680px;
}

.jpc-home-clinics .jpc-section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--primary);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;

    text-transform: uppercase;
}

.jpc-home-clinics .jpc-section-heading h2 {
    margin: 0 0 12px;

    color: var(--dark);

    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
}

.jpc-home-clinics .jpc-section-heading p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.jpc-home-clinics .jpc-section-head .btn {
    flex-shrink: 0;
}


/* =========================================
   CLINIC SLIDER
========================================= */

.jpc-clinic-slider {
    position: relative;

    width: calc(100% + 30px);

    margin-left: -15px;
}


/*
 * Slick viewport
 */

.jpc-clinic-slider .slick-list {
    margin: 0;

    padding: 8px 0 15px;

    overflow: hidden;
}


/*
 * Slick track
 */

.jpc-clinic-slider .slick-track {
    display: flex;
    gap: 18px;
    align-items: stretch;
}


/*
 * Each Slick slide
 *
 * 15px left + 15px right
 * = 30px visual gap
 */

.jpc-clinic-slider .slick-slide {
    height: auto;
    box-sizing: border-box;
}


/*
 * Slick creates this wrapper automatically
 */

.jpc-clinic-slider .slick-slide > div {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
}


/* =========================================
   CLINIC CARD
========================================= */

.jpc-clinic-card {
    display: flex !important;

    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    box-sizing: border-box;

    background: var(--white);

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

    border-radius: 18px;

    /*box-shadow:*/
    /*    0 8px 26px rgba(0, 64, 61, 0.07);*/

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.jpc-clinic-card:hover {
    transform: translateY(-5px);

    /*box-shadow:*/
    /*    0 16px 36px rgba(0, 64, 61, 0.12);*/
}


/* =========================================
   CLINIC IMAGE
========================================= */

.jpc-clinic-card-image {
    position: relative;

    display: block;

    width: 100%;
    height: 220px;

    overflow: hidden;

    background: var(--light);

    text-decoration: none;
}

.jpc-clinic-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.jpc-clinic-card:hover .jpc-clinic-card-image img {
    transform: scale(1.04);
}


/* =========================================
   IMAGE PLACEHOLDER
========================================= */

.jpc-clinic-image-placeholder {
    display: flex;

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

    width: 100%;
    height: 100%;

    background: var(--light);

    color: var(--primary);

    font-size: 18px;
    font-weight: 700;

    text-align: center;
}


/* =========================================
   CLINIC STATUS
========================================= */

.jpc-clinic-status {
    position: absolute;

    top: 15px;
    left: 15px;

    display: inline-flex;

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

    padding: 7px 12px;

    border-radius: 50px;

    background: var(--white);

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.10);
}


/* =========================================
   CARD CONTENT
========================================= */

.jpc-clinic-card-content {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 22px 22px 20px;

    box-sizing: border-box;
}


/* =========================================
   LOCATION
========================================= */

.jpc-clinic-location {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 9px;

    color: var(--primary);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.4;
}

.jpc-location-icon {
    display: inline-flex;

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

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    font-size: 15px;
}


/* =========================================
   CLINIC TITLE
========================================= */

.jpc-clinic-title {
    margin: 0 0 12px;

    color: var(--dark);

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.jpc-clinic-title a {
    color: var(--dark);

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.jpc-clinic-title a:hover {
    color: var(--primary);
}


/* =========================================
   ADDRESS
========================================= */

.jpc-clinic-address {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.6;
}

.jpc-address-icon {
    flex: 0 0 auto;

    font-size: 14px;
}


/*
 * Keep long addresses from making
 * one card taller than another.
 */

.jpc-clinic-address span:last-child {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


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

.jpc-clinic-card-footer {
    margin-top: auto;

    padding-top: 20px;
}


/* =========================================
   SCHEDULE APPOINTMENT BUTTON
========================================= */

.jpc-clinic-appointment {
    display: flex;

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

    width: 100%;

    gap: 8px;

    padding: 13px 18px;

    box-sizing: border-box;

    border-radius: 10px;

    background: var(--primary);

    color: var(--white);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.jpc-clinic-appointment:hover {
    background: var(--primary-dark);

    color: var(--white);

    transform: translateY(-1px);
}

.jpc-clinic-appointment span {
    transition:
        transform 0.2s ease;
}

.jpc-clinic-appointment:hover span {
    transform: translateX(4px);
}


/* =========================================
   SLICK ARROWS
========================================= */

.jpc-clinic-slider .slick-prev,
.jpc-clinic-slider .slick-next {
    position: absolute;

    z-index: 10;

    width: 42px;
    height: 42px;

    padding: 0;

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

    border-radius: 50%;

    background: var(--white);

    box-shadow:
        0 5px 18px rgba(0, 64, 61, 0.10);
}

.jpc-clinic-slider .slick-prev {
    left: -5px;
}

.jpc-clinic-slider .slick-next {
    right: -5px;
}


.jpc-clinic-slider .slick-prev::before,
.jpc-clinic-slider .slick-next::before {
    color: var(--primary);

    font-size: 18px;
position: relative;
    top: 2px;
    opacity: 1;
}


.jpc-clinic-slider .slick-prev:hover,
.jpc-clinic-slider .slick-next:hover {
    background: var(--primary);
}


.jpc-clinic-slider .slick-prev:hover::before,
.jpc-clinic-slider .slick-next:hover::before {
    color: var(--white);
}


/* =========================================
   SLICK DOTS
========================================= */

.jpc-clinic-slider .slick-dots {
    position: static;

    display: flex;

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

    gap: 5px;

    margin: 25px 0 0;
    padding: 0;

    list-style: none;
}

.jpc-clinic-slider .slick-dots li {
    width: auto;
    height: auto;

    margin: 0;
    padding: 0;
}

.jpc-clinic-slider .slick-dots li button {
    width: 8px;
    height: 8px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #c8dedb;

    font-size: 0;
}

.jpc-clinic-slider .slick-dots li button::before {
    display: none;
}

.jpc-clinic-slider .slick-dots li.slick-active button {
    width: 24px;

    border-radius: 20px;

    background: var(--primary);
}


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

@media (max-width: 991px) {

    .jpc-home-clinics {
        padding: 70px 0;
    }

    .jpc-home-clinics .jpc-section-heading h2 {
        font-size: 32px;
    }

    .jpc-clinic-card-image {
        height: 210px;
    }

}


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

@media (max-width: 767px) {

    .jpc-home-clinics {
        padding: 60px 0;
    }


    /* Section Header */

    .jpc-home-clinics .jpc-section-head {
        display: block;

        margin-bottom: 28px;
    }

    .jpc-home-clinics .jpc-section-heading h2 {
        font-size: 28px;
    }

    .jpc-home-clinics .jpc-section-heading p {
        font-size: 15px;
    }

    .jpc-home-clinics .jpc-section-head .btn {
        display: inline-flex;

        margin-top: 18px;
    }


    /* Slider */

    .jpc-clinic-slider {
        width: calc(100% + 12px);

        margin-left: -6px;
    }

    /*.jpc-clinic-slider .slick-slide {*/
    /*    padding-left: 6px;*/
    /*    padding-right: 6px;*/
    /*}*/


    /* Card */

    .jpc-clinic-card-image {
        height: 210px;
    }

    .jpc-clinic-card-content {
        padding: 20px;
    }


    /* Hide arrows on mobile */

    .jpc-clinic-slider .slick-prev,
    .jpc-clinic-slider .slick-next {
        display: none !important;
    }


    /* Dots */

    .jpc-clinic-slider .slick-dots {
        margin-top: 22px;
    }

}


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

@media (max-width: 480px) {

    .jpc-home-clinics {
        padding: 50px 0;
    }

    .jpc-home-clinics .jpc-section-heading h2 {
        font-size: 26px;
    }

    .jpc-clinic-card-image {
        height: 200px;
    }

    .jpc-clinic-card-content {
        padding: 18px;
    }

    .jpc-clinic-title {
        font-size: 20px;
    }

}