/* =========================================================
   MEDIVANA HOME 1
   GLOBAL + NAVBAR + HOME
   ========================================================= */

:root {
    --med-bg: #FFF8EC;
    --med-card: #FFFDF8;
    --med-primary: #5B8FA8;
    --med-deep-blue: #31566B;
    --med-powder-blue: #DCECF2;
    --med-teal: #78BDB5;
    --med-peach: #F3B6A2;
    --med-text: #34444B;

    --med-navbar-bg: rgba(255, 253, 248, 0.96);
    --med-brand-text: #31566B;
    --med-nav-text: #34444B;
    --med-nav-hover: #DCECF2;

    --med-border: rgba(49, 86, 107, 0.12);
    --med-shadow: 0 20px 60px rgba(49, 86, 107, 0.10);

    --med-radius: 28px;

    --med-transition: 0.35s ease;
}


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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Nunito", Arial, sans-serif;
    background: var(--med-bg);
    color: var(--med-text);
    overflow-x: hidden;
    transition:
        background 0.35s ease,
        color 0.35s ease;
}


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


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


button {
    font: inherit;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.medivana-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: var(--med-navbar-bg);
    border-bottom: 1px solid var(--med-border);
}

.medivana-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(18px);
}
.med-navbar-container {
    width: min(1400px, 94%);
    min-height: 80px;
    margin: auto;

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

    gap: 25px;
}


/* LOGO */

.med-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}


.med-leaf-logo {
    font-size: 2rem;
    color: var(--med-deep-blue);
    transform: rotate(-10deg);
    transition: 0.3s ease;
}


.med-brand:hover .med-leaf-logo {
    transform: rotate(0deg) scale(1.08);
}


.med-brand-name {
    color: var(--med-brand-text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}


/* DESKTOP NAV */

.med-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}


.med-nav-link {
    border: 0;
    background: transparent;
    color: var(--med-nav-text);

    padding: 10px 12px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 0.91rem;
    font-weight: 700;

    border-radius: 12px;
    cursor: pointer;

    transition: 0.25s ease;
}


.med-nav-link:hover {
    background: var(--med-nav-hover);
    color: var(--med-deep-blue);
}


.med-nav-dropdown {
    position: relative;
}


.med-dropdown-trigger i {
    font-size: 0.65rem;
}


.med-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;

    min-width: 210px;
    padding: 10px;

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

    box-shadow: var(--med-shadow);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition: 0.25s ease;
}


.med-nav-dropdown:hover .med-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.med-dropdown-menu a {
    display: block;
    padding: 11px 13px;
    border-radius: 10px;

    color: var(--med-nav-text);
    font-size: 0.88rem;
    font-weight: 700;

    transition: 0.2s ease;
}


.med-dropdown-menu a:hover {
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
}


/* ACTIVE NAV STATE */

.med-nav-link.active {
    background: var(--med-nav-hover);
    color: var(--med-deep-blue);
}


.med-dropdown-menu a.active {
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
}


/* NAV ACTIONS */

.med-navbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


.med-action-button {
    width: 40px;
    height: 40px;

    border: 1px solid var(--med-border);
    border-radius: 50%;

    background: transparent;
    color: var(--med-nav-text);

    display: grid;
    place-items: center;

    cursor: pointer;
    transition: 0.25s ease;
}


.med-action-button:hover {
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
    transform: translateY(-2px);
}


.med-cart-button {
    position: relative;
}


.med-cart-count {
    position: absolute;
    top: -4px;
    right: -3px;

    min-width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-peach);
    color: var(--med-deep-blue);

    font-size: 0.62rem;
    font-weight: 900;
}


.med-login-button {
    background: var(--med-deep-blue);
    color: #FFFDF8;

    padding: 11px 20px;
    border-radius: 50px;

    font-size: 0.88rem;
    font-weight: 800;

    transition: 0.3s ease;
}


.med-login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(49, 86, 107, 0.20);
}


/* MOBILE */

.med-mobile-actions,
.med-mobile-menu,
.med-menu-overlay {
    display: none;
}


/* =========================================================
   GLOBAL HOME
   ========================================================= */

.medivana-home {
    position: relative;
}


.mv-section {
    position: relative;
    padding: 110px 5%;
    overflow: hidden;
}


.mv-section-heading {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}


.mv-section-label,
.mv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--med-primary);

    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}


.mv-section-label i,
.mv-eyebrow i {
    color: var(--med-teal);
}


.mv-section-heading h2,
.mv-delivery-content h2,
.mv-prescription-content h2,
.mv-care-intro h2,
.mv-availability-content h2,
.mv-final-content h2 {
    margin-top: 13px;

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

    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.5px;
}


.mv-section-heading h2 span,
.mv-delivery-content h2 span,
.mv-prescription-content h2 span,
.mv-care-intro h2 span,
.mv-availability-content h2 span,
.mv-final-content h2 span {
    color: var(--med-teal);
}


.mv-section-heading p {
    max-width: 620px;
    margin: 18px auto 0;

    line-height: 1.7;
    opacity: 0.78;
}


/* =========================================================
   LEAVES
   ========================================================= */

.mv-leaf {
    position: absolute;
    color: var(--med-teal);
    opacity: 0.28;
    pointer-events: none;
}


.mv-leaf-one {
    top: 100px;
    left: -20px;
    font-size: 8rem;
    transform: rotate(-35deg);
}


.mv-leaf-two {
    top: 280px;
    left: 40px;
    font-size: 3.5rem;
    transform: rotate(20deg);
}


.mv-leaf-three {
    right: -25px;
    bottom: 150px;
    font-size: 7rem;
    transform: rotate(25deg);
}


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

.mv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 13px 21px;

    border-radius: 50px;

    font-size: 0.88rem;
    font-weight: 800;

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


.mv-btn:hover {
    transform: translateY(-3px);
}


.mv-btn-primary {
    background: var(--med-deep-blue);
    color: #FFFDF8;
    box-shadow: 0 12px 30px rgba(49, 86, 107, 0.18);
}


.mv-btn-primary:hover {
    box-shadow: 0 18px 35px rgba(49, 86, 107, 0.25);
}


.mv-btn-outline {
    border: 1px solid var(--med-primary);
    color: var(--med-deep-blue);
    background: transparent;
}


.mv-btn-outline:hover {
    background: var(--med-powder-blue);
}


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

.mv-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 80px 5% 120px;

    background:
        radial-gradient(circle at 85% 25%,
            rgba(120, 189, 181, 0.18),
            transparent 28%),
        var(--med-bg);

    overflow: hidden;
}


.mv-hero-container {
    width: min(1400px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 40px;

    position: relative;
    z-index: 5;
}


.mv-hero-content {
    max-width: 680px;
    position: relative;
    z-index: 5;
}


.mv-hero-content h1 {
    margin-top: 17px;

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

    font-size: clamp(2.8rem, 5vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -3px;
    font-weight: 900;
}


.mv-hero-content h1 span {
    display: block;
    color: var(--med-teal);
}


.mv-hero-content p {
    max-width: 570px;

    margin-top: 25px;

    font-size: 1.05rem;
    line-height: 1.75;

    opacity: 0.8;
}


.mv-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}


.mv-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 27px;
}


.mv-trust-row div {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 0.76rem;
    font-weight: 800;
}


.mv-trust-row i {
    color: var(--med-teal);
}


/* HERO VISUAL */

.mv-hero-visual {
    position: relative;
    height: 590px;

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


.mv-doctor-shape {
    position: relative;

    width: min(500px, 90%);
    height: 530px;

    overflow: hidden;

    border-radius:
        48% 52% 50% 50% / 35% 38% 62% 65%;

    background:
        radial-gradient(circle at 35% 25%,
            rgba(255, 255, 255, 0.85),
            transparent 22%),
        linear-gradient(145deg,
            var(--med-powder-blue),
            var(--med-teal));

    box-shadow:
        0 30px 70px rgba(49, 86, 107, 0.16);

    animation: mvDoctorShape 8s ease-in-out infinite;
}


.mv-doctor-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform:
        translateY(100px) scale(1.04);

    animation:
        mvDoctorEnter 1.4s 0.15s cubic-bezier(.18, .75, .25, 1) forwards;
}


@keyframes mvDoctorEnter {

    0% {
        opacity: 0;
        transform:
            translateY(120px) scale(1.08);
    }

    70% {
        opacity: 1;
        transform:
            translateY(-8px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0) scale(1);
    }
}


@keyframes mvDoctorShape {

    0%,
    100% {
        border-radius:
            48% 52% 50% 50% / 35% 38% 62% 65%;
    }

    50% {
        border-radius:
            53% 47% 45% 55% / 40% 32% 68% 60%;
    }

}


/* FLOATING TABLETS */

.mv-pill {
    position: absolute;

    width: 47px;
    height: 24px;

    border-radius: 50px;

    display: grid;
    place-items: center;

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

    background: var(--med-card);

    box-shadow: 0 10px 25px rgba(49, 86, 107, 0.15);

    z-index: 10;
}


.mv-pill i {
    font-size: 0.9rem;
}


.mv-pill-one {
    top: 80px;
    left: 12%;
    transform: rotate(-28deg);

    animation: mvFloatOne 5s ease-in-out infinite;
}


.mv-pill-two {
    top: 155px;
    right: 9%;
    transform: rotate(28deg);

    animation: mvFloatTwo 4.5s ease-in-out infinite;
}


.mv-pill-three {
    bottom: 115px;
    left: 8%;
    transform: rotate(35deg);

    animation: mvFloatThree 5.5s ease-in-out infinite;
}


.mv-pill-four {
    bottom: 175px;
    right: 12%;
    transform: rotate(-35deg);

    animation: mvFloatFour 4.8s ease-in-out infinite;
}


@keyframes mvFloatOne {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(-28deg);
    }

    50% {
        transform:
            translate(15px, -22px) rotate(-15deg);
    }

}


@keyframes mvFloatTwo {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(28deg);
    }

    50% {
        transform:
            translate(-18px, 20px) rotate(45deg);
    }

}


@keyframes mvFloatThree {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(35deg);
    }

    50% {
        transform:
            translate(20px, -18px) rotate(18deg);
    }

}


@keyframes mvFloatFour {

    0%,
    100% {
        transform:
            translate(0, 0) rotate(-35deg);
    }

    50% {
        transform:
            translate(-15px, -25px) rotate(-50deg);
    }

}


/* FLOATING ICONS */

.mv-floating-icon {
    position: absolute;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: var(--med-card);
    color: var(--med-primary);

    box-shadow: 0 15px 35px rgba(49, 86, 107, 0.13);

    z-index: 12;

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


.mv-health-icon {
    top: 80px;
    right: 0;
}


.mv-shield-icon {
    left: 4%;
    top: 250px;

    animation-delay: 0.7s;
}


.mv-delivery-icon {
    right: 3%;
    bottom: 90px;

    animation-delay: 1.2s;
}


@keyframes mvIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

}


/* HERO LEAF */

.mv-hero-leaf {
    position: absolute;

    bottom: 35px;
    left: 14%;

    font-size: 75px;

    color: var(--med-teal);
    opacity: 0.7;

    transform: rotate(-25deg);

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


@keyframes mvLeafSway {

    0%,
    100% {
        transform:
            rotate(-25deg) translateY(0);
    }

    50% {
        transform:
            rotate(-12deg) translateY(-12px);
    }

}


/* HERO WAVES */

.mv-wave {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 145px;

    border-radius: 50% 50% 0 0;

    transform: rotate(-2deg);

    pointer-events: none;
}


.mv-wave-one {
    bottom: -105px;
    background: var(--med-teal);
    opacity: 0.25;
}


.mv-wave-two {
    bottom: -125px;
    background: var(--med-primary);
    opacity: 0.28;
}


.mv-hero-scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);

    z-index: 15;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    font-size: 0.67rem;
    font-weight: 800;

    opacity: 0.65;
}


.mv-hero-scroll i {
    animation: mvScrollBounce 1.4s infinite;
}


@keyframes mvScrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

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

}


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

.mv-trust-section {
    background: var(--med-card);
}


.mv-trust-grid {
    width: min(1250px, 100%);
    margin: auto;

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


.mv-trust-card {
    position: relative;

    padding: 34px 25px;

    min-height: 245px;

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

    border-radius: var(--med-radius);

    background: var(--med-bg);

    overflow: hidden;

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


.mv-trust-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--med-shadow);
}


.mv-card-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-primary);

    font-size: 1.2rem;
}


.mv-trust-card h3 {
    margin-top: 20px;

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

    font-size: 1.05rem;
}


.mv-trust-card p {
    margin-top: 10px;

    font-size: 0.86rem;
    line-height: 1.65;

    opacity: 0.72;
}


.mv-card-leaf {
    position: absolute;

    right: -8px;
    bottom: -15px;

    font-size: 75px;

    color: var(--med-teal);
    opacity: 0.12;

    transform: rotate(-25deg);
}


/* =========================================================
   DELIVERY
   ========================================================= */

.mv-delivery-section {
    background:
        linear-gradient(110deg,
            rgba(220, 236, 242, 0.5),
            transparent),
        var(--med-bg);
}


.mv-delivery-container {
    width: min(1300px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}


.mv-delivery-image {
    position: relative;

    border-radius: 40px;

    overflow: hidden;

    background: var(--med-powder-blue);

    box-shadow: var(--med-shadow);
}


.mv-delivery-image img {
    width: 100%;
    height: 450px;

    object-fit: cover;
}


.mv-delivery-route {
    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 28px;

    height: 55px;

    display: flex;
    align-items: center;
}


.mv-route-dot {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: var(--med-card);
    color: var(--med-primary);

    box-shadow: 0 10px 20px rgba(49, 86, 107, 0.15);

    flex-shrink: 0;
}


.mv-route-line {
    flex: 1;
    height: 3px;

    border-top: 3px dashed var(--med-teal);
}


.mv-delivery-content {
    max-width: 600px;
}


.mv-delivery-content p {
    margin-top: 18px;

    line-height: 1.75;

    opacity: 0.75;
}


.mv-delivery-steps {
    margin: 32px 0;
}


.mv-delivery-step {
    display: flex;
    gap: 17px;

    padding: 15px 0;

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


.mv-step-number {
    color: var(--med-teal);

    font-size: 0.82rem;
    font-weight: 900;
}


.mv-delivery-step h3 {
    color: var(--med-deep-blue);
    font-size: 1rem;
}


.mv-delivery-step p {
    margin-top: 4px;
    font-size: 0.83rem;
}


.mv-leaf-cluster {
    position: absolute;
}


.mv-delivery-leaves {
    left: -25px;
    top: 100px;

    display: flex;
    gap: -5px;

    color: var(--med-teal);

    font-size: 60px;

    opacity: 0.18;
}


.mv-large-leaf {
    position: absolute;

    font-size: 120px;

    color: var(--med-teal);
    opacity: 0.12;
}


.mv-large-leaf-left {
    left: -35px;
    bottom: 15px;
    transform: rotate(-30deg);
}


.mv-large-leaf-right {
    right: -35px;
    top: 25px;
    transform: rotate(30deg);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.mv-category-section {
    background: var(--med-card);
}


.mv-category-top {
    width: min(1300px, 100%);
    margin: auto;

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

    margin-bottom: 45px;
}


.mv-category-top .mv-section-heading {
    margin: 0;
    text-align: left;
}


.mv-text-link {
    color: var(--med-primary);
    font-weight: 900;
    font-size: 0.84rem;

    display: flex;
    align-items: center;
    gap: 8px;
}


.mv-category-track {
    width: min(1350px, 100%);
    margin: auto;

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


.mv-category-card {
    position: relative;

    min-height: 270px;

    padding: 27px 21px;

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

    background: var(--med-bg);

    overflow: hidden;

    transition: 0.35s ease;
}


.mv-category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--med-shadow);
}


.mv-category-icon {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    border-radius: 22px;

    background: var(--med-powder-blue);
    color: var(--med-primary);

    font-size: 1.35rem;
}


.mv-category-card h3 {
    margin-top: 20px;

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

    font-size: 1rem;
}


.mv-category-card p {
    margin-top: 9px;

    font-size: 0.78rem;
    line-height: 1.6;

    opacity: 0.7;
}


.mv-category-card a {
    position: absolute;
    left: 21px;
    bottom: 22px;

    color: var(--med-primary);

    font-size: 0.76rem;
    font-weight: 900;

    display: flex;
    gap: 7px;
    align-items: center;
}


.mv-category-leaf {
    position: absolute;

    right: -15px;
    bottom: -15px;

    font-size: 75px;

    color: var(--med-teal);
    opacity: 0.1;

    transform: rotate(-20deg);
}


/* =========================================================
   BRANDS
   ========================================================= */

.mv-brand-section {
    background:
        linear-gradient(120deg,
            rgba(120, 189, 181, 0.12),
            transparent 55%),
        var(--med-bg);
}


.mv-brand-section .mv-section-heading {
    margin-bottom: 40px;
}


.mv-brand-marquee {
    width: 100%;
    overflow: hidden;

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


.mv-brand-track {
    display: flex;
    width: max-content;
    gap: 18px;

    animation: mvBrandScroll 28s linear infinite;
}


.mv-brand-track:hover {
    animation-play-state: paused;
}


.mv-brand-pill {
    min-width: 145px;
    height: 75px;

    padding: 0 25px;

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

    background: var(--med-card);

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

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

    font-size: 1rem;
    font-weight: 900;

    box-shadow: 0 8px 20px rgba(49, 86, 107, 0.05);
}


@keyframes mvBrandScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


.mv-brand-leaf {
    position: absolute;

    color: var(--med-teal);
    opacity: 0.15;

    font-size: 130px;
}


.mv-brand-leaf-left {
    left: -55px;
    bottom: -30px;
    transform: rotate(-25deg);
}


.mv-brand-leaf-right {
    right: -55px;
    top: -30px;
    transform: rotate(30deg);
}


/* =========================================================
   PRESCRIPTION
   ========================================================= */

.mv-prescription-section {
    background: var(--med-card);
}


.mv-prescription-container {
    width: min(1350px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    gap: 70px;
}


.mv-prescription-content {
    max-width: 530px;
}


.mv-prescription-content p {
    margin-top: 20px;

    line-height: 1.75;
    opacity: 0.75;
}


.mv-prescription-content .mv-btn {
    margin-top: 25px;
}


.mv-prescription-flow {
    display: grid;
    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;
    gap: 12px;
}


.mv-prescription-step {
    text-align: center;
}


.mv-prescription-icon {
    width: 68px;
    height: 68px;

    margin: auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-primary);

    font-size: 1.25rem;

    transition: 0.3s ease;
}


.mv-prescription-step:hover .mv-prescription-icon {
    transform: translateY(-7px) rotate(5deg);
}


.mv-prescription-step strong {
    display: block;

    margin-top: 15px;

    color: var(--med-teal);

    font-size: 0.72rem;
}


.mv-prescription-step h3 {
    margin-top: 3px;

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

    font-size: 0.9rem;
}


.mv-prescription-step p {
    margin-top: 6px;

    font-size: 0.72rem;
    line-height: 1.5;

    opacity: 0.7;
}


.mv-flow-arrow {
    color: var(--med-teal);
}


.mv-prescription-leaf {
    position: absolute;

    right: -30px;
    bottom: -25px;

    font-size: 140px;

    color: var(--med-teal);
    opacity: 0.12;

    transform: rotate(30deg);
}


/* =========================================================
   CARE PROMISE
   ========================================================= */

.mv-care-section {
    background:
        linear-gradient(110deg,
            var(--med-deep-blue),
            var(--med-primary));

    color: #fff;
}


.mv-care-container {
    width: min(1250px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 70px;
    align-items: center;
}


.mv-care-intro h2 {
    color: #fff;
}


.mv-care-intro h2 span {
    color: #B9E3DF;
}


.mv-care-intro .mv-section-label {
    color: #B9E3DF;
}


.mv-care-orbit {
    position: relative;

    width: 150px;
    height: 150px;

    margin-bottom: 35px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}


.mv-care-orbit span {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

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


.mv-care-orbit span:nth-child(2) {
    top: -4px;
    left: 50%;
}


.mv-care-orbit span:nth-child(3) {
    right: 7px;
    bottom: 25px;
}


.mv-care-orbit span:nth-child(4) {
    left: 15px;
    bottom: 18px;
}


.mv-care-leaf {
    position: absolute;

    inset: 25px;

    border-radius: 50%;

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

    display: grid;
    place-items: center;

    color: #B9E3DF;

    font-size: 3.5rem;

    animation: mvCareRotate 8s linear infinite;
}


@keyframes mvCareRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.mv-care-cards {
    display: grid;
    gap: 17px;
}


.mv-care-card {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 23px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 23px;

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

    backdrop-filter: blur(10px);

    transition: 0.3s ease;
}


.mv-care-card:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.16);
}


.mv-care-card-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);
    color: #B9E3DF;
}


.mv-care-card h3 {
    font-size: 1rem;
}


.mv-care-card p {
    margin-top: 5px;

    font-size: 0.8rem;
    line-height: 1.6;

    opacity: 0.78;
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.mv-availability-section {
    background: var(--med-card);
}


.mv-availability-container {
    width: min(1300px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 80px;
}


.mv-availability-content {
    max-width: 570px;
}


.mv-availability-content p {
    margin-top: 18px;

    line-height: 1.75;

    opacity: 0.75;
}


.mv-availability-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 27px;
}


.mv-small-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 15px;

    border-radius: 50px;

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

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

    background: var(--med-bg);

    font-size: 0.72rem;
    font-weight: 900;

    transition: 0.25s ease;
}


.mv-small-btn:hover {
    background: var(--med-powder-blue);
    transform: translateY(-3px);
}


/* MAP */

.mv-map-visual {
    position: relative;

    min-height: 390px;

    border-radius: 40px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            var(--med-powder-blue),
            rgba(120, 189, 181, 0.22));
}


.mv-map-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(30deg,
            transparent 45%,
            rgba(91, 143, 168, 0.12) 46%,
            transparent 47%),
        linear-gradient(120deg,
            transparent 45%,
            rgba(91, 143, 168, 0.10) 46%,
            transparent 47%);

    background-size: 80px 80px;
}


.mv-map-route {
    position: absolute;

    width: 65%;
    height: 150px;

    left: 18%;
    top: 32%;

    border-top:
        3px dashed var(--med-primary);

    border-radius: 50%;

    transform: rotate(7deg);
}


.mv-map-pin {
    position: absolute;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: var(--med-card);
    color: var(--med-primary);

    box-shadow: 0 15px 30px rgba(49, 86, 107, 0.16);

    z-index: 3;

    animation: mvPinPulse 3s ease-in-out infinite;
}


.mv-pin-pharmacy {
    left: 12%;
    top: 27%;
}


.mv-pin-location {
    left: 45%;
    top: 50%;

    animation-delay: 0.8s;
}


.mv-pin-delivery {
    right: 10%;
    top: 34%;

    animation-delay: 1.5s;
}


@keyframes mvPinPulse {

    0%,
    100% {
        transform: translateY(0);
    }

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

}


.mv-map-leaf {
    position: absolute;

    right: 30px;
    bottom: 15px;

    color: var(--med-teal);

    font-size: 110px;

    opacity: 0.18;

    transform: rotate(25deg);
}


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

.mv-final-section {
    position: relative;

    overflow: hidden;

    padding: 120px 5% 110px;

    background:
        linear-gradient(115deg,
            var(--med-powder-blue),
            var(--med-bg));
}


.mv-final-container {
    width: min(1300px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    gap: 70px;

    position: relative;
    z-index: 4;
}


.mv-final-content {
    max-width: 680px;
}


.mv-final-content p {
    max-width: 620px;

    margin-top: 20px;

    line-height: 1.75;
    opacity: 0.76;
}


.mv-final-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 27px;
}


.mv-final-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 25px;

    font-size: 0.72rem;
    font-weight: 900;
}


.mv-final-trust i {
    color: var(--med-teal);
}


.mv-final-image {
    position: relative;

    padding: 15px;
}


.mv-final-image img {
    width: 100%;
    height: 350px;

    object-fit: cover;

    border-radius:
        50% 50% 45% 55% / 55% 45% 55% 45%;

    box-shadow: 0 30px 70px rgba(49, 86, 107, 0.14);
}


.mv-final-floating-pill {
    position: absolute;

    top: 10px;
    left: 0;

    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);
    color: var(--med-primary);

    box-shadow: 0 12px 30px rgba(49, 86, 107, 0.15);

    animation: mvFloatOne 5s ease-in-out infinite;
}


.mv-final-floating-leaf {
    position: absolute;

    right: 0;
    bottom: 0;

    font-size: 80px;

    color: var(--med-teal);
    opacity: 0.6;

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


.mv-final-wave {
    position: absolute;

    left: -5%;
    right: -5%;
    top: -100px;

    height: 170px;

    border-radius: 50%;

    background: var(--med-card);

    opacity: 0.75;
}


.mv-final-bottom-wave {
    position: absolute;

    left: -5%;
    right: -5%;
    bottom: -110px;

    height: 160px;

    border-radius: 50% 50% 0 0;

    background: var(--med-teal);

    opacity: 0.18;
}


.mv-final-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: 0.23;

    font-size: 150px;

    z-index: 1;
}


.mv-final-leaf-left {
    left: -60px;
    bottom: 30px;
    transform: rotate(-30deg);
}


.mv-final-leaf-right {
    right: -55px;
    top: 70px;
    transform: rotate(30deg);
}


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

.mv-reveal {
    opacity: 0;
    transform: translateY(45px);

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


.mv-reveal.mv-visible {
    opacity: 1;
    transform: translateY(0);
}


.mv-trust-card:nth-child(2),
.mv-category-card:nth-child(2),
.mv-care-card:nth-child(2) {
    transition-delay: 0.08s;
}


.mv-trust-card:nth-child(3),
.mv-category-card:nth-child(3),
.mv-care-card:nth-child(3) {
    transition-delay: 0.16s;
}


.mv-trust-card:nth-child(4),
.mv-category-card:nth-child(4) {
    transition-delay: 0.24s;
}


.mv-category-card:nth-child(5) {
    transition-delay: 0.32s;
}


.mv-category-card:nth-child(6) {
    transition-delay: 0.40s;
}


/* =========================================================
   RESPONSIVE — 1200+
   ========================================================= */

@media (min-width: 1200px) {

    .med-navbar-container {
        width: min(1450px, 94%);
    }

    .mv-hero {
        padding-left: 6%;
        padding-right: 6%;
    }

}


/* =========================================================
   1024–1199 LAPTOP
   FULL NAVBAR — NO HAMBURGER
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .med-navbar-container {
        gap: 10px;
    }

    .med-desktop-nav {
        gap: 0;
    }

    .med-nav-link {
        padding: 8px 7px;
        font-size: 0.78rem;
    }

    .med-navbar-actions {
        gap: 4px;
    }

    .med-action-button {
        width: 36px;
        height: 36px;
    }

    .med-login-button {
        padding: 9px 15px;
    }

    .mv-category-track {
        grid-template-columns: repeat(3, 1fr);
    }

}


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

@media (max-width: 1023px) {

    .med-desktop-nav,
    .med-navbar-actions {
        display: none;
    }


    .med-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }


    .med-hamburger {
        width: 43px;
        height: 43px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        border: 1px solid var(--med-border);
        border-radius: 50%;

        background: transparent;

        cursor: pointer;
    }


    .med-hamburger span {
        width: 19px;
        height: 2px;

        background: var(--med-nav-text);

        border-radius: 20px;

        transition: 0.3s ease;
    }


    .med-mobile-menu {
        position: fixed;

        top: 0;
        left: -100%;

        width: min(340px, 88%);
        height: 100vh;

        display: flex;
        flex-direction: column;

        background: var(--med-card);

        z-index: 10002;

        box-shadow: 15px 0 50px rgba(0, 0, 0, 0.15);

        transition: left 0.35s ease;

        padding: 75px 20px 20px;
    }


    .med-mobile-menu.active {
        left: 0;
    }


    .med-mobile-menu-inner {
        flex: 1;
        overflow-y: auto;
    }
    /* =========================================================
   RTL TOGGLE — PREVENT OFF-CANVAS PANELS FROM SLIDING
   ACROSS THE SCREEN WHEN DIRECTION FLIPS
   ========================================================= */

html.med-no-rtl-transition .med-mobile-menu,
html.med-no-rtl-transition .products-filter-sidebar {
    transition: none !important;
}


    .med-mobile-close {
        position: absolute;

        top: 20px;
        right: 20px;

        width: 38px;
        height: 38px;

        border: 1px solid var(--med-border);
        border-radius: 50%;

        background: transparent;
        color: var(--med-nav-text);

        cursor: pointer;
    }


    .med-mobile-link {
        width: 100%;

        border: 0;
        background: transparent;

        padding: 15px 8px;

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

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

        font-size: 0.92rem;
        font-weight: 800;

        cursor: pointer;
    }


    .med-mobile-link span {
        display: flex;
        align-items: center;
        gap: 12px;
    }


    .med-mobile-submenu {
        display: none;

        padding-left: 35px;
    }


    .med-mobile-dropdown.open .med-mobile-submenu {
        display: block;
    }


    .med-mobile-submenu a {
        display: block;

        padding: 11px;

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

        font-size: 0.82rem;
        font-weight: 700;
    }


    /* ACTIVE NAV STATE (MOBILE) */

    .med-mobile-link.active {
        color: var(--med-deep-blue);
        background: var(--med-nav-hover);
    }


    .med-mobile-submenu a.active {
        color: var(--med-deep-blue);
        background: var(--med-powder-blue);
    }


    .med-mobile-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        padding: 14px;

        background: var(--med-deep-blue);
        color: #fff;

        border-radius: 50px;

        font-weight: 800;
    }


    .med-menu-overlay {
        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, 0.35);

        z-index: 10001;

        display: block;

        opacity: 0;
        visibility: hidden;

        transition: 0.3s ease;
    }


    .med-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    .mv-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }


    .mv-hero-content {
        max-width: 800px;
        margin: auto;
    }


    .mv-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .mv-hero-buttons,
    .mv-trust-row {
        justify-content: center;
    }


    .mv-hero-visual {
        height: 510px;
    }


    .mv-doctor-shape {
        height: 470px;
    }


    .mv-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .mv-delivery-container,
    .mv-prescription-container,
    .mv-care-container,
    .mv-availability-container,
    .mv-final-container {
        grid-template-columns: 1fr;
    }


    .mv-delivery-content,
    .mv-prescription-content,
    .mv-availability-content,
    .mv-final-content {
        max-width: 800px;
    }


    .mv-category-track {
        grid-template-columns: repeat(3, 1fr);
    }


    .mv-prescription-flow {
        max-width: 900px;
        margin: auto;
    }


    .mv-care-intro {
        text-align: center;
    }


    .mv-care-orbit {
        margin-left: auto;
        margin-right: auto;
    }


    .mv-care-intro .mv-section-label {
        justify-content: center;
    }

}


/* =========================================================
   768–1023 TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .mv-hero-content h1 {
        font-size: 4rem;
    }


    .mv-hero-visual {
        width: 650px;
        max-width: 100%;
        margin: auto;
    }


    .mv-category-track {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   481–767 MOBILE-L/M
   ========================================================= */

@media (max-width: 767px) {

    .med-navbar-container {
        min-height: 72px;
    }


    .med-brand-name {
        font-size: 1.35rem;
    }


    .med-leaf-logo {
        font-size: 1.7rem;
    }


    .med-mobile-actions {
        gap: 5px;
    }


    .med-action-button {
        width: 37px;
        height: 37px;
    }


    .mv-section {
        padding: 80px 5%;
    }


    .mv-hero {
        min-height: auto;
        padding: 65px 5% 110px;
    }


    .mv-hero-content h1 {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: -2px;
    }


    .mv-hero-content p {
        font-size: 0.94rem;
    }


    .mv-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }


    .mv-btn {
        width: 100%;
    }


    .mv-trust-row {
        gap: 11px 17px;
    }


    .mv-trust-row div {
        font-size: 0.68rem;
    }


    .mv-hero-visual {
        height: 410px;
    }


    .mv-doctor-shape {
        width: 88%;
        height: 390px;
    }


    .mv-pill {
        width: 39px;
        height: 21px;
    }


    .mv-floating-icon {
        width: 48px;
        height: 48px;
    }


    .mv-health-icon {
        top: 40px;
    }


    .mv-shield-icon {
        top: 190px;
    }


    .mv-delivery-icon {
        bottom: 55px;
    }


    .mv-hero-leaf {
        font-size: 55px;
    }


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


    .mv-trust-card {
        min-height: 215px;
    }


    .mv-delivery-image img {
        height: 330px;
    }


    .mv-delivery-container {
        gap: 45px;
    }


    .mv-category-top {
        display: block;
    }


    .mv-category-top .mv-section-heading {
        margin-bottom: 20px;
    }


    .mv-category-track {
        grid-template-columns: repeat(2, 1fr);
    }


    .mv-brand-pill {
        min-width: 125px;
        height: 65px;
    }


    .mv-prescription-flow {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .mv-flow-arrow {
        transform: rotate(90deg);
    }


    .mv-map-visual {
        min-height: 300px;
    }


    .mv-final-image img {
        height: 290px;
    }


    .mv-final-trust {
        flex-direction: column;
        gap: 9px;
    }

}


/* =========================================================
   360–480 MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .med-navbar-container {
        width: 92%;
    }


    .med-brand {
        gap: 7px;
    }


    .med-brand-name {
        font-size: 1.22rem;
    }


    .med-mobile-menu {
        width: 88%;
    }


    .mv-section {
        padding: 70px 5%;
    }


    .mv-hero {
        padding-top: 55px;
    }


    .mv-eyebrow {
        font-size: 0.63rem;
    }


    .mv-hero-content h1 {
        font-size: 2.65rem;
    }


    .mv-hero-content p {
        font-size: 0.87rem;
        line-height: 1.65;
    }


    .mv-hero-visual {
        height: 350px;
    }


    .mv-doctor-shape {
        height: 335px;
    }


    .mv-pill-one {
        left: 2%;
    }


    .mv-pill-two {
        right: 0;
    }


    .mv-pill-three {
        left: 0;
        bottom: 70px;
    }


    .mv-pill-four {
        right: 0;
        bottom: 110px;
    }


    .mv-floating-icon {
        width: 42px;
        height: 42px;
    }


    .mv-floating-icon i {
        font-size: 0.85rem;
    }


    .mv-hero-scroll {
        display: none;
    }


    .mv-section-heading h2,
    .mv-delivery-content h2,
    .mv-prescription-content h2,
    .mv-care-intro h2,
    .mv-availability-content h2,
    .mv-final-content h2 {
        font-size: 2rem;
        letter-spacing: -1px;
    }


    .mv-card-icon {
        width: 50px;
        height: 50px;
    }


    .mv-delivery-image img {
        height: 270px;
    }


    .mv-delivery-route {
        left: 5%;
        right: 5%;
    }


    .mv-route-dot {
        width: 42px;
        height: 42px;
        font-size: 0.8rem;
    }


    .mv-small-btn {
        width: 100%;
        justify-content: center;
    }


    .mv-map-visual {
        min-height: 250px;
        border-radius: 28px;
    }


    .mv-category-track {
        grid-template-columns: 1fr;
    }


    .mv-map-pin {
        width: 48px;
        height: 48px;
    }


    .mv-final-section {
        padding-left: 5%;
        padding-right: 5%;
    }

}


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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   HOME DELIVERY - DESKTOP HERO CROP AND READABILITY
   ========================================================= */

@media (min-width: 1200px) {

    .home-delivery-page .hd-hero-image img {
        object-position: center 38%;
    }

}

.home-delivery-page .hd-section-label,
.home-delivery-page .hd-eyebrow {
    font-size: 13px;
}

.home-delivery-page .hd-section-heading p,
.home-delivery-page .hd-details-intro > p,
.home-delivery-page .hd-flex-heading > p,
.home-delivery-page .hd-coverage-content > p,
.home-delivery-page .hd-support-heading > p,
.home-delivery-page .hd-final-content > p {
    font-size: 17px;
}

.home-delivery-page .hd-benefit small {
    font-size: 12px;
}

.home-delivery-page .hd-benefit strong {
    font-size: 15px;
}

.home-delivery-page .hd-benefit span {
    font-size: 13px;
}

.home-delivery-page .hd-typewriter-box {
    font-size: 15px;
}

.home-delivery-page .hd-primary-btn,
.home-delivery-page .hd-secondary-btn,
.home-delivery-page .hd-location-button,
.home-delivery-page .hd-form-submit,
.home-delivery-page .hd-coverage-form button {
    font-size: 14px;
}

.home-delivery-page .hd-form-heading span {
    font-size: 12px;
}

.home-delivery-page .hd-form-group-title {
    font-size: 14px;
}

.home-delivery-page .hd-field label,
.home-delivery-page .hd-field input,
.home-delivery-page .hd-field select,
.home-delivery-page .hd-field textarea,
.home-delivery-page .hd-preferences label,
.home-delivery-page .hd-coverage-form input {
    font-size: 14px;
}

.home-delivery-page .hd-route-node,
.home-delivery-page .hd-step-number,
.home-delivery-page .hd-step-content span,
.home-delivery-page .hd-flex-point strong,
.home-delivery-page .hd-flex-point span,
.home-delivery-page .hd-coverage-result,
.home-delivery-page .hd-support-item p,
.home-delivery-page .hd-final-package span {
    font-size: 13px;
}

.home-delivery-page .hd-step-content p {
    font-size: 14px;
}

.home-delivery-page .hd-step-content h3 {
    font-size: 20px;
}

.home-delivery-page .hd-flex-point strong {
    font-size: 14px;
}

.home-delivery-page .hd-support-item strong {
    font-size: 16px;
}

.home-delivery-page .hd-final-package strong {
    font-size: 22px;
}

/* =========================================================
   MEDIVANA - FOOTER
   ========================================================= */

.med-footer {
    --footer-bg: var(--med-deep-blue);
    --footer-card: rgba(255, 255, 255, 0.08);
    --footer-text: #FFFDF8;
    --footer-muted: rgba(255, 253, 248, 0.72);

    position: relative;
    width: 100%;
    margin-top: 0;
    overflow: hidden;

    background: var(--footer-bg);
    color: var(--footer-text);
}


/* =========================================================
   MEDIVANA FOOTER TOP ACCENT
   ========================================================= */

/* The old SVG wave filled a separate cream box and created the
   unwanted white/cream gap above the footer. Keep the wave markup
   for compatibility, but do not render that box. */
.med-footer-wave {
    display: none;
}

/* Compact curved teal accent. It touches the footer directly and
   never creates a white/cream section. */
.med-footer::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -4%;
    width: 108%;
    height: 36px;
    border-top: 4px solid var(--med-teal);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
    z-index: 1;
}

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

.med-footer-inner {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 38px 28px 25px;
}


/* =========================================================
   DECORATIVE LEAVES
   ========================================================= */

.med-footer-leaf {
    position: absolute;

    z-index: 2;

    color: var(--med-teal);

    opacity: 0.13;

    pointer-events: none;

    animation: medFooterLeafFloat 7s ease-in-out infinite;
}

.med-footer-leaf-1 {
    top: 175px;
    left: 2%;

    font-size: 7rem;

    transform: rotate(-35deg);
}

.med-footer-leaf-2 {
    right: 3%;
    bottom: 80px;

    font-size: 6rem;

    transform: rotate(35deg);

    animation-delay: -2s;
}

.med-footer-leaf-3 {
    right: 28%;
    top: 280px;

    font-size: 3.5rem;

    transform: rotate(-15deg);

    opacity: 0.09;

    animation-delay: -4s;
}

@keyframes medFooterLeafFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}


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

.med-footer-top {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.35fr;

    gap: 30px;

    padding-bottom: 48px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}


/* =========================================================
   BRAND
   ========================================================= */

.med-footer-brand {
    padding-right: 20px;
}

.med-footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--footer-text);

    text-decoration: none;

    font-size: 1.75rem;
    font-weight: 800;

    letter-spacing: -0.5px;

    margin-bottom: 18px;
}

.med-footer-logo-icon {
    color: var(--med-teal);

    font-size: 2rem;

    transform: rotate(-10deg);

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.med-footer-logo:hover .med-footer-logo-icon {
    color: var(--med-peach);

    transform:
        rotate(5deg) scale(1.12);
}

.med-footer-description {
    max-width: 350px;

    margin: 0 0 22px;

    color: var(--footer-muted);

    font-size: 0.94rem;

    line-height: 1.8;
}


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

.med-footer-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.med-footer-trust span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 50px;

    background: var(--footer-card);

    color: var(--footer-muted);

    font-size: 0.75rem;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.med-footer-trust span i {
    color: var(--med-teal);
}

.med-footer-trust span:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.13);
}


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

.med-footer-column h3 {
    position: relative;

    margin: 0 0 22px;

    color: var(--footer-text);

    font-size: 1rem;

    font-weight: 800;
}

.med-footer-column h3::after {
    content: "";

    display: block;

    width: 32px;
    height: 3px;

    margin-top: 8px;

    border-radius: 20px;

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

.med-footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.med-footer-column li {
    margin-bottom: 11px;
}

.med-footer-column li a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--footer-muted);

    text-decoration: none;

    font-size: 0.86rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.med-footer-column li a i {
    font-size: 0.58rem;

    color: var(--med-teal);

    transition:
        transform 0.25s ease;
}

.med-footer-column li a:hover {
    color: var(--footer-text);

    transform: translateX(5px);
}

.med-footer-column li a:hover i {
    transform: translateX(3px);
}


/* =========================================================
   CONTACT
   ========================================================= */

.med-footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 15px;
}

.med-footer-contact-icon {
    flex-shrink: 0;

    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    background: var(--footer-card);

    color: var(--med-teal);

    font-size: 0.8rem;
}

.med-footer-contact-item p,
.med-footer-contact-item a {
    margin: 0;

    padding-top: 5px;

    color: var(--footer-muted);

    text-decoration: none;

    font-size: 0.82rem;

    line-height: 1.6;
}

.med-footer-contact-item a:hover {
    color: var(--footer-text);
}

.med-footer-open {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 8px;

    padding: 12px 14px;

    border-radius: 15px;

    background: var(--footer-card);

    color: var(--footer-muted);

    font-size: 0.76rem;
}

.med-footer-open>i {
    color: var(--med-peach);

    font-size: 1rem;
}

.med-footer-open span {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.med-footer-open strong {
    color: var(--footer-text);

    font-size: 0.77rem;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.med-footer-newsletter {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 35px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);
}

.med-newsletter-content {
    flex: 1;
}

.med-newsletter-label {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--med-teal);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.med-newsletter-content h3 {
    margin: 0 0 7px;

    color: var(--footer-text);

    font-size: 1.45rem;

    font-weight: 800;
}

.med-newsletter-content p {
    margin: 0;

    color: var(--footer-muted);

    font-size: 0.82rem;
}


/* =========================================================
   NEWSLETTER FORM
   ========================================================= */

.med-newsletter-form {
    display: flex;

    align-items: center;

    gap: 9px;

    width: min(100%, 500px);
}

.med-newsletter-input {
    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

    height: 52px;

    padding: 0 15px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 50px;

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

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.med-newsletter-input:focus-within {
    border-color: var(--med-teal);

    background: rgba(255, 255, 255, 0.11);
}

.med-newsletter-input>i {
    flex-shrink: 0;

    margin-right: 10px;

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

.med-newsletter-input input {
    width: 100%;

    min-width: 0;

    border: none;
    outline: none;

    background: transparent;

    color: var(--footer-text);

    font-family: inherit;

    font-size: 0.82rem;
}

.med-newsletter-input input::placeholder {
    color: rgba(255, 253, 248, 0.5);
}

.med-newsletter-form button {
    flex-shrink: 0;

    height: 52px;

    padding: 0 20px;

    border: none;

    border-radius: 50px;

    background: var(--med-teal);

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

    font-family: inherit;

    font-size: 0.8rem;

    font-weight: 800;

    cursor: pointer;

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

.med-newsletter-form button i {
    margin-left: 7px;

    transition: transform 0.3s ease;
}

.med-newsletter-form button:hover {
    transform: translateY(-3px);

    background: var(--med-peach);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}

.med-newsletter-form button:hover i {
    transform: translateX(4px);
}


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

.med-footer-bottom {
    display: grid;

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

    align-items: center;

    gap: 20px;

    padding-top: 22px;
}

.med-footer-bottom p {
    margin: 0;

    color: var(--footer-muted);

    font-size: 0.72rem;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.med-footer-social {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;
}

.med-footer-social a {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--footer-card);

    color: var(--footer-muted);

    text-decoration: none;

    font-size: 0.8rem;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.med-footer-social a:hover {
    transform:
        translateY(-5px) rotate(-5deg);

    background: var(--med-teal);

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


/* =========================================================
   LEGAL
   ========================================================= */

.med-footer-legal {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}

.med-footer-legal a {
    color: var(--footer-muted);

    text-decoration: none;

    font-size: 0.72rem;

    transition: color 0.25s ease;
}

.med-footer-legal a:hover {
    color: var(--footer-text);
}

.med-footer-legal span {
    width: 3px;
    height: 3px;

    border-radius: 50%;

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


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

@media (max-width: 1023px) {

    .med-footer {
        margin-top: 0;
    }

    .med-footer-inner {
        padding:
            38px 22px 24px;
    }

    .med-footer-top {
        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 35px;
    }

    .med-footer-contact {
        grid-column: 1 / -1;

        display: grid;

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

        column-gap: 35px;
    }

    .med-footer-contact h3 {
        grid-column: 1 / -1;
    }

    .med-footer-open {
        align-self: start;
    }

    .med-footer-newsletter {
        align-items: flex-start;

        flex-direction: column;
        margin-left: 22px;
        margin-right: 22px;
        gap: 20px;
    }

    .med-newsletter-form {
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .med-footer {
        margin-top: 0;
    }

    .med-footer-inner {
        padding:
            34px 17px 20px;
    }

    .med-footer-top {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 35px;
    }

    .med-footer-brand {
        padding-right: 0;
    }

    .med-footer-description {
        max-width: 100%;
    }

    .med-footer-contact {
        display: block;
    }

    .med-footer-contact-item {
        margin-bottom: 12px;
    }

    .med-footer-newsletter {
        padding: 30px 0;
         margin-left: 17px;
        margin-right: 17px;
    }

    .med-newsletter-content h3 {
        font-size: 1.25rem;
    }

    .med-newsletter-form {
        flex-direction: column;

        align-items: stretch;
    }

    .med-newsletter-input,
    .med-newsletter-form button {
        width: 100%;
    }

    .med-footer-bottom {
        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;

        gap: 16px;
    }

    .med-footer-legal {
        justify-content: center;
    }

    .med-footer-leaf-1 {
        font-size: 5rem;

        left: -20px;
    }

    .med-footer-leaf-2 {
        font-size: 4rem;

        right: -15px;
    }

    .med-footer-leaf-3 {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .med-footer-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .med-footer-logo {
        font-size: 1.5rem;
    }

    .med-footer-logo-icon {
        font-size: 1.7rem;
    }

    .med-footer-column h3 {
        margin-bottom: 17px;
    }

    .med-footer-trust {
        gap: 6px;
    }

    .med-footer-trust span {
        font-size: 0.68rem;

        padding: 7px 9px;
    }

    .med-newsletter-content h3 {
        font-size: 1.12rem;
    }

    .med-newsletter-content p {
        line-height: 1.6;
    }

    .med-footer-social a {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   MEDIVANA NAVBAR - FINAL RESPONSIVE CONSISTENCY FIX
   ========================================================= */

.med-action-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
}

.med-rtl-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.med-login-button {
    min-width: 82px;
    height: 42px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .med-navbar-container {
        width: 97%;
        min-height: 76px;
        gap: 8px;
    }

    .med-desktop-nav {
        gap: 0;
    }

    .med-nav-link {
        padding: 7px 7px;
        font-size: 0.76rem;
    }

    .med-navbar-actions {
        gap: 4px;
    }

    .med-action-button,
    .med-rtl-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .med-login-button {
        min-width: 62px;
        height: 36px;
        padding: 0 12px;
        font-size: 0.78rem;
    }
}

@media (max-width: 1023px) {
    .med-navbar-container {
        width: min(94%, 1400px);
        min-height: 76px;
    }

    .med-desktop-nav,
    .med-navbar-actions {
        display: none;
    }

    .med-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .med-mobile-actions .med-action-button,
    .med-mobile-actions .med-rtl-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .med-hamburger {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

@media (max-width: 767px) {
    .med-navbar-container {
        width: 94%;
        min-height: 72px;
    }

    .med-brand-name {
        font-size: 1.3rem;
    }

    .med-leaf-logo {
        font-size: 1.7rem;
    }

    .med-mobile-actions {
        gap: 5px;
    }

    .med-mobile-actions .med-action-button,
    .med-mobile-actions .med-rtl-button,
    .med-hamburger {
        width: 37px;
        min-width: 37px;
        height: 37px;
    }
}

@media (max-width: 480px) {
    .med-navbar-container {
        width: 94%;
        min-height: 68px;
    }

    .med-brand-name {
        font-size: 1.18rem;
    }

    .med-leaf-logo {
        font-size: 1.55rem;
    }

    .med-mobile-actions {
        gap: 4px;
    }

    .med-mobile-actions .med-action-button,
    .med-mobile-actions .med-rtl-button,
    .med-hamburger {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
}

@media (max-width: 360px) {
    .med-brand-name {
        font-size: 1.05rem;
    }

    .med-leaf-logo {
        font-size: 1.45rem;
    }

    .med-mobile-actions {
        gap: 3px;
    }

    .med-mobile-actions .med-action-button,
    .med-mobile-actions .med-rtl-button,
    .med-hamburger {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }
}

/* =========================================================
   NEWSLETTER SIDE SPACING
   ========================================================= */

.med-footer-newsletter {
    margin-left: 28px;
    margin-right: 28px;
}
/* Small mobile */
@media (max-width: 480px) {
    .med-footer-newsletter {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/* =========================================================
   MEDIVANA HOMEPAGE 2
   PREMIUM ANIMATED EXPERIENCE
   ========================================================= */

.med-home2 {
    overflow: hidden;
    background: var(--med-bg);
    color: var(--med-text);
}


/* =========================================================
   COMMON
   ========================================================= */

.h2-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--med-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.h2-eyebrow i {
    color: var(--med-teal);
}

.h2-section-heading {
    position: relative;
    z-index: 5;
    max-width: 700px;
    margin-bottom: 55px;
}

.h2-section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.h2-section-heading h2,
.h2-finder-content h2,
.h2-essentials-content h2,
.h2-prescription-content h2,
.h2-final-content h2 {
    margin: 0;
    color: var(--med-deep-blue);
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    line-height: 0.98;
    font-weight: 900;
}

.h2-section-heading h2 span,
.h2-finder-content h2 span,
.h2-essentials-content h2 span,
.h2-prescription-content h2 span,
.h2-final-content h2 span {
    display: block;
    color: var(--med-teal);
}

.h2-section-heading p,
.h2-finder-content > p,
.h2-essentials-content > p,
.h2-prescription-content > p,
.h2-final-content > p {
    color: var(--med-text);
    opacity: .78;
    line-height: 1.8;
    margin-top: 22px;
    max-width: 620px;
}

.h2-reveal {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.h2-reveal.h2-visible {
    opacity: 1;
    transform: translateY(0);
}


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

.h2-primary-btn,
.h2-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.h2-primary-btn {
    background: var(--med-deep-blue);
    color: #FFFDF8;
}

.h2-outline-btn {
    border: 1.5px solid var(--med-primary);
    color: var(--med-deep-blue);
    background: transparent;
}

.h2-primary-btn:hover,
.h2-outline-btn:hover {
    transform: translateY(-5px);
}

.h2-primary-btn i,
.h2-outline-btn i {
    transition: transform .3s ease;
}

.h2-primary-btn:hover i,
.h2-outline-btn:hover i {
    transform: translateX(5px);
}


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

.h2-hero {
    position: relative;
    min-height: 850px;
    background:
        radial-gradient(circle at 72% 42%,
            rgba(120,189,181,.30),
            transparent 30%),
        radial-gradient(circle at 91% 35%,
            rgba(243,182,162,.28),
            transparent 23%),
        var(--med-bg);
}

.h2-hero-container {
    position: relative;
    z-index: 5;
    width: min(1500px, 94%);
    min-height: 850px;
    margin: auto;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: 10px;
}

.h2-hero-content {
    padding: 70px 0 120px;
}

.h2-hero-title {
    max-width: 700px;
    margin: 0;
    color: var(--med-deep-blue);
    font-size: clamp(3.1rem, 5vw, 6.3rem);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -3px;
}

.h2-hero-title span {
    display: block;
    color: var(--med-teal);
}

.h2-hero-text {
    max-width: 600px;
    margin: 28px 0;
    color: var(--med-text);
    opacity: .78;
    font-size: 1.05rem;
    line-height: 1.8;
}

.h2-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.h2-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 35px;
}

.h2-trust-row div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--med-text);
    font-size: .82rem;
    font-weight: 700;
}

.h2-trust-row i {
    color: var(--med-teal);
}


/* HERO VISUAL */

.h2-hero-visual {
    position: relative;
    width: min(720px, 100%);
    height: 720px;
    margin: auto;
}

.h2-hero-aura {
    position: absolute;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(120,189,181,.42),
            rgba(220,236,242,.20) 48%,
            transparent 70%);
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    animation: h2AuraPulse 5s ease-in-out infinite;
}

@keyframes h2AuraPulse {
    0%,100% {
        transform: translate(-50%,-50%) scale(1);
    }

    50% {
        transform: translate(-50%,-50%) scale(1.08);
    }
}


/* ORBIT */

.h2-orbit {
    position: absolute;
    border: 1px solid rgba(91,143,168,.25);
    border-radius: 50%;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%);
}

.h2-orbit-one {
    width: 510px;
    height: 220px;
    transform: translate(-50%,-50%) rotate(-18deg);
    animation: h2OrbitRotate 18s linear infinite;
}

.h2-orbit-two {
    width: 580px;
    height: 300px;
    transform: translate(-50%,-50%) rotate(22deg);
    animation: h2OrbitRotateReverse 23s linear infinite;
}

.h2-orbit-three {
    width: 440px;
    height: 590px;
    transform: translate(-50%,-50%) rotate(58deg);
    border-color: rgba(120,189,181,.25);
    animation: h2OrbitRotate 27s linear infinite;
}

@keyframes h2OrbitRotate {
    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes h2OrbitRotateReverse {
    from {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}


/* BOTTLE */

.h2-bottle-wrap {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 48%;
    width: 290px;
    transform: translate(-50%, 150%);
    opacity: 0;
    animation:
        h2BottleEntrance 1.8s cubic-bezier(.16,1,.3,1) .3s forwards,
        h2BottleFloat 5s ease-in-out 2.1s infinite;
}

.h2-bottle {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 30px 30px rgba(49,86,107,.20));
}

@keyframes h2BottleEntrance {
    0% {
        transform: translate(-50%, 150%) scale(.72) rotate(-8deg);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -55%) scale(1.03) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes h2BottleFloat {
    0%,100% {
        transform: translate(-50%, -50%) rotate(-1deg);
    }

    50% {
        transform: translate(-50%, -58%) rotate(2deg);
    }
}

.h2-bottle-shadow {
    position: absolute;
    width: 220px;
    height: 35px;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%);
    background: rgba(49,86,107,.15);
    filter: blur(18px);
    border-radius: 50%;
}


/* CAPSULES */

.h2-orbit-item {
    position: absolute;
    z-index: 10;
    width: 68px;
    height: 30px;
    border-radius: 50px;
    background: linear-gradient(
        90deg,
        var(--med-primary) 50%,
        var(--med-card) 50%
    );
    box-shadow: 0 12px 25px rgba(49,86,107,.16);
}

.h2-capsule-one {
    left: 8%;
    top: 38%;
    transform: rotate(-35deg);
    animation: h2CapsuleFloatOne 5s ease-in-out infinite;
}

.h2-capsule-two {
    right: 8%;
    top: 28%;
    transform: rotate(30deg);
    animation: h2CapsuleFloatTwo 6s ease-in-out infinite;
}

.h2-capsule-three {
    left: 22%;
    bottom: 25%;
    transform: rotate(65deg);
    animation: h2CapsuleFloatOne 5.5s ease-in-out infinite reverse;
}

.h2-capsule-four {
    right: 18%;
    bottom: 23%;
    transform: rotate(-55deg);
    animation: h2CapsuleFloatTwo 4.8s ease-in-out infinite reverse;
}

@keyframes h2CapsuleFloatOne {
    0%,100% {
        translate: 0 0;
    }

    50% {
        translate: 12px -20px;
    }
}

@keyframes h2CapsuleFloatTwo {
    0%,100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: -15px 18px;
        rotate: 20deg;
    }
}


/* LEAVES */

.h2-orbit-leaf {
    position: absolute;
    z-index: 9;
    color: var(--med-teal);
    font-size: 2rem;
}

.h2-orbit-leaf-one {
    top: 17%;
    left: 30%;
    animation: h2LeafDrift 6s ease-in-out infinite;
}

.h2-orbit-leaf-two {
    top: 16%;
    right: 28%;
    transform: rotate(65deg);
    animation: h2LeafDrift 5s ease-in-out infinite reverse;
}

.h2-orbit-leaf-three {
    bottom: 17%;
    left: 14%;
    transform: rotate(-45deg);
    animation: h2LeafDrift 7s ease-in-out infinite;
}

.h2-orbit-leaf-four {
    bottom: 14%;
    right: 20%;
    transform: rotate(80deg);
    animation: h2LeafDrift 5.5s ease-in-out infinite reverse;
}

@keyframes h2LeafDrift {
    0%,100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 12px -22px;
        rotate: 15deg;
    }
}


/* PARTICLES */

.h2-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--med-teal);
}

.h2-particle-one {
    width: 11px;
    height: 11px;
    left: 18%;
    top: 20%;
    animation: h2Particle 4s infinite;
}

.h2-particle-two {
    width: 17px;
    height: 17px;
    right: 17%;
    top: 43%;
    background: var(--med-peach);
    animation: h2Particle 5s infinite reverse;
}

.h2-particle-three {
    width: 8px;
    height: 8px;
    left: 13%;
    bottom: 35%;
    animation: h2Particle 4.5s infinite;
}

.h2-particle-four {
    width: 13px;
    height: 13px;
    right: 10%;
    bottom: 35%;
    background: var(--med-peach);
    animation: h2Particle 5.5s infinite reverse;
}

.h2-particle-five {
    width: 7px;
    height: 7px;
    left: 50%;
    top: 8%;
    animation: h2Particle 3.5s infinite;
}

@keyframes h2Particle {
    0%,100% {
        transform: translateY(0);
    }

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


/* FLOATING LABELS */

.h2-floating-label {
    position: absolute;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    border-radius: 50px;
    background: rgba(255,253,248,.72);
    backdrop-filter: blur(12px);
    color: var(--med-deep-blue);
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(49,86,107,.12);
    animation: h2LabelFloat 5s ease-in-out infinite;
}

.h2-floating-label i {
    color: var(--med-teal);
}

.h2-label-medicine {
    left: 2%;
    top: 48%;
}

.h2-label-vitamin {
    right: 3%;
    top: 51%;
    animation-delay: 1s;
}

.h2-label-baby {
    right: 13%;
    bottom: 10%;
    animation-delay: 1.8s;
}

@keyframes h2LabelFloat {
    0%,100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}


/* PEACH ORBS */

.h2-peach-orb {
    position: absolute;
    border-radius: 50%;
    background: var(--med-peach);
    opacity: .7;
    filter: blur(.2px);
}

.h2-peach-one {
    width: 22px;
    height: 22px;
    top: 23%;
    right: 20%;
    animation: h2PeachBounce 4s infinite;
}

.h2-peach-two {
    width: 34px;
    height: 34px;
    bottom: 30%;
    left: 18%;
    animation: h2PeachBounce 5s infinite reverse;
}

.h2-peach-three {
    width: 13px;
    height: 13px;
    top: 35%;
    left: 28%;
    animation: h2PeachBounce 3.5s infinite;
}

@keyframes h2PeachBounce {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-25px) scale(1.15);
    }
}


/* STORY */

.h2-story-bubble {
    position: absolute;
    right: 0;
    top: 5%;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--med-deep-blue);
}

.h2-story-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--med-peach);
    color: var(--med-deep-blue);
    animation: h2Ripple 2.5s infinite;
}

@keyframes h2Ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(243,182,162,.6);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(243,182,162,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243,182,162,0);
    }
}

.h2-story-bubble small,
.h2-story-bubble strong {
    display: block;
}

.h2-story-bubble small {
    color: var(--med-primary);
    font-size: .65rem;
    letter-spacing: 1px;
}

.h2-story-bubble strong {
    font-size: .85rem;
}


/* PLATFORM */

.h2-hero-platform {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 320px;
    height: 45px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(255,253,248,.95),
            rgba(220,236,242,.5)
        );
    box-shadow: 0 20px 35px rgba(49,86,107,.12);
}

.h2-hero-platform div {
    position: absolute;
    inset: 8px 35px;
    border-radius: 50%;
    border: 2px solid var(--med-teal);
    opacity: .5;
}


/* HERO DECOR */

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

.h2-glow-one {
    width: 220px;
    height: 220px;
    left: -100px;
    top: 10%;
    background: rgba(120,189,181,.25);
}

.h2-glow-two {
    width: 250px;
    height: 250px;
    right: -100px;
    bottom: 10%;
    background: rgba(243,182,162,.22);
}

.h2-leaf {
    position: absolute;
    color: var(--med-teal);
    opacity: .32;
    font-size: 5rem;
}

.h2-leaf-a {
    left: 1%;
    top: 38%;
    transform: rotate(-30deg);
}

.h2-leaf-b {
    right: 1%;
    top: 14%;
    transform: rotate(70deg);
}

.h2-leaf-c {
    right: 5%;
    bottom: 18%;
    transform: rotate(20deg);
}

.h2-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 130px;
    z-index: 15;
}

.h2-hero-wave svg {
    width: 100%;
    height: 100%;
}

.h2-hero-wave path {
    fill: var(--med-card);
}

.h2-scroll-indicator {
    position: absolute;
    right: 35px;
    bottom: 75px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--med-primary);
    font-size: .62rem;
    letter-spacing: 1.5px;
}

.h2-scroll-indicator i {
    animation: h2ScrollArrow 1.5s infinite;
}

@keyframes h2ScrollArrow {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}



/* =========================================================
   SECTION 3 - FINDER
   ========================================================= */

.h2-finder-section {
    min-height: 760px;
    padding: 120px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    background:
        radial-gradient(circle at 20% 50%,
            rgba(220,236,242,.8),
            transparent 35%),
        var(--med-bg);
}

.h2-finder-visual {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
}

.h2-finder-circle {
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            var(--med-teal),
            var(--med-powder-blue));
    display: grid;
    place-items: center;
    animation: h2FinderFloat 6s ease-in-out infinite;
}

.h2-finder-inner {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--med-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--med-deep-blue);
    box-shadow: 0 25px 70px rgba(49,86,107,.14);
}

.h2-finder-inner i {
    color: var(--med-teal);
    font-size: 2rem;
}

.h2-finder-inner span {
    margin-top: 10px;
    font-size: .65rem;
    letter-spacing: 3px;
}

.h2-finder-inner strong {
    margin-top: 8px;
    text-align: center;
    font-size: 2rem;
    line-height: .9;
}

@keyframes h2FinderFloat {
    0%,100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-18px) rotate(3deg); }
}

.h2-finder-leaf {
    position: absolute;
    color: var(--med-teal);
    font-size: 3.5rem;
}

.h2-finder-leaf.leaf-one {
    left: 13%;
    top: 15%;
    transform: rotate(-30deg);
}

.h2-finder-leaf.leaf-two {
    right: 13%;
    top: 25%;
    transform: rotate(60deg);
}

.h2-finder-leaf.leaf-three {
    bottom: 13%;
    left: 22%;
    transform: rotate(30deg);
}

.h2-finder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
}

.h2-finder-option {
    border: 1px solid var(--med-border);
    background: transparent;
    color: var(--med-text);
    padding: 14px 18px;
    border-radius: 50px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: .3s ease;
}

.h2-finder-option i {
    color: var(--med-teal);
    margin-right: 7px;
}

.h2-finder-option:hover,
.h2-finder-option.active {
    background: var(--med-powder-blue);
    border-color: var(--med-primary);
    transform: translateY(-4px);
}

.h2-finder-result {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--med-teal);
}

.h2-result-label {
    color: var(--med-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.h2-finder-result h3 {
    margin: 10px 0;
    color: var(--med-deep-blue);
    font-size: 1.4rem;
}

.h2-finder-result a,
.h2-text-link {
    color: var(--med-primary);
    font-weight: 800;
    text-decoration: none;
}

.h2-finder-result a i,
.h2-text-link i {
    margin-left: 8px;
}


/* =========================================================
   SECTION 4 - BRANDS
   ========================================================= */

.h2-brands-section {
    min-height: 850px;
    padding: 130px 5%;
    background: var(--med-card);
}

.h2-brand-universe {
    position: relative;
    width: min(900px, 100%);
    height: 560px;
    margin: auto;
}

.h2-brand-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(91,143,168,.2);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.h2-brand-ring.ring-one {
    width: 430px;
    height: 430px;
    animation: h2BrandSpin 22s linear infinite;
}

.h2-brand-ring.ring-two {
    width: 650px;
    height: 290px;
    transform: translate(-50%,-50%) rotate(-25deg);
    animation: h2BrandSpinReverse 28s linear infinite;
}

@keyframes h2BrandSpin {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes h2BrandSpinReverse {
    to {
        transform: translate(-50%,-50%) rotate(-360deg);
    }
}

.h2-brand-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
    box-shadow: 0 25px 60px rgba(49,86,107,.12);
    z-index: 5;
}

.h2-brand-center i {
    color: var(--med-teal);
    font-size: 2.1rem;
}

.h2-brand-center strong {
    margin-top: 10px;
    font-size: 1.1rem;
}

.h2-brand-center span {
    font-size: .58rem;
    letter-spacing: 2px;
}

.h2-brand-name {
    position: absolute;
    z-index: 10;
    padding: 12px 20px;
    border-radius: 50px;
    background: var(--med-bg);
    color: var(--med-deep-blue);
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(49,86,107,.09);
    animation: h2BrandFloat 5s ease-in-out infinite;
}

.brand-a { left: 3%; top: 30%; }
.brand-b { left: 19%; top: 5%; animation-delay: .5s; }
.brand-c { left: 45%; top: -2%; animation-delay: 1s; }
.brand-d { right: 16%; top: 7%; animation-delay: 1.5s; }
.brand-e { right: 2%; top: 35%; animation-delay: 2s; }
.brand-f { right: 11%; bottom: 10%; animation-delay: 2.5s; }
.brand-g { left: 22%; bottom: 3%; animation-delay: 3s; }
.brand-h { left: 1%; bottom: 30%; animation-delay: 3.5s; }

@keyframes h2BrandFloat {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}


/* =========================================================
   SECTION 5 - DELIVERY
   ========================================================= */

.h2-delivery-section {
    padding: 130px 5% 170px;
    background: var(--med-bg);
}

.h2-delivery-track {
    position: relative;
    width: min(1200px, 100%);
    height: 430px;
    margin: 40px auto 0;
}

.h2-delivery-track svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.h2-route-base,
.h2-route-progress {
    fill: none;
    stroke-width: 4;
}

.h2-route-base {
    stroke: var(--med-powder-blue);
}

.h2-route-progress {
    stroke: var(--med-teal);
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 3s ease;
}

.h2-delivery-track.h2-visible .h2-route-progress {
    stroke-dashoffset: 0;
}

.h2-delivery-point {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
}

.h2-delivery-point > div {
    display: flex;
    flex-direction: column;
}

.h2-delivery-point i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-teal);
    box-shadow: 0 10px 25px rgba(49,86,107,.1);
}

.h2-delivery-point strong {
    color: var(--med-deep-blue);
    margin-top: 5px;
}

.h2-delivery-point small {
    color: var(--med-text);
    opacity: .65;
    max-width: 150px;
    line-height: 1.4;
}

.h2-point-number {
    color: var(--med-primary);
    font-weight: 900;
}

.delivery-one {
    left: 2%;
    top: 65%;
}

.delivery-two {
    left: 35%;
    top: 15%;
}

.delivery-three { 
    right: 10%; 
    top: 60%; 
}

.delivery-four {
    right: 1%;
    top: 25%;
}

.h2-moving-package {
    position: absolute;
    left: 5%;
    top: 69%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--med-peach);
    color: var(--med-deep-blue);
    z-index: 10;
    opacity: 0;
}

.h2-delivery-track.h2-visible .h2-moving-package {
    opacity: 1;
    animation: h2PackageJourney 6s linear forwards;
}

@keyframes h2PackageJourney {
    0% {
        left: 5%;
        top: 69%;
        transform: scale(.8) rotate(0);
    }

    25% {
        left: 35%;
        top: 16%;
        transform: scale(1) rotate(90deg);
    }

    55% {
        left: 64%;
        top: 62%;
        transform: scale(1.1) rotate(180deg);
    }

    82% {
        left: 85%;
        top: 25%;
        transform: scale(1) rotate(270deg);
    }

    100% {
        left: 94%;
        top: 20%;
        transform: scale(1.15) rotate(360deg);
    }
}


/* =========================================================
   SECTION 6 - ESSENTIALS
   ========================================================= */

.h2-essentials-section {
    padding: 140px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    background: var(--med-card);
}

.h2-essentials-image {
    position: relative;
    min-height: 570px;
    display: grid;
    place-items: center;
}

.h2-essential-main-image {
    position: relative;
    z-index: 5;
    width: min(500px, 85%);
    height: 500px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: 0 30px 70px rgba(49,86,107,.15);
}

.h2-image-orbit {
    position: absolute;
    width: 550px;
    height: 380px;
    border: 1px solid var(--med-teal);
    border-radius: 50%;
    transform: rotate(-25deg);
    animation: h2ImageOrbit 14s linear infinite;
}

@keyframes h2ImageOrbit {
    to {
        transform: rotate(335deg);
    }
}

.h2-image-leaf {
    position: absolute;
    z-index: 8;
    color: var(--med-teal);
    font-size: 3rem;
}

.image-leaf-one {
    left: 8%;
    top: 20%;
    transform: rotate(-30deg);
}

.image-leaf-two {
    right: 10%;
    bottom: 18%;
    transform: rotate(60deg);
}

.h2-essential-list {
    margin: 35px 0;
}

.h2-essential-list > div {
    position: relative;
    padding: 18px 0 18px 60px;
    border-bottom: 1px solid var(--med-border);
}

.h2-essential-list span {
    position: absolute;
    left: 0;
    top: 18px;
    color: var(--med-teal);
    font-weight: 900;
}

.h2-essential-list strong {
    color: var(--med-deep-blue);
}

.h2-essential-list p {
    margin: 5px 0 0;
    color: var(--med-text);
    opacity: .68;
    font-size: .85rem;
}


/* =========================================================
   SECTION 7 - PRESCRIPTION
   ========================================================= */

.h2-prescription-section {
    min-height: 720px;
    padding: 130px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 90px;
    background:
        radial-gradient(circle at 80% 50%,
            rgba(243,182,162,.22),
            transparent 30%),
        var(--med-bg);
}

.h2-prescription-visual {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
}

.h2-prescription-sheet {
    position: relative;
    width: 300px;
    height: 390px;
    background: var(--med-card);
    border-radius: 45% 55% 50% 50%;
    transform: rotate(-6deg);
    box-shadow: 0 30px 70px rgba(49,86,107,.14);
    padding: 70px 45px;
    animation: h2SheetHang 5s ease-in-out infinite;
}

@keyframes h2SheetHang {
    0%,100% {
        transform: rotate(-6deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(-12px);
    }
}

.h2-prescription-top {
    color: var(--med-primary);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.h2-prescription-line {
    height: 3px;
    border-radius: 50%;
    background: var(--med-powder-blue);
    margin-top: 35px;
}

.line-two {
    width: 80%;
}

.line-three {
    width: 65%;
}

.h2-prescription-check {
    position: absolute;
    right: 35px;
    bottom: 45px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--med-teal);
    color: var(--med-card);
    animation: h2CheckPop 2s infinite;
}

@keyframes h2CheckPop {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.h2-support-flow {
    position: absolute;
    bottom: 35px;
    display: flex;
    gap: 35px;
}

.h2-support-flow div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--med-deep-blue);
}

.h2-support-flow i {
    color: var(--med-teal);
    font-size: 1.2rem;
}

.h2-support-flow span {
    font-size: .7rem;
    font-weight: 800;
}


/* =========================================================
   SECTION 8 - CARE
   ========================================================= */

.h2-care-section {
    padding: 130px 5% 170px;
    background: var(--med-card);
}

.h2-care-orbit {
    position: relative;
    width: min(1200px, 100%);
    height: 520px;
    margin: auto;
}

.h2-care-piece {
    position: absolute;
    width: 300px;
    min-height: 320px;
    padding: 40px 35px;
    background: var(--med-bg);
    border-radius: 48% 52% 42% 58%;
    box-shadow: 0 25px 60px rgba(49,86,107,.10);
    animation: h2Hanging 5s ease-in-out infinite;
}

.h2-care-piece::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 65px;
    top: -65px;
    left: 50%;
    background: var(--med-teal);
}

.care-piece-one {
    left: 3%;
    top: 90px;
}

.care-piece-two {
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    animation-delay: 1s;
}

.care-piece-three {
    right: 3%;
    top: 100px;
    animation-delay: 2s;
}

@keyframes h2Hanging {
    0%,100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(3deg) translateY(-8px);
    }
}

.care-piece-two {
    animation-name: h2HangingCenter;
}

@keyframes h2HangingCenter {
    0%,100% {
        transform: translateX(-50%) rotate(2deg);
    }

    50% {
        transform: translateX(-50%) rotate(-3deg) translateY(-8px);
    }
}

.h2-care-piece > span {
    color: var(--med-primary);
    font-weight: 900;
}

.h2-care-piece > i {
    display: block;
    margin: 20px 0;
    color: var(--med-teal);
    font-size: 2rem;
}

.h2-care-piece small {
    color: var(--med-primary);
    font-size: .65rem;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.h2-care-piece h3 {
    color: var(--med-deep-blue);
    font-size: 1.35rem;
    line-height: 1.2;
}

.h2-care-piece a {
    color: var(--med-primary);
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   SECTION 9 - FINAL CTA
   ========================================================= */

.h2-final-section {

    position: relative;

    min-height: 720px;

    padding: 100px 7%;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(120,189,181,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 70%,
            rgba(243,182,162,.22),
            transparent 24%
        ),
        var(--med-bg);
}


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

.h2-final-content {

    position: relative;

    z-index: 5;

    max-width: 650px;

}


.h2-final-content > p {

    max-width: 590px;

}


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

.h2-final-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

}


/* =========================================================
   FINAL CTA IMAGE AREA
   ========================================================= */

.h2-final-visual {

    position: relative;

    min-height: 500px;

    display: grid;

    place-items: center;

    z-index: 3;

}


/* Soft background glow */

.h2-final-visual::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(120,189,181,.20),
            rgba(220,236,242,.10) 50%,
            transparent 72%
        );

    filter: blur(2px);

    z-index: 0;

}


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

.h2-final-image-wrap {

    position: relative;

    width: min(470px, 90%);

    height: 500px;

    overflow: hidden;

    border-radius:
        48% 52% 55% 45%
        /
        44% 48% 52% 56%;

    box-shadow:
        0 30px 70px rgba(49,86,107,.16);

    z-index: 2;

    animation:
        h2FinalImageFloat
        6s ease-in-out infinite;

}


/* Image */

.h2-final-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .7s ease;
}


.h2-final-image-wrap:hover .h2-final-image {

    transform: scale(1.05);

}


/* =========================================================
   IMAGE FLOATING ACCENTS
   ========================================================= */

.h2-final-accent {

    position: absolute;

    display: grid;

    place-items: center;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    box-shadow:
        0 15px 35px rgba(49,86,107,.14);

    z-index: 5;

}


.h2-final-accent i {

    font-size: 1.15rem;

}


/* Accent 1 */

.final-accent-one {

    top: 13%;

    left: 7%;

    animation:
        h2FinalAccentOne
        4.5s ease-in-out infinite;

}


/* Accent 2 */

.final-accent-two {

    right: 5%;

    top: 28%;

    color: var(--med-primary);

    animation:
        h2FinalAccentTwo
        5s ease-in-out infinite;

}


/* Accent 3 */

.final-accent-three {

    right: 12%;

    bottom: 12%;

    background: var(--med-peach);

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

    animation:
        h2FinalAccentThree
        5.5s ease-in-out infinite;

}


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

@keyframes h2FinalImageFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(1deg);
    }

}


@keyframes h2FinalAccentOne {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0);
    }

    50% {
        transform:
            translate(-8px, -14px)
            rotate(-8deg);
    }

}


@keyframes h2FinalAccentTwo {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0);
    }

    50% {
        transform:
            translate(9px, -12px)
            rotate(10deg);
    }

}


@keyframes h2FinalAccentThree {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0);
    }

    50% {
        transform:
            translate(8px, -10px)
            rotate(-10deg);
    }

}


/* =========================================================
   DECORATIVE LEAVES
   ========================================================= */

.h2-final-leaf {

    position: absolute;

    color: var(--med-teal);

    opacity: .22;

    font-size: 5rem;

    z-index: 1;

    pointer-events: none;

}


.final-leaf-one {

    left: 2%;

    top: 12%;

    transform: rotate(-30deg);

}


.final-leaf-two {

    right: 2%;

    top: 18%;

    transform: rotate(60deg);

}


.final-leaf-three {

    left: 12%;

    bottom: 8%;

    transform: rotate(30deg);

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .h2-final-section {

        min-height: 680px;

        padding:
            90px
            5%;

        gap: 45px;

    }

    .h2-final-image-wrap {

        width: min(400px, 90%);

        height: 440px;

    }

    .h2-final-visual {

        min-height: 450px;

    }

}


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

@media (min-width: 768px) and (max-width: 1023px) {

    .h2-final-section {

        min-height: auto;

        padding:
            85px
            7%
            80px;

        grid-template-columns: 1fr;

        gap: 55px;

        text-align: center;

    }


    .h2-final-content {

        max-width: 700px;

        margin: auto;

    }


    .h2-final-content > p {

        margin-left: auto;

        margin-right: auto;

    }


    .h2-final-actions {

        justify-content: center;

    }


    .h2-final-visual {

        min-height: 430px;

    }


    .h2-final-image-wrap {

        width: min(400px, 75vw);

        height: 430px;

    }


    .h2-final-accent {

        width: 52px;

        height: 52px;

    }

}


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

@media (min-width: 481px) and (max-width: 767px) {

    .h2-final-section {

        min-height: auto;

        padding:
            75px
            6%
            65px;

        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;

    }


    .h2-final-content {

        max-width: 600px;

        margin: auto;

    }


    .h2-final-content > p {

        margin-left: auto;

        margin-right: auto;

    }


    .h2-final-actions {

        justify-content: center;

    }


    .h2-final-visual {

        min-height: 360px;

    }


    .h2-final-image-wrap {

        width: min(330px, 82vw);

        height: 360px;

    }


    .h2-final-visual::before {

        width: 330px;

        height: 330px;

    }


    .h2-final-accent {

        width: 48px;

        height: 48px;

    }


    .final-accent-one {

        left: 7%;

    }


    .final-accent-two {

        right: 5%;

    }


    .final-accent-three {

        right: 10%;

        bottom: 5%;

    }

}


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

@media (max-width: 480px) {

    .h2-final-section {

        min-height: auto;

        padding:
            65px
            18px
            55px;

        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;

    }


    .h2-final-content {

        width: 100%;

        margin: auto;

    }


    .h2-final-content h2 {

        font-size:
            clamp(
                2rem,
                9vw,
                2.7rem
            );

    }


    .h2-final-content > p {

        margin-left: auto;

        margin-right: auto;

        line-height: 1.7;

    }


    .h2-final-actions {

        flex-direction: column;

        width: 100%;

        align-items: stretch;

    }


    .h2-final-actions
    .h2-primary-btn,

    .h2-final-actions
    .h2-outline-btn {

        width: 100%;

    }


    .h2-final-visual {

        min-height: 300px;

        width: 100%;

    }


    .h2-final-image-wrap {

        width: min(285px, 82vw);

        height: 305px;

    }


    .h2-final-visual::before {

        width: 285px;

        height: 285px;

    }


    .h2-final-accent {

        width: 43px;

        height: 43px;

    }


    .h2-final-accent i {

        font-size: .9rem;

    }


    .final-accent-one {

        left: 5%;

        top: 12%;

    }


    .final-accent-two {

        right: 2%;

        top: 25%;

    }


    .final-accent-three {

        right: 7%;

        bottom: 3%;

    }


    .h2-final-leaf {

        font-size: 3.5rem;

    }

}


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

@media (max-width: 360px) {

    .h2-final-section {

        padding:
            60px
            14px
            50px;

    }


    .h2-final-image-wrap {

        width: 255px;

        height: 275px;

    }


    .h2-final-visual::before {

        width: 255px;

        height: 255px;

    }

}

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

@media (max-width: 1199px) {

    .h2-hero-container {
        grid-template-columns: .9fr 1.1fr;
    }

    .h2-hero-title {
        font-size: clamp(3rem, 5vw, 5rem);
    }

    .h2-bottle-wrap {
        width: 240px;
    }

    .h2-orbit-one {
        width: 430px;
    }

    .h2-orbit-two {
        width: 500px;
    }

    .h2-orbit-three {
        height: 500px;
    }

    .h2-floating-label {
        font-size: .75rem;
    }

    .h2-product-orbit {
        transform: scale(.9);
    }
}


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

@media (max-width: 1023px) {

    .h2-hero {
        min-height: 1050px;
    }

    .h2-hero-container {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 70px;
    }

    .h2-hero-content {
        text-align: center;
        padding: 30px 0 20px;
    }

    .h2-hero-title {
        margin: auto;
    }

    .h2-hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .h2-hero-buttons,
    .h2-trust-row {
        justify-content: center;
    }

    .h2-hero-visual {
        height: 650px;
    }

    .h2-finder-section,
    .h2-essentials-section,
    .h2-prescription-section,
    .h2-final-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .h2-finder-content,
    .h2-essentials-content,
    .h2-prescription-content,
    .h2-final-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .h2-finder-result {
        text-align: left;
    }

    .h2-product-orbit {
        transform: scale(.78);
        margin-top: -50px;
        margin-bottom: -70px;
    }

    .h2-care-orbit {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 70px 30px;
    }

    .h2-care-piece {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
    }

    .care-piece-two {
        transform: none;
    }

    .h2-delivery-track {
        height: 600px;
    }

    .h2-delivery-track svg {
        display: none;
    }

    .h2-delivery-point {
        position: absolute;
        left: 15% !important;
        right: auto !important;
    }

    .delivery-one { top: 5%; }
    .delivery-two { top: 30%; }
    .delivery-three { top: 55%; }
    .delivery-four { top: 80%; }

    .h2-moving-package {
        display: none;
    }
}


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

@media (max-width: 767px) {

    .h2-hero {
        min-height: 1000px;
    }

    .h2-hero-container {
        width: 92%;
    }

    .h2-hero-title {
        font-size: clamp(2.7rem, 11vw, 4rem);
        letter-spacing: -1.5px;
    }

    .h2-hero-text {
        font-size: .92rem;
    }

    .h2-trust-row {
        gap: 12px;
    }

    .h2-trust-row div {
        font-size: .68rem;
    }

    .h2-hero-visual {
        height: 570px;
    }

    .h2-bottle-wrap {
        width: 190px;
    }

    .h2-hero-aura {
        width: 310px;
        height: 310px;
    }

    .h2-orbit-one {
        width: 330px;
        height: 160px;
    }

    .h2-orbit-two {
        width: 390px;
        height: 210px;
    }

    .h2-orbit-three {
        width: 300px;
        height: 390px;
    }

    .h2-floating-label {
        padding: 9px 13px;
        font-size: .63rem;
    }

    .h2-label-medicine {
        left: 0;
    }

    .h2-label-vitamin {
        right: 0;
    }

    .h2-label-baby {
        right: 4%;
    }

    .h2-story-bubble {
        right: 0;
        top: 0;
    }

    .h2-story-bubble strong {
        display: none;
    }

    .h2-hero-platform {
        width: 220px;
    }

    .h2-scroll-indicator {
        display: none;
    }

    .h2-section-heading h2,
    .h2-finder-content h2,
    .h2-essentials-content h2,
    .h2-prescription-content h2,
    .h2-final-content h2 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
    }

    .h2-products-section,
    .h2-finder-section,
    .h2-brands-section,
    .h2-delivery-section,
    .h2-essentials-section,
    .h2-prescription-section,
    .h2-care-section,
    .h2-final-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .h2-product-orbit {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        transform: none;
        margin: 0;
    }

    .h2-product-orbit::before,
    .h2-product-orbit::after,
    .h2-product-center {
        display: none;
    }

    .h2-product-node {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 135px;
        height: 135px;
        margin: auto;
    }

    .h2-finder-circle {
        width: 310px;
        height: 310px;
    }

    .h2-finder-inner {
        width: 180px;
        height: 180px;
    }

    .h2-finder-options {
        justify-content: center;
    }

    .h2-essential-main-image {
        width: 320px;
        height: 320px;
    }

    .h2-image-orbit {
        width: 350px;
        height: 250px;
    }

    .h2-prescription-sheet {
        width: 250px;
        height: 330px;
    }

    .h2-support-flow {
        gap: 18px;
    }

    .h2-care-orbit {
        gap: 80px 10px;
    }

    .h2-care-piece {
        width: min(300px, 90%);
    }

    .h2-final-universe {
        height: 480px;
    }

    .h2-final-ring.ring-a {
        width: 300px;
        height: 300px;
    }

    .h2-final-ring.ring-b {
        width: 380px;
        height: 210px;
    }

    .h2-final-ring.ring-c {
        width: 260px;
        height: 400px;
    }

    .h2-final-core {
        width: 170px;
        height: 170px;
    }
}


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

@media (max-width: 480px) {

    .h2-hero {
        min-height: 900px;
    }

    .h2-eyebrow {
        font-size: .65rem;
        letter-spacing: 1.3px;
    }

    .h2-hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .h2-primary-btn,
    .h2-outline-btn {
        width: 100%;
    }

    .h2-trust-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .h2-hero-visual {
        height: 500px;
    }

    .h2-bottle-wrap {
        width: 155px;
    }

    .h2-orbit-one {
        width: 280px;
    }

    .h2-orbit-two {
        width: 330px;
    }

    .h2-orbit-three {
        height: 330px;
    }

    .h2-orbit-item {
        width: 48px;
        height: 22px;
    }

    .h2-orbit-leaf {
        font-size: 1.4rem;
    }

    .h2-floating-label {
        font-size: .55rem;
        padding: 8px 10px;
    }

    .h2-product-orbit {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .h2-product-node {
        width: 125px;
        height: 125px;
    }

    .h2-finder-circle {
        width: 270px;
        height: 270px;
    }

    .h2-finder-inner {
        width: 155px;
        height: 155px;
    }

    .h2-finder-inner strong {
        font-size: 1.5rem;
    }

    .h2-essential-main-image {
        width: 280px;
        height: 280px;
    }

    .h2-image-orbit {
        width: 310px;
        height: 220px;
    }

    .h2-care-piece {
        min-height: 280px;
        padding: 32px 28px;
    }

    .h2-final-actions {
        width: 100%;
    }

    .h2-final-universe {
        height: 400px;
    }

    .h2-final-core {
        width: 145px;
        height: 145px;
    }
}
/* =========================================================
   HOME 2 — HERO BOTTLE SIZE
   ========================================================= */

.h2-bottle {
    width: 330px;
    height: auto;
    object-fit: contain;
    transform: scale(1.12);
    transform-origin: center center;
}

/* Tablet */
@media (max-width: 1023px) {
    .h2-bottle {
        width: 290px;
        transform: scale(1.08);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .h2-bottle {
        width: 245px;
        transform: scale(1.05);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .h2-bottle {
        width: 215px;
        transform: scale(1.03);
    }
}
/* =========================================================
   HOME 2 — SECTION 2
   HEALTH PRODUCTS
   COMPLETE BASE FIX
   ========================================================= */

.h2-products-section {
    position: relative;

    width: 100%;
    min-height: 720px;

    padding: 105px 6% 115px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(120, 189, 181, 0.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(243, 182, 162, 0.15),
            transparent 22%
        ),
        var(--med-bg);
}


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

.h2-products-section .h2-section-heading {
    position: relative;

    z-index: 10;

    width: min(760px, 100%);

    margin: 0 auto 45px;

    text-align: center;
}

.h2-products-section .h2-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--med-primary);

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: 2px;

    line-height: 1.3;
}

.h2-products-section .h2-eyebrow i {
    color: var(--med-teal);

    font-size: .85rem;

    animation:
        h2Section2Leaf 3.5s
        ease-in-out
        infinite;
}


.h2-products-section .h2-section-heading h2 {
    margin: 0;

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

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.8rem
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -1.8px;
}

.h2-products-section .h2-section-heading h2 span {
    color: var(--med-teal);
}

.h2-products-section .h2-section-heading p {
    width: min(620px, 100%);

    margin:
        20px auto 0;

    color: var(--med-text);

    font-size: .95rem;

    line-height: 1.75;

    opacity: .78;
}


/* =========================================================
   DECORATIVE BACKGROUND LEAVES
   ========================================================= */

.h2-products-section::before,
.h2-products-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    pointer-events: none;
}

.h2-products-section::before {
    left: -120px;
    bottom: -100px;

    background:
        radial-gradient(
            circle,
            rgba(120, 189, 181, .16),
            transparent 70%
        );
}

.h2-products-section::after {
    right: -110px;
    top: -100px;

    background:
        radial-gradient(
            circle,
            rgba(243, 182, 162, .16),
            transparent 70%
        );
}


/* =========================================================
   PRODUCT AREA
   ========================================================= */

.h2-product-orbit {
    position: relative;

    width: min(1180px, 100%);

    height: 430px;

    margin: 0 auto;

    display: block;

    transform: none;

    isolation: isolate;
}


/* =========================================================
   FLOWING BACKGROUND LINES
   ========================================================= */

.h2-product-orbit::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 820px;
    height: 250px;

    transform:
        translate(-50%, -50%)
        rotate(-7deg);

    border-top:
        1px solid
        rgba(91, 143, 168, .18);

    border-bottom:
        1px solid
        rgba(120, 189, 181, .16);

    border-radius: 50%;

    pointer-events: none;

    animation:
        h2ProductFlow 9s
        ease-in-out
        infinite;
}

.h2-product-orbit::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 700px;
    height: 190px;

    transform:
        translate(-50%, -50%)
        rotate(8deg);

    border:
        1px solid
        rgba(243, 182, 162, .13);

    border-radius: 50%;

    pointer-events: none;

    animation:
        h2ProductFlowReverse 11s
        ease-in-out
        infinite;
}


/* =========================================================
   CENTRAL MEDIVANA ELEMENT
   ========================================================= */

.h2-product-center {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 5;

    width: 150px;
    height: 150px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            var(--med-card),
            var(--med-powder-blue)
        );

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

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

    box-shadow:
        0 25px 60px
        rgba(49, 86, 107, .13);

    animation:
        h2ProductCenterFloat
        5s ease-in-out
        infinite;
}

.h2-product-center i {
    color: var(--med-teal);

    font-size: 2rem;

    transform: rotate(-15deg);
}

.h2-product-center span {
    font-size: .78rem;

    font-weight: 900;

    letter-spacing: 2px;
}


/* =========================================================
   PRODUCT NODES
   ========================================================= */

.h2-product-node {
    position: absolute;

    z-index: 8;

    width: 160px;
    height: 160px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-align: center;

    text-decoration: none;

    border-radius:
        48%
        52%
        54%
        46%;

    background:
        var(--med-card);

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

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

    box-shadow:
        0 18px 45px
        rgba(49, 86, 107, .10);

    opacity: 0;

    will-change:
        transform,
        opacity;

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


/* individual organic shapes */

.h2-product-node:nth-of-type(2) {
    border-radius:
        54% 46% 48% 52%;
}

.h2-product-node:nth-of-type(3) {
    border-radius:
        45% 55% 52% 48%;
}

.h2-product-node:nth-of-type(4) {
    border-radius:
        52% 48% 45% 55%;
}

.h2-product-node:nth-of-type(5) {
    border-radius:
        48% 52% 55% 45%;
}

.h2-product-node:nth-of-type(6) {
    border-radius:
        55% 45% 50% 50%;
}

.h2-product-node:nth-of-type(7) {
    border-radius:
        46% 54% 47% 53%;
}


/* =========================================================
   NODE POSITIONS
   ========================================================= */

.h2-product-node.node-one {
    left: 5%;
    top: 32%;
}

.h2-product-node.node-two {
    left: 23%;
    top: 4%;
}

.h2-product-node.node-three {
    right: 23%;
    top: 4%;
}

.h2-product-node.node-four {
    right: 5%;
    top: 32%;
}

.h2-product-node.node-five {
    left: 23%;
    bottom: 2%;
}

.h2-product-node.node-six {
    right: 23%;
    bottom: 2%;
}


/* =========================================================
   NODE ICONS
   ========================================================= */

.h2-product-node > i {
    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--med-powder-blue);

    color: var(--med-primary);

    font-size: 1.2rem;

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


/* Peach accents */

.h2-product-node.node-five > i,
.h2-product-node.node-three > i {
    background:
        rgba(243, 182, 162, .38);

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


/* =========================================================
   NODE TEXT
   ========================================================= */

.h2-product-node strong {
    position: relative;

    z-index: 2;

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

    font-size: .95rem;

    font-weight: 900;

    line-height: 1.2;
}

.h2-product-node small {
    position: relative;

    z-index: 2;

    color: var(--med-text);

    font-size: .67rem;

    line-height: 1.3;

    opacity: .65;
}


/* =========================================================
   NODE LEAF / GLOW
   ========================================================= */

.h2-product-node::after {
    content: "";

    position: absolute;

    width: 45px;
    height: 45px;

    right: -10px;
    bottom: -10px;

    border-radius: 50%;

    background:
        var(--med-teal);

    opacity: .09;

    pointer-events: none;
}


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

.h2-product-node:hover {
    z-index: 20;

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

    box-shadow:
        0 28px 60px
        rgba(49, 86, 107, .16);

    transform:
        translateY(-9px)
        rotate(-2deg)
        scale(1.04);
}

.h2-product-node:hover > i {
    transform:
        rotate(-10deg)
        scale(1.12);

    background:
        var(--med-teal);

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


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

.h2-product-node.h2-product-visible {
    opacity: 1;
}


/* left-side nodes */

.h2-product-node.node-one.h2-product-visible,
.h2-product-node.node-five.h2-product-visible {
    animation:
        h2ProductFromLeft
        .9s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* right-side nodes */

.h2-product-node.node-four.h2-product-visible,
.h2-product-node.node-six.h2-product-visible {
    animation:
        h2ProductFromRight
        .9s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* upper nodes */

.h2-product-node.node-two.h2-product-visible {
    animation:
        h2ProductFromTop
        .9s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}

.h2-product-node.node-three.h2-product-visible {
    animation:
        h2ProductFromTop
        .9s
        .12s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes h2ProductFromLeft {

    0% {
        opacity: 0;

        transform:
            translateX(-180px)
            rotate(-12deg)
            scale(.72);
    }

    55% {
        opacity: 1;

        transform:
            translateX(20px)
            rotate(4deg)
            scale(1.04);
    }

    75% {
        transform:
            translateX(-8px)
            rotate(-2deg)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}


@keyframes h2ProductFromRight {

    0% {
        opacity: 0;

        transform:
            translateX(180px)
            rotate(12deg)
            scale(.72);
    }

    55% {
        opacity: 1;

        transform:
            translateX(-20px)
            rotate(-4deg)
            scale(1.04);
    }

    75% {
        transform:
            translateX(8px)
            rotate(2deg)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}


@keyframes h2ProductFromTop {

    0% {
        opacity: 0;

        transform:
            translateY(-150px)
            rotate(8deg)
            scale(.72);
    }

    55% {
        opacity: 1;

        transform:
            translateY(15px)
            rotate(-3deg)
            scale(1.04);
    }

    75% {
        transform:
            translateY(-6px)
            rotate(1deg)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0)
            scale(1);
    }
}


/* =========================================================
   CENTRAL FLOAT
   ========================================================= */

@keyframes h2ProductCenterFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-9px);
    }
}


/* =========================================================
   FLOWING LINES
   ========================================================= */

@keyframes h2ProductFlow {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(-7deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(-3deg)
            scale(1.04);
    }
}


@keyframes h2ProductFlowReverse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(8deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(13deg)
            scale(.96);
    }
}


/* =========================================================
   EYEBROW LEAF
   ========================================================= */

@keyframes h2Section2Leaf {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(8deg)
            translateY(-4px);
    }
}


/* =========================================================
   DESKTOP — LARGE
   ========================================================= */

@media (min-width: 1200px) {

    .h2-products-section {
        min-height: 760px;

        padding:
            105px
            5%
            115px;
    }

    .h2-product-orbit {
        height: 440px;
    }

}


/* =========================================================
   LAPTOP — 1024 TO 1199
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .h2-products-section {
        min-height: 720px;

        padding:
            90px
            4%
            100px;
    }

    .h2-product-orbit {
        height: 410px;
    }

    .h2-product-node {
        width: 145px;
        height: 145px;
    }

    .h2-product-node.node-one {
        left: 2%;
    }

    .h2-product-node.node-four {
        right: 2%;
    }

    .h2-product-node.node-two,
    .h2-product-node.node-five {
        left: 20%;
    }

    .h2-product-node.node-three,
    .h2-product-node.node-six {
        right: 20%;
    }

    .h2-product-center {
        width: 135px;
        height: 135px;
    }

}


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

@media (max-width: 1023px) {

    .h2-products-section {
        min-height: auto;

        padding:
            85px
            5%
            95px;
    }

    .h2-products-section .h2-section-heading {
        margin-bottom: 40px;
    }

    .h2-product-orbit {
        width: 100%;

        height: auto;

        display: grid;

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

        gap: 22px;

        transform: none;

        margin: 0;
    }

    .h2-product-orbit::before,
    .h2-product-orbit::after,
    .h2-product-center {
        display: none;
    }

    .h2-product-node {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: min(170px, 100%);
        height: 155px;

        margin: auto;

        opacity: 0;

        transform:
            translateY(45px)
            scale(.88);
    }

    .h2-product-node.h2-product-visible {
        animation:
            h2ProductTabletReveal
            .75s
            cubic-bezier(.16, 1, .3, 1)
            forwards;
    }

    @keyframes h2ProductTabletReveal {

        0% {
            opacity: 0;

            transform:
                translateY(45px)
                scale(.88);
        }

        65% {
            opacity: 1;

            transform:
                translateY(-5px)
                scale(1.03);
        }

        100% {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }
    }

}


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

@media (max-width: 767px) {

    .h2-products-section {
        padding:
            72px
            5%
            80px;
    }

    .h2-products-section .h2-section-heading {
        margin-bottom: 32px;
    }

    .h2-products-section .h2-eyebrow {
        font-size: .64rem;

        letter-spacing: 1.4px;
    }

    .h2-products-section .h2-section-heading h2 {
        font-size:
            clamp(
                2.25rem,
                9vw,
                3.2rem
            );

        letter-spacing: -1px;
    }

    .h2-products-section .h2-section-heading p {
        margin-top: 16px;

        font-size: .86rem;

        line-height: 1.7;
    }

    .h2-product-orbit {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .h2-product-node {
        width: 100%;
        height: 145px;

        border-radius:
            45%
            55%
            50%
            50%;
    }

    .h2-product-node > i {
        width: 46px;
        height: 46px;

        font-size: 1rem;
    }

    .h2-product-node strong {
        font-size: .82rem;
    }

    .h2-product-node small {
        font-size: .61rem;
    }

}


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

@media (max-width: 480px) {

    .h2-products-section {
        padding:
            62px
            18px
            70px;
    }

    .h2-products-section .h2-section-heading h2 {
        font-size: 2rem;
    }

    .h2-products-section .h2-section-heading p {
        font-size: .82rem;
    }

    .h2-product-orbit {
        gap: 12px;
    }

    .h2-product-node {
        height: 135px;

        padding: 12px 8px;
    }

    .h2-product-node > i {
        width: 42px;
        height: 42px;
    }

    .h2-product-node strong {
        font-size: .76rem;
    }

    .h2-product-node small {
        font-size: .56rem;
    }

}


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

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

    .h2-product-node,
    .h2-product-center,
    .h2-product-orbit::before,
    .h2-product-orbit::after,
    .h2-products-section .h2-eyebrow i {
        animation: none !important;

        transition: none !important;
    }

}
/* =========================================================
   HOME 2 — SECTION 4
   TRUSTED BRANDS — FINAL RESPONSIVE DESIGN
   ========================================================= */

/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.h2-brands-section {
    position: relative;
    min-height: 850px;
    padding: 120px 5% 100px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(120, 189, 181, 0.08),
            transparent 34%
        ),
        var(--med-card);
}


/* ---------------------------------------------------------
   BRAND UNIVERSE
   --------------------------------------------------------- */

.h2-brand-universe {
    position: relative;
    width: min(1000px, 100%);
    height: 570px;
    margin: 45px auto 0;
}


/* ---------------------------------------------------------
   ORBIT RINGS
   --------------------------------------------------------- */

.h2-brand-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1.5px solid rgba(91, 143, 168, 0.20);
    border-radius: 50%;
    pointer-events: none;
}

.h2-brand-ring.ring-one {
    width: 450px;
    height: 450px;
    transform: translate(-50%, -50%);
    animation: h2BrandSpin 24s linear infinite;
}

.h2-brand-ring.ring-two {
    width: 700px;
    height: 300px;
    transform: translate(-50%, -50%) rotate(-25deg);
    animation: h2BrandSpinReverse 30s linear infinite;
}


/* ---------------------------------------------------------
   CENTER BRAND
   --------------------------------------------------------- */

.h2-brand-center {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

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

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.65),
            transparent 45%
        ),
        var(--med-powder-blue);

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

    border: 2px solid rgba(91, 143, 168, 0.18);

    box-shadow:
        0 20px 55px rgba(49, 86, 107, .13),
        0 0 0 14px rgba(120, 189, 181, .055);

    z-index: 5;
}

.h2-brand-center i {
    color: var(--med-teal);
    font-size: 2.1rem;
}

.h2-brand-center strong {
    margin-top: 10px;
    font-size: 1.1rem;
    letter-spacing: .5px;
}

.h2-brand-center span {
    margin-top: 3px;
    font-size: .58rem;
    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   BRAND ITEMS
   --------------------------------------------------------- */

.h2-brand-name {
    position: absolute;
    z-index: 10;

    min-width: 112px;

    padding: 13px 20px;

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

    border-radius: 16px;

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

    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .1px;

    background: var(--med-bg);

    border: 1.5px solid rgba(91, 143, 168, .30);

    box-shadow:
        0 10px 28px rgba(49, 86, 107, .08);

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

    animation:
        h2BrandFloat 5s ease-in-out infinite;

    cursor: default;
}


/* Individual brand colors */

.h2-brand-name.brand-a {
    background: rgba(220, 236, 242, .78);
    border-color: var(--med-primary);
}

.h2-brand-name.brand-b {
    background: rgba(243, 182, 162, .30);
    border-color: rgba(243, 182, 162, .85);
}

.h2-brand-name.brand-c {
    background: rgba(120, 189, 181, .20);
    border-color: rgba(120, 189, 181, .85);
}

.h2-brand-name.brand-d {
    background: rgba(220, 236, 242, .78);
    border-color: var(--med-primary);
}

.h2-brand-name.brand-e {
    background: rgba(243, 182, 162, .30);
    border-color: rgba(243, 182, 162, .85);
}

.h2-brand-name.brand-f {
    background: rgba(120, 189, 181, .20);
    border-color: rgba(120, 189, 181, .85);
}

.h2-brand-name.brand-g {
    background: rgba(220, 236, 242, .78);
    border-color: var(--med-primary);
}

.h2-brand-name.brand-h {
    background: rgba(243, 182, 162, .30);
    border-color: rgba(243, 182, 162, .85);
}

/* Small decorative line */

.h2-brand-name::after {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    right: 9px;
    top: 8px;

    border-radius: 50%;

    background: var(--med-teal);

    opacity: .7;
}


/* Hover */

.h2-brand-name:hover {
    transform: translateY(-7px) scale(1.04);

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

    box-shadow:
        0 18px 38px rgba(49, 86, 107, .14),
        0 0 0 5px rgba(120, 189, 181, .08);
}


/* ---------------------------------------------------------
   DESKTOP POSITIONS
   --------------------------------------------------------- */

.brand-a {
    left: 2%;
    top: 30%;
}

.brand-b {
    left: 19%;
    top: 5%;
    animation-delay: .5s;
}

.brand-c {
    left: 44%;
    top: -2%;
    animation-delay: 1s;
}

.brand-d {
    right: 15%;
    top: 7%;
    animation-delay: 1.5s;
}

.brand-e {
    right: 1%;
    top: 35%;
    animation-delay: 2s;
}

.brand-f {
    right: 10%;
    bottom: 9%;
    animation-delay: 2.5s;
}

.brand-g {
    left: 22%;
    bottom: 3%;
    animation-delay: 3s;
}

.brand-h {
    left: 1%;
    bottom: 30%;
    animation-delay: 3.5s;
}


/* ---------------------------------------------------------
   FLOATING ANIMATION
   --------------------------------------------------------- */

@keyframes h2BrandFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}


/* =========================================================
   TABLET
   768px — 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .h2-brands-section {
        min-height: auto;
        padding: 100px 5% 90px;
    }

    .h2-brand-universe {
        width: 100%;
        height: auto;

        margin-top: 45px;

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

        align-items: center;
    }

    .h2-brand-ring {
        display: none;
    }

    .h2-brand-center {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        grid-column: 1 / -1;

        margin: 0 auto 20px;
    }

    .h2-brand-name {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        min-width: 0;
        width: 100%;

        animation: h2BrandFloat 5s ease-in-out infinite;
    }
}


/* =========================================================
   MOBILE LARGE / MEDIUM
   481px — 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .h2-brands-section {
        min-height: auto;
        padding: 90px 6% 80px;
    }

    .h2-brand-universe {
        width: 100%;
        height: auto;

        margin-top: 35px;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;

        align-items: center;
    }

    .h2-brand-ring {
        display: none;
    }

    .h2-brand-center {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        grid-column: 1 / -1;

        width: 165px;
        height: 165px;

        margin: 5px auto 20px;
    }

    .h2-brand-name {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100%;
        min-width: 0;

        min-height: 52px;

        padding: 12px 10px;

        font-size: .82rem;

        animation: h2BrandFloat 5s ease-in-out infinite;
    }

    .h2-brand-name::after {
        right: 7px;
        top: 7px;
    }
}


/* =========================================================
   MOBILE SMALL
   320px — 480px
   ========================================================= */

@media (max-width: 480px) {

    .h2-brands-section {
        min-height: auto;

        padding:
            75px
            18px
            65px;
    }

    .h2-brand-universe {
        width: 100%;
        height: auto;

        margin-top: 30px;

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

        gap: 14px 10px;

        align-items: center;
    }

    /* Remove desktop orbit on phones */

    .h2-brand-ring {
        display: none;
    }

    /* Center becomes normal grid item */

    .h2-brand-center {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        grid-column: 1 / -1;

        width: 145px;
        height: 145px;

        margin: 0 auto 18px;

        box-shadow:
            0 15px 35px rgba(49, 86, 107, .12),
            0 0 0 10px rgba(120, 189, 181, .05);
    }

    .h2-brand-center i {
        font-size: 1.7rem;
    }

    .h2-brand-center strong {
        margin-top: 7px;
        font-size: .95rem;
    }

    .h2-brand-center span {
        font-size: .5rem;
        letter-spacing: 1.5px;
    }


    /* Every brand becomes a normal grid item */

    .h2-brand-name {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100%;
        min-width: 0;

        min-height: 48px;

        padding: 11px 7px;

        border-radius: 14px;

        font-size: .72rem;

        text-align: center;

        animation:
            h2BrandFloat 5s ease-in-out infinite;
    }


    .h2-brand-name::after {
        width: 5px;
        height: 5px;

        right: 6px;
        top: 6px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .h2-brands-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .h2-brand-universe {
        gap: 12px 8px;
    }

    .h2-brand-name {
        min-height: 46px;
        font-size: .68rem;
        padding: 10px 5px;
    }

    .h2-brand-center {
        width: 135px;
        height: 135px;
    }
}
/* =========================================================
   HOME 2 — SECTION 8
   CARE TIPS / MEDIVANA KNOWLEDGE
   FINAL RESPONSIVE FIX
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.h2-care-section {
    padding: 105px 5% 65px;
    background: var(--med-card);
    overflow: hidden;
}


/* ---------------------------------------------------------
   CARE ORBIT
   Replace absolute positioning with a responsive layout
   --------------------------------------------------------- */

.h2-care-orbit {
    position: relative;

    width: min(1120px, 100%);
    height: auto;

    margin: 55px auto 0;

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

    align-items: start;

    gap: 35px;
}


/* ---------------------------------------------------------
   CARE PIECES
   --------------------------------------------------------- */

.h2-care-piece {
    position: relative;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100%;
    min-height: 305px;

    padding: 34px 32px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.52),
            transparent 65%
        ),
        var(--med-bg);

    border: 1.5px solid rgba(91,143,168,.24);

    border-radius: 48% 52% 44% 56%;

    box-shadow:
        0 18px 45px rgba(49,86,107,.10);

    overflow: visible;

    z-index: 2;
}


/* ---------------------------------------------------------
   HANGING STRING
   --------------------------------------------------------- */

.h2-care-piece::before {
    content: "";

    position: absolute;

    width: 2px;
    height: 48px;

    top: -48px;
    left: 50%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--med-teal)
        );

    opacity: .8;

    z-index: -1;
}


/* Small hanging point */

.h2-care-piece::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: -53px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--med-teal);

    box-shadow:
        0 0 0 5px rgba(120,189,181,.10);
}


/* ---------------------------------------------------------
   DIFFERENT HANGING HEIGHTS
   --------------------------------------------------------- */

.care-piece-one {
    margin-top: 35px;

    animation:
        h2CareFloatOne 5.5s ease-in-out infinite;
}

.care-piece-two {
    margin-top: 0;

    animation:
        h2CareFloatTwo 5.8s ease-in-out infinite;
}

.care-piece-three {
    margin-top: 45px;

    animation:
        h2CareFloatThree 5.3s ease-in-out infinite;
}


/* ---------------------------------------------------------
   HANGING ANIMATIONS
   No transform conflict with positioning
   --------------------------------------------------------- */

@keyframes h2CareFloatOne {

    0%,
    100% {
        transform: rotate(-1.5deg);
    }

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


@keyframes h2CareFloatTwo {

    0%,
    100% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(-1.5deg) translateY(-8px);
    }
}


@keyframes h2CareFloatThree {

    0%,
    100% {
        transform: rotate(-1deg);
    }

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


/* ---------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------- */

.h2-care-piece > span {
    display: inline-flex;

    color: var(--med-primary);

    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .5px;
    padding-left: 10px;
}


.h2-care-piece > i {
    display: block;

    margin: 18px 0;

    color: var(--med-teal);

    font-size: 2rem;
}


.h2-care-piece small {
    display: block;

    color: var(--med-primary);

    font-size: .62rem;
    letter-spacing: 1.5px;
    font-weight: 900;
}


.h2-care-piece h3 {
    margin: 10px 0 15px;

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

    font-size: 1.3rem;
    line-height: 1.25;

    max-width: 230px;
}


.h2-care-piece a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

    font-size: .78rem;
    font-weight: 900;

    text-decoration: none;

    transition:
        color .25s ease,
        gap .25s ease;
}


.h2-care-piece a i {
    font-size: .7rem;
}


.h2-care-piece a:hover {
    color: var(--med-teal);
    gap: 10px;
}


/* ---------------------------------------------------------
   CARD ACCENTS
   --------------------------------------------------------- */

.care-piece-one {
    border-color: rgba(91,143,168,.32);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(220,236,242,.75),
            transparent 30%
        ),
        var(--med-bg);
}


.care-piece-two {
    border-color: rgba(120,189,181,.38);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(120,189,181,.18),
            transparent 32%
        ),
        var(--med-bg);
}


.care-piece-three {
    border-color: rgba(243,182,162,.45);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(243,182,162,.25),
            transparent 32%
        ),
        var(--med-bg);
}


/* ---------------------------------------------------------
   SECTION 9 — REDUCE EXCESSIVE GAP
   --------------------------------------------------------- */

.h2-final-section {
    min-height: 720px;

    padding: 90px 7%;
}


/* =========================================================
   LAPTOP
   1024px — 1199px
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .h2-care-section {
        padding-top: 95px;
        padding-bottom: 60px;
    }

    .h2-care-orbit {
        width: min(960px, 100%);
        gap: 22px;
        margin-top: 50px;
    }

    .h2-care-piece {
        min-height: 290px;
        padding: 32px 27px 28px;
    }

    .h2-care-piece h3 {
        font-size: 1.18rem;
    }

    .h2-final-section {
        min-height: 680px;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}


/* =========================================================
   TABLET
   768px — 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .h2-care-section {
        padding-top: 90px;
        padding-bottom: 60px;
    }

    .h2-care-orbit {
        width: min(700px, 100%);

        margin-top: 60px;

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

        gap: 70px 24px;
    }

    .h2-care-piece {
        width: 100%;
        min-height: 285px;

        padding: 30px 26px;
    }

    .care-piece-one,
    .care-piece-two,
    .care-piece-three {
        margin-top: 0;
    }

    /* Third card occupies the center */

    .care-piece-three {
        grid-column: 1 / -1;
        width: min(330px, 100%);
        justify-self: center;
    }

    .h2-care-piece h3 {
        font-size: 1.2rem;
    }

    .h2-final-section {
        min-height: 680px;
        padding-top: 80px;
        padding-bottom: 75px;
    }
}


/* =========================================================
   MOBILE LARGE
   481px — 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .h2-care-section {
        padding:
            75px
            6%
            50px;
    }

    .h2-care-orbit {
        width: min(420px, 100%);

        margin-top: 55px;

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .h2-care-piece {
        width: 100%;
        min-height: 255px;

        padding: 29px 27px 26px;

        border-radius:
            46% 54%
            50% 50%;
    }

    .care-piece-one,
    .care-piece-two,
    .care-piece-three {
        margin-top: 0;
    }

    .h2-care-piece h3 {
        font-size: 1.15rem;
        max-width: 260px;
    }

    .h2-care-piece > i {
        margin: 14px 0;
        font-size: 1.8rem;
    }

    .h2-final-section {
        min-height: 620px;
        padding-top: 70px;
        padding-bottom: 65px;
    }
}


/* =========================================================
   MOBILE SMALL / MEDIUM
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .h2-care-section {
        padding:
            65px
            18px
            45px;
    }

    .h2-care-orbit {
        width: 100%;

        margin-top: 50px;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .h2-care-piece {
        width: min(100%, 330px);

        min-height: 245px;

        margin: 0 auto !important;

        padding:
            27px
            23px
            24px;

        border-radius:
            44% 56%
            48% 52%;
    }

    .h2-care-piece::before {
        height: 40px;
        top: -40px;
    }

    .h2-care-piece::after {
        top: -45px;
    }

    .h2-care-piece > span {
        font-size: .72rem;
    }

    .h2-care-piece > i {
        margin: 13px 0;
        font-size: 1.7rem;
    }

    .h2-care-piece small {
        font-size: .56rem;
        letter-spacing: 1.2px;
    }

    .h2-care-piece h3 {
        margin-top: 8px;

        font-size: 1.05rem;
        line-height: 1.3;

        max-width: 245px;
    }

    .h2-care-piece a {
        font-size: .72rem;
    }

    .h2-final-section {
        min-height: 590px;

        padding:
            65px
            18px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

    .h2-care-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .h2-care-orbit {
        gap: 50px;
    }

    .h2-care-piece {
        min-height: 230px;

        padding:
            25px
            20px
            22px;
    }

    .h2-care-piece h3 {
        font-size: 1rem;
    }

    .h2-care-piece small {
        font-size: .53rem;
    }
}
/* =========================================================
   HOME 2 — SECTION 8
   CENTER CARE-TIP CONTENT INSIDE ORGANIC OUTLINES
   ========================================================= */

.h2-care-piece {
    padding-left: 48px;
    padding-right: 48px;
}

.h2-care-piece h3 {
    max-width: 250px;
}

.h2-care-piece > span,
.h2-care-piece > i,
.h2-care-piece small,
.h2-care-piece h3,
.h2-care-piece a {
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) and (max-width: 1023px) {

    .h2-care-piece {
        padding-left: 40px;
        padding-right: 40px;
    }

}
@media (max-width: 767px) {

    .h2-care-piece {
        padding-left: 38px;
        padding-right: 38px;
    }

    .h2-care-piece h3 {
        max-width: 250px;
    }

}
/* =========================================================
   SECTION 8 — FIX SECOND CARE CARD READ MORE
   ========================================================= */

.h2-care-piece.care-piece-two a {
    position: relative;
    top: -12px;
}


/* =========================================================
   MEDIVANA — ALL PRODUCTS PAGE
   ========================================================= */


/* =========================================================
   PRODUCT PAGE VARIABLES
   ========================================================= */

.med-products-page {

    --products-bg: var(--med-bg, #FFF8EC);
    --products-card: var(--med-card, #FFFDF8);
    --products-primary: var(--med-primary, #5B8FA8);
    --products-deep: var(--med-deep-blue, #31566B);
    --products-powder: var(--med-powder-blue, #DCECF2);
    --products-teal: var(--med-teal, #78BDB5);
    --products-peach: var(--med-peach, #F3B6A2);
    --products-text: var(--med-text, #34444B);

    background: var(--products-bg);
    color: var(--products-text);

}


/* =========================================================
   COMMON
   ========================================================= */

.med-products-page a {
    text-decoration: none;
}

.med-products-page button:not(.med-nav-link):not(.med-action-button):not(.med-hamburger):not(.med-mobile-close):not(.med-mobile-link),
.med-products-page input,
.med-products-page select {
    font: inherit;
}

.med-products-page img {
    display: block;
    max-width: 100%;
}


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

.products-hero {

    position: relative;

    min-height: 720px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);

    align-items: center;

    gap: 40px;

    padding:
        90px
        6%
        100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 50%,
            var(--products-powder) 0,
            transparent 35%
        ),
        var(--products-bg);

}


/* subtle organic background */

.products-hero::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -150px;
    top: -150px;

    border-radius:
        54% 46% 65% 35% /
        40% 55% 45% 60%;

    background:
        var(--products-powder);

    opacity: .55;

    pointer-events: none;

}


.products-hero-content {

    position: relative;

    z-index: 5;

    max-width: 680px;

}


.products-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--products-teal);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 20px;

}


.products-eyebrow i {
    font-size: 14px;
}


.products-hero h1 {

    margin: 0;

    color: var(--products-deep);

    font-size: clamp(
        42px,
        5vw,
        76px
    );

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;

}


.products-hero h1 span {

    display: block;

    color: var(--products-teal);

}


.products-hero-content > p {

    max-width: 590px;

    margin: 26px 0 30px;

    color: var(--products-text);

    font-size: 17px;

    line-height: 1.8;

}


.products-hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

}


.products-primary-btn,
.products-secondary-btn {

    min-height: 54px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius: 18px;

    font-weight: 800;

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

}


.products-primary-btn {

    background: var(--products-deep);

    color: #FFFDF8;

    box-shadow:
        0 15px 30px
        rgba(49, 86, 107, .18);

}


.products-secondary-btn {

    background: var(--products-card);

    color: var(--products-deep);

    border: 1px solid
        rgba(91, 143, 168, .25);

}


.products-primary-btn:hover,
.products-secondary-btn:hover {

    transform: translateY(-4px);

}


.products-primary-btn:hover {

    box-shadow:
        0 20px 40px
        rgba(49, 86, 107, .25);

}


.products-hero-note {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 24px;

    color: var(--products-text);

    font-size: 13px;

    font-weight: 700;

}


.products-hero-note i {

    color: var(--products-teal);

}


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

.products-hero-visual {

    position: relative;

    width: 100%;

    min-height: 520px;

    display: grid;

    place-items: center;

}


.hero-main-product {

    position: relative;

    z-index: 4;

    width: min(380px, 85%);

    aspect-ratio: 1 / 1;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 25px 60px
        rgba(49, 86, 107, .18);

    animation:
        productHeroFloat 5s ease-in-out infinite;

}


.hero-main-product img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


@keyframes productHeroFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-16px)
            rotate(2deg);
    }

}


/* =========================================================
   PRODUCTS HERO - FLOATING HEALTHCARE ELEMENTS
   ========================================================= */

.hero-floating-element {
    position: absolute;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    border: 1px solid rgba(120, 189, 181, 0.35);

    box-shadow:
        0 15px 35px rgba(49, 86, 107, 0.15);

    z-index: 8;

    pointer-events: none;
}


/* ICON */

.hero-floating-element i {
    font-size: 21px;
    color: var(--med-teal);

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}


/* =========================================================
   FLOATING ELEMENT POSITIONS
   ========================================================= */

.hero-element-one {
    top: 16%;
    left: 8%;

    animation:
        heroFloatOne 4.5s ease-in-out infinite;
}


.hero-element-two {
    top: 28%;
    right: 5%;

    width: 52px;
    height: 52px;

    animation:
        heroFloatTwo 5s ease-in-out infinite;
}


.hero-element-three {
    bottom: 19%;
    left: 13%;

    width: 50px;
    height: 50px;

    background: var(--med-powder-blue);

    animation:
        heroFloatThree 4.8s ease-in-out infinite;
}


.hero-element-four {
    bottom: 13%;
    right: 13%;

    width: 46px;
    height: 46px;

    background: var(--med-card);

    animation:
        heroFloatFour 5.5s ease-in-out infinite;
}


/* =========================================================
   FLOATING DOTS
   ========================================================= */

.hero-floating-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--med-peach);

    z-index: 6;

    pointer-events: none;
}


.hero-dot-one {
    top: 12%;
    right: 20%;

    animation:
        heroDotFloat 3.5s ease-in-out infinite;
}


.hero-dot-two {
    bottom: 25%;
    left: 5%;

    width: 7px;
    height: 7px;

    background: var(--med-teal);

    animation:
        heroDotFloat 4.2s ease-in-out infinite reverse;
}


/* =========================================================
   FLOATING ANIMATIONS
   ========================================================= */

@keyframes heroFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(8deg);
    }
}


@keyframes heroFloatTwo {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(5deg);
    }

    50% {
        transform:
            translateY(15px)
            rotate(-8deg);
    }
}


@keyframes heroFloatThree {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(12deg);
    }
}


@keyframes heroFloatFour {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(17px)
            rotate(10deg);
    }
}


@keyframes heroDotFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.25);
    }
}
.hero-health-badge {

    position: absolute;

    z-index: 9;

    right: 4%;
    bottom: 10%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px 10px 10px;

    background: var(--med-card);

    border: 1px solid rgba(120, 189, 181, 0.35);

    border-radius: 50px;

    box-shadow:
        0 15px 35px rgba(49, 86, 107, 0.15);

}


.hero-health-badge i {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--products-peach);

    color:
        var(--products-deep);

}


.hero-health-badge span {

    display: flex;

    flex-direction: column;

    color:
        var(--products-text);

    font-size: 11px;

}


.hero-health-badge strong {

    color:
        var(--products-deep);

    font-size: 13px;

}


.hero-leaf {

    position: absolute;

    z-index: 8;

    color:
        var(--products-teal);

    pointer-events: none;

}


.hero-leaf-one {

    left: 4%;
    top: 12%;

    font-size: 32px;

    transform:
        rotate(-25deg);

}


.hero-leaf-two {

    right: 8%;
    top: 63%;

    font-size: 22px;

    transform:
        rotate(50deg);

}


.hero-leaf-three {

    left: 25%;
    bottom: 7%;

    font-size: 25px;

    transform:
        rotate(-50deg);

    color:
        var(--products-peach);

}


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

.products-category-section {

    padding:
        100px 6%
        110px;

    background:
        var(--products-card);

}


.products-section-heading {

    max-width: 650px;

    margin: 0 auto 55px;

    text-align: center;

}


.products-section-heading h2 {

    margin: 0;

    color:
        var(--products-deep);

    font-size:
        clamp(32px, 4vw, 54px);

    line-height: 1.1;

}


.products-section-heading h2 span {

    color:
        var(--products-teal);

}


.products-section-heading p {

    margin: 18px auto 0;

    max-width: 570px;

    color:
        var(--products-text);

    line-height: 1.8;

}


/* category buttons */

.products-category-selector {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 16px;

}


.product-category-card {

    position: relative;

    min-height: 230px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    cursor: pointer;

    border: 1px solid
        rgba(91, 143, 168, .18);

    background:
        var(--products-bg);

    color:
        var(--products-text);

    border-radius:
        38% 62% 55% 45% /
        48% 42% 58% 52%;

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

}


.product-category-card:hover {

    transform:
        translateY(-10px)
        rotate(-1deg);

    box-shadow:
        0 22px 45px
        rgba(49, 86, 107, .12);

}


.product-category-card.active {

    background:
        var(--products-deep);

    color:
        #FFFDF8;

    transform:
        translateY(-6px);

}


.category-icon {

    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--products-powder);

    color:
        var(--products-deep);

    font-size: 21px;

    margin-bottom: 22px;

}


.product-category-card.active
.category-icon {

    background:
        var(--products-teal);

    color:
        var(--products-deep);

}


.category-number {

    display: none;

    position: absolute;

    right: 22px;
    top: 20px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    opacity: .55;

}


.product-category-card strong {

    display: block;

    font-size: 17px;

    margin-bottom: 8px;

}


.product-category-card small {

    display: block;

    font-size: 12px;

    line-height: 1.5;

    opacity: .75;

}


.category-arrow {

    display: none;

    position: absolute;

    right: 22px;
    bottom: 22px;

    color:
        var(--products-teal);

}


.product-category-card.active
.category-arrow {

    color:
        var(--products-peach);

}


/* =========================================================
   SHOP SECTION
   ========================================================= */

.products-shop-section {

    position: relative;

    padding:
        100px 5%
        120px;

    background:
        var(--products-bg);

}


.products-shop-heading {

    max-width: 1400px;

    margin: 0 auto 40px;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

}


.products-shop-heading h2 {

    margin: 0;

    color:
        var(--products-deep);

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

}


.products-shop-heading h2 span {

    color:
        var(--products-teal);

}


.products-layout {

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns:
        285px minmax(0, 1fr);

    gap: 35px;

    align-items: start;

}


/* =========================================================
   STICKY SIDEBAR
   ========================================================= */

.products-filter-sidebar {

    position: sticky;

    top: 105px;

    max-height:
        calc(100vh - 125px);

    overflow-y: auto;

    padding: 25px;

    background:
        var(--products-card);

    border:
        1px solid
        rgba(91, 143, 168, .17);

    border-radius:
        30px;

    box-shadow:
        0 20px 45px
        rgba(49, 86, 107, .07);

}


.products-filter-sidebar::-webkit-scrollbar {

    width: 5px;

}


.products-filter-sidebar::-webkit-scrollbar-thumb {

    background:
        var(--products-teal);

    border-radius: 20px;

}


.filter-sidebar-top {

    display: flex;

    align-items: start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 25px;

}


.filter-small-title {

    color:
        var(--products-teal);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.filter-sidebar-top h3 {

    margin:
        5px 0 0;

    color:
        var(--products-deep);

    font-size: 21px;

}


.filter-close {

    display: none;

    border: 0;

    background: transparent;

    color:
        var(--products-deep);

    cursor: pointer;

    font-size: 20px;

}


/* filter group */

.product-filter-group {

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(91, 143, 168, .14);

}


.product-filter-group > label:first-child {

    display: block;

    margin-bottom: 10px;

    color:
        var(--products-deep);

    font-size: 13px;

    font-weight: 800;

}


.product-search-box {

    position: relative;

}


.product-search-box i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--products-primary);

}


.product-search-box input {

    width: 100%;

    height: 46px;

    padding:
        0 14px 0 40px;

    border:
        1px solid
        rgba(91, 143, 168, .2);

    border-radius: 15px;

    background:
        var(--products-bg);

    color:
        var(--products-text);

    outline: none;

}


.product-search-box input:focus {

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

}


.filter-group-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

}


.filter-group-heading strong {

    color:
        var(--products-deep);

    font-size: 13px;

}


.filter-group-heading i {

    color:
        var(--products-teal);

    font-size: 13px;

}


.filter-check {

    display: flex !important;

    align-items: center;

    gap: 10px;

    margin:
        10px 0;

    cursor: pointer;

    color:
        var(--products-text);

    font-size: 13px;

}


.filter-check input {

    width: 16px;
    height: 16px;

    accent-color:
        var(--products-teal);

}


.price-range-values {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

    color:
        var(--products-text);

    font-size: 12px;

}


.price-range-values strong {

    color:
        var(--products-deep);

}


.price-range {

    width: 100%;

    accent-color:
        var(--products-teal);

}


.clear-filter-button {

    width: 100%;

    min-height: 45px;

    border: 1px solid
        rgba(91, 143, 168, .2);

    border-radius: 15px;

    background:
        transparent;

    color:
        var(--products-deep);

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease;

}


.clear-filter-button:hover {

    background:
        var(--products-deep);

    color:
        #FFFDF8;

}


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

.products-content {

    min-width: 0;

}


.products-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(91, 143, 168, .14);

}


.products-result-count {

    color:
        var(--products-text);

    font-size: 13px;

}


.products-result-count span {

    color:
        var(--products-deep);

    font-weight: 900;

}


.products-sort {

    display: flex;

    align-items: center;

    gap: 10px;

}


.products-sort label {

    color:
        var(--products-text);

    font-size: 12px;

}


.products-sort select {

    height: 42px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(91, 143, 168, .2);

    border-radius: 13px;

    background:
        var(--products-card);

    color:
        var(--products-deep);

    outline: none;

}


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

.product-category-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin:
        40px 0 22px;

}


.product-category-heading > div {

    display: flex;

    align-items: center;

    gap: 13px;

}


.product-category-heading > div > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--products-teal);

    color:
        var(--products-deep);

    font-size: 10px;

    font-weight: 900;

}


.product-category-heading h3 {

    margin: 0;

    color:
        var(--products-deep);

    font-size: 25px;

}


.product-category-heading p {

    margin: 0;

    color:
        var(--products-text);

    font-size: 12px;

    opacity: .8;

}


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

.med-products-grid {

    display: grid;

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

    gap: 18px;

}


.med-product-card {

    position: relative;

    min-width: 0;

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 12px;

    background:
        var(--products-card);

    border:
        1px solid
        rgba(91, 143, 168, .15);

    border-radius:
        28px;

    box-shadow:
        0 12px 35px
        rgba(49, 86, 107, .055);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        transform .45s ease,
        opacity .45s ease,
        box-shadow .35s ease;

}


.med-product-card.product-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.med-product-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 24px 45px
        rgba(49, 86, 107, .12);

}


.product-card-main-link {

    display: block;

    flex: 1;

    color: inherit;

}


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

/* =========================================================
   PRODUCT CARD IMAGE - FULL IMAGE AREA
   ========================================================= */

.med-product-image {
    position: relative;
    width: 100%;
    height: 245px;
    overflow: hidden;
    background: var(--med-powder-blue);
    border-radius: 24px 24px 0 0;
}

/* Remove any circular shape/background around the image */
.med-product-image::before,
.med-product-image::after {
    display: none;
    content: none;
}



.med-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: transparent;
    transition: transform 0.5s ease;
}

.med-product-card:hover .med-product-image img {
    transform: scale(1.04);
}
/* Medical Devices category — these 3 source photos are much wider
   than the product image frame, so the default center crop was
   cutting the actual device out of view. Shift the focal point so
   the product itself stays fully in frame. */

.med-product-image img[src$="device1.jpg"] {
    object-position: left center;
}

.med-product-image img[src$="device2.jpg"] {
    object-position: left center;
}

.med-product-image img[src$="device3.jpg"] {
    object-position: 60% center;
}
.product-status {

    position: absolute;

    z-index: 5;

    top: 12px;
    left: 12px;

    padding:
        6px 10px;

    border-radius: 12px;

    background:
        var(--products-teal);

    color:
        var(--products-deep);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .4px;

}


.prescription-status {

    background:
        var(--products-peach);

}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.med-product-info {

    padding:
        18px 6px 15px;

}


.product-category-label {

    color:
        var(--products-primary);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.2px;

}


.med-product-info h4 {

    margin:
        7px 0 6px;

    color:
        var(--products-deep);

    font-size: 16px;

    line-height: 1.3;

}


.med-product-info p {

    min-height: 38px;

    margin: 0 0 12px;

    color:
        var(--products-text);

    font-size: 11px;

    line-height: 1.5;

}


.product-price {

    color:
        var(--products-deep);

    font-size: 18px;

    font-weight: 900;

}


/* =========================================================
   ADD CART
   ========================================================= */

.add-to-cart-button {

    width: 100%;

    min-height: 45px;

    border: 0;

    border-radius: 14px;

    background:
        var(--products-deep);

    color:
        #FFFDF8;

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

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

}


.add-to-cart-button:hover {

    background:
        var(--products-teal);

    color:
        var(--products-deep);

    transform:
        translateY(-2px);

}


.prescription-button {

    width: 100%;

    min-height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 14px;

    background:
        var(--products-peach);

    color:
        var(--products-deep);

    font-size: 11px;

    font-weight: 900;

}


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

.products-no-results {

    display: none;

    min-height: 300px;

    place-items: center;

    text-align: center;

}


.products-no-results.show {

    display: grid;

}


.products-no-results i {

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    margin: auto;

    border-radius: 50%;

    background:
        var(--products-powder);

    color:
        var(--products-teal);

    font-size: 25px;

}


.products-no-results h3 {

    margin:
        18px 0 7px;

    color:
        var(--products-deep);

}


.products-no-results p {

    margin: 0;

    color:
        var(--products-text);

    font-size: 13px;

}


.products-no-results button {

    margin-top: 18px;

    border: 0;

    border-radius: 13px;

    padding:
        11px 18px;

    background:
        var(--products-deep);

    color:
        #FFFDF8;

    cursor: pointer;

}


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

.mobile-filter-button {

    display: none;

    min-height: 45px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(91, 143, 168, .2);

    border-radius: 14px;

    background:
        var(--products-card);

    color:
        var(--products-deep);

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

}


.products-filter-overlay {

    display: none;

}


/* =========================================================
   DELIVERY CTA
   ========================================================= */

/* =========================================================
   PRODUCTS — DELIVERY CTA
   Different from footer while keeping Medivana theme
   ========================================================= */

.products-delivery-cta {

    position: relative;

    min-height: 430px;

    display: grid;

    place-items: center;

    text-align: center;

    padding:
        90px 6%;

    overflow: hidden;

    /* DIFFERENT FROM FOOTER */
    background:
        var(--med-powder-blue);

}

.products-delivery-cta::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -200px;
    top: -260px;

    border-radius:
        50%;

    background:
        var(--products-teal);

    opacity: .16;

}


.products-delivery-cta::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    bottom: -200px;

    border-radius:
        50%;

    background:
        var(--products-peach);

    opacity: .15;

}


.products-cta-content {

    position: relative;

    z-index: 4;

    max-width: 700px;

}


.products-cta-content .products-eyebrow {

    color:
        var(--products-peach);

}


.products-cta-content h2 {

    margin: 0;

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


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

    line-height: 1.08;

}


.products-cta-content h2 span {

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


.products-cta-content p {

    max-width: 560px;

    margin:
        20px auto 30px;

   color:
        var(--med-text);


    opacity: .9;

    line-height: 1.8;

}


.products-cta-content .products-primary-btn {

    background:
        var(--products-teal);

    color:
        var(--products-deep);

}


.products-cta-leaves i {

    position: absolute;

    z-index: 2;

    color:
        var(--products-teal);

    opacity: .28;

}


.products-cta-leaves i:nth-child(1) {

    left: 12%;

    top: 20%;

    font-size: 50px;

    transform:
        rotate(-30deg);

}


.products-cta-leaves i:nth-child(2) {

    right: 13%;

    top: 30%;

    font-size: 35px;

    transform:
        rotate(45deg);

}


.products-cta-leaves i:nth-child(3) {

    left: 25%;

    bottom: 13%;

    font-size: 28px;

    transform:
        rotate(60deg);

}


/* =========================================================
   TABLET
   768 - 1023
   ========================================================= */

@media (max-width: 1023px) {

    .products-hero {

        min-height: auto;

        grid-template-columns:
            1fr;

        padding:
            80px 6%;

        text-align: center;

    }


    .products-hero-content {

        margin: auto;

    }


    .products-hero-content > p {

        margin-left: auto;
        margin-right: auto;

    }


    .products-hero-actions {

        justify-content: center;

    }


    .products-hero-note {

        justify-content: center;

    }


    .products-hero-visual {

        min-height: 500px;

        max-width: 650px;

        margin: auto;

    }


    .products-category-selector {

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

    }


    .product-category-card:first-child {

        grid-column:
            1 / -1;

    }


    .products-layout {

        grid-template-columns:
            1fr;

    }


    .mobile-filter-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

    }


    .products-filter-sidebar {

        position: fixed;

        z-index: 10001;

        top: 0;

        left: 0;

        width: min(340px, 88vw);

        height: 100vh;

        max-height: none;

        border-radius:
            0 30px 30px 0;

        transform:
            translateX(-110%);

        transition:
            transform .4s ease;

    }


    .products-filter-sidebar.filter-open {

        transform:
            translateX(0);

    }


    .filter-close {

        display: block;

    }


    .products-filter-overlay {

        position: fixed;

        z-index: 10000;

        inset: 0;

        background:
            rgba(16, 42, 53, .5);

        backdrop-filter:
            blur(4px);

    }


    .products-filter-overlay.filter-open {

        display: block;

    }


    .med-products-grid {

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

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .products-hero {

        padding-left: 4%;
        padding-right: 4%;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, .8fr);

    }


    .products-category-selector {

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

    }


    .product-category-card:first-child {

        grid-column: auto;

    }


    .med-products-grid {

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

    }

}


/* =========================================================
   SMALL LAPTOP / LARGE TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 900px) {

    .med-products-grid {

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

    }

}
@media (max-width: 1023px) {

    .hero-floating-element {
        width: 48px;
        height: 48px;
    }

    .hero-floating-element i {
        font-size: 18px;
    }

    .hero-element-one {
        left: 5%;
        top: 15%;
    }

    .hero-element-two {
        right: 4%;
        top: 23%;
    }

    .hero-element-three {
        left: 8%;
        bottom: 17%;
    }

    .hero-element-four {
        right: 8%;
        bottom: 12%;
    }
}


@media (max-width: 767px) {

    .hero-floating-element {
        width: 42px;
        height: 42px;
    }

    .hero-floating-element i {
        font-size: 16px;
    }

    .hero-element-one {
        left: 2%;
        top: 12%;
    }

    .hero-element-two {
        right: 2%;
        top: 20%;
    }

    .hero-element-three {
        left: 4%;
        bottom: 15%;
    }

    .hero-element-four {
        right: 5%;
        bottom: 9%;
    }

    .hero-floating-dot {
        display: none;
    }
}


@media (max-width: 480px) {

    .hero-element-one {
        left: 0;
        top: 10%;
    }

    .hero-element-two {
        right: 0;
        top: 18%;
    }

    .hero-element-three {
        left: 2%;
        bottom: 13%;
    }

    .hero-element-four {
        right: 2%;
        bottom: 7%;
    }
}

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

@media (max-width: 767px) {

    .products-hero {

        padding:
            65px 5%
            70px;

    }


    .products-hero h1 {

        font-size:
            clamp(38px, 10vw, 55px);

        letter-spacing:
            -1.5px;

    }


    .products-hero-content > p {

        font-size: 14px;

    }


    .products-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .products-primary-btn,
    .products-secondary-btn {

        width: 100%;

    }


    .products-hero-visual {

        min-height: 390px;

    }


    .hero-main-product {

        width: 65%;

    }


    .hero-floating-product {

        width: 82px;
        height: 82px;

    }


    .hero-floating-product img {

        width: 60px;
        height: 60px;

    }


    .hero-product-one {

        left: 0;

    }


    .hero-product-two {

        right: 0;

    }


    .hero-health-badge {

        right: 0;

        top: 8%;

        padding: 9px;

    }


    .hero-health-badge i {

        width: 30px;
        height: 30px;

    }


    .hero-health-badge span {

        font-size: 9px;

    }


    .products-category-section {

        padding:
            75px 5%;

    }


    .products-category-selector {

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

    }


    .product-category-card {

        min-height: 200px;

        padding: 20px;

    }


    .product-category-card:first-child {

        grid-column:
            1 / -1;

    }


    .products-shop-section {

        padding:
            75px 5%;

    }


    .products-shop-heading {

        align-items: center;

    }


    .products-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .products-sort {

        width: 100%;

        justify-content:
            space-between;

    }


    .products-sort select {

        flex: 1;

    }


    .product-category-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .med-products-grid {

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

        gap: 12px;

    }


    .med-product-image {

        height: 175px;

    }


    .med-product-info h4 {

        font-size: 14px;

    }


    .med-product-info p {

        font-size: 10px;

    }


    .product-price {

        font-size: 16px;

    }


    .products-delivery-cta {

        padding:
            75px 5%;

    }

}


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

@media (max-width: 480px) {

    .products-hero {

        padding:
            55px 18px
            60px;

    }


    .products-eyebrow {

        font-size: 9px;

        letter-spacing:
            1.4px;

    }


    .products-hero h1 {

        font-size:
            38px;

    }


    .products-hero-visual {

        min-height: 330px;

    }


    .hero-main-product {

        width: 72%;

    }


    .products-category-selector {

        grid-template-columns:
            1fr;

    }


    .product-category-card:first-child {

        grid-column:
            auto;

    }


    .product-category-card {

        min-height: 170px;

    }


    .med-products-grid {

        grid-template-columns:
            1fr;

    }


    .med-product-image {

        height: 230px;

    }


    .products-shop-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .mobile-filter-button {

        width: 100%;

    }


    .products-sort {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .products-sort select {

        width: 100%;

    }


    .products-delivery-cta h2 {

        font-size:
            35px;

    }

}


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

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

    .hero-main-product,
    .hero-floating-product {

        animation: none;

    }


    .med-product-card {

        transition:
            opacity .2s ease;

        transform: none;

    }

}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.med-back-to-top {

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9997;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: 0;
    border-radius: 50%;

    background: var(--med-deep-blue);
    color: #FFFDF8;

    font-size: 16px;
    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(49, 86, 107, 0.25);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease,
        background 0.3s ease;

}


.med-back-to-top.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


.med-back-to-top:hover {

    background: var(--med-teal);
    color: var(--med-deep-blue);

}


@media (max-width: 767px) {

    .med-back-to-top {

        right: 16px;
        bottom: 16px;

        width: 42px;
        height: 42px;

        font-size: 14px;

    }

}


/* =========================================================
   MEDIVANA CART PAGE
   ========================================================= */

.med-cart-page {
    overflow: hidden;
    background: var(--med-bg);
}


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

.med-cart-hero {
    position: relative;

    min-height: 520px;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 50px;

    padding: 80px 6% 90px;

    background: var(--med-bg);

    overflow: hidden;
}


.med-cart-hero-content {
    position: relative;
    z-index: 5;

    max-width: 650px;
}


.med-cart-eyebrow,
.med-cart-small-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--med-primary);

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

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.med-cart-eyebrow i {
    font-size: 14px;
}


.med-cart-hero-content h1 {
    margin: 20px 0 22px;

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

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.04;

    font-weight: 900;

    letter-spacing: -2px;
}


.med-cart-hero-content h1 span {
    display: block;

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


.med-cart-hero-content p {
    max-width: 570px;

    margin: 0;

    color: var(--med-text);

    font-size: 17px;

    line-height: 1.8;

    opacity: .82;
}


.med-cart-hero-note {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 28px;

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

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


.med-cart-hero-note i {
    color: var(--med-teal);

    font-size: 18px;
}


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

.med-cart-hero-visual {
    position: relative;

    width: min(560px, 100%);
    height: 390px;

    margin-left: auto;
}


.med-cart-hero-organic {
    position: absolute;

    width: 330px;
    height: 330px;

    top: 50%;
    left: 50%;

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

    border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%;

    background: var(--med-powder-blue);

    opacity: .9;

    animation: medCartOrganicMorph 8s ease-in-out infinite;
}


@keyframes medCartOrganicMorph {

    0%,
    100% {
        border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%;
    }

    50% {
        border-radius: 57% 43% 55% 45% / 44% 57% 43% 56%;
    }
}


.med-cart-hero-icon {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    display: grid;
    place-items: center;

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

    border-radius: 44% 56% 52% 48% / 52% 44% 56% 48%;

    background: var(--med-card);

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

    box-shadow:
        0 25px 70px rgba(49, 86, 107, .18);

    animation: medCartCenterFloat 4.5s ease-in-out infinite;

    z-index: 5;
}


.med-cart-hero-icon i {
    font-size: 52px;
}


@keyframes medCartCenterFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-13px)
            rotate(3deg);
    }
}


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

.cart-hero-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .55;

    z-index: 3;

    pointer-events: none;
}


.cart-leaf-one {
    top: 8%;
    left: 15%;

    font-size: 34px;

    transform: rotate(-25deg);

    animation: medCartLeafOne 5s ease-in-out infinite;
}


.cart-leaf-two {
    right: 10%;
    bottom: 10%;

    font-size: 43px;

    transform: rotate(28deg);

    animation: medCartLeafTwo 6s ease-in-out infinite;
}


.cart-leaf-three {
    top: 20%;
    right: 18%;

    font-size: 21px;

    color: var(--med-peach);

    transform: rotate(35deg);

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


@keyframes medCartLeafOne {

    0%,
    100% {
        transform: rotate(-25deg) translateY(0);
    }

    50% {
        transform: rotate(-12deg) translateY(-15px);
    }
}


@keyframes medCartLeafTwo {

    0%,
    100% {
        transform: rotate(28deg) translateY(0);
    }

    50% {
        transform: rotate(42deg) translateY(15px);
    }
}


@keyframes medCartLeafThree {

    0%,
    100% {
        transform: rotate(35deg) translateY(0);
    }

    50% {
        transform: rotate(15deg) translateY(-12px);
    }
}


/* =========================================================
   FLOATING HEALTHCARE ELEMENTS
   ========================================================= */

.med-cart-floating {
    position: absolute;

    width: 57px;
    height: 57px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    border: 1px solid rgba(120, 189, 181, .35);

    box-shadow:
        0 14px 35px rgba(49, 86, 107, .14);

    z-index: 7;
}


.med-cart-floating i {
    font-size: 20px;
}


.cart-float-one {
    top: 13%;
    left: 5%;

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


.cart-float-two {
    top: 19%;
    right: 4%;

    animation: medCartFloatTwo 5s ease-in-out infinite;
}


.cart-float-three {
    bottom: 17%;
    left: 9%;

    background: var(--med-powder-blue);

    animation: medCartFloatThree 4.5s ease-in-out infinite;
}


.cart-float-four {
    bottom: 8%;
    right: 13%;

    background: var(--med-peach);

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

    animation: medCartFloatFour 5.5s ease-in-out infinite;
}


@keyframes medCartFloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(-7deg);
    }

    50% {
        transform: translateY(-18px) rotate(8deg);
    }
}


@keyframes medCartFloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(5deg);
    }

    50% {
        transform: translateY(14px) rotate(-8deg);
    }
}


@keyframes medCartFloatThree {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px) rotate(10deg);
    }
}


@keyframes medCartFloatFour {

    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(17px) rotate(8deg);
    }
}


/* =========================================================
   DOTS
   ========================================================= */

.med-cart-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--med-peach);

    z-index: 6;
}


.cart-dot-one {
    top: 11%;
    right: 29%;

    animation: medCartDot 3s ease-in-out infinite;
}


.cart-dot-two {
    bottom: 19%;
    left: 2%;

    width: 7px;
    height: 7px;

    background: var(--med-teal);

    animation: medCartDot 4s ease-in-out infinite reverse;
}


@keyframes medCartDot {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.3);
    }
}


/* =========================================================
   CART SECTION
   ========================================================= */

.med-cart-section {
    position: relative;

    padding: 80px 6% 110px;

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


.med-cart-section-heading {
    max-width: 1300px;

    margin: 0 auto 35px;

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

    gap: 25px;
}


.med-cart-small-label {
    margin-bottom: 9px;
}


.med-cart-section-heading h2 {
    margin: 0;

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

    font-size: clamp(28px, 3vw, 42px);

    font-weight: 900;
}


.med-cart-items-count {
    padding-bottom: 5px;

    color: var(--med-primary);

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


/* =========================================================
   CART LAYOUT
   ========================================================= */

.med-cart-layout {
    width: min(1300px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(320px, .8fr);

    gap: 35px;

    align-items: start;
}


/* =========================================================
   PRODUCT LIST
   ========================================================= */

.med-cart-products {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.med-cart-item {
    position: relative;

    display: grid;

    grid-template-columns: 145px minmax(0, 1fr) auto;

    align-items: center;

    gap: 25px;

    padding: 20px;

    background: var(--med-card);

    border: 1px solid rgba(91, 143, 168, .15);

    border-radius: 26px;

    box-shadow:
        0 12px 35px rgba(49, 86, 107, .07);

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


.med-cart-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(49, 86, 107, .12);

    border-color: rgba(120, 189, 181, .4);
}


/* =========================================================
   CART PRODUCT IMAGE
   ========================================================= */

.med-cart-item-image {
    width: 145px;
    height: 145px;

    overflow: hidden;

    background: var(--med-powder-blue);

    border-radius: 20px;
}


.med-cart-item-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    border-radius: 0;

    background: transparent;

    transition: transform .45s ease;
}


.med-cart-item:hover .med-cart-item-image img {
    transform: scale(1.05);
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.med-cart-item-info {
    min-width: 0;
}


.med-cart-item-category {
    display: block;

    margin-bottom: 7px;

    color: var(--med-primary);

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

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.med-cart-item-name {
    display: inline-block;

    margin: 0 0 8px;

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

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

    line-height: 1.3;

    text-decoration: none;

    transition: color .3s ease;
}


.med-cart-item-name:hover {
    color: var(--med-teal);
}


.med-cart-item-brand {
    margin: 0 0 13px;

    color: var(--med-text);

    font-size: 13px;

    opacity: .7;
}


.med-cart-item-price {
    color: var(--med-teal);

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


/* =========================================================
   QUANTITY + REMOVE
   ========================================================= */

.med-cart-item-controls {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 15px;
}


.med-cart-quantity {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 6px 8px;

    border: 1px solid rgba(91, 143, 168, .2);

    border-radius: 30px;

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


.med-cart-quantity button {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background: var(--med-powder-blue);

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

    cursor: pointer;

    font-size: 12px;

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


.med-cart-quantity button:hover {
    transform: scale(1.08);

    background: var(--med-teal);

    color: #fff;
}


.med-cart-quantity span {
    min-width: 22px;

    text-align: center;

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

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


.med-cart-item-subtotal {
    color: var(--med-deep-blue);

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


.med-cart-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    border: 0;

    background: transparent;

    color: var(--med-primary);

    cursor: pointer;

    font-family: inherit;

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

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


.med-cart-remove:hover {
    color: var(--med-peach);

    transform: translateX(2px);
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.med-cart-summary {
    position: sticky;

    top: 110px;

    z-index: 5;
}


.med-summary-inner {
    padding: 32px;

    background: var(--med-card);

    border: 1px solid rgba(91, 143, 168, .16);

    border-radius: 30px;

    box-shadow:
        0 18px 50px rgba(49, 86, 107, .09);
}


.med-summary-inner h2 {
    margin: 7px 0 27px;

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

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


.med-summary-lines {
    display: flex;

    flex-direction: column;

    gap: 17px;
}


.med-summary-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--med-text);

    font-size: 14px;
}


.med-summary-row strong {
    color: var(--med-deep-blue);

    font-weight: 900;
}


.med-summary-row .med-free-delivery {
    color: var(--med-teal);
}


.med-summary-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid rgba(91, 143, 168, .18);

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

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


.med-summary-total strong {
    color: var(--med-teal);

    font-size: 25px;
}


/* =========================================================
   CHECKOUT BUTTON
   ========================================================= */

.med-checkout-button {
    width: 100%;

    margin-top: 25px;

    min-height: 56px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    border-radius: 18px;

    background: var(--med-deep-blue);

    color: #FFFDF8;

    font-family: inherit;

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

    text-decoration: none;

    box-shadow:
        0 14px 30px rgba(49, 86, 107, .18);

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


.med-checkout-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(49, 86, 107, .25);

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


.med-checkout-button i {
    transition: transform .3s ease;
}


.med-checkout-button:hover i {
    transform: translateX(5px);
}


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

.med-summary-trust {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid rgba(91, 143, 168, .12);
}


.med-summary-trust > i {
    color: var(--med-teal);

    font-size: 18px;

    margin-top: 3px;
}


.med-summary-trust strong {
    display: block;

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

    font-size: 13px;
}


.med-summary-trust p {
    margin: 5px 0 0;

    color: var(--med-text);

    font-size: 12px;

    line-height: 1.6;

    opacity: .7;
}


/* =========================================================
   CONTINUE SHOPPING
   ========================================================= */

.med-continue-shopping {
    width: min(1300px, 100%);

    margin: 28px auto 0;
}


.med-continue-shopping a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

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

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

    text-decoration: none;

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


.med-continue-shopping a:hover {
    color: var(--med-teal);

    transform: translateX(-4px);
}


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

.med-empty-cart {
    min-height: 650px;

    padding: 100px 6%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

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


.med-empty-cart-visual {
    position: relative;

    width: 210px;
    height: 180px;

    margin-bottom: 25px;
}


.med-empty-cart-circle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 130px;
    height: 130px;

    display: grid;
    place-items: center;

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

    border-radius: 48% 52% 56% 44% / 50% 43% 57% 50%;

    background: var(--med-powder-blue);

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

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


.med-empty-cart-circle i {
    font-size: 45px;
}


@keyframes medEmptyCartFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}


.empty-float {
    position: absolute;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    box-shadow:
        0 12px 25px rgba(49, 86, 107, .12);

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


.empty-float-one {
    top: 8%;
    left: 2%;
}


.empty-float-two {
    top: 0;
    right: 4%;

    color: var(--med-primary);

    animation-delay: .7s;
}


.empty-float-three {
    bottom: 4%;
    right: 13%;

    color: var(--med-peach);

    animation-delay: 1.2s;
}


@keyframes medEmptyElement {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(8deg);
    }
}


.med-empty-cart h2 {
    max-width: 650px;

    margin: 17px 0 13px;

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

    font-size: clamp(30px, 4vw, 46px);

    font-weight: 900;
}


.med-empty-cart p {
    max-width: 570px;

    margin: 0;

    color: var(--med-text);

    font-size: 16px;

    line-height: 1.8;

    opacity: .78;
}


.med-empty-cart-button {
    margin-top: 28px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 15px 24px;

    border-radius: 18px;

    background: var(--med-deep-blue);

    color: #FFFDF8;

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

    text-decoration: none;

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


.med-empty-cart-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(49, 86, 107, .2);
}


.med-empty-cart-button i {
    transition: transform .3s ease;
}


.med-empty-cart-button:hover i {
    transform: translateX(5px);
}


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

.med-cart-reveal {
    opacity: 0;

    transform: translateY(35px);

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


.med-cart-reveal.med-cart-visible {
    opacity: 1;

    transform: translateY(0);
}


.med-cart-item.med-cart-visible {
    animation: medCartItemReveal .7s ease both;
}


@keyframes medCartItemReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 1199px) {

    .med-cart-hero {
        padding-left: 5%;
        padding-right: 5%;

        gap: 25px;
    }


    .med-cart-section {
        padding-left: 5%;
        padding-right: 5%;
    }


    .med-cart-item {
        grid-template-columns:
            125px minmax(0, 1fr) auto;

        gap: 20px;
    }


    .med-cart-item-image {
        width: 125px;
        height: 125px;
    }


    .med-summary-inner {
        padding: 27px;
    }

}


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

@media (max-width: 1023px) {

    .med-cart-hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding-top: 65px;
        padding-bottom: 65px;

        text-align: center;
    }


    .med-cart-hero-content {
        max-width: 720px;

        margin: auto;
    }


    .med-cart-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .med-cart-hero-note {
        justify-content: center;
    }


    .med-cart-hero-visual {
        margin: 10px auto 0;
    }


    .med-cart-layout {
        grid-template-columns: 1fr;
    }


    .med-cart-summary {
        position: relative;

        top: auto;
    }


    .med-cart-section-heading {
        align-items: center;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   ========================================================= */

@media (max-width: 767px) {

    .med-cart-hero {
        padding: 55px 5% 50px;
    }


    .med-cart-hero-content h1 {
        font-size: clamp(36px, 10vw, 50px);

        letter-spacing: -1.2px;
    }


    .med-cart-hero-content p {
        font-size: 15px;
    }


    .med-cart-hero-visual {
        width: 100%;

        height: 310px;
    }


    .med-cart-hero-organic {
        width: 250px;
        height: 250px;
    }


    .med-cart-hero-icon {
        width: 110px;
        height: 110px;
    }


    .med-cart-hero-icon i {
        font-size: 40px;
    }


    .med-cart-floating {
        width: 46px;
        height: 46px;
    }


    .med-cart-floating i {
        font-size: 17px;
    }


    .med-cart-section {
        padding: 60px 5% 80px;
    }


    .med-cart-section-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-bottom: 25px;
    }


    .med-cart-section-heading h2 {
        font-size: 31px;
    }


    .med-cart-item {
        grid-template-columns: 90px minmax(0, 1fr);

        gap: 15px;

        padding: 15px;

        border-radius: 22px;
    }


    .med-cart-item-image {
        width: 90px;
        height: 90px;

        border-radius: 15px;
    }


    .med-cart-item-info {
        padding-right: 5px;
    }


    .med-cart-item-name {
        font-size: 17px;
    }


    .med-cart-item-brand {
        margin-bottom: 8px;
    }


    .med-cart-item-price {
        font-size: 16px;
    }


    .med-cart-item-controls {
        grid-column: 1 / -1;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        padding-top: 5px;
    }


    .med-cart-item-subtotal {
        margin-left: auto;
    }


    .med-cart-summary {
        margin-top: 5px;
    }


    .med-summary-inner {
        padding: 24px;

        border-radius: 25px;
    }


    .med-empty-cart {
        min-height: 570px;

        padding: 70px 5%;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .med-cart-hero {
        padding-top: 45px;
    }


    .med-cart-eyebrow {
        font-size: 10px;

        letter-spacing: 1.3px;
    }


    .med-cart-hero-content h1 {
        margin-top: 15px;

        font-size: 35px;
    }


    .med-cart-hero-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    .med-cart-hero-note {
        font-size: 12px;
    }


    .med-cart-hero-visual {
        height: 270px;
    }


    .med-cart-hero-organic {
        width: 205px;
        height: 205px;
    }


    .med-cart-hero-icon {
        width: 90px;
        height: 90px;
    }


    .med-cart-hero-icon i {
        font-size: 32px;
    }


    .med-cart-floating {
        width: 39px;
        height: 39px;
    }


    .med-cart-floating i {
        font-size: 14px;
    }


    .cart-hero-leaf {
        font-size: 22px;
    }


    .med-cart-section {
        padding-top: 50px;
    }


    .med-cart-section-heading h2 {
        font-size: 28px;
    }


    .med-cart-item {
        grid-template-columns: 75px minmax(0, 1fr);

        padding: 12px;

        gap: 12px;
    }


    .med-cart-item-image {
        width: 75px;
        height: 75px;
    }


    .med-cart-item-name {
        font-size: 15px;
    }


    .med-cart-item-category {
        font-size: 9px;
    }


    .med-cart-item-brand {
        font-size: 11px;
    }


    .med-cart-item-price {
        font-size: 15px;
    }


    .med-cart-quantity {
        gap: 8px;

        padding: 4px 6px;
    }


    .med-cart-quantity button {
        width: 28px;
        height: 28px;
    }


    .med-cart-item-controls {
        gap: 8px;
    }


    .med-cart-remove {
        font-size: 11px;
    }


    .med-summary-inner {
        padding: 21px;
    }


    .med-summary-inner h2 {
        font-size: 25px;
    }


    .med-summary-total strong {
        font-size: 22px;
    }


    .med-checkout-button {
        min-height: 53px;

        font-size: 13px;
    }


    .med-empty-cart h2 {
        font-size: 29px;
    }


    .med-empty-cart p {
        font-size: 14px;
    }

}


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

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

    .med-cart-hero-organic,
    .med-cart-hero-icon,
    .cart-hero-leaf,
    .med-cart-floating,
    .med-cart-dot,
    .empty-float,
    .med-empty-cart-circle {
        animation: none;
    }

    .med-cart-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

}

/* =========================================================
   MEDIVANA CHECKOUT PAGE
   ========================================================= */

.checkout-page {
    overflow: hidden;
    background: var(--med-bg);
}


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

.checkout-hero {
    position: relative;
    min-height: 360px;
    padding: 90px 7% 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 40%,
            var(--med-powder-blue) 0,
            transparent 32%
        ),
        var(--med-bg);
}

.checkout-hero-content {
    position: relative;
    z-index: 3;
    max-width: 700px;
}

.checkout-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--med-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.checkout-eyebrow i {
    font-size: 15px;
}

.checkout-hero h1 {
    margin: 0;
    color: var(--med-deep-blue);
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
}

.checkout-hero h1 span {
    display: block;
    color: var(--med-teal);
}

.checkout-hero p {
    max-width: 610px;
    margin: 24px 0 0;
    color: var(--med-text);
    font-size: 17px;
    line-height: 1.8;
}

.checkout-hero-decoration {
    position: relative;
    width: 320px;
    height: 240px;
    flex-shrink: 0;
}

.checkout-hero-circle {
    position: absolute;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-teal);
    font-size: 32px;
    box-shadow: 0 25px 55px rgba(49, 86, 107, .12);
    animation: checkoutFloat 4s ease-in-out infinite;
}

.circle-one {
    top: 15px;
    right: 70px;
}

.circle-two {
    right: 5px;
    bottom: 20px;
    color: var(--med-primary);
    animation-delay: -1.5s;
}

.checkout-leaf {
    position: absolute;
    color: var(--med-teal);
    opacity: .22;
}

.leaf-one {
    left: 20px;
    top: 30px;
    font-size: 50px;
    transform: rotate(-25deg);
}

.leaf-two {
    left: 80px;
    bottom: 20px;
    font-size: 35px;
    transform: rotate(35deg);
}

@keyframes checkoutFloat {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}


/* =========================================================
   CHECKOUT PROGRESS
   ========================================================= */

.checkout-progress-section {
    padding: 0 7%;
    position: relative;
    z-index: 5;
}

.checkout-progress {
    width: min(1100px, 100%);
    margin: -35px auto 0;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--med-card);
    border-radius: 22px;
    box-shadow: 0 20px 55px rgba(49, 86, 107, .12);
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}

.checkout-step-number {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
    font-size: 12px;
    font-weight: 900;
}

.checkout-step.active .checkout-step-number {
    background: var(--med-deep-blue);
    color: var(--med-card);
}

.checkout-step strong,
.checkout-step small {
    display: block;
}

.checkout-step strong {
    color: var(--med-deep-blue);
    font-size: 14px;
    font-weight: 900;
}

.checkout-step small {
    margin-top: 2px;
    color: var(--med-text);
    opacity: .6;
    font-size: 11px;
}

.checkout-progress-line {
    height: 1px;
    flex: 1;
    min-width: 20px;
    background: var(--med-powder-blue);
}


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

.checkout-content {
    padding: 80px 7% 100px;
}

.checkout-layout {
    width: min(1250px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    align-items: start;
    gap: 30px;
}

.checkout-form-area {
    min-width: 0;
}

.checkout-card {
    margin-bottom: 25px;
    padding: 34px;
    background: var(--med-card);
    border: 1px solid rgba(91, 143, 168, .12);
    border-radius: 28px;
    box-shadow: 0 15px 45px rgba(49, 86, 107, .07);
}

.checkout-reveal {
    animation: checkoutReveal .7s ease both;
}

.checkout-card:nth-child(2) {
    animation-delay: .08s;
}

.checkout-card:nth-child(3) {
    animation-delay: .16s;
}

@keyframes checkoutReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
}

.checkout-heading-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
    font-size: 19px;
}

.checkout-card-heading span {
    color: var(--med-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.checkout-card-heading h2 {
    margin: 4px 0 5px;
    color: var(--med-deep-blue);
    font-size: 25px;
    font-weight: 900;
}

.checkout-card-heading p {
    margin: 0;
    color: var(--med-text);
    opacity: .7;
    font-size: 14px;
    line-height: 1.6;
}


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

.checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.checkout-field {
    min-width: 0;
}

.checkout-field.full {
    grid-column: 1 / -1;
}

.checkout-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--med-deep-blue);
    font-size: 13px;
    font-weight: 800;
}

.checkout-field label span {
    color: var(--med-peach);
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(91, 143, 168, .22);
    outline: none;
    border-radius: 14px;
    background: var(--med-bg);
    color: var(--med-text);
    font-family: inherit;
    font-size: 14px;
    padding: 14px 16px;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.checkout-field textarea {
    min-height: 110px;
    resize: vertical;
}

.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
    color: var(--med-text);
    opacity: .45;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
    border-color: var(--med-primary);
    box-shadow: 0 0 0 4px rgba(91, 143, 168, .10);
}


/* =========================================================
   LOCATION
   ========================================================= */

.checkout-location-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding: 18px;
    border-radius: 20px;
    background: var(--med-powder-blue);
}

.checkout-location-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-teal);
}

.checkout-location-box > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.checkout-location-box strong {
    display: block;
    color: var(--med-deep-blue);
    font-size: 14px;
}

.checkout-location-box p {
    margin: 4px 0 0;
    color: var(--med-text);
    opacity: .7;
    font-size: 12px;
    line-height: 1.5;
}

.checkout-location-button {
    border: 0;
    border-radius: 12px;
    padding: 12px 15px;
    background: var(--med-deep-blue);
    color: var(--med-card);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .25s ease;
}

.checkout-location-button:hover {
    transform: translateY(-2px);
}


/* =========================================================
   ADDRESS TYPE
   ========================================================= */

.checkout-address-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.checkout-radio-card {
    cursor: pointer;
}

.checkout-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-radio-card span {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(91, 143, 168, .2);
    border-radius: 14px;
    color: var(--med-text);
    background: var(--med-bg);
    font-size: 13px;
    font-weight: 800;
    transition: .25s ease;
}

.checkout-radio-card input:checked + span {
    border-color: var(--med-primary);
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
}

.checkout-radio-card i {
    color: var(--med-teal);
}


/* =========================================================
   PAYMENT METHODS
   ========================================================= */

.checkout-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.checkout-payment-option {
    cursor: pointer;
}

.checkout-payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-option-content {
    min-height: 75px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid rgba(91, 143, 168, .18);
    border-radius: 17px;
    background: var(--med-bg);
    transition: .25s ease;
}

.checkout-payment-option input:checked + .payment-option-content {
    border-color: var(--med-primary);
    background: var(--med-powder-blue);
}

.payment-option-content > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--med-card);
    color: var(--med-deep-blue);
    font-size: 18px;
}

.payment-option-content strong,
.payment-option-content small {
    display: block;
}

.payment-option-content strong {
    color: var(--med-deep-blue);
    font-size: 13px;
}

.payment-option-content small {
    margin-top: 3px;
    color: var(--med-text);
    opacity: .65;
    font-size: 11px;
    line-height: 1.4;
}


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

.checkout-input-icon {
    position: relative;
}

.checkout-input-icon i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--med-primary);
    pointer-events: none;
}

.checkout-input-icon input {
    padding-left: 44px;
}

.checkout-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.checkout-checkbox input {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--med-teal);
}

.checkout-checkbox span {
    color: var(--med-text);
    font-size: 13px;
    line-height: 1.6;
}

.checkout-security-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(120, 189, 181, .12);
}

.checkout-security-note > i {
    margin-top: 2px;
    color: var(--med-teal);
}

.checkout-security-note strong {
    color: var(--med-deep-blue);
    font-size: 13px;
}

.checkout-security-note p {
    margin: 3px 0 0;
    color: var(--med-text);
    opacity: .7;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   TERMS
   ========================================================= */

.checkout-terms {
    margin-bottom: 25px;
}

.terms-checkbox a {
    color: var(--med-primary);
    font-weight: 800;
    text-decoration: underline;
}

.terms-checkbox strong {
    color: var(--med-peach);
}


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

.checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.checkout-back-button,
.checkout-place-order {
    min-height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 15px;
    padding: 0 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: .3s ease;
}

.checkout-back-button {
    color: var(--med-deep-blue);
    background: var(--med-powder-blue);
}

.checkout-place-order {
    border: 0;
    background: var(--med-deep-blue);
    color: var(--med-card);
    box-shadow: 0 12px 30px rgba(49, 86, 107, .18);
}

.checkout-back-button:hover,
.checkout-place-order:hover {
    transform: translateY(-3px);
}

.checkout-place-order:hover {
    box-shadow: 0 18px 35px rgba(49, 86, 107, .25);
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-summary-inner {
    padding: 28px;
    background: var(--med-card);
    border-radius: 28px;
    border: 1px solid rgba(91, 143, 168, .12);
    box-shadow: 0 15px 45px rgba(49, 86, 107, .08);
}

.checkout-summary-heading > span {
    color: var(--med-primary);
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.checkout-summary-heading h2 {
    margin: 5px 0 25px;
    color: var(--med-deep-blue);
    font-size: 24px;
    font-weight: 900;
}


/* =========================================================
   SUMMARY PRODUCTS
   ========================================================= */

.checkout-summary-products {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
}

.checkout-summary-product {
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(91, 143, 168, .12);
}

.checkout-summary-image {
    width: 65px;
    height: 65px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--med-powder-blue);
}

.checkout-summary-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.checkout-summary-product-info {
    min-width: 0;
}

.checkout-summary-product-info strong {
    display: block;
    color: var(--med-deep-blue);
    font-size: 13px;
    line-height: 1.35;
}

.checkout-summary-product-info small {
    display: block;
    margin-top: 4px;
    color: var(--med-text);
    opacity: .65;
    font-size: 11px;
}

.checkout-summary-product-price {
    color: var(--med-deep-blue);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}


/* =========================================================
   SUMMARY TOTALS
   ========================================================= */

.checkout-summary-totals {
    margin-top: 20px;
}

.checkout-summary-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
}

.checkout-summary-totals span {
    color: var(--med-text);
    font-size: 13px;
}

.checkout-summary-totals strong {
    color: var(--med-deep-blue);
    font-size: 13px;
}

.checkout-summary-total {
    margin-top: 10px;
    padding-top: 17px !important;
    border-top: 1px solid rgba(91, 143, 168, .18);
}

.checkout-summary-total span {
    color: var(--med-deep-blue);
    font-size: 16px;
    font-weight: 900;
}

.checkout-summary-total strong {
    color: var(--med-teal);
    font-size: 22px;
    font-weight: 900;
}


/* =========================================================
   PRESCRIPTION NOTICE
   ========================================================= */

.checkout-prescription-note {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 16px;
    background: rgba(243, 182, 162, .16);
}

.checkout-prescription-note > i {
    color: var(--med-peach);
    margin-top: 3px;
}

.checkout-prescription-note strong {
    display: block;
    color: var(--med-deep-blue);
    font-size: 12px;
}

.checkout-prescription-note p {
    margin: 4px 0 0;
    color: var(--med-text);
    opacity: .7;
    font-size: 10px;
    line-height: 1.5;
}


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

.checkout-trust {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(91, 143, 168, .12);
}

.checkout-trust div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.checkout-trust i {
    color: var(--med-teal);
    width: 18px;
}

.checkout-trust span {
    color: var(--med-text);
    font-size: 11px;
}

.checkout-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 13px;
    border-radius: 13px;
    background: var(--med-powder-blue);
    color: var(--med-deep-blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    transition: .25s ease;
}

.checkout-continue:hover {
    transform: translateY(-2px);
}


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

.checkout-empty {
    display: none;
    min-height: 55vh;
    padding: 80px 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.checkout-empty.show {
    display: flex;
}

.checkout-empty-icon {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-powder-blue);
    color: var(--med-primary);
    font-size: 30px;
}

.checkout-empty > span {
    margin-top: 25px;
    color: var(--med-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.checkout-empty h2 {
    margin: 8px 0;
    color: var(--med-deep-blue);
    font-size: 30px;
}

.checkout-empty p {
    max-width: 480px;
    color: var(--med-text);
    opacity: .7;
    line-height: 1.7;
}

.checkout-empty-button {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 22px;
    border-radius: 14px;
    background: var(--med-deep-blue);
    color: var(--med-card);
    text-decoration: none;
    font-weight: 900;
}


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

@media (max-width: 1023px) {

    .checkout-hero {
        padding: 75px 5% 70px;
        min-height: auto;
    }

    .checkout-hero-decoration {
        width: 250px;
        transform: scale(.85);
    }

    .checkout-content {
        padding: 70px 5% 80px;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
        order: -1;
    }

    .checkout-summary-inner {
        padding: 25px;
    }

    .checkout-summary-products {
        max-height: 300px;
    }

    .checkout-progress-section {
        padding: 0 5%;
    }

    .checkout-progress {
        margin-top: -25px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 767px) {

    .checkout-hero {
        padding: 65px 5% 55px;
    }

    .checkout-hero h1 {
        font-size: clamp(38px, 9vw, 54px);
        letter-spacing: -1.5px;
    }

    .checkout-hero p {
        font-size: 15px;
    }

    .checkout-hero-decoration {
        display: none;
    }

    .checkout-progress {
        margin-top: -20px;
        padding: 16px;
        gap: 8px;
    }

    .checkout-step {
        min-width: 0;
        flex: 1;
        justify-content: center;
    }

    .checkout-step-number {
        width: 35px;
        height: 35px;
    }

    .checkout-step > div {
        display: none;
    }

    .checkout-progress-line {
        flex: .5;
    }

    .checkout-content {
        padding: 55px 4% 70px;
    }

    .checkout-card {
        padding: 25px 20px;
        border-radius: 23px;
    }

    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-field.full {
        grid-column: auto;
    }

    .checkout-payment-methods {
        grid-template-columns: 1fr;
    }

    .checkout-location-box {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .checkout-location-button {
        width: 100%;
    }

    .checkout-address-types {
        grid-template-columns: 1fr;
    }

    .checkout-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .checkout-back-button,
    .checkout-place-order {
        width: 100%;
    }

}


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

@media (max-width: 600px) {

    .checkout-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .checkout-progress-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .checkout-progress {
        border-radius: 17px;
    }

    .checkout-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .checkout-card {
        padding: 22px 17px;
    }

    .checkout-card-heading {
        gap: 12px;
    }

    .checkout-heading-icon {
        width: 44px;
        height: 44px;
    }

    .checkout-card-heading h2 {
        font-size: 21px;
    }

}


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

@media (max-width: 480px) {

    .checkout-hero {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .checkout-hero h1 {
        font-size: 36px;
    }

    .checkout-hero p {
        font-size: 14px;
    }

    .checkout-progress {
        padding: 13px 10px;
    }

    .checkout-step-number {
        width: 31px;
        height: 31px;
        font-size: 10px;
    }

    .checkout-card {
        padding: 20px 15px;
    }

    .checkout-location-box {
        padding: 14px;
    }

    .checkout-summary-inner {
        padding: 20px 16px;
    }

    .checkout-summary-product {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .checkout-summary-product-price {
        grid-column: 2;
    }

    .checkout-summary-image {
        width: 55px;
        height: 55px;
    }

}
/* =========================================================
   CHECKOUT HERO
   ========================================================= */

.checkout-hero {
    position: relative;
    min-height: 500px;
    padding: 75px 5% 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
    overflow: hidden;
    background: var(--med-bg);
}

.checkout-hero-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
}

.checkout-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--med-teal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.checkout-eyebrow i {
    font-size: .9rem;
}

.checkout-hero-content h1 {
    margin: 0 0 20px;
    color: var(--med-deep-blue);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.08;
    font-weight: 900;
}

.checkout-hero-content h1 span {
    display: block;
    color: var(--med-primary);
}

.checkout-hero-content p {
    max-width: 570px;
    margin: 0;
    color: var(--med-text);
    font-size: 1.02rem;
    line-height: 1.8;
}

.checkout-hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 30px;
}

.checkout-hero-note span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--med-text);
    font-size: .86rem;
    font-weight: 700;
}

.checkout-hero-note i {
    color: var(--med-teal);
}


/* =========================================================
   CHECKOUT HERO - FULL IMAGE VISIBILITY
   ========================================================= */

.checkout-hero-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Remove the old organic/round background shape */
.checkout-hero-organic-shape {
    display: none !important;
}

/* Normal rectangular image container */
.checkout-hero-image-wrap {
    position: relative;
    width: min(560px, 100%);
    height: 440px;
    overflow: hidden;
    border-radius: 24px;
    z-index: 2;
    box-shadow: 0 25px 60px rgba(49, 86, 107, 0.16);
    background: var(--med-card);
}

/* Image fills the complete container */
.checkout-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
    border-radius: 0;
    transition: transform 0.6s ease;
}

.checkout-hero-image-wrap:hover .checkout-hero-image {
    transform: scale(1.03);
}
@keyframes checkoutImageFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}


/* FLOATING ELEMENTS */

.checkout-floating-element {
    position: absolute;
    z-index: 6;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-teal);
    box-shadow: 0 15px 35px rgba(49, 86, 107, .15);
    font-size: 1.15rem;
}

.checkout-float-one {
    top: 7%;
    left: 8%;
    animation: checkoutFloatOne 4s ease-in-out infinite;
}

.checkout-float-two {
    right: 4%;
    top: 28%;
    color: var(--med-primary);
    animation: checkoutFloatTwo 4.5s ease-in-out infinite;
}

.checkout-float-three {
    bottom: 8%;
    left: 12%;
    background: var(--med-peach);
    color: var(--med-deep-blue);
    animation: checkoutFloatThree 4s ease-in-out infinite;
}

@keyframes checkoutFloatOne {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }
}

@keyframes checkoutFloatTwo {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, -12px);
    }
}

@keyframes checkoutFloatThree {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(12px) rotate(-8deg);
    }
}


/* LEAVES */

.checkout-hero-leaf {
    position: absolute;
    z-index: 2;
    color: var(--med-teal);
    opacity: .22;
    pointer-events: none;
}

.checkout-leaf-one {
    top: 4%;
    right: 13%;
    font-size: 3rem;
    transform: rotate(35deg);
}

.checkout-leaf-two {
    bottom: 4%;
    right: 12%;
    font-size: 2.3rem;
    transform: rotate(-35deg);
}

.checkout-leaf-three {
    left: 3%;
    bottom: 17%;
    font-size: 1.8rem;
    transform: rotate(55deg);
}


/* BADGE */

.checkout-hero-badge {
    position: absolute;
    right: 7%;
    bottom: 7%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border-radius: 18px;
    background: var(--med-card);
    color: var(--med-text);
    box-shadow: 0 15px 35px rgba(49, 86, 107, .14);
    font-size: .78rem;
}

.checkout-hero-badge i {
    color: var(--med-teal);
    font-size: 1.1rem;
}

.checkout-hero-badge span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.checkout-hero-badge strong {
    color: var(--med-deep-blue);
}
/* =========================================================
   CHECKOUT HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .checkout-hero {
        padding-left: 4%;
        padding-right: 4%;
        gap: 30px;
    }

    .checkout-hero-content h1 {
        font-size: clamp(2.4rem, 5vw, 3.7rem);
    }

    .checkout-hero-visual {
        min-height: 370px;
    }

}


@media (max-width: 1023px) {

    .checkout-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 65px 6% 80px;
        text-align: center;
    }

    .checkout-hero-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .checkout-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .checkout-hero-note {
        justify-content: center;
    }

    .checkout-hero-visual {
        width: min(650px, 100%);
        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .checkout-hero {
        padding: 55px 5% 70px;
        gap: 15px;
    }

    .checkout-hero-content h1 {
        font-size: clamp(2.15rem, 9vw, 3rem);
    }

    .checkout-hero-content p {
        font-size: .94rem;
    }

    .checkout-hero-visual {
        min-height: 320px;
    }

    .checkout-hero-organic-shape {
        width: 82%;
        height: 300px;
    }

    .checkout-hero-image-wrap {
        width: 82%;
        height: 285px;
    }

    .checkout-floating-element {
        width: 48px;
        height: 48px;
        font-size: .95rem;
    }

    .checkout-hero-badge {
        right: 3%;
        bottom: 3%;
    }

}


@media (max-width: 480px) {

    .checkout-hero {
        padding: 45px 20px 60px;
    }

    .checkout-eyebrow {
        font-size: .7rem;
        letter-spacing: 1.4px;
    }

    .checkout-hero-content h1 {
        font-size: 2.15rem;
    }

    .checkout-hero-content p {
        font-size: .9rem;
        line-height: 1.7;
    }

    .checkout-hero-note {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .checkout-hero-visual {
        min-height: 285px;
    }

    .checkout-hero-organic-shape {
        width: 88%;
        height: 255px;
    }

    .checkout-hero-image-wrap {
        width: 88%;
        height: 245px;
    }

    .checkout-float-one {
        left: 1%;
    }

    .checkout-float-two {
        right: 1%;
    }

    .checkout-float-three {
        left: 5%;
        bottom: 1%;
    }

    .checkout-hero-badge {
        right: 2%;
        bottom: 0;
        padding: 9px 12px;
        font-size: .7rem;
    }

    .checkout-leaf-one {
        font-size: 2rem;
    }

    .checkout-leaf-two {
        font-size: 1.7rem;
    }

    .checkout-leaf-three {
        font-size: 1.4rem;
    }

}
/* =========================================================
   CHECKOUT PAGE - SCROLL REVEAL ANIMATIONS
   ========================================================= */

/* Elements start slightly below and invisible */
.checkout-page .checkout-scroll-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

/* Visible state */
.checkout-page .checkout-scroll-reveal.checkout-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Hero content comes from left */
.checkout-page .checkout-hero-content.checkout-scroll-reveal {
    transform: translateX(-55px);
}

.checkout-page .checkout-hero-content.checkout-scroll-reveal.checkout-visible {
    transform: translateX(0);
}


/* Hero image comes from right */
.checkout-page .checkout-hero-visual.checkout-scroll-reveal {
    transform: translateX(55px);
}

.checkout-page .checkout-hero-visual.checkout-scroll-reveal.checkout-visible {
    transform: translateX(0);
}


/* Cards use slightly different movement */
.checkout-page .checkout-card.checkout-scroll-reveal {
    transform: translateY(50px);
}

.checkout-page .checkout-card.checkout-scroll-reveal.checkout-visible {
    transform: translateY(0);
}


/* Staggered card timing */
.checkout-page .checkout-card:nth-child(1) {
    transition-delay: 0.05s;
}

.checkout-page .checkout-card:nth-child(2) {
    transition-delay: 0.15s;
}

.checkout-page .checkout-card:nth-child(3) {
    transition-delay: 0.25s;
}


/* Progress section */
.checkout-page .checkout-progress.checkout-scroll-reveal {
    transform: translateY(25px);
}

.checkout-page .checkout-progress.checkout-scroll-reveal.checkout-visible {
    transform: translateY(0);
}


/* Order summary */
.checkout-page .checkout-summary.checkout-scroll-reveal {
    transform: translateX(45px);
}

.checkout-page .checkout-summary.checkout-scroll-reveal.checkout-visible {
    transform: translateX(0);
}


/* Reduce animation on smaller screens */
@media (max-width: 767px) {

    .checkout-page .checkout-scroll-reveal,
    .checkout-page .checkout-hero-content.checkout-scroll-reveal,
    .checkout-page .checkout-hero-visual.checkout-scroll-reveal,
    .checkout-page .checkout-card.checkout-scroll-reveal,
    .checkout-page .checkout-summary.checkout-scroll-reveal {
        transform: translateY(30px);
    }

    .checkout-page .checkout-scroll-reveal.checkout-visible,
    .checkout-page .checkout-hero-content.checkout-scroll-reveal.checkout-visible,
    .checkout-page .checkout-hero-visual.checkout-scroll-reveal.checkout-visible,
    .checkout-page .checkout-card.checkout-scroll-reveal.checkout-visible,
    .checkout-page .checkout-summary.checkout-scroll-reveal.checkout-visible {
        transform: translateY(0);
    }

}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .checkout-page .checkout-scroll-reveal,
    .checkout-page .checkout-hero-content.checkout-scroll-reveal,
    .checkout-page .checkout-hero-visual.checkout-scroll-reveal,
    .checkout-page .checkout-card.checkout-scroll-reveal,
    .checkout-page .checkout-summary.checkout-scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* =========================================================
   MEDIVANA - ORDER CONFIRMATION PAGE
   LIGHT MODE / BASE
   ========================================================= */

.order-confirmation-page {
    --oc-bg: var(--med-bg, #FFF8EC);
    --oc-card: var(--med-card, #FFFDF8);
    --oc-primary: var(--med-primary, #5B8FA8);
    --oc-deep: var(--med-deep-blue, #31566B);
    --oc-powder: var(--med-powder-blue, #DCECF2);
    --oc-teal: var(--med-teal, #78BDB5);
    --oc-peach: var(--med-peach, #F3B6A2);
    --oc-text: var(--med-text, #34444B);

    width: 100%;
    overflow: hidden;
    background: var(--oc-bg);
    color: var(--oc-text);
}


/* =========================================================
   GENERAL
   ========================================================= */

.order-confirmation-page *,
.order-confirmation-page *::before,
.order-confirmation-page *::after {
    box-sizing: border-box;
}

.order-confirmation-page img {
    max-width: 100%;
}

.order-confirmation-page a {
    text-decoration: none;
}


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

.oc-scroll-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22, .61, .36, 1);
}

.oc-scroll-reveal.oc-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   ORDER CONFIRMATION HERO - CENTERED LAYOUT
   ========================================================= */

.order-confirmation-page .order-confirmation-hero {
    position: relative;
    width: 100%;
    min-height: 560px;

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

    padding: 90px 30px 80px;
    overflow: hidden;

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


/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.order-confirmation-page .oc-hero-content {
    position: relative;
    z-index: 5;

    width: min(900px, 100%);

    margin: 0 auto;

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

    text-align: center;
}


/* Eyebrow */

.order-confirmation-page .oc-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-bottom: 22px;

    color: var(--med-primary);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.order-confirmation-page .oc-eyebrow i {
    font-size: 13px;
}


/* Main heading */

.order-confirmation-page .oc-hero-content h1 {
    width: 100%;
    max-width: 850px;

    margin: 0 auto;

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

    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.02;
    font-weight: 900;

    text-align: center;
}

.order-confirmation-page .oc-hero-content h1 span {
    display: block;

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


/* Description */

.order-confirmation-page .oc-hero-content > p {
    width: 100%;
    max-width: 680px;

    margin: 25px auto 0;

    color: var(--med-text);

    font-size: 17px;
    line-height: 1.75;

    text-align: center;
}


/* ---------------------------------------------------------
   ORDER NUMBER
   --------------------------------------------------------- */

.order-confirmation-page .oc-order-number {
    position: relative;

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

    min-width: 210px;
    min-height: 76px;

    margin: 32px auto 0;

    padding: 14px 25px;

    border-left: 4px solid var(--med-teal);

    border-radius: 0 24px 24px 0;

    background: var(--med-card);

    box-shadow: 0 15px 40px rgba(49, 86, 107, 0.12);

    text-align: center;
}

.order-confirmation-page .oc-order-number span {
    display: block;

    margin-bottom: 7px;

    color: var(--med-primary);

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

.order-confirmation-page .oc-order-number strong {
    color: var(--med-deep-blue);

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


/* ---------------------------------------------------------
   DELIVERY VISUAL
   ---------------------------------------------------------

   You said you do NOT want an image.
   Hide the large visual container but keep its floating
   healthcare elements as small decorative elements.
   --------------------------------------------------------- */

.order-confirmation-page .oc-delivery-visual {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 2;
}


/* Hide the old large delivery SVG/visual */

.order-confirmation-page .oc-delivery-visual svg {
    display: none;
}


/* ---------------------------------------------------------
   FLOATING ELEMENTS
   --------------------------------------------------------- */

.order-confirmation-page .oc-delivery-visual .oc-leaf,
.order-confirmation-page .oc-delivery-visual .oc-delivery-badge,
.order-confirmation-page .oc-delivery-visual .oc-route,
.order-confirmation-page .oc-delivery-visual .oc-delivery-person {
    display: none;
}


/* Floating decorative healthcare elements */

.order-confirmation-page .oc-delivery-visual::before,
.order-confirmation-page .oc-delivery-visual::after {
    content: "";

    position: absolute;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background: var(--med-card);

    box-shadow: 0 15px 35px rgba(49, 86, 107, 0.12);

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


/* Left floating element */

.order-confirmation-page .oc-delivery-visual::before {
    top: 30%;
    left: 12%;

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

    box-shadow:
        0 15px 35px rgba(49, 86, 107, 0.12),
        inset 0 0 0 8px rgba(120, 189, 181, 0.08);
}


/* Right floating element */

.order-confirmation-page .oc-delivery-visual::after {
    top: 58%;
    right: 12%;

    width: 48px;
    height: 48px;

    background: var(--med-peach);

    animation-delay: 1.2s;
}


/* Floating animation */

@keyframes ocHeroFloat {

    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }

}


/* ---------------------------------------------------------
   HERO DECORATIVE LEAVES
   --------------------------------------------------------- */

.order-confirmation-page .oc-delivery-visual .oc-leaf {
    display: block;

    position: absolute;

    color: var(--med-teal);

    opacity: 0.22;

    font-size: 32px;

    animation: ocLeafFloat 5s ease-in-out infinite;
}

.order-confirmation-page .oc-delivery-visual .oc-leaf-one {
    top: 18%;
    left: 7%;
}

.order-confirmation-page .oc-delivery-visual .oc-leaf-two {
    bottom: 18%;
    right: 8%;

    font-size: 25px;

    animation-delay: 1s;
}

.order-confirmation-page .oc-delivery-visual .oc-leaf-three {
    top: 25%;
    right: 18%;

    font-size: 20px;

    animation-delay: 2s;
}

@keyframes ocLeafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(15deg);
    }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1023px) {

    .order-confirmation-page .order-confirmation-hero {
        min-height: 540px;

        padding: 85px 28px 70px;
    }

    .order-confirmation-page .oc-hero-content {
        width: min(760px, 100%);
    }

    .order-confirmation-page .oc-hero-content h1 {
        font-size: clamp(44px, 7vw, 62px);
    }

    .order-confirmation-page .oc-hero-content > p {
        max-width: 620px;
        font-size: 16px;
    }

    .order-confirmation-page .oc-delivery-visual::before {
        left: 5%;
    }

    .order-confirmation-page .oc-delivery-visual::after {
        right: 5%;
    }

}


/* ---------------------------------------------------------
   MOBILE LARGE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .order-confirmation-page .order-confirmation-hero {
        min-height: 500px;

        padding: 70px 22px 65px;
    }

    .order-confirmation-page .oc-hero-content {
        width: 100%;
    }

    .order-confirmation-page .oc-eyebrow {
        margin-bottom: 18px;

        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .order-confirmation-page .oc-hero-content h1 {
        max-width: 620px;

        font-size: clamp(38px, 10vw, 52px);
        line-height: 1.05;
    }

    .order-confirmation-page .oc-hero-content > p {
        max-width: 520px;

        margin-top: 20px;

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

    .order-confirmation-page .oc-order-number {
        min-width: 190px;

        margin-top: 27px;

        padding: 13px 22px;
    }

    .order-confirmation-page .oc-delivery-visual::before {
        top: 20%;
        left: 3%;

        width: 42px;
        height: 42px;
    }

    .order-confirmation-page .oc-delivery-visual::after {
        top: 67%;
        right: 3%;

        width: 40px;
        height: 40px;
    }

}


/* ---------------------------------------------------------
   MOBILE SMALL
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .order-confirmation-page .order-confirmation-hero {
        min-height: 470px;

        padding: 60px 16px 55px;
    }

    .order-confirmation-page .oc-eyebrow {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .order-confirmation-page .oc-hero-content h1 {
        font-size: 35px;
        line-height: 1.08;
    }

    .order-confirmation-page .oc-hero-content > p {
        margin-top: 18px;

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

    .order-confirmation-page .oc-order-number {
        min-width: 175px;
        min-height: 70px;

        margin-top: 24px;
    }

    .order-confirmation-page .oc-order-number strong {
        font-size: 15px;
    }

    .order-confirmation-page .oc-delivery-visual::before {
        left: 2%;
        top: 17%;

        width: 34px;
        height: 34px;
    }

    .order-confirmation-page .oc-delivery-visual::after {
        right: 2%;
        bottom: 18%;
        top: auto;

        width: 34px;
        height: 34px;
    }

    .order-confirmation-page .oc-delivery-visual .oc-leaf {
        font-size: 22px;
    }

}
.order-confirmation-page .oc-delivery-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.order-confirmation-page .oc-delivery-visual svg,
.order-confirmation-page .oc-delivery-visual .oc-route,
.order-confirmation-page .oc-delivery-visual .oc-delivery-person,
.order-confirmation-page .oc-delivery-visual .oc-delivery-badge {
    display: none !important;
}
/* =========================================================
   ORDER NUMBER
   ========================================================= */

.oc-order-number {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 32px;
    padding: 16px 22px;

    background: var(--oc-card);

    border-left: 4px solid var(--oc-teal);

    border-radius: 4px 22px 22px 4px;

    box-shadow:
        0 15px 45px rgba(49, 86, 107, .09);
}

.oc-order-number span {
    color: var(--oc-primary);

    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.oc-order-number strong {
    color: var(--oc-deep);

    font-size: 1.05rem;
    letter-spacing: .05em;
}


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

.oc-success-icon {
    width: 105px;
    height: 105px;

    margin-bottom: 28px;

    opacity: 0;
    transform: scale(.65);

    transition:
        opacity .5s ease,
        transform .7s cubic-bezier(.34, 1.56, .64, 1);
}

.oc-success-icon.oc-success-visible {
    opacity: 1;
    transform: scale(1);
}

.oc-success-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.oc-check-circle {
    fill: none;
    stroke: var(--oc-teal);
    stroke-width: 5;

    stroke-dasharray: 315;
    stroke-dashoffset: 315;

    animation:
        ocCircleDraw 1s ease forwards;
}

.oc-check-mark {
    fill: none;
    stroke: var(--oc-deep);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 80;
    stroke-dashoffset: 80;

    animation:
        ocCheckDraw .65s ease .7s forwards;
}

@keyframes ocCircleDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ocCheckDraw {
    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   DELIVERY VISUAL
   ========================================================= */

.oc-delivery-visual {
    position: relative;

    width: 100%;
    min-height: 500px;

    display: grid;
    place-items: center;
}

.oc-delivery-person {
    position: relative;

    width: min(460px, 100%);
    aspect-ratio: 1;

    display: grid;
    place-items: center;
}

.oc-delivery-svg {
    position: relative;

    width: 88%;
    height: auto;

    overflow: visible;

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

@keyframes ocPersonFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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


/* =========================================================
   DELIVERY SVG COLORS
   ========================================================= */

.oc-bag {
    fill: var(--oc-primary);
}

.oc-person-body {
    fill: var(--oc-teal);
}

.oc-person-head {
    fill: #F0C7A9;
}

.oc-person-cap {
    fill: var(--oc-deep);
}

.oc-person-cap-bill {
    fill: var(--oc-deep);
}

.oc-person-arm,
.oc-person-leg {
    fill: none;
    stroke: var(--oc-deep);
    stroke-width: 10;
    stroke-linecap: round;
}

.oc-person-hand {
    fill: #F0C7A9;
}

.oc-person-shoe {
    fill: var(--oc-deep);
}

.oc-delivery-box {
    fill: var(--oc-peach);
}

.oc-box-line,
.oc-box-cross,
.oc-health-plus {
    fill: none;
    stroke: var(--oc-deep);
    stroke-width: 3;
    stroke-linecap: round;
}


/* =========================================================
   DELIVERY ROUTE
   ========================================================= */

.oc-route {
    position: absolute;

    left: 4%;
    right: 4%;
    bottom: 20%;

    height: 90px;

    pointer-events: none;
}

.oc-route span {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--oc-teal);

    opacity: .65;

    animation:
        ocRoutePulse 2s ease-in-out infinite;
}

.oc-route span:nth-child(1) {
    left: 8%;
    top: 55%;
}

.oc-route span:nth-child(2) {
    left: 30%;
    top: 30%;
    animation-delay: .3s;
}

.oc-route span:nth-child(3) {
    left: 70%;
    top: 65%;
    animation-delay: .6s;
}

.oc-route span:nth-child(4) {
    right: 8%;
    top: 25%;
    animation-delay: .9s;
}

@keyframes ocRoutePulse {
    0%,
    100% {
        transform: scale(.7);
        opacity: .35;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}


/* =========================================================
   FLOATING LEAVES
   ========================================================= */

.oc-leaf {
    position: absolute;

    color: var(--oc-teal);

    opacity: .32;

    pointer-events: none;

    animation:
        ocLeafFloat 5s ease-in-out infinite;
}

.oc-leaf-one {
    top: 12%;
    left: 10%;
    font-size: 2rem;
}

.oc-leaf-two {
    right: 7%;
    top: 20%;
    font-size: 1.5rem;
    color: var(--oc-primary);
    animation-delay: 1s;
}

.oc-leaf-three {
    bottom: 12%;
    left: 20%;
    font-size: 1.7rem;
    color: var(--oc-peach);
    animation-delay: 2s;
}

@keyframes ocLeafFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(12deg);
    }
}


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

.oc-delivery-badge {
    position: absolute;

    right: 2%;
    bottom: 12%;

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

    padding: 13px 18px;

    background: var(--oc-card);

    border-radius: 18px 4px 18px 18px;

    box-shadow:
        0 20px 45px rgba(49, 86, 107, .13);

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

.oc-delivery-badge > i {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--oc-powder);
    color: var(--oc-primary);
}

.oc-delivery-badge span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oc-delivery-badge strong {
    color: var(--oc-deep);
    font-size: .9rem;
}

.oc-delivery-badge small {
    color: var(--oc-text);
    opacity: .65;
}

@keyframes ocBadgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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


/* =========================================================
   STATUS SECTION
   ========================================================= */

.oc-status-section {
    position: relative;

    padding:
        110px
        clamp(24px, 7vw, 100px);

    background: var(--oc-card);
}

.oc-section-heading {
    max-width: 750px;
    margin: 0 auto 65px;

    text-align: center;
}

.oc-section-heading h2 {
    margin: 15px 0;

    color: var(--oc-deep);

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    line-height: 1.1;
    letter-spacing: -.035em;
}

.oc-section-heading p {
    margin: 0 auto;

    color: var(--oc-text);

    line-height: 1.7;
    opacity: .72;
}


/* =========================================================
   STATUS TRACKER
   ========================================================= */

.oc-status-tracker {
    position: relative;

    width: min(1100px, 100%);

    margin: auto;

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

    gap: 25px;
}

.oc-status-line {
    position: absolute;

    left: 12%;
    right: 12%;
    top: 35px;

    height: 4px;

    background: var(--oc-powder);

    z-index: 0;
}

.oc-status-progress {
    display: block;

    width: 35%;

    height: 100%;

    background: var(--oc-teal);

    border-radius: 20px;

    transition:
        width 1.5s ease;
}

.oc-status-step {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.oc-status-icon {
    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--oc-bg);

    border: 5px solid var(--oc-card);

    color: var(--oc-primary);

    box-shadow:
        0 8px 25px rgba(49, 86, 107, .1);

    font-size: 1.3rem;
}

.oc-status-step.active .oc-status-icon {
    background: var(--oc-teal);
    color: #FFFDF8;
}

.oc-status-step strong {
    color: var(--oc-deep);

    font-size: .95rem;
}

.oc-status-step small {
    margin-top: 6px;

    color: var(--oc-text);

    opacity: .62;
}


/* =========================================================
   ORDER INFORMATION
   ========================================================= */

.oc-order-section {
    padding:
        110px
        clamp(24px, 6vw, 90px);

    background: var(--oc-bg);
}

.oc-order-layout {
    width: min(1200px, 100%);

    margin: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    gap: 30px;

    align-items: start;
}


/* =========================================================
   ORDER CARDS
   ========================================================= */

.oc-details-card,
.oc-delivery-details {
    background: var(--oc-card);

    border-radius: 30px;

    padding:
        clamp(25px, 4vw, 42px);

    box-shadow:
        0 20px 60px rgba(49, 86, 107, .08);
}

.oc-card-heading {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 32px;
}

.oc-card-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--oc-powder);
    color: var(--oc-primary);

    font-size: 1.2rem;
}

.oc-card-heading span {
    color: var(--oc-primary);

    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.oc-card-heading h2 {
    margin: 5px 0 0;

    color: var(--oc-deep);

    font-size:
        clamp(
            1.45rem,
            2vw,
            2rem
        );
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.oc-products {
    display: flex;
    flex-direction: column;
}

.oc-product-item {
    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 17px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(91, 143, 168, .15);

    opacity: 0;
    transform: translateX(-20px);

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

.oc-product-item.oc-visible {
    opacity: 1;
    transform: translateX(0);
}

.oc-product-item:last-child {
    border-bottom: 0;
}

.oc-product-image {
    width: 82px;
    height: 82px;

    overflow: hidden;

    border-radius: 20px;

    background: var(--oc-powder);
}

.oc-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition: transform .4s ease;
}

.oc-product-item:hover
.oc-product-image img {
    transform: scale(1.06);
}

.oc-product-details {
    min-width: 0;
}

.oc-product-details h3 {
    margin: 0 0 5px;

    color: var(--oc-deep);

    font-size: 1rem;

    line-height: 1.35;
}

.oc-product-details span {
    display: block;

    margin-bottom: 5px;

    color: var(--oc-primary);

    font-size: .75rem;
    font-weight: 700;
}

.oc-product-details small {
    color: var(--oc-text);
    opacity: .62;
}

.oc-product-price {
    color: var(--oc-deep);

    white-space: nowrap;

    font-size: .98rem;
}


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

.oc-empty-products {
    padding: 40px 15px;

    text-align: center;

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

.oc-empty-products i {
    margin-bottom: 12px;

    color: var(--oc-teal);

    font-size: 2rem;
}

.oc-empty-products p {
    margin: 0;
}


/* =========================================================
   TOTALS
   ========================================================= */

.oc-total-area {
    margin-top: 20px;
    padding-top: 20px;

    border-top:
        1px solid rgba(91, 143, 168, .18);
}

.oc-total-area > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 7px 0;
}

.oc-total-area span {
    color: var(--oc-text);
    opacity: .72;
}

.oc-total-area strong {
    color: var(--oc-deep);
}

.oc-grand-total {
    margin-top: 10px;
    padding-top: 17px !important;

    border-top:
        1px dashed rgba(91, 143, 168, .25);
}

.oc-grand-total span {
    color: var(--oc-deep);

    font-weight: 900;
}

.oc-grand-total strong {
    color: var(--oc-teal);

    font-size: 1.35rem;
}


/* =========================================================
   DELIVERY INFORMATION
   ========================================================= */

.oc-delivery-details.oc-empty-delivery {
    padding-bottom: 14px;
}

.oc-delivery-details.oc-empty-delivery .oc-info-list {
    display: none;
}

.oc-info-list {
    display: flex;
    flex-direction: column;
}

.oc-info-item {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 14px;

    padding: 17px 0;

    border-bottom:
        1px solid rgba(91, 143, 168, .14);

    opacity: 0;
    transform: translateX(20px);

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

.oc-info-item.oc-visible {
    opacity: 1;
    transform: translateX(0);
}

.oc-info-item:last-child {
    border-bottom: 0;
}

.oc-info-item > i {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--oc-powder);
    color: var(--oc-primary);
}

.oc-info-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oc-info-item span {
    color: var(--oc-primary);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.oc-info-item strong {
    color: var(--oc-deep);

    font-size: .9rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.oc-support-note {
    display: flex;
    align-items: flex-start;

    gap: 15px;

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

    background: var(--oc-bg);

    border-radius: 22px 6px 22px 22px;
}

.oc-support-note > i {
    color: var(--oc-teal);

    font-size: 1.25rem;
}

.oc-support-note strong {
    color: var(--oc-deep);

    font-size: .9rem;
}

.oc-support-note p {
    margin: 5px 0 8px;

    color: var(--oc-text);

    font-size: .8rem;
    opacity: .7;
}

.oc-support-note a {
    color: var(--oc-primary);

    font-size: .8rem;
    font-weight: 800;
}

.oc-support-note a i {
    margin-left: 5px;
}


/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.oc-next-section {
    padding:
        110px
        clamp(24px, 6vw, 90px);

    background: var(--oc-card);
}

.oc-next-grid {
    width: min(1150px, 100%);

    margin: auto;

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

    gap: 20px;
}

.oc-next-item {
    position: relative;

    min-height: 270px;

    padding: 30px 25px;

    background: var(--oc-bg);

    border-radius: 30px 8px 30px 30px;

    overflow: hidden;

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

.oc-next-item::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background: var(--oc-powder);

    opacity: .65;
}

.oc-next-item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(49, 86, 107, .1);
}

.oc-next-item > span {
    color: var(--oc-primary);

    font-size: .75rem;
    font-weight: 900;
}

.oc-next-item > i {
    display: block;

    margin: 28px 0 20px;

    color: var(--oc-teal);

    font-size: 2rem;
}

.oc-next-item h3 {
    margin: 0 0 10px;

    color: var(--oc-deep);

    font-size: 1.15rem;
}

.oc-next-item p {
    margin: 0;

    color: var(--oc-text);

    line-height: 1.65;
    font-size: .87rem;
    opacity: .72;
}


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

.oc-final-section {
    position: relative;

    min-height: 500px;

    padding:
        110px
        24px;

    display: grid;
    place-items: center;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(120, 189, 181, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(243, 182, 162, .18),
            transparent 30%
        ),
        var(--oc-bg);
}

.oc-final-content {
    position: relative;
    z-index: 5;

    max-width: 760px;
}

.oc-final-content h2 {
    margin: 18px 0;

    color: var(--oc-deep);

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height: 1.05;
    letter-spacing: -.04em;
}

.oc-final-content h2 span {
    display: block;
    color: var(--oc-teal);
}

.oc-final-content p {
    max-width: 600px;

    margin: 0 auto;

    color: var(--oc-text);

    line-height: 1.7;
    opacity: .72;
}


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

.oc-final-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 32px;

    flex-wrap: wrap;
}

.oc-primary-button,
.oc-secondary-button {
    min-height: 52px;

    padding: 0 25px;

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

    gap: 10px;

    border-radius: 18px;

    font-size: .9rem;
    font-weight: 800;

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

.oc-primary-button {
    background: var(--oc-deep);
    color: #FFFDF8;

    box-shadow:
        0 12px 30px rgba(49, 86, 107, .2);
}

.oc-secondary-button {
    background: var(--oc-card);

    color: var(--oc-deep);

    border: 1px solid rgba(91, 143, 168, .25);
}

.oc-primary-button:hover,
.oc-secondary-button:hover {
    transform: translateY(-4px);
}

.oc-primary-button:hover {
    box-shadow:
        0 18px 40px rgba(49, 86, 107, .25);
}


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

.oc-final-leaf {
    position: absolute;

    color: var(--oc-teal);

    opacity: .18;

    pointer-events: none;
}

.oc-final-leaf-one {
    left: 7%;
    top: 18%;

    font-size: 5rem;

    transform: rotate(-25deg);
}

.oc-final-leaf-two {
    right: 7%;
    bottom: 15%;

    color: var(--oc-peach);

    font-size: 4rem;

    transform: rotate(35deg);
}


/* =========================================================
   TABLET
   768px - 1023px
   ========================================================= */

@media (max-width: 1023px) {

    .order-confirmation-hero {
        min-height: auto;

        grid-template-columns: 1fr;

        padding:
            80px
            6%
            90px;

        text-align: center;
    }

    .oc-hero-content {
        max-width: 800px;
        margin: auto;
    }

    .oc-hero-content p {
        margin-inline: auto;
    }

    .oc-order-number {
        text-align: left;
    }

    .oc-delivery-visual {
        width: min(520px, 100%);
        margin: auto;
    }

    .oc-order-layout {
        grid-template-columns: 1fr;
    }

    .oc-next-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .oc-status-tracker {
        gap: 12px;
    }
}


/* =========================================================
   MOBILE LARGE
   481px - 767px
   ========================================================= */

@media (max-width: 767px) {

    .order-confirmation-hero {
        padding:
            65px
            20px
            70px;
    }

    .oc-success-icon {
        width: 85px;
        height: 85px;

        margin-inline: auto;
    }

    .oc-eyebrow,
    .oc-section-eyebrow {
        font-size: .68rem;
    }

    .oc-hero-content h1 {
        font-size: clamp(2.25rem, 10vw, 3.5rem);
    }

    .oc-hero-content p {
        font-size: .95rem;
        line-height: 1.7;
    }

    .oc-order-number {
        margin-top: 25px;
    }

    .oc-delivery-visual {
        min-height: 390px;
    }

    .oc-delivery-person {
        width: 390px;
        max-width: 100%;
    }

    .oc-delivery-badge {
        right: 0;
        bottom: 8%;

        padding: 10px 13px;
    }

    .oc-delivery-badge > i {
        width: 36px;
        height: 36px;
    }

    .oc-status-section,
    .oc-order-section,
    .oc-next-section {
        padding:
            75px
            20px;
    }

    .oc-section-heading {
        margin-bottom: 45px;
    }

    .oc-section-heading h2 {
        font-size: 2rem;
    }

    .oc-status-tracker {
        grid-template-columns: 1fr;

        gap: 20px;

        text-align: left;
    }

    .oc-status-line {
        left: 35px;
        right: auto;

        top: 35px;
        bottom: 35px;

        width: 4px;
        height: auto;
    }

    .oc-status-progress {
        width: 100%;
        height: 35%;
    }

    .oc-status-step {
        display: grid;

        grid-template-columns: 70px 1fr;

        grid-template-rows: auto auto;

        column-gap: 18px;

        text-align: left;
    }

    .oc-status-icon {
        grid-row: 1 / 3;

        margin: 0;
    }

    .oc-status-step strong {
        align-self: end;
    }

    .oc-status-step small {
        align-self: start;
        margin-top: 4px;
    }

    .oc-details-card,
    .oc-delivery-details {
        padding: 24px 20px;
        border-radius: 24px;
    }

    .oc-product-item {
        grid-template-columns:
            65px
            minmax(0, 1fr);

        gap: 13px;
    }

    .oc-product-image {
        width: 65px;
        height: 65px;
    }

    .oc-product-price {
        grid-column: 2;
        justify-self: start;
    }

    .oc-next-grid {
        grid-template-columns: 1fr;
    }

    .oc-next-item {
        min-height: auto;
    }

    .oc-final-section {
        padding:
            80px
            20px;
    }

    .oc-final-actions {
        flex-direction: column;
        width: 100%;
    }

    .oc-primary-button,
    .oc-secondary-button {
        width: min(100%, 320px);
    }
}


/* =========================================================
   MOBILE MEDIUM
   376px - 480px
   ========================================================= */

@media (max-width: 480px) {

    .order-confirmation-hero {
        padding:
            55px
            16px
            60px;
    }

    .oc-hero-content h1 {
        font-size: 2.15rem;
    }

    .oc-delivery-visual {
        min-height: 320px;
    }

    .oc-delivery-person {
        width: 320px;
    }

    .oc-delivery-badge {
        transform: scale(.9);
        transform-origin: bottom right;
    }

    .oc-leaf-one {
        left: 2%;
    }

    .oc-leaf-two {
        right: 1%;
    }

    .oc-card-heading {
        align-items: flex-start;
    }

    .oc-card-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .oc-product-details h3 {
        font-size: .9rem;
    }

    .oc-info-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .oc-info-item > i {
        width: 36px;
        height: 36px;
    }
}


/* =========================================================
   MOBILE SMALL
   <= 375px
   ========================================================= */

@media (max-width: 375px) {

    .order-confirmation-hero {
        padding:
            45px
            14px
            55px;
    }

    .oc-hero-content h1 {
        font-size: 1.95rem;
    }

    .oc-hero-content p {
        font-size: .88rem;
    }

    .oc-order-number {
        padding: 13px 16px;
    }

    .oc-delivery-visual {
        min-height: 285px;
    }

    .oc-delivery-person {
        width: 285px;
    }

    .oc-delivery-badge {
        transform: scale(.78);
    }

    .oc-details-card,
    .oc-delivery-details {
        padding: 20px 16px;
    }

    .oc-final-content h2 {
        font-size: 2rem;
    }
}


/* =========================================================
   LAPTOP-L / LARGE DESKTOP
   ========================================================= */

@media (min-width: 1440px) {

    .order-confirmation-hero {
        padding-left: 7%;
        padding-right: 7%;
    }

    .oc-order-layout {
        max-width: 1280px;
    }

    .oc-next-grid {
        max-width: 1250px;
    }
}


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

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

    .oc-scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .oc-success-icon {
        opacity: 1;
        transform: none;
    }

    .oc-check-circle,
    .oc-check-mark,
    .oc-delivery-svg,
    .oc-leaf,
    .oc-delivery-badge,
    .oc-route span {
        animation: none !important;
    }

    .oc-product-item,
    .oc-info-item {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   MEDIVANA - UPLOAD PRESCRIPTION
   ========================================================= */

.upload-prescription-page {
    --upload-shadow:
        0 20px 55px rgba(49, 86, 107, 0.10);

    overflow: hidden;
    background: var(--med-bg);
}


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

.upload-hero {
    position: relative;

    min-height: 590px;

    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: center;
    gap: 50px;

    padding: 80px 7%;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(120, 189, 181, 0.14),
            transparent 28%
        ),
        var(--med-bg);

    overflow: hidden;
}

.upload-hero-content {
    position: relative;
    z-index: 3;

    max-width: 680px;
}

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

    color: var(--med-primary);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.upload-eyebrow {
    margin-bottom: 22px;
}

.upload-hero-content h1 {
    margin: 0;

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

    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.03;
    font-weight: 900;
}

.upload-hero-content h1 span {
    display: block;
    color: var(--med-teal);
}

.upload-hero-content > p {
    max-width: 620px;

    margin: 25px 0 0;

    color: var(--med-text);

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

.upload-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 30px;
}

.upload-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

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

.upload-hero-points i {
    color: var(--med-teal);
}


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

.upload-hero-visual {
    position: relative;

    min-height: 430px;

    display: grid;
    place-items: center;
}

.upload-hero-circle {
    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 48% 52% 55% 45%;

    background:
        radial-gradient(
            circle at 35% 30%,
            var(--med-card),
            var(--med-powder-blue)
        );

    opacity: .9;

    animation: uploadOrganicFloat 7s ease-in-out infinite;
}

.upload-hero-document {
    position: relative;
    z-index: 3;

    width: 245px;
    height: 315px;

    padding: 28px;

    border-radius: 22px 35px 28px 30px;

    background: var(--med-card);

    box-shadow:
        0 35px 65px rgba(49, 86, 107, .18);

    transform: rotate(-4deg);

    animation: uploadDocumentFloat 5s ease-in-out infinite;
}

.upload-document-top {
    display: flex;
    align-items: center;
    gap: 10px;

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

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

.upload-document-top i {
    color: var(--med-teal);
    font-size: 26px;
}

.upload-document-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;

    margin-top: 45px;
}

.upload-document-lines span {
    display: block;

    width: 100%;
    height: 7px;

    border-radius: 10px;

    background: var(--med-powder-blue);
}

.upload-document-lines span:nth-child(2) {
    width: 80%;
}

.upload-document-lines span:nth-child(3) {
    width: 90%;
}

.upload-document-lines span:nth-child(4) {
    width: 65%;
}

.upload-document-sign {
    position: absolute;

    right: 28px;
    bottom: 25px;

    color: var(--med-primary);

    font-size: 30px;

    transform: rotate(-8deg);
}

.upload-floating-icon {
    position: absolute;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    box-shadow: var(--upload-shadow);

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

.upload-float-one {
    top: 13%;
    left: 15%;
}

.upload-float-two {
    right: 10%;
    top: 30%;

    color: var(--med-primary);

    animation-delay: .8s;
}

.upload-float-three {
    right: 17%;
    bottom: 14%;

    background: var(--med-peach);
    color: var(--med-deep-blue);

    animation-delay: 1.5s;
}

.upload-hero-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .25;

    font-size: 30px;

    animation: uploadLeafFloat 5s ease-in-out infinite;
}

.upload-leaf-one {
    left: 7%;
    bottom: 15%;
}

.upload-leaf-two {
    right: 5%;
    top: 15%;

    font-size: 22px;

    animation-delay: 1.5s;
}

@keyframes uploadOrganicFloat {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(7deg) scale(1.04);
    }
}

@keyframes uploadDocumentFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes uploadIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes uploadLeafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-12px) rotate(12deg);
    }
}


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

.upload-workflow-section {
    padding: 110px 6% 120px;

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

.upload-section-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.upload-section-heading h2 {
    margin: 16px 0;

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

    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 900;
}

.upload-section-heading h2 span {
    color: var(--med-teal);
}

.upload-section-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--med-text);

    line-height: 1.7;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.upload-layout {
    width: min(1250px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
    gap: 28px;

    align-items: start;
}


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

.upload-card {
    position: relative;

    padding: 32px;

    border: 1px solid rgba(91, 143, 168, .14);

    border-radius: 28px;

    background: var(--med-card);

    box-shadow: var(--upload-shadow);
}

.upload-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin-bottom: 30px;
}

.upload-card-icon {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);

    color: var(--med-primary);

    font-size: 20px;
}

.upload-card-heading > div:last-child {
    flex: 1;
}

.upload-card-heading span {
    color: var(--med-primary);

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

.upload-card-heading h2 {
    margin: 5px 0;

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

    font-size: 25px;
    font-weight: 850;
}

.upload-card-heading p {
    margin: 0;

    color: var(--med-text);

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


/* =========================================================
   FORM
   ========================================================= */

.upload-field {
    margin-bottom: 20px;
}

.upload-field label {
    display: block;

    margin-bottom: 8px;

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

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

.upload-field label span {
    color: #D65B5B;
}

.upload-field input,
.upload-field select,
.upload-field textarea {
    width: 100%;

    border: 1px solid rgba(91, 143, 168, .22);

    border-radius: 14px;

    padding: 14px 15px;

    background: var(--med-bg);

    color: var(--med-text);

    font-family: inherit;
    font-size: 14px;

    outline: none;

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

.upload-field input:focus,
.upload-field select:focus,
.upload-field textarea:focus {
    border-color: var(--med-primary);

    box-shadow:
        0 0 0 4px rgba(91, 143, 168, .10);
}

.upload-field textarea {
    resize: vertical;
}

.upload-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.upload-full {
    grid-column: 1 / -1;
}


/* =========================================================
   UPLOAD OPTIONS
   ========================================================= */

.upload-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin: 28px 0 15px;
}

.upload-option {
    position: relative;

    min-height: 155px;

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

    padding: 18px;

    border: 1.5px dashed var(--med-primary);

    border-radius: 22px;

    background: var(--med-bg);

    text-align: center;

    cursor: pointer;

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

.upload-option:hover {
    transform: translateY(-5px);

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

    background: var(--med-powder-blue);

    box-shadow:
        0 15px 30px rgba(49, 86, 107, .10);
}

.upload-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.upload-option-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    font-size: 19px;
}

.upload-option strong {
    color: var(--med-deep-blue);

    font-size: 13px;
}

.upload-option small {
    margin-top: 5px;

    color: var(--med-text);

    opacity: .7;

    font-size: 11px;
}


/* =========================================================
   DROP AREA
   ========================================================= */

.upload-drop-area {
    min-height: 150px;

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

    padding: 25px;

    border: 1.5px dashed rgba(91, 143, 168, .35);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(220, 236, 242, .35),
            transparent
        );

    text-align: center;

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

.upload-drop-area.drag-over {
    border-color: var(--med-teal);

    background: var(--med-powder-blue);

    transform: scale(1.01);
}

.upload-drop-icon {
    color: var(--med-primary);

    font-size: 28px;

    margin-bottom: 10px;
}

.upload-drop-area h3 {
    margin: 0;

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

    font-size: 16px;
}

.upload-drop-area p {
    margin: 6px 0;

    color: var(--med-text);

    font-size: 13px;
}

.upload-drop-area > span {
    color: var(--med-primary);

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


/* =========================================================
   FILE LIST
   ========================================================= */

.uploaded-files-section {
    display: none;

    margin-top: 25px;
}

.uploaded-files-section.has-files {
    display: block;
}

.uploaded-files-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.uploaded-files-heading span {
    color: var(--med-primary);

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

.uploaded-files-heading strong {
    color: var(--med-deep-blue);

    font-size: 12px;
}

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px;

    border-radius: 15px;

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

.uploaded-file-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--med-powder-blue);

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

.uploaded-file-details {
    min-width: 0;
    flex: 1;
}

.uploaded-file-details strong {
    display: block;

    overflow: hidden;

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

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-file-details small {
    display: block;

    margin-top: 3px;

    color: var(--med-text);

    opacity: .65;

    font-size: 11px;
}

.uploaded-file-remove {
    width: 34px;
    height: 34px;

    border: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(214, 91, 91, .10);

    color: #D65B5B;

    cursor: pointer;

    transition: transform .2s ease;
}

.uploaded-file-remove:hover {
    transform: scale(1.08);
}


/* =========================================================
   QUALITY NOTE
   ========================================================= */

.upload-quality-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

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

    border-radius: 18px;

    background: rgba(120, 189, 181, .10);
}

.upload-quality-icon {
    color: var(--med-teal);

    font-size: 18px;
}

.upload-quality-note strong {
    display: block;

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

    font-size: 13px;
}

.upload-quality-note p {
    margin: 5px 0 0;

    color: var(--med-text);

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


/* =========================================================
   ERROR
   ========================================================= */

.upload-error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    color: #D64545 !important;

    font-size: 11px !important;
    font-weight: 700;

    line-height: 1.4;
}

.upload-field.has-error input,
.upload-field.has-error select,
.upload-field.has-error textarea {
    border-color: #D64545 !important;

    box-shadow:
        0 0 0 3px rgba(214, 69, 69, .08);
}


/* =========================================================
   SIDE CHECKLIST
   ========================================================= */

.upload-side-area {
    display: flex;
    flex-direction: column;
    gap: 25px;

    position: sticky;
    top: 105px;
}

.upload-checklist-card {
    padding: 28px;
}

.upload-checklist-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 22px;
}

.upload-checklist-heading > i {
    color: var(--med-teal);

    font-size: 24px;
}

.upload-checklist-heading strong {
    display: block;

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

    font-size: 15px;
}

.upload-checklist-heading span {
    display: block;

    margin-top: 3px;

    color: var(--med-text);

    opacity: .7;

    font-size: 11px;
}

.upload-checklist-card ul {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.upload-checklist-card li {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--med-text);

    font-size: 13px;
}

.upload-checklist-card li i {
    color: var(--med-teal);
}

.upload-file-limit {
    display: flex;
    align-items: center;
    gap: 9px;

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

    border-top: 1px solid rgba(91, 143, 168, .14);

    color: var(--med-text);

    font-size: 11px;
}

.upload-file-limit i {
    color: var(--med-primary);
}

.upload-file-limit strong {
    margin-left: auto;

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


/* =========================================================
   SUBMIT
   ========================================================= */

.upload-submit-section {
    padding: 20px 6% 120px;

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

.upload-submit-card {
    position: relative;

    width: min(1250px, 100%);

    margin: 0 auto;

    padding: 55px;

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

    gap: 50px;

    overflow: hidden;

    border-radius: 35px;

    background:
        linear-gradient(
            120deg,
            var(--med-card),
            var(--med-powder-blue)
        );

    box-shadow: var(--upload-shadow);
}

.upload-submit-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.upload-submit-content h2 {
    margin: 13px 0;

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

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;
}

.upload-submit-content h2 span {
    color: var(--med-teal);
}

.upload-submit-content > p {
    max-width: 680px;

    color: var(--med-text);

    line-height: 1.7;
}

.upload-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 25px;

    color: var(--med-text);

    font-size: 12px;
    line-height: 1.6;

    cursor: pointer;
}

.upload-consent input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    accent-color: var(--med-teal);
}

.upload-submit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;

    margin-top: 28px;
}

.upload-submit-button,
.upload-back-button,
.upload-primary-button,
.upload-secondary-button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 21px;

    border-radius: 14px;

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

    text-decoration: none;

    cursor: pointer;

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

.upload-submit-button {
    border: 0;

    background: var(--med-deep-blue);

    color: #FFFDF8;
}

.upload-submit-button:hover,
.upload-primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 28px rgba(49, 86, 107, .18);
}

.upload-back-button,
.upload-secondary-button {
    border: 1px solid rgba(91, 143, 168, .25);

    background: var(--med-card);

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

.upload-submit-visual {
    position: relative;

    width: 220px;
    height: 220px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;
}

.upload-submit-circle {
    width: 145px;
    height: 145px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    font-size: 48px;

    box-shadow: 0 25px 50px rgba(49, 86, 107, .13);

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

.upload-submit-leaf {
    position: absolute;

    right: 15px;
    bottom: 20px;

    color: var(--med-teal);

    opacity: .3;

    font-size: 38px;

    transform: rotate(25deg);
}


/* =========================================================
   SUCCESS
   ========================================================= */

.upload-success-section {
    display: none;

    padding: 100px 6%;

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

.upload-success-section.show {
    display: block;
}

.upload-success-card {
    width: min(700px, 100%);

    margin: auto;

    padding: 55px 35px;

    border-radius: 30px;

    background: var(--med-card);

    box-shadow: var(--upload-shadow);

    text-align: center;
}

.upload-success-icon {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: rgba(120, 189, 181, .15);

    color: var(--med-teal);

    font-size: 30px;

    animation: uploadSuccessPop .6s ease both;
}

.upload-success-card > span {
    color: var(--med-primary);

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

.upload-success-card h2 {
    margin: 15px 0;

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

    font-size: clamp(30px, 4vw, 48px);
}

.upload-success-card h2 span {
    color: var(--med-teal);
}

.upload-success-card p {
    max-width: 560px;

    margin: auto;

    color: var(--med-text);

    line-height: 1.7;
}

.upload-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 28px;
}

.upload-primary-button {
    background: var(--med-deep-blue);
    color: #FFFDF8;
}

@keyframes uploadSuccessPop {

    0% {
        opacity: 0;
        transform: scale(.6);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


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

.upload-scroll-reveal {
    opacity: 1;
    transform: translateY(0);

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

.upload-prescription-page.upload-js
.upload-scroll-reveal:not(.upload-visible) {
    opacity: 0;
    transform: translateY(35px);
}

.upload-prescription-page.upload-js
.upload-scroll-reveal.upload-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   LAPTOP-L
   ========================================================= */

@media (max-width: 1399px) {

    .upload-hero {
        padding-left: 5%;
        padding-right: 5%;
    }

    .upload-layout {
        width: min(1150px, 100%);
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .upload-hero {
        grid-template-columns: 1fr .8fr;

        gap: 25px;

        padding: 70px 4%;
    }

    .upload-hero-content h1 {
        font-size: 56px;
    }

    .upload-hero-circle {
        width: 330px;
        height: 330px;
    }

    .upload-hero-document {
        width: 215px;
        height: 285px;
    }

    .upload-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    }

}


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

@media (max-width: 1023px) {

    .upload-hero {
        min-height: auto;

        grid-template-columns: 1fr;

        padding: 80px 6% 70px;

        text-align: center;
    }

    .upload-hero-content {
        max-width: 760px;
        margin: auto;
    }

    .upload-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .upload-hero-points {
        justify-content: center;
    }

    .upload-hero-visual {
        min-height: 360px;
    }

    .upload-layout {
        grid-template-columns: 1fr;
    }

    .upload-side-area {
        position: static;

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

    .upload-submit-card {
        padding: 45px;
    }

    .upload-submit-visual {
        width: 170px;
        height: 170px;
    }

}


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

@media (max-width: 767px) {

    .upload-hero {
        padding: 60px 20px 50px;
    }

    .upload-hero-content h1 {
        font-size: clamp(38px, 10vw, 52px);
    }

    .upload-hero-content > p {
        font-size: 15px;
    }

    .upload-hero-points {
        flex-direction: column;
        align-items: center;
        gap: 11px;
    }

    .upload-hero-visual {
        min-height: 310px;
    }

    .upload-hero-circle {
        width: 270px;
        height: 270px;
    }

    .upload-hero-document {
        width: 185px;
        height: 245px;

        padding: 22px;
    }

    .upload-floating-icon {
        width: 48px;
        height: 48px;
    }

    .upload-float-one {
        left: 8%;
    }

    .upload-float-two {
        right: 5%;
    }

    .upload-float-three {
        right: 10%;
        bottom: 8%;
    }

    .upload-workflow-section {
        padding: 75px 20px 80px;
    }

    .upload-card {
        padding: 23px;

        border-radius: 23px;
    }

    .upload-options {
        grid-template-columns: 1fr;
    }

    .upload-option {
        min-height: 115px;
    }

    .upload-form-grid {
        grid-template-columns: 1fr;
    }

    .upload-full {
        grid-column: auto;
    }

    .upload-side-area {
        grid-template-columns: 1fr;
    }

    .upload-submit-section {
        padding: 10px 20px 80px;
    }

    .upload-submit-card {
        flex-direction: column;
        align-items: flex-start;

        padding: 32px 24px;

        border-radius: 27px;
    }

    .upload-submit-visual {
        display: none;
    }

    .upload-submit-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .upload-submit-button,
    .upload-back-button {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .upload-hero {
        padding: 50px 15px 45px;
    }

    .upload-hero-content h1 {
        font-size: 35px;
    }

    .upload-hero-content > p {
        font-size: 14px;
        line-height: 1.6;
    }

    .upload-hero-visual {
        min-height: 270px;
    }

    .upload-hero-circle {
        width: 230px;
        height: 230px;
    }

    .upload-hero-document {
        width: 160px;
        height: 215px;

        padding: 18px;
    }

    .upload-document-lines {
        margin-top: 30px;
        gap: 11px;
    }

    .upload-floating-icon {
        width: 40px;
        height: 40px;

        font-size: 13px;
    }

    .upload-section-heading {
        margin-bottom: 35px;
    }

    .upload-section-heading h2 {
        font-size: 32px;
    }

    .upload-card-heading h2 {
        font-size: 21px;
    }

    .upload-card-heading p {
        font-size: 12px;
    }

    .upload-submit-content h2 {
        font-size: 30px;
    }

    .upload-success-card {
        padding: 42px 22px;
    }

}

/* =========================================================
   MEDIVANA PRODUCT DETAILS PAGE
   ========================================================= */

.med-product-details-page-main {
    width: 100%;
    overflow: hidden;
    background: var(--med-bg);
    color: var(--med-text);
}

.pd-container {
    width: min(1280px, calc(100% - 56px));
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.pd-breadcrumb-section {
    padding: 24px 0 12px;
    background: var(--med-bg);
}

.pd-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
}

.pd-breadcrumb a {
    color: var(--med-primary);
    text-decoration: none;
    transition: color .3s ease;
}

.pd-breadcrumb a:hover {
    color: var(--med-deep-blue);
}

.pd-breadcrumb i {
    color: var(--med-teal);
    font-size: 8px;
}

.pd-breadcrumb span {
    color: var(--med-text);
    opacity: .65;
}


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

.pd-product-hero {
    position: relative;
    padding: 35px 0 105px;
    background: var(--med-bg);
}

.pd-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    align-items: center;
    gap: 75px;
}


/* =========================================================
   PRODUCT DETAILS - IMAGE AREA
   ========================================================= */

.pd-visual {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}


/* REMOVE THE OLD BLOB / CIRCLE */
.pd-image-blob,
.pd-product-blob,
.pd-visual::before,
.pd-visual::after {
    display: none !important;
}


/* MAIN IMAGE WRAPPER */

.pd-image-wrap {
    position: relative;
    width: min(580px, 100%);
    height: 520px;

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

    background: transparent;
    border-radius: 0;

    overflow: visible;

    box-shadow: none;
}


/* PRODUCT IMAGE */

.pd-product-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    border-radius: 0;

    background: transparent;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


.pd-image-wrap:hover .pd-product-image {
    transform: scale(1.035);
}
/* =========================================================
   PRODUCT DETAILS - FLOATING ELEMENTS
   ========================================================= */

.pd-floating-element {
    position: absolute;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);
    color: var(--med-teal);

    border: 1px solid rgba(120, 189, 181, 0.25);

    box-shadow:
        0 14px 35px rgba(49, 86, 107, 0.12);

    z-index: 5;

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


.pd-floating-element i {
    font-size: 20px;
}


.pd-float-one {
    left: 4%;
    top: 27%;

    animation-delay: 0s;
}


.pd-float-two {
    right: 5%;
    top: 47%;

    animation-delay: 1.2s;
}


.pd-float-three {
    left: 14%;
    bottom: 12%;

    animation-delay: 2.1s;
}

/* =========================================================
   PRODUCT DETAILS - LIVE RESPONSIVE IMAGE AND TYPE
   ========================================================= */

.med-product-details-page-main .pd-product-visual {
    position: relative;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.med-product-details-page-main .pd-image-frame {
    position: relative;
    width: min(620px, 100%);
    max-width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    background: var(--med-powder-blue);
    border-radius: 24px;
}

.med-product-details-page-main .pd-product-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    padding: 0;
    transition: none;
}

.med-product-details-page-main .pd-image-status {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 253, 248, .94);
    color: var(--med-deep-blue);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    pointer-events: none;
}

.med-product-details-page-main .pd-product-category {
    font-size: 13px;
}

.med-product-details-page-main .pd-short-description {
    font-size: 18px;
}

.med-product-details-page-main .pd-rating-row strong,
.med-product-details-page-main .pd-rating-row > span {
    font-size: 14px;
}

.med-product-details-page-main .pd-price-area small {
    font-size: 13px;
}

.med-product-details-page-main .pd-availability strong {
    font-size: 15px;
}

.med-product-details-page-main .pd-availability small {
    font-size: 13px;
}

.med-product-details-page-main .pd-quantity-area > span,
.med-product-details-page-main .pd-continue-button,
.med-product-details-page-main .pd-upload-button {
    font-size: 14px;
}

.med-product-details-page-main .pd-prescription-area p {
    font-size: 13px;
}

.med-product-details-page-main .pd-delivery-item strong {
    font-size: 13px;
}

.med-product-details-page-main .pd-delivery-item span {
    font-size: 12px;
}

.med-product-details-page-main .pd-eyebrow,
.med-product-details-page-main .pd-info-card > span {
    font-size: 12px;
}

.med-product-details-page-main .pd-section-heading p,
.med-product-details-page-main .pd-info-card > p,
.med-product-details-page-main .pd-benefit p,
.med-product-details-page-main .pd-related-content p,
.med-product-details-page-main .pd-final-content p {
    font-size: 15px;
}

.med-product-details-page-main .pd-detail-list span,
.med-product-details-page-main .pd-detail-list strong {
    font-size: 14px;
}

.med-product-details-page-main .pd-care-note span {
    font-size: 13px;
}

.med-product-details-page-main .pd-benefit strong {
    font-size: 14px;
}

.med-product-details-page-main .pd-related-category {
    font-size: 11px;
}

.med-product-details-page-main .pd-final-primary,
.med-product-details-page-main .pd-final-secondary {
    font-size: 14px;
}

@media (max-width: 767px) {

    .med-product-details-page-main .pd-image-frame {
        width: 100%;
        border-radius: 18px;
    }

    .med-product-details-page-main .pd-short-description {
        font-size: 17px;
    }

}

@media (max-width: 480px) {

    .med-product-details-page-main .pd-short-description {
        font-size: 16px;
    }

    .med-product-details-page-main .pd-section-heading p,
    .med-product-details-page-main .pd-info-card > p,
    .med-product-details-page-main .pd-benefit p,
    .med-product-details-page-main .pd-related-content p,
    .med-product-details-page-main .pd-final-content p {
        font-size: 14px;
    }

}


@keyframes pdFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}
/* =========================================================
   DECORATIONS
   ========================================================= */

.pd-visual-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pd-decoration-one {
    width: 90px;
    height: 90px;
    top: 30px;
    left: 12%;
    border: 2px dashed var(--med-teal);
    opacity: .5;
    animation: pdRotate 15s linear infinite;
}

.pd-decoration-two {
    width: 35px;
    height: 35px;
    right: 13%;
    top: 17%;
    background: var(--med-peach);
    opacity: .65;
    animation: pdFloat 4s ease-in-out infinite;
}

.pd-leaf {
    position: absolute;
    color: var(--med-teal);
    opacity: .28;
    z-index: 1;
    pointer-events: none;
}

.pd-leaf-one {
    top: 10%;
    right: 12%;
    font-size: 34px;
    transform: rotate(-25deg);
    animation: pdLeafFloat 5s ease-in-out infinite;
}

.pd-leaf-two {
    bottom: 12%;
    left: 5%;
    font-size: 26px;
    transform: rotate(35deg);
    animation: pdLeafFloat 6s ease-in-out infinite reverse;
}

.pd-leaf-three {
    bottom: 26%;
    right: 4%;
    font-size: 18px;
    transform: rotate(-45deg);
    animation: pdLeafFloat 4.5s ease-in-out infinite;
}


/* =========================================================
   FLOATING ELEMENTS
   ========================================================= */

.pd-floating-element {
    position: absolute;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-teal);
    border: 1px solid var(--med-border);
    box-shadow: 0 15px 35px rgba(49, 86, 107, .13);
    z-index: 8;
}

.pd-floating-element i {
    font-size: 20px;
}

.pd-float-one {
    left: 2%;
    top: 24%;
    animation: pdFloat 4.5s ease-in-out infinite;
}

.pd-float-two {
    right: 3%;
    top: 45%;
    color: var(--med-primary);
    animation: pdFloat 5s ease-in-out infinite .5s;
}

.pd-float-three {
    left: 13%;
    bottom: 8%;
    color: var(--med-deep-blue);
    animation: pdFloat 4s ease-in-out infinite 1s;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.pd-product-information {
    position: relative;
    z-index: 4;
}

.pd-product-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--med-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.pd-product-category i {
    color: var(--med-teal);
}

.pd-product-information h1 {
    max-width: 650px;
    margin: 15px 0 12px;
    color: var(--med-deep-blue);
    font-size: clamp(38px, 4.3vw, 64px);
    line-height: 1.02;
    letter-spacing: -1.8px;
}

.pd-short-description {
    max-width: 580px;
    margin: 0;
    color: var(--med-text);
    opacity: .72;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   RATING
   ========================================================= */

.pd-rating-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-stars {
    display: flex;
    gap: 3px;
    color: var(--med-peach);
}

.pd-stars i {
    font-size: 12px;
}

.pd-rating-row strong {
    color: var(--med-deep-blue);
    font-size: 12px;
}

.pd-rating-row > span {
    color: var(--med-text);
    opacity: .55;
    font-size: 11px;
}


/* =========================================================
   PRICE
   ========================================================= */

.pd-price-area {
    margin-top: 28px;
    display: flex;
    align-items: flex-end;
    gap: 13px;
    flex-wrap: wrap;
}

.pd-price {
    color: var(--med-deep-blue);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.pd-price-area small {
    color: var(--med-text);
    opacity: .55;
    font-size: 10px;
    padding-bottom: 3px;
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.pd-availability {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-availability-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-powder-blue);
    color: var(--med-teal);
}

.pd-availability > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pd-availability strong {
    color: var(--med-deep-blue);
    font-size: 12px;
}

.pd-availability small {
    color: var(--med-text);
    opacity: .6;
    font-size: 10px;
}


/* =========================================================
   PURCHASE
   ========================================================= */

.pd-purchase-area {
    margin-top: 25px;
}

.pd-quantity-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pd-quantity-area > span {
    color: var(--med-deep-blue);
    font-size: 11px;
    font-weight: 800;
}

.pd-quantity-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pd-quantity-control button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--med-border);
    border-radius: 50%;
    background: var(--med-card);
    color: var(--med-deep-blue);
    cursor: pointer;
    transition: .3s ease;
}

.pd-quantity-control button:hover {
    background: var(--med-teal);
    border-color: var(--med-teal);
    transform: translateY(-2px);
}

.pd-quantity-control span {
    min-width: 20px;
    text-align: center;
    color: var(--med-deep-blue);
    font-size: 14px;
    font-weight: 900;
}

.pd-add-cart-button {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 16px;
    background: var(--med-deep-blue);
    color: #FFFDF8;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: .35s ease;
}

.pd-add-cart-button:hover {
    background: var(--med-teal);
    color: var(--med-deep-blue);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(49, 86, 107, .14);
}

.pd-add-cart-button.added {
    background: var(--med-teal);
    color: var(--med-deep-blue);
}

.pd-continue-button {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    color: var(--med-primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    transition: .3s ease;
}

.pd-continue-button:hover {
    color: var(--med-deep-blue);
    transform: translateX(-3px);
}


/* =========================================================
   PRESCRIPTION
   ========================================================= */

.pd-prescription-area {
    display: none;
    margin-top: 25px;
    padding: 20px;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    background: rgba(243, 182, 162, .17);
    border: 1px solid rgba(243, 182, 162, .4);
    border-radius: 22px;
}

.pd-prescription-area.active {
    display: grid;
}

.pd-prescription-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-peach);
    color: var(--med-deep-blue);
}

.pd-prescription-area > div:nth-child(2) {
    min-width: 0;
}

.pd-prescription-area strong {
    display: block;
    color: var(--med-deep-blue);
    font-size: 13px;
}

.pd-prescription-area p {
    margin: 5px 0 0;
    color: var(--med-text);
    opacity: .7;
    font-size: 10px;
    line-height: 1.5;
}

.pd-upload-button {
    grid-column: 1 / -1;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    background: var(--med-peach);
    color: var(--med-deep-blue);
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
    transition: .3s ease;
}

.pd-upload-button:hover {
    background: var(--med-teal);
    transform: translateY(-2px);
}


/* =========================================================
   DELIVERY INFORMATION
   ========================================================= */

.pd-delivery-info {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--med-border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pd-delivery-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.pd-delivery-item > i {
    color: var(--med-teal);
    font-size: 15px;
    margin-top: 2px;
}

.pd-delivery-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-delivery-item strong {
    color: var(--med-deep-blue);
    font-size: 10px;
}

.pd-delivery-item span {
    color: var(--med-text);
    opacity: .6;
    font-size: 9px;
    line-height: 1.35;
}


/* =========================================================
   INFORMATION SECTION
   ========================================================= */

.pd-information-section {
    padding: 110px 0;
    background: var(--med-card);
}

.pd-section-heading {
    max-width: 700px;
    margin-bottom: 50px;
}

.pd-section-heading.pd-related-heading {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--med-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.pd-eyebrow i {
    color: var(--med-teal);
}

.pd-section-heading h2,
.pd-benefits-heading h2 {
    margin: 13px 0;
    color: var(--med-deep-blue);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -1px;
}

.pd-section-heading h2 span,
.pd-benefits-heading h2 span {
    color: var(--med-primary);
}

.pd-section-heading p {
    max-width: 580px;
    margin: 0;
    color: var(--med-text);
    opacity: .67;
    font-size: 13px;
    line-height: 1.7;
}

.pd-section-heading.pd-related-heading p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   INFORMATION CARDS
   ========================================================= */

.pd-information-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pd-info-card {
    min-height: 310px;
    position: relative;
    padding: 30px;
    overflow: hidden;
    background: var(--med-bg);
    border: 1px solid var(--med-border);
    border-radius: 30px;
    box-shadow: 0 18px 45px rgba(49, 86, 107, .06);
    transition: transform .4s ease, box-shadow .4s ease;
}

.pd-info-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 55px rgba(49, 86, 107, .10);
}

.pd-info-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 50%;
    background: var(--med-powder-blue);
    color: var(--med-primary);
}

.pd-info-card > span {
    display: block;
    color: var(--med-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.pd-info-card h3 {
    margin: 8px 0 12px;
    color: var(--med-deep-blue);
    font-size: 19px;
}

.pd-info-card > p {
    margin: 0;
    color: var(--med-text);
    opacity: .68;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   DETAIL LIST
   ========================================================= */

.pd-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--med-border);
}

.pd-detail-list span {
    color: var(--med-text);
    opacity: .55;
    font-size: 10px;
}

.pd-detail-list strong {
    color: var(--med-deep-blue);
    font-size: 10px;
    text-align: right;
}


/* =========================================================
   CARE NOTE
   ========================================================= */

.pd-care-note {
    margin-top: 22px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(243, 182, 162, .16);
    border-radius: 14px;
}

.pd-care-note i {
    color: var(--med-peach);
    margin-top: 2px;
}

.pd-care-note span {
    color: var(--med-text);
    opacity: .7;
    font-size: 9px;
    line-height: 1.5;
}


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

.pd-benefits-section {
    position: relative;
    padding: 110px 0;
    background: var(--med-bg);
}

.pd-benefits-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.pd-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pd-benefit {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--med-border);
}

.pd-benefit > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--med-powder-blue);
    color: var(--med-teal);
}

.pd-benefit strong {
    display: block;
    margin-bottom: 6px;
    color: var(--med-deep-blue);
    font-size: 12px;
}

.pd-benefit p {
    margin: 0;
    color: var(--med-text);
    opacity: .6;
    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.pd-related-section {
    padding: 110px 0;
    background: var(--med-card);
}

.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pd-related-card {
    overflow: hidden;
    background: var(--med-bg);
    border: 1px solid var(--med-border);
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(49, 86, 107, .06);
    transition: transform .4s ease, box-shadow .4s ease;
}

.pd-related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(49, 86, 107, .11);
}

.pd-related-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pd-related-image {
    width: 100%;
    height: 210px;
    overflow: hidden;
    background: var(--med-powder-blue);
}

.pd-related-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.pd-related-card:hover img {
    transform: scale(1.05);
}

.pd-related-content {
    padding: 18px;
}

.pd-related-category {
    color: var(--med-primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.pd-related-content h3 {
    margin: 7px 0;
    color: var(--med-deep-blue);
    font-size: 15px;
}

.pd-related-content p {
    min-height: 30px;
    margin: 0 0 10px;
    color: var(--med-text);
    opacity: .62;
    font-size: 9px;
    line-height: 1.5;
}

.pd-related-price {
    color: var(--med-deep-blue);
    font-size: 15px;
    font-weight: 900;
}


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

.pd-final-section {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 80px 5%;
    text-align: center;
    background: var(--med-powder-blue);
}

.pd-final-content {
    position: relative;
    z-index: 3;
    max-width: 720px;
}

.pd-final-content h2 {
    margin: 14px 0;
    color: var(--med-deep-blue);
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
}

.pd-final-content h2 span {
    color: var(--med-primary);
}

.pd-final-content p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--med-text);
    opacity: .7;
    font-size: 13px;
    line-height: 1.7;
}

.pd-final-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pd-final-primary,
.pd-final-secondary {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
    transition: .3s ease;
}

.pd-final-primary {
    background: var(--med-deep-blue);
    color: #FFFDF8;
}

.pd-final-primary:hover {
    background: var(--med-teal);
    color: var(--med-deep-blue);
    transform: translateY(-3px);
}

.pd-final-secondary {
    border: 1px solid var(--med-primary);
    color: var(--med-deep-blue);
    background: transparent;
}

.pd-final-secondary:hover {
    background: var(--med-card);
    transform: translateY(-3px);
}

.pd-final-leaf {
    position: absolute;
    color: var(--med-teal);
    opacity: .25;
}

.pd-final-leaf-one {
    left: 7%;
    bottom: 10%;
    font-size: 100px;
    transform: rotate(-30deg);
}

.pd-final-leaf-two {
    right: 7%;
    top: 10%;
    font-size: 75px;
    transform: rotate(35deg);
}


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

.med-product-details-page-main .pd-scroll-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.med-product-details-page-main .pd-scroll-reveal.pd-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pdFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

}

@keyframes pdLeafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-25deg);
    }

    50% {
        transform: translateY(-9px) rotate(-12deg);
    }

}

@keyframes pdRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   LAPTOP-L
   ========================================================= */

@media (max-width: 1399px) {

    .pd-product-layout {
        gap: 50px;
    }

    .pd-image-frame {
        width: 470px;
        height: 490px;
    }

    .pd-product-information h1 {
        font-size: 52px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .pd-container {
        width: min(1100px, calc(100% - 42px));
    }

    .pd-product-layout {
        gap: 35px;
    }

    .pd-product-visual {
        min-height: 520px;
    }

    .pd-image-frame {
        width: 430px;
        height: 450px;
    }

    .pd-product-information h1 {
        font-size: 45px;
    }

    .pd-delivery-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pd-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .pd-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}


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

@media (max-width: 1023px) {

    .pd-container {
        width: min(900px, calc(100% - 40px));
    }

    .pd-product-hero {
        padding-top: 25px;
        padding-bottom: 80px;
    }

    .pd-product-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .pd-product-visual {
        min-height: 470px;
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .pd-image-frame {
        width: min(500px, 90%);
        height: 470px;
    }

    .pd-product-information {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .pd-product-category,
    .pd-rating-row,
    .pd-price-area,
    .pd-availability {
        justify-content: center;
    }

    .pd-short-description {
        margin-left: auto;
        margin-right: auto;
    }

    .pd-delivery-info {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }

    .pd-information-layout {
        grid-template-columns: 1fr;
    }

    .pd-info-card {
        min-height: auto;
    }

    .pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

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

    .pd-breadcrumb-section {
        padding-top: 18px;
    }

    .pd-breadcrumb {
        gap: 7px;
        font-size: 9px;
    }

    .pd-product-hero {
        padding: 20px 0 65px;
    }

    .pd-product-layout {
        gap: 25px;
    }

    .pd-product-visual {
        min-height: 370px;
    }

    .pd-image-frame {
        width: 88%;
        height: 370px;
        border-radius: 42% 58% 55% 45% / 45% 43% 57% 55%;
    }

    .pd-image-status {
        top: 18px;
        left: 18px;
    }

    .pd-image-badge {
        right: 0;
        bottom: 25px;
        min-width: 125px;
        padding: 10px 12px;
    }

    .pd-floating-element {
        width: 45px;
        height: 45px;
    }

    .pd-floating-element i {
        font-size: 16px;
    }

    .pd-float-one {
        left: 0;
    }

    .pd-float-two {
        right: 0;
    }

    .pd-float-three {
        left: 7%;
    }

    .pd-product-information h1 {
        font-size: 37px;
        letter-spacing: -1px;
    }

    .pd-short-description {
        font-size: 12px;
    }

    .pd-rating-row {
        margin-top: 15px;
    }

    .pd-price {
        font-size: 29px;
    }

    .pd-delivery-info {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .pd-information-section,
    .pd-benefits-section,
    .pd-related-section {
        padding: 75px 0;
    }

    .pd-section-heading {
        margin-bottom: 35px;
    }

    .pd-info-card {
        padding: 24px;
        border-radius: 25px;
    }

    .pd-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pd-benefit {
        padding: 16px 4px;
    }

    .pd-related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pd-related-image {
        height: 170px;
    }

    .pd-related-content {
        padding: 13px;
    }

    .pd-related-content h3 {
        font-size: 13px;
    }

    .pd-final-section {
        min-height: 390px;
        padding: 65px 20px;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .pd-container {
        width: calc(100% - 24px);
    }

    .pd-product-visual {
        min-height: 315px;
    }

    .pd-image-frame {
        height: 315px;
        width: 92%;
    }

    .pd-image-badge {
        right: 2px;
        bottom: 15px;
        transform: scale(.88);
        transform-origin: right bottom;
    }

    .pd-leaf-one {
        right: 2%;
        font-size: 25px;
    }

    .pd-leaf-two {
        left: 1%;
        font-size: 20px;
    }

    .pd-float-one {
        left: -2px;
        top: 20%;
    }

    .pd-float-two {
        right: -2px;
        top: 44%;
    }

    .pd-float-three {
        left: 8%;
        bottom: 3%;
    }

    .pd-product-information h1 {
        font-size: 31px;
    }

    .pd-short-description {
        font-size: 11px;
    }

    .pd-price-area {
        margin-top: 20px;
    }

    .pd-price {
        font-size: 27px;
    }

    .pd-quantity-control button {
        width: 33px;
        height: 33px;
    }

    .pd-add-cart-button {
        min-height: 51px;
    }

    .pd-prescription-area {
        padding: 15px;
    }

    .pd-section-heading h2,
    .pd-benefits-heading h2 {
        font-size: 30px;
    }

    .pd-related-grid {
        grid-template-columns: 1fr;
    }

    .pd-related-image {
        height: 220px;
    }

    .pd-final-actions {
        flex-direction: column;
    }

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

    .pd-final-leaf-one {
        font-size: 65px;
    }

    .pd-final-leaf-two {
        font-size: 50px;
    }

}
/* =========================================================
   PRODUCT DETAILS - TEXT VISIBILITY
   ========================================================= */

.pd-details {
    position: relative;
    z-index: 2;
}


/* CATEGORY */

.pd-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    font-weight: 800;
    letter-spacing: 0.16em;

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


/* PRODUCT TITLE */

.pd-title {
    margin: 14px 0 16px;

    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.05;

    font-weight: 900;

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


/* SHORT DESCRIPTION */

.pd-short-description {
    max-width: 620px;

    margin: 0 0 24px;

    font-size: 18px;
    line-height: 1.75;

    font-weight: 500;

    color: var(--med-text);

    opacity: 0.9;
}


/* RATING TEXT */

.pd-rating {
    font-size: 16px;
    line-height: 1.5;

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


.pd-rating strong {
    font-size: 16px;
    color: var(--med-deep-blue);
}


/* PRICE */

.pd-price {
    margin: 24px 0;

    display: flex;
    align-items: baseline;
    gap: 14px;
}


.pd-price strong {
    font-size: 38px;
    line-height: 1;

    font-weight: 900;

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


.pd-price span {
    font-size: 15px;
    color: var(--med-text);

    opacity: 0.75;
}


/* STOCK */

.pd-stock {
    font-size: 16px;
    line-height: 1.5;

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


.pd-stock small {
    display: block;

    margin-top: 3px;

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

    color: var(--med-text);

    opacity: 0.8;
}
/* =========================================================
   PRODUCT DETAILS - TRUST INFORMATION
   ========================================================= */

.pd-trust-row {
    margin-top: 38px;
    padding-top: 26px;

    border-top: 1px solid rgba(49, 86, 107, 0.15);

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


.pd-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}


.pd-trust-item i {
    flex-shrink: 0;

    font-size: 19px;

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


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

    margin-bottom: 5px;

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

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


.pd-trust-item span {
    display: block;

    font-size: 13px;
    line-height: 1.55;

    color: var(--med-text);

    opacity: 0.8;
}
/* =========================================================
   PRODUCT DETAILS - QUANTITY
   ========================================================= */

.pd-quantity-label {
    display: block;

    margin-bottom: 10px;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 800;

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


.pd-quantity {
    display: flex;
    align-items: center;
    gap: 16px;
}


.pd-quantity button {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 1px solid rgba(49, 86, 107, 0.15);

    background: var(--med-card);
    color: var(--med-deep-blue);

    font-size: 16px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.pd-quantity button:hover {
    background: var(--med-powder-blue);
    transform: translateY(-2px);
}


.pd-quantity span {
    min-width: 24px;

    text-align: center;

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

    color: var(--med-deep-blue);
}
.pd-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 800;

    color: var(--med-primary);

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.pd-continue-shopping:hover {
    color: var(--med-deep-blue);
    transform: translateX(-4px);
}

@media (min-width: 1200px) {

    .pd-visual {
        min-height: 600px;
    }

    .pd-image-wrap {
        width: min(620px, 100%);
        height: 560px;
    }

    .pd-short-description {
        font-size: 18px;
    }
}
@media (min-width: 1024px) and (max-width: 1199px) {

    .pd-visual {
        min-height: 520px;
    }

    .pd-image-wrap {
        width: 500px;
        height: 470px;
    }

    .pd-title {
        font-size: 48px;
    }

    .pd-short-description {
        font-size: 17px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .pd-visual {
        min-height: 450px;
        margin-bottom: 20px;
    }

    .pd-image-wrap {
        width: min(520px, 90%);
        height: 430px;
    }

    .pd-title {
        font-size: 44px;
    }

    .pd-short-description {
        font-size: 17px;
        line-height: 1.7;
    }

    .pd-trust-row {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 481px) and (max-width: 767px) {

    .pd-visual {
        min-height: 380px;
    }

    .pd-image-wrap {
        width: 100%;
        height: 350px;
    }

    .pd-title {
        font-size: 38px;
    }

    .pd-short-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .pd-price strong {
        font-size: 34px;
    }

    .pd-trust-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pd-floating-element {
        width: 48px;
        height: 48px;
    }

    .pd-floating-element i {
        font-size: 17px;
    }
}
@media (max-width: 480px) {

    .pd-visual {
        min-height: 320px;
    }

    .pd-image-wrap {
        width: 100%;
        height: 290px;
    }

    .pd-title {
        font-size: 34px;
        line-height: 1.08;
    }

    .pd-category {
        font-size: 12px;
    }

    .pd-short-description {
        font-size: 16px;
        line-height: 1.65;
    }

    .pd-rating {
        font-size: 15px;
    }

    .pd-price strong {
        font-size: 32px;
    }

    .pd-price span {
        font-size: 14px;
    }

    .pd-stock {
        font-size: 15px;
    }

    .pd-stock small {
        font-size: 13px;
    }

    .pd-trust-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pd-floating-element {
        width: 44px;
        height: 44px;
    }

    .pd-floating-element i {
        font-size: 15px;
    }

    .pd-float-one {
        left: 0;
    }

    .pd-float-two {
        right: 0;
    }

    .pd-float-three {
        left: 7%;
    }
}

/* =========================================================
   MEDIVANA - ABOUT US PAGE
   ========================================================= */


/* =========================================================
   PAGE BASE
   ========================================================= */

/* =========================================================
   ABOUT US PAGE
   ========================================================= */

.about-page {
    position: relative;
    width: 100%;
    overflow: visible;
    background: var(--med-bg);
    color: var(--med-text);
}
.about-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-section-inner {
    width: min(1280px, 90%);
    margin: 0 auto;
}


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

.about-reveal {
    opacity: 1;
    transform: none;
}

.about-page.about-js .about-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.about-page.about-js .about-reveal.about-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   ACTIVE NAVBAR
   ========================================================= */

.med-nav-link.active {
    background: var(--med-nav-hover);
    color: var(--med-primary);
}

.med-mobile-link.active {
    color: var(--med-primary);
    background: var(--med-nav-hover);
}


/* =========================================================
   COMMON HEADINGS
   ========================================================= */

.about-section-heading {
    width: min(760px, 100%);
    margin: 0 auto 65px;
    text-align: center;
}

.about-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--med-primary);

    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.about-section-heading h2 {
    margin: 0;

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

    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.04em;
}

.about-section-heading h2 span {
    color: var(--med-teal);
}

.about-section-heading p {
    max-width: 650px;
    margin: 20px auto 0;

    color: var(--med-text);

    font-size: 1.08rem;
    line-height: 1.75;
    font-weight: 500;
}


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

.about-primary-button,
.about-secondary-button {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 24px;

    text-decoration: none;

    font-size: .94rem;
    font-weight: 800;

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

.about-primary-button {
    background: var(--med-deep-blue);
    color: #FFFDF8;

    border-radius: 50px;

    box-shadow:
        0 12px 30px rgba(49,86,107,.16);
}

.about-primary-button:hover {
    color: #FFFDF8;
    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(49,86,107,.22);
}

.about-secondary-button {
    color: var(--med-deep-blue);

    border: 1px solid var(--med-border);
    border-radius: 50px;
    background: var(--med-card);
}

.about-secondary-button:hover {
    color: var(--med-primary);
    transform: translateY(-4px);

    background: var(--med-powder-blue);
}


/* =========================================================
   SECTION 01 - HERO
   ========================================================= */

.about-hero {
    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 90px 5% 110px;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(120,189,181,.16),
            transparent 28%
        ),
        var(--med-bg);
}

.about-hero-inner {
    width: min(1280px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);

    align-items: center;
    gap: clamp(45px, 7vw, 100px);
}

.about-hero-content {
    position: relative;
    z-index: 3;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;

    color: var(--med-primary);

    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .17em;
}

.about-eyebrow i {
    color: var(--med-teal);
}

.about-hero h1 {
    margin: 0;

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

    font-size: clamp(3rem, 5.3vw, 5.6rem);
    line-height: .98;

    font-weight: 900;
    letter-spacing: -.055em;
}

.about-hero h1 span {
    display: block;
    color: var(--med-teal);
}

.about-hero-content > p {
    max-width: 650px;

    margin: 28px 0 32px;

    color: var(--med-text);

    font-size: 1.12rem;
    line-height: 1.8;
    font-weight: 500;
}

.about-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}


/* HERO VISUAL */

.about-hero-visual {
    position: relative;

    min-height: 570px;

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

.about-image-frame {
    position: relative;

    width: min(590px, 92%);
    height: 540px;

    overflow: hidden;

    border-radius:
        45% 55% 52% 48%
        / 42% 44% 56% 58%;

    background: var(--med-powder-blue);

    box-shadow:
        0 30px 75px rgba(49,86,107,.15);

    z-index: 2;
}

.about-hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: fill;
    object-position: center;

    transition:
        transform .8s ease;
}

.about-image-frame:hover .about-hero-image {
    transform: scale(1.04);
}


/* FLOATING ELEMENTS */

.about-floating {
    position: absolute;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);
    color: var(--med-teal);

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

    box-shadow:
        0 15px 35px rgba(49,86,107,.14);

    z-index: 5;

    animation:
        aboutFloat 4.5s ease-in-out infinite;
}

.about-floating i {
    font-size: 20px;
}

.about-float-one {
    left: 2%;
    top: 22%;
}

.about-float-two {
    right: 1%;
    top: 42%;
    animation-delay: 1.2s;
}

.about-float-three {
    left: 12%;
    bottom: 8%;
    animation-delay: 2.2s;
}

.about-hero-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .22;

    z-index: 1;

    animation:
        aboutLeafDrift 6s ease-in-out infinite;
}

.about-leaf-one {
    top: 5%;
    right: 12%;

    font-size: 62px;
}

.about-leaf-two {
    left: 4%;
    bottom: 16%;

    font-size: 45px;

    animation-delay: 2s;
}

.about-hero-badge {
    position: absolute;

    right: 3%;
    bottom: 10%;

    min-width: 170px;

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

    padding: 15px 19px;

    border-radius: 18px;

    background: var(--med-card);
    color: var(--med-text);

    box-shadow:
        0 15px 35px rgba(49,86,107,.14);

    z-index: 6;
}

.about-hero-badge i {
    font-size: 22px;
    color: var(--med-teal);
}

.about-hero-badge span {
    display: flex;
    flex-direction: column;

    font-size: .78rem;
    line-height: 1.4;
}

.about-hero-badge strong {
    color: var(--med-deep-blue);
}


/* =========================================================
   SECTION 02 - STORY
   ========================================================= */

.about-story {
    padding: 130px 5%;

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

.about-story-inner {
    width: min(1280px, 100%);
    margin: 0 auto;

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

    align-items: center;

    gap: clamp(50px, 8vw, 110px);
}

.about-story-visual {
    position: relative;

    min-height: 560px;
}

.about-story-image-one {
    position: absolute;

    width: 72%;
    height: 430px;

    left: 0;
    top: 25px;

    overflow: hidden;

    border-radius:
        42% 58% 55% 45%
        / 48% 45% 55% 52%;

    box-shadow:
        0 25px 60px rgba(49,86,107,.14);

    z-index: 2;
}

.about-story-image-two {
    position: absolute;

    width: 47%;
    height: 270px;

    right: 0;
    bottom: 10px;

    overflow: hidden;

    border-radius:
        55% 45% 40% 60%
        / 50% 55% 45% 50%;

    border: 8px solid var(--med-card);

    box-shadow:
        0 20px 45px rgba(49,86,107,.14);

    z-index: 4;
}

.about-story-image-one img,
.about-story-image-two img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s ease;
}

.about-story-image-one:hover img,
.about-story-image-two:hover img {
    transform: scale(1.05);
}

.about-story-orbit {
    position: absolute;

    width: 250px;
    height: 250px;

    right: 2%;
    top: 0;

    border: 2px dashed var(--med-teal);

    border-radius: 50%;

    opacity: .35;

    animation:
        aboutOrbit 12s linear infinite;
}

.about-story-leaf {
    position: absolute;

    left: 5%;
    bottom: 2%;

    font-size: 58px;

    color: var(--med-teal);

    opacity: .18;

    animation:
        aboutLeafDrift 5s ease-in-out infinite;
}

.about-story-content {
    max-width: 650px;
}

.about-story-content .about-section-eyebrow {
    margin-bottom: 15px;
}

.about-story-content h2 {
    margin: 0;

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

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.08;

    font-weight: 900;
    letter-spacing: -.04em;
}

.about-story-content h2 span {
    color: var(--med-teal);
}

.about-story-content > p {
    margin: 22px 0 0;

    color: var(--med-text);

    font-size: 1.08rem;
    line-height: 1.8;
}

.about-story-values {
    margin-top: 34px;

    display: grid;
    gap: 17px;
}

.about-value {
    display: flex;
    align-items: center;
    gap: 15px;
}

.about-value-icon {
    flex-shrink: 0;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-teal);
}

.about-value-icon i {
    font-size: 18px;
}

.about-value div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-value strong {
    color: var(--med-deep-blue);

    font-size: 1rem;
}

.about-value small {
    color: var(--med-text);

    font-size: .9rem;
    line-height: 1.45;
}


/* =========================================================
   SECTION 03 - MISSION / VISION
   ========================================================= */

.about-mission {
    padding: 135px 5% 150px;

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

.about-mission-layout {
    width: min(1250px, 100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px
        minmax(0, 1fr);

    align-items: center;

    gap: 35px;
}

.about-purpose {
    position: relative;

    min-height: 420px;

    padding: 42px;

    background: var(--med-card);

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

    border-radius: 38px;

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(49,86,107,.08);

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

.about-purpose:hover {
    transform: translateY(-9px);

    box-shadow:
        0 30px 65px rgba(49,86,107,.14);
}

.about-purpose-number {
    position: absolute;

    top: 25px;
    right: 28px;

    font-size: .8rem;
    font-weight: 900;

    color: var(--med-primary);

    letter-spacing: .15em;
}

.about-purpose-icon {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    margin-bottom: 28px;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-teal);
}

.about-purpose-icon i {
    font-size: 23px;
}

.about-purpose-label {
    display: block;

    margin-bottom: 13px;

    color: var(--med-primary);

    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.about-purpose h3 {
    max-width: 430px;

    margin: 0;

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

    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 900;
}

.about-purpose p {
    margin: 20px 0 0;

    color: var(--med-text);

    font-size: 1rem;
    line-height: 1.75;
}

.about-purpose-leaf {
    position: absolute;

    right: -10px;
    bottom: -18px;

    font-size: 90px;

    color: var(--med-teal);

    opacity: .09;

    transform: rotate(-25deg);
}

.about-purpose-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-center-ring {
    width: 175px;
    height: 175px;

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

    gap: 4px;

    border-radius: 50%;

    background: var(--med-deep-blue);
    color: #FFFDF8;

    box-shadow:
        0 20px 50px rgba(49,86,107,.2);

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

.about-center-ring i {
    margin-bottom: 4px;

    font-size: 26px;

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

.about-center-ring strong {
    font-size: .95rem;
    letter-spacing: .1em;
}

.about-center-ring span {
    font-size: .68rem;
    letter-spacing: .2em;
    opacity: .75;
}


/* =========================================================
   SECTION 04 - HISTORY
   ========================================================= */

.about-history {
    padding: 135px 5% 160px;

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

.about-timeline {
    position: relative;

    width: min(1250px, 100%);

    margin: 0 auto;

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

    gap: 30px;
}

.about-timeline-line {
    position: absolute;

    left: 7%;
    right: 7%;

    top: 34px;

    height: 3px;

    background: var(--med-powder-blue);

    overflow: hidden;

    z-index: 0;
}

.about-timeline-progress {
    display: block;

    width: 0;
    height: 100%;

    background: var(--med-teal);

    transition:
        width 2.2s cubic-bezier(.22,.61,.36,1);
}

.about-timeline.about-visible
.about-timeline-progress {
    width: 100%;
}

.about-timeline-item {
    position: relative;

    z-index: 2;

    padding-top: 0;

    text-align: center;
}

.about-timeline-dot {
    width: 68px;
    height: 68px;

    margin: 0 auto 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    border: 3px solid var(--med-teal);

    color: var(--med-teal);

    box-shadow:
        0 12px 30px rgba(49,86,107,.1);

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

.about-timeline-item:hover .about-timeline-dot {
    transform: translateY(-8px) rotate(8deg);

    background: var(--med-powder-blue);
}

.about-timeline-dot i {
    font-size: 19px;
}

.about-timeline-content {
    max-width: 245px;
    margin: 0 auto;
}

.about-timeline-content > span {
    display: block;

    margin-bottom: 9px;

    color: var(--med-primary);

    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.about-timeline-content strong {
    display: block;

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

    font-size: 1.3rem;
    font-weight: 900;
}

.about-timeline-content p {
    margin: 12px 0 0;

    color: var(--med-text);

    font-size: .94rem;
    line-height: 1.65;
}


/* =========================================================
   SECTION 05 - TEAM
   ========================================================= */

.about-team {
    padding: 135px 5% 160px;

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

.about-team-grid {
    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;

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

    gap: 24px;

    perspective: 1200px;
}

.about-team-card {
    min-width: 0;

    height: 410px;

    perspective: 1200px;

    opacity: 1;
}

.about-page.about-js .about-team-card.about-reveal {
    transform:
        translateY(55px)
        rotate(-2deg);
}

.about-team-card.about-visible {
    transform: translateY(0) rotate(0);
}

.about-team-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

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

.about-team-card:hover
.about-team-inner {
    transform: rotateY(180deg);
}

.about-team-front,
.about-team-back {
    position: absolute;

    inset: 0;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    border-radius: 32px;

    overflow: hidden;

    background: var(--med-card);

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

    box-shadow:
        0 18px 45px rgba(49,86,107,.09);
}

.about-team-front {
    padding-bottom: 25px;
}

.about-team-hook {
    position: absolute;

    width: 10px;
    height: 10px;

    top: -4px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--med-teal);

    z-index: 5;
}

.about-team-image {
    width: 100%;
    height: 270px;

    overflow: hidden;

    background: var(--med-powder-blue);
}

.about-team-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s ease;
}

.about-team-card:hover
.about-team-image img {
    transform: scale(1.05);
}

.about-team-role {
    display: block;

    margin: 20px 23px 7px;

    color: var(--med-primary);

    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.about-team-front h3 {
    margin: 0 23px;

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

    font-size: 1.35rem;
    font-weight: 900;
}

.about-team-back {
    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transform: rotateY(180deg);

    text-align: center;
}

.about-team-back > i {
    margin-bottom: 20px;

    color: var(--med-teal);

    font-size: 30px;
}

.about-team-back > span {
    color: var(--med-primary);

    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.about-team-back h3 {
    margin: 13px 0;

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

    font-size: 1.45rem;
}

.about-team-back p {
    margin: 0;

    color: var(--med-text);

    font-size: .95rem;
    line-height: 1.7;
}

.about-team-social {
    display: flex;
    justify-content: center;
    gap: 9px;

    margin-top: 23px;
}

.about-team-social a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-deep-blue);

    text-decoration: none;

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

.about-team-social a:hover {
    transform: translateY(-3px);

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


/* =========================================================
   SECTION 06 - TESTIMONIALS
   ========================================================= */

.about-testimonials {
    padding: 135px 5% 150px;

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

.about-testimonial-stage {
    position: relative;

    width: min(1150px, 100%);

    margin: 0 auto;

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

    gap: 25px;
}

.about-testimonial {
    position: relative;

    min-height: 310px;

    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--med-bg);

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

    border-radius:
        35px 35px 45px 45px;

    box-shadow:
        0 18px 45px rgba(49,86,107,.07);

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

.about-testimonial:nth-child(2) {
    transform: translateY(28px);
}

.about-testimonial:hover {
    transform: translateY(-9px);
    box-shadow:
        0 28px 60px rgba(49,86,107,.13);
}

.about-testimonial:nth-child(2):hover {
    transform:
        translateY(18px);
}

.about-testimonial-rating {
    display: flex;
    gap: 4px;

    color: var(--med-peach);

    font-size: .86rem;
}

.about-testimonial blockquote {
    margin: 22px 0;

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

    font-size: 1.12rem;
    line-height: 1.7;

    font-weight: 700;
}

.about-testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-testimonial-avatar {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-teal);
}

.about-testimonial-person div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-testimonial-person strong {
    color: var(--med-deep-blue);

    font-size: .92rem;
}

.about-testimonial-person small {
    color: var(--med-text);

    font-size: .78rem;
}

.about-testimonial-float {
    position: absolute;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);
    color: var(--med-teal);

    z-index: 5;

    animation:
        aboutFloat 4.8s ease-in-out infinite;
}

.testimonial-float-one {
    left: -22px;
    top: 5%;
}

.testimonial-float-two {
    right: -18px;
    bottom: 4%;

    animation-delay: 1.5s;
}


/* =========================================================
   SECTION 07 - FINAL CTA
   NO IMAGE
   ========================================================= */

.about-final {
    min-height: 560px;

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

    padding: 110px 5%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(120,189,181,.15),
            transparent 42%
        ),
        var(--med-bg);

    text-align: center;
}

.about-final-content {
    position: relative;
    z-index: 5;

    width: min(760px, 100%);
}

.about-final h2 {
    margin: 0;

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

    font-size: clamp(2.8rem, 5vw, 5rem);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.05em;
}

.about-final h2 span {
    color: var(--med-teal);
}

.about-final p {
    max-width: 650px;

    margin: 25px auto 32px;

    color: var(--med-text);

    font-size: 1.1rem;
    line-height: 1.8;
}

.about-final-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}


/* CTA FLOATING ELEMENTS */

.about-final-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .18;

    animation:
        aboutLeafDrift 6s ease-in-out infinite;
}

.final-leaf-one {
    left: 12%;
    top: 18%;

    font-size: 90px;
}

.final-leaf-two {
    right: 12%;
    bottom: 17%;

    font-size: 70px;

    animation-delay: 2s;
}

.about-final-float {
    position: absolute;

    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);
    color: var(--med-teal);

    box-shadow:
        0 15px 35px rgba(49,86,107,.12);

    animation:
        aboutFloat 5s ease-in-out infinite;
}

.final-float-one {
    left: 23%;
    top: 23%;
}

.final-float-two {
    right: 23%;
    bottom: 22%;

    animation-delay: 1.5s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes aboutFloat {

    0%,
    100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,-14px,0);
    }
}


@keyframes aboutLeafDrift {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(12px,-14px,0)
            rotate(8deg);
    }
}


@keyframes aboutOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes aboutCenterFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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


/* =========================================================
   LAPTOP-L
   1200 - 1399
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    .about-hero {
        min-height: 700px;
        padding-top: 75px;
    }

    .about-hero-inner {
        gap: 55px;
    }

    .about-image-frame {
        width: 540px;
        height: 500px;
    }

    .about-hero-visual {
        min-height: 520px;
    }

    .about-team-grid {
        gap: 20px;
    }

    .about-team-card {
        height: 390px;
    }

    .about-team-image {
        height: 245px;
    }

}


/* =========================================================
   LAPTOP
   1024 - 1199
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .about-hero {
        min-height: 650px;
        padding: 70px 3% 90px;
    }

    .about-hero-inner {
        gap: 35px;
    }

    .about-hero h1 {
        font-size: clamp(2.8rem, 5vw, 4.5rem);
    }

    .about-hero-content > p {
        font-size: 1rem;
    }

    .about-hero-visual {
        min-height: 500px;
    }

    .about-image-frame {
        width: 470px;
        height: 460px;
    }

    .about-story-inner {
        gap: 45px;
    }

    .about-story-visual {
        min-height: 500px;
    }

    .about-story-image-one {
        height: 380px;
    }

    .about-story-image-two {
        height: 230px;
    }

    .about-purpose {
        padding: 32px;
    }

    .about-purpose h3 {
        font-size: 1.65rem;
    }

    .about-mission-layout {
        grid-template-columns:
            minmax(0,1fr)
            140px
            minmax(0,1fr);

        gap: 20px;
    }

    .about-center-ring {
        width: 135px;
        height: 135px;
    }

    .about-team-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        max-width: 850px;
    }

    .about-testimonial-stage {
        gap: 18px;
    }

}


/* =========================================================
   TABLET
   768 - 1023
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .about-hero {
        min-height: auto;

        padding:
            75px 5%
            100px;
    }

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 60px;

        text-align: center;
    }

    .about-hero-content {
        max-width: 750px;
        margin: 0 auto;
    }

    .about-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-hero-actions {
        justify-content: center;
    }

    .about-hero-visual {
        min-height: 500px;
    }

    .about-image-frame {
        width: min(560px, 85%);
        height: 470px;
    }

    .about-story {
        padding: 100px 5%;
    }

    .about-story-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-story-visual {
        width: min(650px, 100%);
        margin: 0 auto;
    }

    .about-story-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .about-story-values {
        text-align: left;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-mission {
        padding: 105px 5%;
    }

    .about-mission-layout {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .about-purpose-center {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .about-center-ring {
        width: 135px;
        height: 135px;
    }

    .about-purpose {
        min-height: 390px;
    }

    .about-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 50px 35px;
    }

    .about-timeline-line {
        display: none;
    }

    .about-team-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        max-width: 820px;
    }

    .about-testimonial-stage {
        grid-template-columns: 1fr;
        max-width: 650px;
    }

    .about-testimonial:nth-child(2) {
        transform: none;
    }

    .about-testimonial:nth-child(2):hover {
        transform: translateY(-9px);
    }

    .about-final {
        min-height: 500px;
    }

}


/* =========================================================
   MOBILE-L
   576 - 767
   ========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .about-hero {
        padding:
            60px 5%
            80px;
    }

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 45px;

        text-align: center;
    }

    .about-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-hero-actions {
        justify-content: center;
    }

    .about-hero-visual {
        min-height: 400px;
    }

    .about-image-frame {
        width: 88%;
        height: 380px;
    }

    .about-floating {
        width: 52px;
        height: 52px;
    }

    .about-floating i {
        font-size: 17px;
    }

    .about-story {
        padding: 85px 5%;
    }

    .about-story-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-visual {
        min-height: 420px;
    }

    .about-story-image-one {
        width: 75%;
        height: 330px;
    }

    .about-story-image-two {
        width: 45%;
        height: 205px;
    }

    .about-story-content {
        text-align: center;
    }

    .about-story-values {
        text-align: left;
    }

    .about-mission {
        padding: 90px 5%;
    }

    .about-mission-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-purpose-center {
        order: 2;
    }

    .about-purpose {
        min-height: auto;
    }

    .about-timeline {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-timeline-line {
        display: block;

        left: 34px;
        right: auto;
        top: 30px;
        bottom: 30px;

        width: 3px;
        height: auto;
    }

    .about-timeline-progress {
        width: 100%;
        height: 0;

        transition:
            height 2s ease;
    }

    .about-timeline.about-visible
    .about-timeline-progress {
        width: 100%;
        height: 100%;
    }

    .about-timeline-item {
        display: grid;
        grid-template-columns: 68px 1fr;

        gap: 20px;

        text-align: left;
    }

    .about-timeline-dot {
        margin: 0;
    }

    .about-timeline-content {
        max-width: none;
    }

    .about-team-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-team-card {
        height: 390px;
    }

    .about-team-image {
        height: 250px;
    }

    .about-testimonial-stage {
        grid-template-columns: 1fr;
    }

    .about-testimonial:nth-child(2) {
        transform: none;
    }

    .about-testimonial:nth-child(2):hover {
        transform: translateY(-8px);
    }

    .about-final {
        min-height: 470px;
    }

    .final-leaf-one {
        left: 4%;
    }

    .final-leaf-two {
        right: 4%;
    }

}


/* =========================================================
   MOBILE-M / MOBILE-S
   <= 575
   ========================================================= */

@media (max-width: 575px) {

    .about-section-heading {
        margin-bottom: 45px;
    }

    .about-section-heading h2 {
        font-size: 2.25rem;
    }

    .about-section-heading p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .about-eyebrow {
        font-size: .72rem;
    }

    .about-hero {
        min-height: auto;

        padding:
            50px 5%
            70px;
    }

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;

        text-align: center;
    }

    .about-hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.5rem);
        line-height: 1.02;
    }

    .about-hero-content > p {
        font-size: .98rem;
        line-height: 1.7;

        margin-left: auto;
        margin-right: auto;
    }

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

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

    .about-hero-visual {
        min-height: 330px;
    }

    .about-image-frame {
        width: 91%;
        height: 310px;

        border-radius:
            35% 65% 55% 45%
            / 40% 45% 55% 60%;
    }

    .about-floating {
        width: 45px;
        height: 45px;
    }

    .about-floating i {
        font-size: 15px;
    }

    .about-float-one {
        left: 0;
        top: 22%;
    }

    .about-float-two {
        right: 0;
        top: 42%;
    }

    .about-float-three {
        left: 7%;
        bottom: 2%;
    }

    .about-hero-badge {
        right: 0;
        bottom: 0;

        min-width: 145px;

        padding: 11px 13px;
    }

    .about-hero-badge span {
        font-size: .7rem;
    }

    .about-leaf-one {
        font-size: 42px;
    }

    .about-leaf-two {
        font-size: 35px;
    }


    /* STORY */

    .about-story {
        padding: 80px 5%;
    }

    .about-story-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-visual {
        min-height: 310px;
    }

    .about-story-image-one {
        width: 78%;
        height: 250px;
    }

    .about-story-image-two {
        width: 48%;
        height: 155px;
        border-width: 5px;
    }

    .about-story-orbit {
        width: 150px;
        height: 150px;
    }

    .about-story-content {
        text-align: center;
    }

    .about-story-content h2 {
        font-size: 2.25rem;
    }

    .about-story-content > p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .about-story-values {
        text-align: left;
        gap: 15px;
    }

    .about-value-icon {
        width: 44px;
        height: 44px;
    }

    .about-value strong {
        font-size: .92rem;
    }

    .about-value small {
        font-size: .78rem;
    }


    /* MISSION */

    .about-mission {
        padding: 80px 5% 90px;
    }

    .about-mission-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-purpose {
        min-height: auto;

        padding: 30px 25px;

        border-radius: 28px;
    }

    .about-purpose h3 {
        font-size: 1.45rem;
    }

    .about-purpose p {
        font-size: .93rem;
    }

    .about-purpose-center {
        order: 2;
    }

    .about-center-ring {
        width: 120px;
        height: 120px;
    }

    .about-center-ring strong {
        font-size: .78rem;
    }

    .about-center-ring i {
        font-size: 21px;
    }


    /* TIMELINE */

    .about-history {
        padding: 80px 5% 90px;
    }

    .about-timeline {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-timeline-line {
        display: block;

        left: 25px;
        right: auto;

        top: 25px;
        bottom: 25px;

        width: 2px;
        height: auto;
    }

    .about-timeline-progress {
        width: 100%;
        height: 0;

        transition:
            height 2s ease;
    }

    .about-timeline.about-visible
    .about-timeline-progress {
        width: 100%;
        height: 100%;
    }

    .about-timeline-item {
        display: grid;

        grid-template-columns: 52px 1fr;

        gap: 15px;

        text-align: left;
    }

    .about-timeline-dot {
        width: 52px;
        height: 52px;

        margin: 0;

        border-width: 2px;
    }

    .about-timeline-dot i {
        font-size: 15px;
    }

    .about-timeline-content {
        max-width: none;
    }

    .about-timeline-content strong {
        font-size: 1.1rem;
    }

    .about-timeline-content p {
        font-size: .86rem;
        line-height: 1.6;
    }


    /* TEAM */

    .about-team {
        padding: 80px 5% 90px;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
        max-width: 390px;
    }

    .about-team-card {
        height: 400px;
    }

    .about-team-image {
        height: 270px;
    }

    .about-team-back {
        padding: 28px;
    }

    /* Disable automatic hover dependency on touch;
       JS adds the flip class. */

    .about-team-card.about-flipped
    .about-team-inner {
        transform: rotateY(180deg);
    }


    /* TESTIMONIALS */

    .about-testimonials {
        padding: 80px 5% 90px;
    }

    .about-testimonial-stage {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-testimonial {
        min-height: 285px;
        padding: 28px 24px;
    }

    .about-testimonial:nth-child(2) {
        transform: none;
    }

    .about-testimonial:nth-child(2):hover {
        transform: translateY(-7px);
    }

    .about-testimonial blockquote {
        font-size: 1rem;
        line-height: 1.65;
    }

    .about-testimonial-float {
        display: none;
    }


    /* FINAL */

    .about-final {
        min-height: 450px;

        padding:
            80px 5%;
    }

    .about-final h2 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    .about-final p {
        font-size: .98rem;
        line-height: 1.7;
    }

    .about-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .final-leaf-one {
        left: -10px;
        top: 10%;

        font-size: 55px;
    }

    .final-leaf-two {
        right: -10px;
        bottom: 10%;

        font-size: 50px;
    }

    .about-final-float {
        width: 45px;
        height: 45px;
    }

    .final-float-one {
        left: 7%;
        top: 20%;
    }

    .final-float-two {
        right: 7%;
        bottom: 18%;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 360
   ========================================================= */

@media (max-width: 360px) {

    .about-hero h1 {
        font-size: 2.25rem;
    }

    .about-section-heading h2 {
        font-size: 2rem;
    }

    .about-image-frame {
        height: 275px;
    }

    .about-hero-visual {
        min-height: 295px;
    }

    .about-story-image-one {
        height: 220px;
    }

    .about-story-image-two {
        height: 135px;
    }

    .about-purpose {
        padding: 26px 21px;
    }

    .about-team-card {
        height: 370px;
    }

    .about-team-image {
        height: 245px;
    }

}


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

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

    .about-floating,
    .about-hero-leaf,
    .about-story-orbit,
    .about-story-leaf,
    .about-center-ring,
    .about-final-leaf,
    .about-final-float {
        animation: none !important;
    }

    .about-team-inner,
    .about-team-card,
    .about-reveal,
    .about-primary-button,
    .about-secondary-button {
        transition: none !important;
    }

}
/* =========================================================
   ABOUT US - STICKY NAVBAR SAFETY
   ========================================================= */

.medivana-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

.about-page {
    position: relative;
    width: 100%;
    overflow: visible;
}

html,
body {
    overflow-x: clip;
}

body {
    overflow-y: visible !important;
}

@media (min-width: 768px) and (max-width: 1023px) {

    .about-mission-layout {
        align-items: stretch;
    }

    .about-mission-card,
    .about-vision-card {
        height: 100%;
    }

}

/* =========================================================
   ABOUT US - MISSION / VISION COLLISION ANIMATION
   ========================================================= */

/* Normal state */
.about-mission-card,
.about-vision-card,
.about-purpose-center {
    will-change: transform, opacity;
}


/* ---------------------------------------------------------
   MISSION
   Comes inward from the left
   --------------------------------------------------------- */

.about-page.about-js
.about-mission-card.about-reveal {
    opacity: 0;
    transform:
        translateX(-110px)
        rotate(-4deg)
        scale(.94);
}


/* ---------------------------------------------------------
   VISION
   Comes inward from the right
   --------------------------------------------------------- */

.about-page.about-js
.about-vision-card.about-reveal {
    opacity: 0;
    transform:
        translateX(110px)
        rotate(4deg)
        scale(.94);
}


/* ---------------------------------------------------------
   CENTER
   Starts slightly smaller
   --------------------------------------------------------- */

.about-page.about-js
.about-purpose-center.about-reveal {
    opacity: 0;
    transform:
        scale(.65)
        rotate(-12deg);
}


/* =========================================================
   COLLISION / ARRIVAL
   ========================================================= */

.about-page.about-js
.about-mission-card.about-visible {
    opacity: 1;

    animation:
        aboutMissionCollision
        1.05s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.about-page.about-js
.about-vision-card.about-visible {
    opacity: 1;

    animation:
        aboutVisionCollision
        1.05s
        .12s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.about-page.about-js
.about-purpose-center.about-visible {
    opacity: 1;

    animation:
        aboutCenterCollision
        .9s
        .22s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* =========================================================
   MISSION KEYFRAMES
   ========================================================= */

@keyframes aboutMissionCollision {

    0% {
        opacity: 0;

        transform:
            translateX(-110px)
            rotate(-4deg)
            scale(.94);
    }

    55% {
        opacity: 1;

        transform:
            translateX(18px)
            rotate(1deg)
            scale(1.015);
    }

    72% {
        transform:
            translateX(-7px)
            rotate(-.5deg)
            scale(.995);
    }

    86% {
        transform:
            translateX(3px)
            rotate(.2deg)
            scale(1.002);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}


/* =========================================================
   VISION KEYFRAMES
   ========================================================= */

@keyframes aboutVisionCollision {

    0% {
        opacity: 0;

        transform:
            translateX(110px)
            rotate(4deg)
            scale(.94);
    }

    55% {
        opacity: 1;

        transform:
            translateX(-18px)
            rotate(-1deg)
            scale(1.015);
    }

    72% {
        transform:
            translateX(7px)
            rotate(.5deg)
            scale(.995);
    }

    86% {
        transform:
            translateX(-3px)
            rotate(-.2deg)
            scale(1.002);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}


/* =========================================================
   CENTER COLLISION
   ========================================================= */

@keyframes aboutCenterCollision {

    0% {
        opacity: 0;

        transform:
            scale(.65)
            rotate(-12deg);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.08)
            rotate(4deg);
    }

    75% {
        transform:
            scale(.96)
            rotate(-2deg);
    }

    90% {
        transform:
            scale(1.02)
            rotate(1deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}
/* =========================================================
   KEEP CENTER FLOAT SEPARATE FROM COLLISION
   ========================================================= */

.about-purpose-center.about-visible .about-center-ring {
    animation:
        aboutCenterFloat
        4s
        ease-in-out
        .95s
        infinite;
}
/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .about-page.about-js
    .about-mission-card.about-reveal {

        transform:
            translateY(55px)
            rotate(-2deg)
            scale(.96);
    }


    .about-page.about-js
    .about-vision-card.about-reveal {

        transform:
            translateY(55px)
            rotate(2deg)
            scale(.96);
    }


    .about-page.about-js
    .about-purpose-center.about-reveal {

        transform:
            translateY(45px)
            scale(.72)
            rotate(-8deg);
    }


    .about-page.about-js
    .about-mission-card.about-visible {

        animation:
            aboutMissionMobileCollision
            .85s
            cubic-bezier(.16, 1, .3, 1)
            forwards;
    }


    .about-page.about-js
    .about-vision-card.about-visible {

        animation:
            aboutVisionMobileCollision
            .85s
            .08s
            cubic-bezier(.16, 1, .3, 1)
            forwards;
    }


    .about-page.about-js
    .about-purpose-center.about-visible {

        animation:
            aboutCenterMobileCollision
            .75s
            .16s
            cubic-bezier(.16, 1, .3, 1)
            forwards;
    }
}


/* =========================================================
   MOBILE COLLISION KEYFRAMES
   ========================================================= */

@keyframes aboutMissionMobileCollision {

    0% {
        opacity: 0;

        transform:
            translateY(55px)
            rotate(-2deg)
            scale(.96);
    }

    65% {
        opacity: 1;

        transform:
            translateY(-7px)
            rotate(.5deg)
            scale(1.01);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0)
            scale(1);
    }
}


@keyframes aboutVisionMobileCollision {

    0% {
        opacity: 0;

        transform:
            translateY(55px)
            rotate(2deg)
            scale(.96);
    }

    65% {
        opacity: 1;

        transform:
            translateY(-7px)
            rotate(-.5deg)
            scale(1.01);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0)
            scale(1);
    }
}


@keyframes aboutCenterMobileCollision {

    0% {
        opacity: 0;

        transform:
            translateY(45px)
            scale(.72)
            rotate(-8deg);
    }

    65% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.05)
            rotate(3deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}

.about-team-card:nth-child(4) .about-team-image img {
    object-position: center 15%;
}

/* =========================================================
   MEDIVANA HOME DELIVERY PAGE
   ========================================================= */

.home-delivery-page {
    --hd-shadow: 0 20px 60px rgba(49, 86, 107, .10);

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--med-bg);
    color: var(--med-text);
}


/* =========================================================
   COMMON
   ========================================================= */

.hd-section {
    position: relative;
    width: 100%;
}

.hd-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--med-primary);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
    line-height: 1.4;
}

.hd-section-heading {
    width: min(850px, 100%);
    margin: 0 auto 60px;
    text-align: center;
}

.hd-section-heading h2,
.hd-details-intro h2,
.hd-flex-heading h2,
.hd-coverage-content h2,
.hd-support-heading h2,
.hd-final-content h2 {

    margin: 12px 0 18px;

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

    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.03;
    letter-spacing: -2px;
    font-weight: 900;
}

.hd-section-heading h2 span,
.hd-details-intro h2 span,
.hd-flex-heading h2 span,
.hd-coverage-content h2 span,
.hd-support-heading h2 span,
.hd-final-content h2 span {
    color: var(--med-primary);
}

.hd-section-heading p,
.hd-details-intro > p,
.hd-flex-heading > p,
.hd-coverage-content > p,
.hd-support-heading > p,
.hd-final-content > p {
    color: var(--med-text);
    opacity: .78;
    line-height: 1.75;
}


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

.hd-hero {
    position: relative;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

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

.hd-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.hd-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    animation: hdHeroImage 1.2s ease both;
}

@keyframes hdHeroImage {
    from {
        opacity: 0;
        transform: scale(1.06);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hd-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,248,236,.98) 0%,
            rgba(255,248,236,.94) 34%,
            rgba(255,248,236,.38) 56%,
            rgba(255,248,236,.03) 78%
        );
}

.hd-hero-content {
    position: relative;
    z-index: 5;

    width: min(650px, 48%);

    margin-left: 8%;

    padding: 90px 0;
}

.hd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--med-primary);

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

.hd-eyebrow i {
    font-size: 14px;
}

.hd-hero h1 {
    margin: 18px 0 20px;

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

    font-size: clamp(48px, 6vw, 86px);
    line-height: .96;

    letter-spacing: -4px;

    font-weight: 950;
}

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

.hd-hero-content > p {
    max-width: 540px;

    margin-bottom: 24px;

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

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

.hd-typewriter-box {
    width: min(410px, 100%);

    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-bottom: 25px;
    padding: 16px 18px;

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

    border-radius: 18px;

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

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

    box-shadow: 0 12px 35px rgba(49,86,107,.08);

    font-family: monospace;
    font-size: 13px;
    line-height: 1.7;
}

.hd-typewriter-box > i {
    color: var(--med-primary);
    padding-top: 3px;
}

.hd-cursor {
    color: var(--med-primary);
    font-weight: 900;

    animation: hdCursor .7s steps(1) infinite;
}

@keyframes hdCursor {
    50% {
        opacity: 0;
    }
}

.hd-hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.hd-primary-btn,
.hd-secondary-btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 20px;

    border-radius: 14px;

    text-decoration: none;

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

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

.hd-primary-btn {
    background: var(--med-deep-blue);
    color: #FFFDF8;

    box-shadow: 0 12px 28px rgba(49,86,107,.20);
}

.hd-secondary-btn {
    background: rgba(255,255,255,.82);

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

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

.hd-primary-btn:hover,
.hd-secondary-btn:hover {
    transform: translateY(-4px);
}

.hd-primary-btn:hover {
    box-shadow: 0 18px 38px rgba(49,86,107,.27);
}

.hd-hero-float {
    position: absolute;

    z-index: 4;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    color: var(--med-primary);

    box-shadow: 0 15px 35px rgba(49,86,107,.15);

    font-size: 20px;

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

.hd-float-one {
    right: 42%;
    top: 19%;
}

.hd-float-two {
    right: 27%;
    top: 29%;

    animation-delay: -.8s;
}

.hd-float-three {
    right: 23%;
    bottom: 21%;

    animation-delay: -1.4s;
}

.hd-float-four {
    right: 37%;
    bottom: 13%;

    animation-delay: -2s;
}

@keyframes hdFloat {
    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-12px) rotate(6deg);
    }
}


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

.hd-benefits {
    position: relative;
    z-index: 8;

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

    background: var(--med-powder-blue);

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

.hd-benefit {
    min-height: 105px;

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

    padding: 20px 4%;

    border-right: 1px solid rgba(49,86,107,.10);
}

.hd-benefit:last-child {
    border-right: 0;
}

.hd-benefit > i {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

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

.hd-benefit div {
    display: flex;
    flex-direction: column;
}

.hd-benefit small {
    color: var(--med-primary);
    font-weight: 900;
    font-size: 10px;
}

.hd-benefit strong {
    color: var(--med-deep-blue);
    font-size: 13px;
}

.hd-benefit span {
    margin-top: 3px;
    color: var(--med-text);
    opacity: .65;
    font-size: 10px;
}


/* =========================================================
   SECTION 2 - DELIVERY DETAILS
   ========================================================= */

.hd-details-section {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(500px,1.2fr);
    align-items: center;
    gap: 70px;

    padding: 120px 7%;
}

.hd-details-intro {
    position: relative;
}

.hd-details-intro h2 {
    max-width: 520px;
}

.hd-house-visual {
    position: relative;

    width: 100%;
    max-width: 470px;
    height: 210px;

    margin-top: 45px;
}

.hd-house {
    position: absolute;

    left: 5%;
    bottom: 30px;

    width: 100px;
    height: 100px;

    display: grid;
    place-items: center;

    border-radius: 38% 38% 45% 45%;

    background: var(--med-powder-blue);

    color: var(--med-primary);

    font-size: 42px;

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

@keyframes hdHouseFloat {
    0%,100% {
        transform: translateY(0);
    }

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

.hd-route-line {
    position: absolute;

    left: 23%;
    right: 25%;
    bottom: 78px;

    height: 3px;

    background: var(--med-teal);

    overflow: hidden;
}

.hd-route-line span {
    position: absolute;

    width: 45px;
    height: 3px;

    background: var(--med-peach);

    animation: hdRouteTravel 3s linear infinite;
}

@keyframes hdRouteTravel {
    from {
        left: -50px;
    }

    to {
        left: 100%;
    }
}

.hd-location-pin {
    position: absolute;

    left: 46%;
    bottom: 61px;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-teal);

    box-shadow: var(--hd-shadow);
}

.hd-mini-truck {
    position: absolute;

    right: 17%;
    bottom: 48px;

    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-deep-blue);
    color: #FFFDF8;

    font-size: 25px;

    animation: hdTruckMove 3.5s ease-in-out infinite;
}

@keyframes hdTruckMove {
    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }
}

.hd-package {
    position: absolute;

    right: 2%;
    bottom: 28px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: var(--med-peach);
    color: var(--med-deep-blue);

    transform: rotate(7deg);
}


/* =========================================================
   FORM
   ========================================================= */

.hd-form-card {
    padding: 30px;

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

    border-radius: 28px;

    background: var(--med-card);

    box-shadow: var(--hd-shadow);
}

.hd-form-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 25px;
}

.hd-form-heading > i {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);

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

.hd-form-heading span {
    color: var(--med-primary);

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

.hd-form-heading h3 {
    margin: 3px 0 0;

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

    font-size: 21px;
}

.hd-form-group-title {
    margin: 20px 0 12px;

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

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

.hd-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 13px;
}

.hd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hd-field-full {
    grid-column: 1 / -1;
}

.hd-field label {
    color: var(--med-deep-blue);

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

.hd-field input,
.hd-field select,
.hd-field textarea,
.hd-coverage-form input {
    width: 100%;

    padding: 12px 13px;

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

    border-radius: 10px;

    background: var(--med-bg);

    color: var(--med-text);

    outline: none;

    font: inherit;
    font-size: 12px;

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

.hd-field input:focus,
.hd-field select:focus,
.hd-field textarea:focus {
    border-color: var(--med-primary);

    box-shadow:
        0 0 0 3px rgba(91,143,168,.12);
}

.home-delivery-page .hd-field.has-error label {
    color: #d64d4d !important;
}

.home-delivery-page .hd-field.has-error input,
.home-delivery-page .hd-field.has-error select,
.home-delivery-page .hd-field.has-error textarea,
.home-delivery-page #deliveryForm.submitted .hd-field input:invalid,
.home-delivery-page #deliveryForm.submitted .hd-field select:invalid,
.home-delivery-page #deliveryForm.submitted .hd-field textarea:invalid {
    border-color: #d64d4d !important;
    background: rgba(214, 77, 77, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(214, 77, 77, 0.08) !important;
}

.hd-field textarea {
    resize: vertical;
    min-height: 75px;
}

.hd-field input::placeholder,
.hd-field textarea::placeholder,
.hd-coverage-form input::placeholder {
    color: var(--med-text);
    opacity: .45;
}

.hd-preferences {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;

    margin: 10px 0 17px;
}

.hd-preferences label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--med-text);

    font-size: 12px;
}

.hd-preferences input {
    accent-color: var(--med-primary);
}

.hd-location-button {
    margin-left: auto;

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

    border-radius: 10px;

    padding: 9px 13px;

    background: transparent;

    color: var(--med-primary);

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

    cursor: pointer;
}

.hd-form-submit {
    width: 100%;

    margin-top: 16px;

    padding: 14px;

    border: 0;
    border-radius: 11px;

    background: var(--med-deep-blue);

    color: #FFFDF8;

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

    cursor: pointer;

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

.hd-form-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(49,86,107,.20);
}


/* =========================================================
   SECTION 3 - HOW IT WORKS
   ========================================================= */

.hd-how-section {
    padding: 115px 8%;

    background: var(--med-powder-blue);
}

.hd-how-layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;

    gap: 90px;

    width: min(1100px,100%);
    margin: auto;
}

.hd-how-intro {
    display: flex;
    justify-content: center;
}

.hd-route-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 30px;
}

.hd-route-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

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

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

.hd-route-node i {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-primary);

    font-size: 27px;

    box-shadow: 0 15px 35px rgba(49,86,107,.10);
}

.hd-vertical-route {
    width: 3px;
    height: 95px;

    margin: 8px 0;

    background: var(--med-teal);

    overflow: hidden;
}

.hd-vertical-route span {
    display: block;

    width: 100%;
    height: 35px;

    background: var(--med-peach);

    animation: hdVerticalRoute 2.5s linear infinite;
}

@keyframes hdVerticalRoute {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(100px);
    }
}


/* VERTICAL STEPS */

.hd-steps {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 25px;
}

.hd-steps::before {
    content: "";

    position: absolute;

    left: 35px;
    top: 35px;
    bottom: 35px;

    width: 2px;

    background: var(--med-teal);

    opacity: .45;
}

.hd-step {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 55px 62px 1fr;

    align-items: center;

    gap: 18px;

    padding: 18px;

    border: 1px solid rgba(49,86,107,.08);

    border-radius: 22px;

    background: var(--med-card);

    box-shadow: 0 15px 35px rgba(49,86,107,.07);

    transition: transform .35s ease;
}

.hd-step:hover {
    transform: translateX(8px);
}

.hd-step-number {
    color: var(--med-primary);

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

    text-align: center;
}

.hd-step-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-deep-blue);
    color: #FFFDF8;
}

.hd-step-content span {
    color: var(--med-primary);

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

.hd-step-content h3 {
    margin: 2px 0 3px;

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

    font-size: 18px;
}

.hd-step-content p {
    margin: 0;

    color: var(--med-text);

    opacity: .7;

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


/* =========================================================
   SECTION 4 - FLEXIBLE DELIVERY
   ========================================================= */

.hd-flex-section {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    align-items: center;

    gap: 50px;

    padding: 125px 8%;
}

.hd-flex-heading h2 {
    font-size: clamp(38px,4vw,58px);
}

.hd-clock-area {
    position: relative;

    min-height: 410px;

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

.hd-clock-ring {
    width: 245px;
    height: 245px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 18px solid var(--med-powder-blue);

    box-shadow:
        inset 0 0 0 8px var(--med-card),
        0 25px 55px rgba(49,86,107,.10);

    animation: hdClockFloat 5s ease-in-out infinite;
}

@keyframes hdClockFloat {
    0%,100% {
        transform: translateY(0);
    }

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

.hd-clock {
    position: relative;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: var(--med-card);

    border: 5px solid var(--med-primary);
}

.clock-mark {
    position: absolute;

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

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

.mark-12 {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.mark-3 {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mark-6 {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.mark-9 {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.clock-hand {
    position: absolute;

    left: 50%;
    bottom: 50%;

    width: 3px;

    transform-origin: bottom;

    border-radius: 5px;

    background: var(--med-deep-blue);
}

.hour-hand {
    height: 42px;
    transform: rotate(35deg);
}

.minute-hand {
    height: 58px;

    transform: rotate(125deg);

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

.clock-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    border-radius: 50%;

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

.hd-flex-point {
    position: absolute;

    width: 220px;

    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hd-flex-point > i {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);

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

.hd-flex-point div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hd-flex-point strong {
    color: var(--med-deep-blue);
    font-size: 12px;
}

.hd-flex-point span {
    color: var(--med-text);
    opacity: .65;

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

.flex-point-one {
    left: 0;
    top: 30px;
}

.flex-point-two {
    right: 0;
    top: 30px;
}

.flex-point-three {
    left: 0;
    bottom: 30px;
}

.flex-point-four {
    right: 0;
    bottom: 30px;
}


/* =========================================================
   SECTION 5 - COVERAGE
   ========================================================= */

.hd-coverage-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 70px;

    padding: 100px 8%;

    background: var(--med-powder-blue);
}

.hd-coverage-content h2 {
    max-width: 500px;
}

.hd-coverage-form {
    max-width: 530px;

    display: grid;
    grid-template-columns: 1fr auto;

    gap: 10px;

    margin-top: 25px;
}

.hd-coverage-form input {
    min-height: 48px;
}

.hd-coverage-form button {
    padding: 12px 18px;

    border: 0;
    border-radius: 11px;

    background: var(--med-deep-blue);

    color: #FFFDF8;

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

    cursor: pointer;
}

.hd-coverage-result {
    max-width: 530px;

    display: none;

    align-items: flex-start;
    gap: 9px;

    margin-top: 15px;

    padding: 12px 14px;

    border-radius: 12px;

    background: var(--med-card);

    color: var(--med-text);

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

.hd-coverage-result.show {
    display: flex;

    animation: hdResult .5s ease both;
}

.hd-coverage-result i {
    color: var(--med-primary);
}

@keyframes hdResult {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hd-map-visual {
    position: relative;

    height: 340px;

    border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(120,189,181,.25),
            transparent 30%
        ),
        var(--med-bg);

    overflow: hidden;
}

.hd-map-lines {
    position: absolute;
    inset: 20%;

    border:
        2px dashed var(--med-teal);

    border-radius: 50%;

    transform: rotate(-15deg);
}

.hd-map-lines::before,
.hd-map-lines::after {
    content: "";

    position: absolute;

    border:
        2px dashed var(--med-primary);

    border-radius: 50%;
}

.hd-map-lines::before {
    inset: 18% 8% 35% 25%;
}

.hd-map-lines::after {
    inset: 45% 20% 12% 12%;
}

.hd-map-pin {
    position: absolute;

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-primary);

    box-shadow: 0 12px 25px rgba(49,86,107,.12);

    animation: hdPinFloat 3s ease-in-out infinite;
}

@keyframes hdPinFloat {
    0%,100% {
        transform: translateY(0);
    }

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

.pin-one {
    left: 20%;
    top: 25%;
}

.pin-two {
    right: 20%;
    top: 25%;

    animation-delay: -.7s;
}

.pin-three {
    left: 28%;
    bottom: 20%;

    animation-delay: -1.2s;
}

.pin-four {
    right: 27%;
    bottom: 23%;

    animation-delay: -1.7s;
}

.hd-map-truck {
    position: absolute;

    left: 43%;
    top: 43%;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-deep-blue);

    color: #FFFDF8;

    animation: hdMapTruck 5s linear infinite;
}

@keyframes hdMapTruck {
    0% {
        transform: translate(-20px,10px);
    }

    50% {
        transform: translate(35px,-15px);
    }

    100% {
        transform: translate(-20px,10px);
    }
}

.hd-map-package {
    position: absolute;

    left: 58%;
    top: 56%;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--med-peach);

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

    transform: rotate(8deg);
}


/* =========================================================
   SECTION 6 - SUPPORT
   ========================================================= */

.hd-support-section {
    padding: 120px 8%;
}

.hd-support-heading {
    width: min(800px,100%);
    margin-bottom: 55px;
}

.hd-support-heading h2 {
    max-width: 850px;
}

.hd-support-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 16px;
}

.hd-support-item {
    min-height: 190px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

    border-radius: 25px;

    background: var(--med-card);

    box-shadow: 0 15px 40px rgba(49,86,107,.06);

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

.hd-support-item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(49,86,107,.13);
}

.hd-support-item > i {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);

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

.hd-support-item strong {
    display: block;

    margin-top: 18px;

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

    font-size: 14px;
}

.hd-support-item p {
    margin: 7px 0 0;

    color: var(--med-text);

    opacity: .68;

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


/* =========================================================
   SECTION 7 - FINAL CTA
   ========================================================= */

.hd-final-section {
    min-height: 500px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 60px;

    padding: 100px 8%;

    background: var(--med-powder-blue);

    overflow: hidden;
}

.hd-final-content {
    position: relative;
    z-index: 3;
}

.hd-final-content h2 {
    max-width: 650px;
}

.hd-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 27px;
}

.hd-final-visual {
    position: relative;

    min-height: 350px;

    display: grid;
    place-items: center;
}

.hd-final-package {
    width: 220px;
    height: 145px;

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

    border-radius: 20px;

    background: #C9985D;

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

    box-shadow: 0 30px 55px rgba(49,86,107,.18);

    transform: rotate(-3deg);

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

@keyframes hdPackageFloat {
    0%,100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

.hd-final-package i {
    color: var(--med-deep-blue);
    font-size: 30px;
}

.hd-final-package strong {
    font-size: 20px;
}

.hd-final-package span {
    font-size: 9px;
    letter-spacing: 3px;
}

.hd-final-icon {
    position: absolute;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-primary);

    box-shadow: 0 15px 30px rgba(49,86,107,.12);

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

@keyframes hdFinalIcon {
    0%,100% {
        transform: translateY(0);
    }

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

.final-icon-one {
    left: 16%;
    top: 18%;
}

.final-icon-two {
    right: 16%;
    top: 28%;

    animation-delay: -.8s;
}

.final-icon-three {
    right: 20%;
    bottom: 15%;

    animation-delay: -1.5s;
}

.hd-final-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .25;

    font-size: 80px;
}

.final-leaf-one {
    left: 2%;
    top: 8%;

    transform: rotate(-35deg);
}

.final-leaf-two {
    right: 4%;
    bottom: 7%;

    transform: rotate(35deg);
}


/* =========================================================
   SCROLL / HORIZONTAL REVEALS
   ========================================================= */

.hd-reveal,
.hd-horizontal-left,
.hd-horizontal-right {
    opacity: 0;

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}

.hd-reveal {
    transform: translateY(45px);
}

.hd-horizontal-left {
    transform: translateX(-80px);
}

.hd-horizontal-right {
    transform: translateX(80px);
}

.hd-reveal.hd-visible,
.hd-horizontal-left.hd-visible,
.hd-horizontal-right.hd-visible {
    opacity: 1;
    transform: translate(0);
}


/* =========================================================
   RESPONSIVE - LAPTOP
   ========================================================= */

@media (max-width:1199px) {

    .hd-hero-content {
        width: 55%;
        margin-left: 6%;
    }

    .hd-hero h1 {
        font-size: clamp(46px,6vw,72px);
    }

    .hd-details-section,
    .hd-flex-section,
    .hd-coverage-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .hd-support-grid {
        grid-template-columns: repeat(2,1fr);
    }

}


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

@media (max-width:1023px) {

    .hd-hero {
        min-height: 700px;
        align-items: flex-end;
    }

    .hd-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,248,236,.20) 0%,
                rgba(255,248,236,.55) 48%,
                rgba(255,248,236,.98) 78%
            );
    }

    .hd-hero-content {
        width: 90%;
        margin: 0 auto;

        padding: 80px 0 55px;
    }

    .hd-hero h1 {
        max-width: 650px;
    }

    .hd-hero-content > p {
        max-width: 600px;
    }

    .hd-hero-float {
        transform: scale(.85);
    }

    .hd-benefits {
        grid-template-columns: repeat(2,1fr);
    }

    .hd-benefit:nth-child(2) {
        border-right: 0;
    }

    .hd-details-section,
    .hd-how-layout,
    .hd-flex-section,
    .hd-coverage-section,
    .hd-final-section {
        grid-template-columns: 1fr;
    }

    .hd-details-section,
    .hd-flex-section,
    .hd-coverage-section,
    .hd-final-section {
        gap: 45px;
    }

    .hd-house-visual {
        margin-left: auto;
        margin-right: auto;
    }

    .hd-form-card {
        width: 100%;
    }

    .hd-how-intro {
        order: 1;
    }

    .hd-steps {
        order: 2;
        width: min(750px,100%);
        margin: auto;
    }

    .hd-route-illustration {
        flex-direction: row;
        gap: 30px;
    }

    .hd-vertical-route {
        width: 100px;
        height: 3px;
    }

    .hd-vertical-route span {
        width: 35px;
        height: 100%;
        animation-name: hdHorizontalRoute;
    }

    @keyframes hdHorizontalRoute {
        from {
            transform: translateX(-40px);
        }

        to {
            transform: translateX(100px);
        }
    }

    .hd-flex-heading {
        text-align: center;
        max-width: 700px;
        margin: auto;
    }

    .hd-clock-area {
        width: min(700px,100%);
        margin: auto;
    }

    .hd-coverage-content {
        width: min(700px,100%);
        margin: auto;
    }

    .hd-map-visual {
        width: min(700px,100%);
        margin: auto;
    }

    .hd-final-content {
        text-align: center;
        width: min(750px,100%);
        margin: auto;
    }

    .hd-final-actions {
        justify-content: center;
    }

}


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

@media (max-width:767px) {

    .hd-hero {
        min-height: 690px;
    }

    .hd-hero-content {
        padding-bottom: 42px;
    }

    .hd-hero h1 {
        font-size: clamp(42px,10vw,58px);
        letter-spacing: -2.5px;
    }

    .hd-hero-content > p {
        font-size: 14px;
    }

    .hd-typewriter-box {
        font-size: 11px;
    }

    .hd-benefits {
        grid-template-columns: 1fr;
    }

    .hd-benefit {
        border-right: 0;
        border-bottom: 1px solid rgba(49,86,107,.10);
    }

    .hd-benefit:last-child {
        border-bottom: 0;
    }

    .hd-details-section,
    .hd-how-section,
    .hd-flex-section,
    .hd-coverage-section,
    .hd-support-section,
    .hd-final-section {
        padding: 85px 5%;
    }

    .hd-form-grid {
        grid-template-columns: 1fr;
    }

    .hd-field-full {
        grid-column: auto;
    }

    .hd-form-card {
        padding: 22px;
    }

    .hd-location-button {
        width: 100%;
        margin-left: 0;
    }

    .hd-preferences {
        gap: 13px;
    }

    .hd-step {
        grid-template-columns: 42px 52px 1fr;
        gap: 10px;
        padding: 14px;
    }

    .hd-step-icon {
        width: 48px;
        height: 48px;
    }

    .hd-step-content h3 {
        font-size: 16px;
    }

    .hd-step-content p {
        font-size: 11px;
    }

    .hd-clock-area {
        min-height: 520px;
    }

    .hd-clock-ring {
        width: 210px;
        height: 210px;
    }

    .hd-clock {
        width: 145px;
        height: 145px;
    }

    .hd-flex-point {
        width: 175px;
    }

    .flex-point-one {
        left: 0;
        top: 0;
    }

    .flex-point-two {
        right: 0;
        top: 0;
    }

    .flex-point-three {
        left: 0;
        bottom: 0;
    }

    .flex-point-four {
        right: 0;
        bottom: 0;
    }

    .hd-coverage-form {
        grid-template-columns: 1fr;
    }

    .hd-map-visual {
        height: 280px;
    }

    .hd-support-grid {
        grid-template-columns: 1fr;
    }

    .hd-final-visual {
        min-height: 280px;
    }

}


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

@media (max-width:480px) {

    .hd-hero {
        min-height: 650px;
    }

    .hd-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,248,236,.20),
                rgba(255,248,236,.98) 72%
            );
    }

    .hd-hero-content {
        width: 90%;
    }

    .hd-eyebrow {
        font-size: 9px;
    }

    .hd-hero h1 {
        font-size: 42px;
    }

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

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

    .hd-hero-float {
        width: 45px;
        height: 45px;
        font-size: 15px;
    }

    .hd-float-one {
        right: 12%;
        top: 18%;
    }

    .hd-float-two {
        right: 6%;
        top: 37%;
    }

    .hd-float-three {
        right: 11%;
        bottom: 32%;
    }

    .hd-float-four {
        right: 35%;
        bottom: 25%;
    }

    .hd-section-heading h2,
    .hd-details-intro h2,
    .hd-flex-heading h2,
    .hd-coverage-content h2,
    .hd-support-heading h2,
    .hd-final-content h2 {
        font-size: 37px;
        letter-spacing: -1.5px;
    }

    .hd-house-visual {
        height: 180px;
    }

    .hd-house {
        width: 75px;
        height: 75px;
        font-size: 30px;
    }

    .hd-mini-truck {
        width: 53px;
        height: 53px;
        font-size: 20px;
    }

    .hd-location-pin {
        width: 37px;
        height: 37px;
    }

    .hd-package {
        width: 40px;
        height: 40px;
    }

    .hd-route-illustration {
        gap: 14px;
    }

    .hd-route-node i {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .hd-steps::before {
        left: 28px;
    }

    .hd-step-number {
        font-size: 11px;
    }

    .hd-clock-area {
        min-height: 500px;
    }

    .hd-clock-ring {
        width: 185px;
        height: 185px;
    }

    .hd-clock {
        width: 125px;
        height: 125px;
    }

    .hd-flex-point {
        width: 145px;
    }

    .hd-flex-point > i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .hd-flex-point strong {
        font-size: 10px;
    }

    .hd-flex-point span {
        font-size: 8px;
    }

    .hd-final-package {
        width: 180px;
        height: 120px;
    }

}


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

@media (max-width:360px) {

    .hd-hero {
        min-height: 620px;
    }

    .hd-hero h1 {
        font-size: 37px;
    }

    .hd-hero-content > p {
        font-size: 13px;
    }

    .hd-typewriter-box {
        padding: 12px;
        font-size: 10px;
    }

    .hd-details-section,
    .hd-how-section,
    .hd-flex-section,
    .hd-coverage-section,
    .hd-support-section,
    .hd-final-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .hd-form-card {
        padding: 17px;
    }

    .hd-step {
        grid-template-columns: 34px 45px 1fr;
    }

    .hd-step-icon {
        width: 43px;
        height: 43px;
        font-size: 13px;
    }

    .hd-step-content h3 {
        font-size: 14px;
    }

    .hd-step-content p {
        font-size: 10px;
    }

    .hd-flex-point {
        width: 125px;
    }

}


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

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

    .home-delivery-page *,
    .home-delivery-page *::before,
    .home-delivery-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}

/* =========================================================
   MEDIVANA STORE TIMINGS PAGE
   ========================================================= */

.std-page {
    --std-bg: var(--med-bg);
    --std-card: var(--med-card);
    --std-primary: var(--med-primary);
    --std-deep: var(--med-deep-blue);
    --std-teal: var(--med-teal);
    --std-powder: var(--med-powder-blue);
    --std-peach: var(--med-peach);
    --std-text: var(--med-text);
    --std-border: var(--med-border);

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--std-bg);
    color: var(--std-text);
}


/* =========================================================
   COMMON
   ========================================================= */

.std-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.std-section-heading {
    width: min(850px, 100%);
    margin: 0 auto 70px;
    text-align: center;
}

.std-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--std-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.4;
}

.std-eyebrow i {
    color: var(--std-teal);
}

.std-section-heading h2,
.std-before-content h2 {
    margin: 18px 0 18px;
    color: var(--std-deep);
    font-size: clamp(36px, 4.2vw, 66px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
}

.std-section-heading h2 span,
.std-before-content h2 span {
    color: var(--std-primary);
}

.std-section-heading p,
.std-before-content p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--std-text);
    opacity: .78;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   FLOATING ELEMENTS
   ========================================================= */

.std-float,
.std-section-leaf {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.std-float-one {
    top: 13%;
    left: 5%;
    color: var(--std-teal);
    font-size: 40px;
    transform: rotate(-25deg);
    animation: stdFloatOne 6s ease-in-out infinite;
}

.std-float-two {
    right: 8%;
    bottom: 15%;
    color: var(--std-primary);
    font-size: 28px;
    transform: rotate(30deg);
    animation: stdFloatTwo 5s ease-in-out infinite;
}

.std-float-three {
    top: 20%;
    right: 8%;
    color: var(--std-primary);
    font-size: 30px;
    animation: stdFloatThree 4s ease-in-out infinite;
}

.std-float-four {
    left: 12%;
    bottom: 15%;
    color: var(--std-teal);
    font-size: 28px;
    animation: stdFloatFour 4.5s ease-in-out infinite;
}

@keyframes stdFloatOne {
    0%,100% {
        transform: translateY(0) rotate(-25deg);
    }

    50% {
        transform: translateY(-22px) rotate(-8deg);
    }
}

@keyframes stdFloatTwo {
    0%,100% {
        transform: translateY(0) rotate(30deg);
    }

    50% {
        transform: translateY(18px) rotate(48deg);
    }
}

@keyframes stdFloatThree {
    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(12deg);
    }
}

@keyframes stdFloatFour {
    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-13px) rotate(8deg);
    }
}


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

.std-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 90px 7% 100px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
    align-items: center;
    gap: 60px;

    background:
        radial-gradient(
            circle at 72% 50%,
            var(--std-powder) 0,
            transparent 30%
        ),
        var(--std-bg);
}

.std-hero-content {
    position: relative;
    z-index: 3;
}

.std-hero-content h1 {
    max-width: 760px;
    margin: 22px 0 24px;

    color: var(--std-deep);

    font-size: clamp(
        50px,
        6vw,
        92px
    );

    line-height: .96;
    letter-spacing: -4px;
    font-weight: 950;
}

.std-hero-content h1 span {
    color: var(--std-primary);
}

.std-hero-content p {
    max-width: 620px;
    margin-bottom: 28px;

    color: var(--std-text);

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

.std-open-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    padding: 12px 18px;

    border: 1px solid var(--std-border);
    border-radius: 50px;

    background: var(--std-card);

    color: var(--std-text);

    box-shadow:
        0 14px 35px rgba(49,86,107,.08);
}

.std-status-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--std-teal);

    box-shadow:
        0 0 0 6px rgba(120,189,181,.14);

    animation: stdPulse 2s ease-in-out infinite;
}

@keyframes stdPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }
}

.std-open-status strong {
    color: var(--std-deep);
}

.std-open-status span:last-child {
    opacity: .7;
}


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

.std-hero-clock {
    position: relative;

    width: min(470px, 100%);
    aspect-ratio: 1;

    margin: auto;

    display: grid;
    place-items: center;
}

.std-clock-ring {
    position: relative;

    width: 72%;
    aspect-ratio: 1;

    border-radius: 50%;

    border:
        2px solid var(--std-teal);

    box-shadow:
        0 0 0 18px rgba(120,189,181,.08),
        0 0 0 36px rgba(120,189,181,.04);

    background: var(--std-card);
}

.std-clock-ring::before,
.std-clock-ring::after {
    content: "";

    position: absolute;
    inset: 10%;

    border-radius: 50%;

    border: 1px dashed var(--std-primary);

    opacity: .35;
}

.std-clock-ring::after {
    inset: 17%;
    border-style: solid;
    opacity: .12;
}

.std-clock-marker {
    position: absolute;

    width: 7px;
    height: 24px;

    border-radius: 8px;

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

.marker-top {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.marker-bottom {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.marker-left {
    left: 8%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.marker-right {
    right: 8%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.std-clock-hand {
    position: absolute;

    width: 4px;
    height: 29%;

    left: calc(50% - 2px);
    bottom: 50%;

    border-radius: 5px;

    background: var(--std-deep);

    transform-origin: bottom center;

    animation:
        stdClockRotate
        8s
        ease-in-out
        infinite;
}

@keyframes stdClockRotate {
    0% {
        transform: rotate(25deg);
    }

    50% {
        transform: rotate(125deg);
    }

    100% {
        transform: rotate(25deg);
    }
}

.std-clock-center {
    position: absolute;

    width: 16px;
    height: 16px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: var(--std-teal);

    z-index: 3;
}

.std-clock-time {
    position: absolute;

    left: 50%;
    top: 41%;

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

    display: flex;
    align-items: baseline;
    gap: 5px;

    color: var(--std-deep);

    white-space: nowrap;
}

.std-clock-time strong {
    font-size: clamp(28px, 4vw, 43px);
    font-weight: 900;
}

.std-clock-time small {
    font-size: 14px;
    font-weight: 900;
}

.std-clock-label {
    position: absolute;

    left: 50%;
    top: 58%;

    transform: translateX(-50%);

    color: var(--std-teal);

    font-size: 13px;
    font-weight: 950;
    letter-spacing: 2px;
}

.std-clock-orbit {
    position: absolute;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--std-card);

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

    color: var(--std-primary);

    box-shadow:
        0 14px 30px rgba(49,86,107,.12);

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

.orbit-one {
    top: 8%;
    right: 18%;
}

.orbit-two {
    bottom: 13%;
    left: 18%;
    color: var(--std-teal);
    animation-delay: .8s;
}

.orbit-three {
    top: 40%;
    right: 0;
    color: var(--std-deep);
    animation-delay: 1.4s;
}

@keyframes stdOrbitFloat {
    0%,100% {
        transform: translateY(0);
    }

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


/* =========================================================
   SECTION 02 — WEEKLY HOURS
   ========================================================= */

.std-week-section {
    padding: 125px 7% 145px;
    background: var(--std-bg);
}

.std-week-layout {
    width: min(1200px, 100%);
    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 80px;
}


/* vertical line */

.std-timeline {
    position: relative;
    padding: 10px 0;
}

.std-timeline::before {
    content: "";

    position: absolute;

    top: 24px;
    bottom: 24px;

    left: 27px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--std-teal),
            var(--std-primary),
            transparent
        );

    transform: scaleY(0);

    transform-origin: top;

    transition:
        transform 1.8s
        cubic-bezier(.16,1,.3,1);
}

.std-timeline.std-visible::before {
    transform: scaleY(1);
}

.std-time-item {
    position: relative;

    min-height: 85px;

    display: grid;

    grid-template-columns: 56px minmax(0,1fr);

    align-items: center;

    gap: 20px;

    opacity: 0;

    transform:
        translateX(-35px);

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

.std-time-item.std-visible {
    opacity: 1;
    transform: translateX(0);
}

.std-time-marker {
    position: relative;

    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--std-card);

    border:
        2px solid var(--std-powder);

    color: var(--std-primary);

    z-index: 2;

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

.std-time-marker span {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .7px;
}

.std-time-item:hover .std-time-marker,
.std-time-active .std-time-marker {
    background: var(--std-teal);
    border-color: var(--std-teal);
    color: #fff;
    transform: scale(1.12);
}

.std-time-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.std-time-content strong {
    color: var(--std-deep);
    font-size: 18px;
    font-weight: 900;
}

.std-time-content span {
    color: var(--std-primary);
    font-size: 17px;
    font-weight: 800;
}

.std-time-content small {
    color: var(--std-text);
    opacity: .65;
    font-size: 13px;
    line-height: 1.5;
}


/* SINGLE IMAGE */

.std-week-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 0;

    background: transparent;

    opacity: 0;

    transform:
        translateX(50px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}

.std-week-image.std-visible {
    opacity: 1;
    transform: translateX(0);
}

.std-week-image img {
    width: 100%;
    height: auto;

    min-height: 430px;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 0;

    transition:
        transform .8s ease;
}

.std-week-image:hover img {
    transform: scale(1.025);
}

.std-image-caption {
    position: absolute;

    left: 25px;
    bottom: 25px;

    max-width: 300px;

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

    padding: 14px 18px;

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

    color: #31566B;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(49,86,107,.15);
}

.std-image-caption i {
    color: #78BDB5;
}

.std-image-caption span {
    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   SECTION 03 — SERVICES
   ========================================================= */

.std-service-section {
    padding: 125px 6% 145px;

    background:
        linear-gradient(
            180deg,
            var(--std-bg),
            var(--std-powder)
        );
}

.std-service-timeline {
    position: relative;

    width: min(1250px, 100%);

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.std-service-line {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 48px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--std-teal),
            var(--std-primary),
            var(--std-teal),
            transparent
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 2s
        cubic-bezier(.16,1,.3,1);
}

.std-service-timeline.std-visible
.std-service-line {
    transform: scaleX(1);
}

.std-service-item {
    position: relative;

    text-align: center;

    opacity: 0;

    transform:
        translateY(50px);

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

.std-service-item.std-visible {
    opacity: 1;
    transform: translateY(0);
}

.std-service-icon {
    position: relative;
    z-index: 2;

    width: 82px;
    height: 82px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--std-card);

    border: 2px solid var(--std-teal);

    color: var(--std-primary);

    font-size: 27px;

    box-shadow:
        0 18px 35px rgba(49,86,107,.12);

    transition:
        transform .4s ease;
}

.std-service-item:hover
.std-service-icon {
    transform:
        translateY(-10px)
        rotate(8deg);
}

.std-service-number {
    color: var(--std-teal);

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

    letter-spacing: 1.5px;
}

.std-service-item h3 {
    margin: 10px 0 7px;

    color: var(--std-deep);

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

.std-service-item p {
    margin: 0;

    color: var(--std-primary);

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


/* =========================================================
   SECTION 04 — HOLIDAYS
   ========================================================= */

.std-holiday-section {
    padding: 135px 7% 145px;

    display: grid;

    grid-template-columns:
        minmax(0,.75fr)
        minmax(0,1.25fr);

    align-items: center;

    gap: 90px;

    background: var(--std-bg);
}

.std-holiday-content {
    max-width: 580px;
}

.std-holiday-content h2 {
    margin: 18px 0;

    color: var(--std-deep);

    font-size: clamp(
        38px,
        4vw,
        62px
    );

    line-height: 1.04;

    letter-spacing: -2px;
}

.std-holiday-content h2 span {
    color: var(--std-primary);
}

.std-holiday-content p {
    color: var(--std-text);

    opacity: .78;

    font-size: 17px;

    line-height: 1.8;
}

.std-holiday-list {
    display: flex;
    flex-direction: column;

    gap: 3px;

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

.std-holiday-row {
    min-height: 82px;

    display: grid;

    grid-template-columns:
        55px minmax(0,1fr) auto;

    align-items: center;

    gap: 18px;

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

    opacity: 0;

    transform: translateX(45px);

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

.std-holiday-row.std-visible {
    opacity: 1;
    transform: translateX(0);
}

.std-holiday-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--std-powder);

    color: var(--std-primary);
}

.std-holiday-row strong {
    display: block;

    color: var(--std-deep);

    font-size: 16px;
}

.std-holiday-row small {
    display: block;

    margin-top: 4px;

    color: var(--std-text);

    opacity: .62;

    font-size: 12px;
}

.std-holiday-row > span {
    color: var(--std-primary);

    font-size: 14px;

    font-weight: 850;

    text-align: right;
}

.std-holiday-closed > span {
    color: var(--std-peach);

    font-weight: 950;
}


/* =========================================================
   SECTION 05 — DYNAMIC CURVE
   ========================================================= */

.std-visit-section {
    padding: 125px 7% 145px;

    background:
        linear-gradient(
            180deg,
            var(--std-powder),
            var(--std-bg)
        );
}

.std-curve-wrapper {
    width: min(1150px, 100%);

    margin: auto;

    position: relative;

    padding: 30px 20px 25px;

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

.std-activity-svg {
    width: 100%;
    height: 390px;

    display: block;

    overflow: visible;
}

.std-curve-area {
    fill: url(#stdCurveGradient);

    opacity: 0;

    transition:
        opacity 1.5s ease;
}

.std-curve-wrapper.std-visible
.std-curve-area {
    opacity: 1;
}

.std-curve-line {
    fill: none;

    stroke: var(--std-teal);

    stroke-width: 5;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    transition:
        stroke-dashoffset 2.8s
        cubic-bezier(.16,1,.3,1);
}

.std-curve-wrapper.std-visible
.std-curve-line {
    stroke-dashoffset: 0;
}

.std-curve-point {
    fill: var(--std-card);

    stroke: var(--std-primary);

    stroke-width: 5;

    opacity: 0;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        stdCurvePointPulse
        2.5s
        ease-in-out
        infinite;
}

.std-curve-wrapper.std-visible
.std-curve-point {
    opacity: 1;
    transition: opacity .8s ease 2s;
}

@keyframes stdCurvePointPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

.std-curve-label {
    position: absolute;

    left: 0;

    color: var(--std-text);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}

.curve-busy {
    top: 70px;
}

.curve-quiet {
    bottom: 90px;
}

.std-curve-hours {
    display: flex;

    justify-content: space-between;

    padding:
        0 3%;

    color: var(--std-deep);

    font-size: 13px;

    font-weight: 850;
}

.std-curve-note {
    max-width: 700px;

    margin: 40px auto 0;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 22px;

    background: var(--std-card);

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

    border-radius: 18px;

    box-shadow:
        0 12px 30px rgba(49,86,107,.07);
}

.std-curve-note i {
    flex: 0 0 auto;

    color: var(--std-teal);

    font-size: 22px;
}

.std-curve-note p {
    margin: 0;

    color: var(--std-text);

    opacity: .78;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   SECTION 06 — BEFORE YOU VISIT
   ========================================================= */

.std-before-section {
    padding: 140px 7% 100px;

    text-align: center;

    background:
        radial-gradient(
            circle at 20% 80%,
            var(--std-powder),
            transparent 27%
        ),
        var(--std-bg);
}

.std-before-content {
    max-width: 800px;

    margin: auto;
}

.std-before-content p {
    max-width: 600px;
}

.std-before-steps {
    width: min(1200px,100%);

    margin: 75px auto 55px;

    display: grid;

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

    gap: 30px;
}

.std-before-step {
    position: relative;

    min-height: 250px;

    padding: 30px 22px;

    border-top:
        2px solid var(--std-teal);

    opacity: 0;

    transform:
        translateY(45px);

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

.std-before-step.std-visible {
    opacity: 1;
    transform: translateY(0);
}

.std-before-step > span {
    position: absolute;

    top: 18px;
    right: 20px;

    color: var(--std-primary);

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

.std-before-step i {
    margin: 20px 0;

    color: var(--std-teal);

    font-size: 31px;
}

.std-before-step h3 {
    margin: 0 0 10px;

    color: var(--std-deep);

    font-size: 19px;
}

.std-before-step p {
    margin: 0;

    color: var(--std-text);

    opacity: .7;

    font-size: 14px;

    line-height: 1.7;
}

.std-before-actions {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;
}

.std-primary-button,
.std-secondary-button {
    min-height: 54px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

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

.std-primary-button {
    background: var(--std-deep);
    color: #fff;
}

.std-secondary-button {
    background: var(--std-card);

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

    color: var(--std-deep);
}

.std-primary-button:hover,
.std-secondary-button:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(49,86,107,.16);
}

.std-final-note {
    margin: 40px auto 0;

    color: var(--std-text);

    opacity: .58;

    font-size: 13px;
}


/* =========================================================
   SECTION LEAVES
   ========================================================= */

.std-section-leaf {
    color: var(--std-teal);

    opacity: .35;

    font-size: 50px;
}

.week-leaf-one {
    top: 8%;
    right: 4%;
    transform: rotate(30deg);
    animation: stdLeafFloat 7s ease-in-out infinite;
}

.week-leaf-two {
    bottom: 8%;
    left: 4%;
    transform: rotate(-35deg);
    animation: stdLeafFloat 6s ease-in-out infinite reverse;
}

.service-leaf-one {
    top: 15%;
    left: 3%;
    transform: rotate(-30deg);
    animation: stdLeafFloat 7s infinite ease-in-out;
}

.service-leaf-two {
    right: 3%;
    bottom: 10%;
    transform: rotate(35deg);
    animation: stdLeafFloat 6s infinite ease-in-out reverse;
}

.holiday-leaf-one {
    top: 10%;
    left: 4%;
    transform: rotate(-25deg);
    animation: stdLeafFloat 8s infinite ease-in-out;
}

.holiday-leaf-two {
    bottom: 12%;
    right: 4%;
    transform: rotate(35deg);
    animation: stdLeafFloat 6s infinite ease-in-out reverse;
}

.curve-leaf-one {
    top: 12%;
    right: 4%;
    transform: rotate(30deg);
    animation: stdLeafFloat 7s infinite ease-in-out;
}

.curve-leaf-two {
    bottom: 8%;
    left: 3%;
    transform: rotate(-35deg);
    animation: stdLeafFloat 6s infinite ease-in-out reverse;
}

.before-leaf-one {
    top: 10%;
    left: 4%;
    animation: stdLeafFloat 7s infinite ease-in-out;
}

.before-leaf-two {
    top: 20%;
    right: 4%;
    animation: stdLeafFloat 6s infinite ease-in-out reverse;
}

.before-leaf-three {
    bottom: 8%;
    right: 10%;
    animation: stdLeafFloat 8s infinite ease-in-out;
}

@keyframes stdLeafFloat {
    0%,100% {
        transform:
            translateY(0)
            rotate(30deg);
    }

    50% {
        transform:
            translateY(-20px)
            rotate(45deg);
    }
}


/* =========================================================
   SCROLL REVEAL DEFAULT
   ========================================================= */

.std-reveal {
    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .85s ease,
        transform .85s cubic-bezier(.16,1,.3,1);
}

.std-reveal.std-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1023px) {

    .std-hero {
        min-height: auto;

        padding:
            90px 6%
            100px;

        grid-template-columns:
            1fr;

        text-align: center;

        gap: 50px;
    }

    .std-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .std-hero-content h1 {
        max-width: 800px;
    }

    .std-hero-content p {
        max-width: 650px;
    }

    .std-hero-clock {
        width: min(430px, 80vw);
    }

    .std-week-layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .std-week-image {
        max-width: 850px;
        margin: auto;
    }

    .std-service-timeline {
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        row-gap: 50px;
    }

    .std-service-line {
        display: none;
    }

    .std-holiday-section {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .std-holiday-content {
        max-width: 800px;
        text-align: center;
        margin: auto;
    }

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

}


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

@media (max-width: 767px) {

    .std-hero {
        padding:
            70px 6%
            80px;
    }

    .std-hero-content h1 {
        font-size:
            clamp(43px,12vw,65px);

        letter-spacing:
            -2.5px;
    }

    .std-hero-content p {
        font-size: 15px;
    }

    .std-open-status {
        justify-content: center;

        border-radius: 20px;
    }

    .std-hero-clock {
        width: min(350px, 88vw);
    }

    .std-clock-orbit {
        width: 48px;
        height: 48px;
    }

    .std-week-section,
    .std-service-section,
    .std-holiday-section,
    .std-visit-section,
    .std-before-section {
        padding:
            90px 6%
            100px;
    }

    .std-section-heading {
        margin-bottom: 50px;
    }

    .std-section-heading h2,
    .std-before-content h2 {
        font-size:
            clamp(34px,9vw,50px);

        letter-spacing:
            -1.5px;
    }

    .std-section-heading p,
    .std-before-content p {
        font-size: 15px;
    }

    .std-time-item {
        grid-template-columns:
            48px minmax(0,1fr);

        gap: 15px;

        min-height: 78px;
    }

    .std-time-marker {
        width: 48px;
        height: 48px;
    }

    .std-timeline::before {
        left: 23px;
    }

    .std-time-content strong {
        font-size: 16px;
    }

    .std-time-content span {
        font-size: 15px;
    }

    .std-time-content small {
        font-size: 11px;
    }

    .std-week-image img {
        min-height: 300px;
    }

    .std-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
        max-width: none;
    }

    .std-service-timeline {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .std-service-item {
        display: grid;

        grid-template-columns:
            70px minmax(0,1fr);

        column-gap: 18px;

        text-align: left;

        align-items: center;
    }

    .std-service-icon {
        grid-row: span 3;

        width: 70px;
        height: 70px;

        margin: 0;
    }

    .std-service-number {
        align-self: end;
    }

    .std-service-item h3 {
        margin: 3px 0;
    }

    .std-service-item p {
        margin: 0;
    }

    .std-holiday-row {
        grid-template-columns:
            45px minmax(0,1fr);

        padding: 14px 0;

        gap: 12px;
    }

    .std-holiday-row > span {
        grid-column: 2;

        text-align: left;
    }

    .std-holiday-icon {
        width: 42px;
        height: 42px;
    }

    .std-curve-wrapper {
        padding:
            20px 5px
            20px;
    }

    .std-activity-svg {
        height: 280px;
    }

    .std-curve-label {
        font-size: 10px;
    }

    .curve-busy {
        top: 55px;
    }

    .curve-quiet {
        bottom: 80px;
    }

    .std-curve-hours {
        font-size: 10px;
    }

    .std-curve-note {
        align-items: flex-start;
        padding: 15px;
    }

    .std-before-steps {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 55px;
    }

    .std-before-step {
        min-height: auto;

        padding:
            28px 15px
            35px;
    }

    .std-before-actions {
        flex-direction: column;
    }

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

    .std-float-one,
    .std-float-two {
        font-size: 24px;
    }

    .std-float-three,
    .std-float-four {
        font-size: 21px;
    }

}


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

@media (max-width: 380px) {

    .std-hero {
        padding:
            60px 5%
            70px;
    }

    .std-hero-content h1 {
        font-size: 40px;
    }

    .std-hero-clock {
        width: 285px;
    }

    .std-clock-time strong {
        font-size: 26px;
    }

    .std-clock-label {
        font-size: 10px;
    }

    .std-time-content small {
        display: none;
    }

    .std-week-image img {
        min-height: 240px;
    }

    .std-holiday-row strong {
        font-size: 14px;
    }

    .std-holiday-row small {
        font-size: 10px;
    }

    .std-holiday-row > span {
        font-size: 12px;
    }

    .std-curve-hours {
        padding: 0;
    }

}

/* =========================================================
   MEDIVANA CONTACT US PAGE
   RESPONSIVE + ANIMATED
   ========================================================= */


/* =========================================================
   CONTACT GLOBAL
   ========================================================= */

.contact-page {
    position: relative;
    width: 100%;
    overflow: hidden;

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

.contact-section {
    position: relative;
    width: 100%;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}


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

.contact-hero {
    position: relative;
    width: 100%;
    min-height: 760px;

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

    overflow: hidden;
}


/* IMPORTANT:
   Actual image fills the complete hero.
*/

.contact-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    animation:
        contactHeroImageIn
        1.4s
        ease
        both;
}


.contact-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16,42,53,.88) 0%,
            rgba(16,42,53,.68) 34%,
            rgba(16,42,53,.22) 68%,
            rgba(16,42,53,.10) 100%
        );

    z-index: 1;
}


/* Hero content */

.contact-hero-content {
    position: relative;

    z-index: 5;

    width: min(1050px, 90%);

    margin: 0 auto;

    text-align: center;

    color: #ffffff;
}


.contact-eyebrow,
.contact-section-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 9px;

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

    letter-spacing: 2px;

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


.contact-hero .contact-eyebrow {
    color: #DCECF2;
}


.contact-hero h1 {
    width: min(850px, 100%);

    margin: 22px auto 18px;

    font-size: clamp(
        48px,
        6vw,
        82px
    );

    line-height: .98;

    font-weight: 900;

    letter-spacing: -2px;

    color: #ffffff;
}


.contact-hero h1 span {
    display: block;

    color: #78CEC6;
}


.contact-hero p {
    width: min(700px, 100%);

    margin: 0 auto 28px;

    font-size: 20px;

    line-height: 1.7;

    font-weight: 600;

    color: #F5F8F6;
}


.contact-hero-actions {
    display: flex;

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

    gap: 14px;

    flex-wrap: wrap;
}


.contact-primary-button,
.contact-outline-button {
    min-height: 52px;

    display: inline-flex;

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

    gap: 10px;

    padding: 13px 24px;

    border-radius: 999px;

    text-decoration: none;

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

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


.contact-primary-button {
    background: #31566B;
    color: #FFFDF8;
}


.contact-outline-button {
    border: 1px solid #DCECF2;

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

    color: #ffffff;

    backdrop-filter: blur(5px);
}


.contact-primary-button:hover,
.contact-outline-button:hover {
    transform: translateY(-4px);
}


.contact-primary-button i,
.contact-outline-button i {
    transition: transform .3s ease;
}


.contact-primary-button:hover i,
.contact-outline-button:hover i {
    transform: translateX(4px);
}


.contact-hero-info {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;
}


.contact-hero-info span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    color: #ffffff;
}


.contact-hero-info i {
    color: #78CEC6;
}


/* Hero leaves */

.contact-hero-leaf {
    position: absolute;

    z-index: 3;

    color: #78BDB5;

    opacity: .55;

    pointer-events: none;

    animation:
        contactLeafFloat
        5s
        ease-in-out
        infinite;
}


.contact-leaf-one {
    left: 4%;
    bottom: 9%;

    font-size: 80px;

    transform: rotate(-35deg);
}


.contact-leaf-two {
    right: 5%;
    top: 15%;

    font-size: 60px;

    animation-delay: .8s;
}


.contact-leaf-three {
    right: 11%;
    bottom: 13%;

    font-size: 42px;

    animation-delay: 1.4s;
}


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

.contact-section-heading {
    width: min(850px, 90%);

    margin: 0 auto 65px;

    text-align: center;
}


.contact-section-heading h2,
.contact-form-intro h2,
.urgent-heading h2,
.contact-location-section h2,
.contact-final-section h2 {
    margin: 15px 0;

    font-size: clamp(
        38px,
        4.5vw,
        62px
    );

    line-height: 1.05;

    letter-spacing: -1.5px;

    font-weight: 900;

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


.contact-section-heading h2 span,
.contact-form-intro h2 span,
.urgent-heading h2 span,
.contact-location-section h2 span,
.contact-final-section h2 span {
    color: var(--med-primary);
}


.contact-section-heading p,
.contact-form-intro > p,
.urgent-heading > p,
.contact-location-section > .contact-section-heading p,
.contact-final-section p {
    font-size: 19px;

    line-height: 1.75;

    color: var(--med-text);

    opacity: .88;
}


/* =========================================================
   SECTION 02 — INFORMATION
   ========================================================= */

.contact-info-section {
    padding: 125px 5% 110px;

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


.contact-info-grid {
    width: min(1250px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 40px;
}


.contact-info-item {
    display: flex;

    align-items: flex-start;

    gap: 17px;

    min-width: 0;

    transition:
        transform .35s ease;
}


.contact-info-item:hover {
    transform: translateY(-7px);
}


.contact-info-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--med-powder-blue);

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

    font-size: 18px;
}


.contact-info-item small {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.5px;

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


.contact-info-item h3 {
    margin: 0 0 6px;

    font-size: 19px;

    line-height: 1.3;

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

    word-break: break-word;
}


.contact-info-item p {
    margin: 0;

    font-size: 15px;

    line-height: 1.55;

    color: var(--med-text);

    opacity: .8;
}


.contact-emergency-note {
    width: min(1250px, 100%);

    margin: 55px auto 0;

    padding: 16px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

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

    color: var(--med-text);

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


.contact-emergency-note i {
    color: var(--med-peach);
}


/* =========================================================
   SECTION 03 — CONTACT FORM
   NO OUTER CARD
   ========================================================= */

.contact-form-section {
    padding: 125px 5% 140px;

    background:
        linear-gradient(
            180deg,
            var(--med-bg),
            var(--med-powder-blue)
        );
}


.contact-form-layout {
    width: min(1250px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap: 100px;

    align-items: center;
}


.contact-form-intro h2 {
    max-width: 600px;
}


.contact-form-intro > p {
    max-width: 570px;

    margin-bottom: 30px;
}


.contact-form-points {
    display: grid;

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

    gap: 15px 25px;
}


.contact-form-points div {
    display: flex;

    align-items: center;

    gap: 10px;

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

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


.contact-form-points i {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--med-teal);

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

    font-size: 11px;
}


.contact-main-form {
    width: 100%;
}


.contact-form-row {
    display: grid;

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

    gap: 25px;
}


.contact-field {
    width: 100%;

    margin-bottom: 23px;
}


.contact-field label {
    display: block;

    margin-bottom: 9px;

    font-size: 16px;

    font-weight: 900;

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


.contact-field label span {
    color: var(--med-peach);
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

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

    outline: none;

    background: var(--med-card);

    color: var(--med-text);

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    border-radius: 14px;

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


.contact-field input,
.contact-field select {
    min-height: 56px;

    padding: 13px 16px;
}


.contact-field textarea {
    min-height: 145px;

    resize: vertical;

    padding: 15px 16px;

    line-height: 1.6;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--med-text);

    opacity: .55;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--med-primary);

    box-shadow:
        0 0 0 4px rgba(91,143,168,.12);
}


#contactFormElement.submitted .contact-field.has-error label {
    color: #d64d4d;
}

#contactFormElement.submitted .contact-field.has-error label span {
    color: #d64d4d;
}

#contactFormElement.submitted .contact-field.has-error input,
#contactFormElement.submitted .contact-field.has-error select,
#contactFormElement.submitted .contact-field.has-error textarea {
    border-color: #d64d4d;

    background: rgba(214, 77, 77, 0.04);

    box-shadow:
        0 0 0 4px rgba(214, 77, 77, 0.08);
}

#contactFormElement.submitted .contact-form-message.error,
#contactFormElement.submitted .urgent-form-message.error {
    color: #d64d4d;
}

.contact-submit-button,
.urgent-submit-button {
    border: 0;

    min-height: 54px;

    padding: 14px 27px;

    border-radius: 999px;

    background: var(--med-deep-blue);

    color: #FFFDF8;

    font-family: inherit;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

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


.contact-submit-button:hover,
.urgent-submit-button:hover {
    transform: translateY(-4px);

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


.contact-form-message,
.urgent-form-message {
    min-height: 22px;

    margin: 12px 0 0;

    font-size: 15px;

    font-weight: 800;

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


/* =========================================================
   SECTION 04 — URGENT AVAILABILITY
   ========================================================= */

.urgent-section {
    padding: 135px 5% 150px;

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


.urgent-heading {
    width: min(850px, 100%);

    margin: 0 auto 70px;

    text-align: center;
}


.urgent-eyebrow {
    color: var(--med-peach);
}


.urgent-layout {
    width: min(1180px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 1.28fr);

    gap: 95px;

    align-items: center;
}


.urgent-copy {
    position: relative;

    padding-left: 35px;

    border-left: 2px solid var(--med-peach);
}


.urgent-number {
    display: block;

    margin-bottom: 15px;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 2px;

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


.urgent-copy h3 {
    margin: 0 0 15px;

    font-size: 28px;

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


.urgent-copy > p {
    max-width: 460px;

    margin: 0;

    font-size: 18px;

    line-height: 1.75;

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


.urgent-support-line {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    font-size: 15px;

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


.urgent-support-line i {
    color: var(--med-peach);

    font-size: 20px;
}


.urgent-support-line strong {
    display: block;

    margin-top: 3px;

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


.urgent-form {
    width: 100%;
}


.urgent-form-row {
    display: grid;

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

    gap: 25px;
}


.urgent-prescription-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 20px;

    font-size: 14px;

    line-height: 1.6;

    color: var(--med-text);

    opacity: .85;
}


.urgent-prescription-note i {
    color: var(--med-primary);

    margin-top: 3px;
}


/* Floating elements */

.urgent-floating {
    position: absolute;

    pointer-events: none;

    color: var(--med-teal);

    opacity: .28;

    animation:
        contactFloating
        5s
        ease-in-out
        infinite;
}


.urgent-float-one {
    left: 4%;
    top: 25%;

    font-size: 55px;
}


.urgent-float-two {
    right: 4%;
    top: 17%;

    font-size: 70px;

    animation-delay: .7s;
}


.urgent-float-three {
    right: 7%;
    bottom: 12%;

    font-size: 45px;

    animation-delay: 1.2s;
}


/* =========================================================
   SECTION 05 — LOCATION
   ========================================================= */

.contact-location-section {
    padding: 125px 5% 145px;

    background:
        linear-gradient(
            180deg,
            var(--med-powder-blue),
            var(--med-bg)
        );
}


.contact-location-layout {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .95fr);

    gap: 85px;

    align-items: center;
}


/* ONLY CARD SHAPE ON CONTACT PAGE */

.contact-map-card {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius: 38px;

    background: #DCECF2;

    box-shadow:
        0 25px 70px rgba(49,86,107,.15);

    border: 1px solid rgba(49,86,107,.12);
}


.contact-map-content {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.usa-map-outline {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #DCECF2,
            #B8DDE7
        );
}


.usa-map-grid {
    position: absolute;

    inset: 0;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(49,86,107,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(49,86,107,.18) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


.usa-map-route {
    position: absolute;

    width: 58%;

    height: 150px;

    left: 19%;
    top: 42%;

    border-top:
        3px dashed
        var(--med-teal);

    border-radius: 50%;

    transform:
        rotate(-8deg);
}


.usa-map-location {
    position: absolute;

    left: 69%;
    top: 35%;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--med-peach);

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

    font-size: 22px;

    animation:
        mapPinPulse
        2.4s
        ease-in-out
        infinite;
}


.usa-map-label {
    position: absolute;

    left: 70%;
    top: 49%;

    font-size: 16px;

    font-weight: 900;

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


.usa-map-country {
    position: absolute;

    left: 12%;
    top: 23%;

    font-size: 24px;

    font-weight: 900;

    letter-spacing: 2px;

    color: rgba(49,86,107,.55);
}


/* Location details */

.contact-location-details {
    display: flex;

    flex-direction: column;

    gap: 34px;
}


.location-detail-row {
    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 18px;

    align-items: flex-start;
}


.location-detail-row > i {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-primary);

    box-shadow:
        0 8px 25px rgba(49,86,107,.08);
}


.location-detail-row small {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;

    letter-spacing: 1.4px;

    font-weight: 900;

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


.location-detail-row h3 {
    margin: 0 0 5px;

    font-size: 19px;

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


.location-detail-row p {
    margin: 0;

    font-size: 16px;

    line-height: 1.6;

    color: var(--med-text);

    opacity: .82;
}


.support-list {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.support-list span {
    display: flex;

    align-items: center;

    gap: 8px;
}


.support-list span i {
    color: var(--med-teal);
}


/* =========================================================
   SECTION 06 — FINAL
   ========================================================= */

.contact-final-section {
    min-height: 500px;

    padding: 100px 5%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--med-bg),
            var(--med-powder-blue)
        );
}


.contact-final-content {
    position: relative;

    z-index: 3;

    width: min(780px, 100%);
}


.contact-final-section h2 {
    margin-top: 15px;
}


.contact-final-section p {
    width: min(680px, 100%);

    margin: 0 auto 28px;
}


.contact-final-actions {
    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}


.contact-final-section .contact-outline-button {
    border-color: var(--med-primary);

    background: transparent;

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


.contact-final-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .28;

    pointer-events: none;

    animation:
        contactLeafFloat
        6s
        ease-in-out
        infinite;
}


.final-leaf-one {
    left: 10%;
    top: 25%;

    font-size: 70px;

    transform: rotate(-35deg);
}


.final-leaf-two {
    right: 9%;
    top: 20%;

    font-size: 55px;

    animation-delay: 1s;
}


.final-leaf-three {
    left: 20%;
    bottom: 12%;

    font-size: 40px;

    animation-delay: 1.6s;
}


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

.contact-from-left,
.contact-from-right,
.contact-from-center,
.contact-center-collision,
.contact-reveal {
    opacity: 0;

    will-change: transform, opacity;
}


.contact-from-left {
    transform:
        translateX(-90px);
}


.contact-from-right {
    transform:
        translateX(90px);
}


.contact-from-center,
.contact-reveal {
    transform:
        translateY(45px);
}


.contact-center-collision {
    transform:
        scale(.72);
}


.contact-visible {
    opacity: 1;

    transform:
        translate(0)
        scale(1);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   SPECIAL COLLISION
   ========================================================= */

.contact-collision-active {
    animation:
        contactCenterCollision
        1s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes contactCenterCollision {

    0% {
        opacity: 0;

        transform:
            scale(.65)
            rotate(-4deg);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.06)
            rotate(2deg);
    }

    75% {
        transform:
            scale(.97)
            rotate(-1deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}


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

.contact-hero-left {
    opacity: 0;

    transform:
        translateX(-80px);

    animation:
        contactHeroLeft
        1s
        .2s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.contact-hero-right {
    opacity: 0;

    transform:
        translateX(80px);

    animation:
        contactHeroRight
        1s
        .45s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.contact-hero-center {
    opacity: 0;

    transform:
        translateY(35px);

    animation:
        contactHeroCenter
        .9s
        .7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes contactHeroLeft {

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes contactHeroRight {

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes contactHeroCenter {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes contactHeroImageIn {

    from {
        opacity: 0;

        transform:
            scale(1.08);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   FLOATING / HANGING
   ========================================================= */

@keyframes contactLeafFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

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


@keyframes contactFloating {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(8deg);
    }
}


/* =========================================================
   MAP
   ========================================================= */

@keyframes mapPinPulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(242,176,156,.4);
    }

    50% {
        transform:
            scale(1.08);

        box-shadow:
            0 0 0 15px
            rgba(242,176,156,0);
    }
}


/* =========================================================
   TABLET
   768px — 1023px
   ========================================================= */

@media (max-width: 1023px) {

    .contact-hero {
        min-height: 720px;
    }


    .contact-hero-image {
        object-position:
            62% center;
    }


    .contact-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(16,42,53,.72),
                rgba(16,42,53,.76)
            );
    }


    .contact-hero h1 {
        font-size:
            clamp(45px, 7vw, 68px);
    }


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

        gap: 45px 35px;
    }


    .contact-form-layout {
        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .contact-form-intro {
        text-align: center;
    }


    .contact-form-intro > p {
        margin-left: auto;
        margin-right: auto;
    }


    .contact-form-points {
        width: min(650px, 100%);

        margin: 0 auto;

        text-align: left;
    }


    .urgent-layout {
        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .urgent-copy {
        max-width: 700px;

        margin: 0 auto;

        text-align: center;

        padding-left: 0;

        padding-bottom: 25px;

        border-left: 0;

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


    .urgent-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    .urgent-support-line {
        justify-content: center;
    }


    .contact-location-layout {
        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .contact-map-card {
        min-height: 430px;

        width: min(760px, 100%);

        margin: 0 auto;
    }


    .contact-location-details {
        width: min(760px, 100%);

        margin: 0 auto;
    }


    .contact-final-section {
        min-height: 440px;
    }

}


/* =========================================================
   MOBILE L
   481px — 767px
   ========================================================= */

@media (max-width: 767px) {

    .contact-hero {
        min-height: 700px;

        padding:
            100px 20px 80px;
    }


    .contact-hero-image {
        object-position:
            64% center;
    }


    .contact-hero h1 {
        font-size:
            clamp(40px, 10vw, 55px);

        letter-spacing:
            -1px;
    }


    .contact-hero p {
        font-size: 17px;

        line-height: 1.65;
    }


    .contact-hero-info {
        gap: 12px 20px;

        margin-top: 27px;
    }


    .contact-hero-info span {
        font-size: 13px;
    }


    .contact-section-heading h2,
    .contact-form-intro h2,
    .urgent-heading h2,
    .contact-location-section h2,
    .contact-final-section h2 {
        font-size:
            clamp(34px, 9vw, 46px);
    }


    .contact-section-heading p,
    .contact-form-intro > p,
    .urgent-heading > p,
    .contact-final-section p {
        font-size: 17px;
    }


    .contact-info-section,
    .contact-form-section,
    .urgent-section,
    .contact-location-section {
        padding:
            90px 6% 100px;
    }


    .contact-info-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .contact-info-item {
        max-width: 500px;

        margin: 0 auto;

        width: 100%;
    }


    .contact-emergency-note {
        justify-content: flex-start;

        text-align: left;

        font-size: 14px;

        line-height: 1.6;
    }


    .contact-form-row,
    .urgent-form-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .contact-form-points {
        grid-template-columns:
            1fr;

        width: 100%;
    }


    .contact-field input,
    .contact-field select {
        min-height: 57px;
    }


    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        font-size: 16px;
    }


    .urgent-copy {
        text-align: center;
    }


    .urgent-support-line {
        flex-direction: column;

        text-align: center;
    }


    .urgent-floating {
        opacity: .18;
    }


    .urgent-float-one {
        left: 3%;
        top: 18%;
    }


    .urgent-float-two {
        right: 2%;
        top: 12%;
    }


    .urgent-float-three {
        right: 4%;
        bottom: 7%;
    }


    .contact-map-card {
        min-height: 350px;

        border-radius: 28px;
    }


    .usa-map-country {
        font-size: 17px;
    }


    .usa-map-label {
        font-size: 14px;
    }


    .contact-location-details {
        gap: 30px;
    }


    .location-detail-row {
        grid-template-columns:
            43px minmax(0,1fr);

        gap: 14px;
    }


    .location-detail-row > i {
        width: 43px;
        height: 43px;
    }


    .location-detail-row h3 {
        font-size: 17px;
    }


    .location-detail-row p {
        font-size: 15px;
    }


    .contact-final-actions {
        flex-direction: column;

        align-items: stretch;

        width: min(330px, 100%);

        margin: 0 auto;
    }


    .contact-final-actions
    .contact-primary-button,
    .contact-final-actions
    .contact-outline-button {
        width: 100%;
    }


    .contact-leaf-one {
        font-size: 45px;
    }


    .contact-leaf-two {
        font-size: 35px;
    }


    .contact-leaf-three {
        font-size: 30px;
    }


    .final-leaf-one {
        left: 4%;
        font-size: 45px;
    }


    .final-leaf-two {
        right: 4%;
        font-size: 38px;
    }

}


/* =========================================================
   MOBILE S
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .contact-hero {
        min-height: 730px;

        padding:
            90px 17px 65px;
    }


    .contact-hero-image {
        object-position:
            67% center;
    }


    .contact-hero h1 {
        font-size:
            clamp(37px, 11vw, 47px);

        line-height: 1.02;
    }


    .contact-hero p {
        font-size: 16px;

        line-height: 1.65;
    }


    .contact-hero-actions {
        flex-direction: column;

        width: 100%;
    }


    .contact-hero-actions
    .contact-primary-button,
    .contact-hero-actions
    .contact-outline-button {
        width: 100%;
    }


    .contact-hero-info {
        flex-direction: column;

        gap: 11px;

        align-items: center;
    }


    .contact-section-heading,
    .urgent-heading {
        margin-bottom: 45px;
    }


    .contact-section-heading h2,
    .contact-form-intro h2,
    .urgent-heading h2,
    .contact-location-section h2,
    .contact-final-section h2 {
        font-size: 34px;

        line-height: 1.08;
    }


    .contact-section-heading p,
    .contact-form-intro > p,
    .urgent-heading > p,
    .contact-final-section p {
        font-size: 16px;
    }


    .contact-info-section,
    .contact-form-section,
    .urgent-section,
    .contact-location-section {
        padding:
            78px 5% 85px;
    }


    .contact-info-icon {
        flex-basis: 46px;

        width: 46px;
        height: 46px;
    }


    .contact-info-item h3 {
        font-size: 17px;
    }


    .contact-info-item p {
        font-size: 14px;
    }


    .contact-emergency-note {
        margin-top: 38px;

        padding:
            14px 5px;

        font-size: 13px;
    }


    .contact-submit-button,
    .urgent-submit-button {
        width: 100%;
    }


    .urgent-copy h3 {
        font-size: 25px;
    }


    .urgent-copy > p {
        font-size: 16px;
    }


    .contact-map-card {
        min-height: 300px;

        border-radius: 23px;
    }


    .usa-map-country {
        left: 9%;
        top: 20%;

        font-size: 14px;
    }


    .usa-map-location {
        left: 67%;

        width: 48px;
        height: 48px;
    }


    .usa-map-label {
        left: 68%;
        top: 51%;

        font-size: 12px;
    }


    .contact-final-section {
        min-height: 420px;

        padding:
            80px 5%;
    }

}


/* =========================================================
   LARGE LAPTOP / DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .contact-hero {
        min-height: 800px;
    }


    .contact-hero-content {
        transform:
            translateY(-5px);
    }


    .contact-info-grid {
        gap: 55px;
    }


    .contact-form-layout {
        gap: 125px;
    }


    .contact-location-layout {
        gap: 105px;
    }

}


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

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

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}
/* =========================================================
   MAP ROUTE DRAWING
   ========================================================= */

.usa-map-route {
    transform:
        scaleX(0)
        rotate(-8deg);

    transform-origin: left center;

    transition:
        transform 1.6s
        cubic-bezier(.16,1,.3,1);
}


.contact-map-visible .usa-map-route {
    transform:
        scaleX(1)
        rotate(-8deg);
}


.contact-field-active label {
    color: var(--med-primary);
}


@media (max-width: 767px) {

    .contact-map-visible .usa-map-route {
        transform:
            scaleX(1)
            rotate(-8deg);
    }

}


html[dir="rtl"] .usa-map-route {
    transform-origin: right center;

    transform:
        scaleX(0)
        rotate(8deg);
}


html[dir="rtl"]
.contact-map-visible
.usa-map-route {
    transform:
        scaleX(1)
        rotate(8deg);
}

/* =========================================================
   CONTACT — GOOGLE MAP INSIDE EXISTING MAP CARD
========================================================= */

.contact-google-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
}

.contact-google-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
}
.contact-map-content {
    width: 100%;
    height: 100%;
    min-height: 520px;
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .contact-google-map,
    .contact-google-map iframe,
    .contact-map-content {
        min-height: 450px;
    }

}


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

@media (max-width: 767px) {

    .contact-google-map,
    .contact-google-map iframe,
    .contact-map-content {
        min-height: 390px;
    }

}


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

@media (max-width: 575px) {

    .contact-google-map,
    .contact-google-map iframe,
    .contact-map-content {
        min-height: 350px;
    }

}


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

@media (max-width: 380px) {

    .contact-google-map,
    .contact-google-map iframe,
    .contact-map-content {
        min-height: 310px;
    }

}

/* =========================================================
   MEDIVANA LOGIN PAGE
   ========================================================= */

.med-login-page {

    --login-bg:
        var(--med-bg);

    --login-card:
        var(--med-card);

    --login-primary:
        var(--med-primary);

    --login-deep:
        var(--med-deep-blue);

    --login-teal:
        var(--med-teal);

    --login-text:
        var(--med-text);

    --login-border:
        var(--med-border);

    min-height: 100vh;

    margin: 0;

    background:
        var(--login-bg);

    color:
        var(--login-text);

    font-family:
        "Nunito",
        sans-serif;

    overflow-x: hidden;
}


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

.login-top-controls {

    position: fixed;

    top: 22px;
    right: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 99999;
}


.login-control-button,
.login-rtl-button {

    height: 46px;

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

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

    color:
        var(--login-text);

    backdrop-filter:
        blur(15px);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.login-control-button {

    width: 46px;

    display: grid;

    place-items: center;

    border-radius: 50%;

}


.login-rtl-button {

    padding:
        0 17px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 30px;

    font-weight: 800;

}


.login-control-button:hover,
.login-rtl-button:hover {

    transform:
        translateY(-3px);

    background:
        var(--login-teal);

    color:
        #ffffff;

    border-color:
        var(--login-teal);
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.login-main-container {

    width: 100%;

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    margin: 0;

    padding: 0;
}


/* =========================================================
   LEFT VISUAL SECTION
   ========================================================= */

.login-visual-section {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    isolation: isolate;
}


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

.login-image-wrapper {

    position: absolute;

    inset: 0;

    z-index: -3;

}


.login-hero-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.04);

    animation:
        loginImageZoom 12s ease-in-out infinite alternate;
}


@keyframes loginImageZoom {

    from {

        transform:
            scale(1.04);

    }

    to {

        transform:
            scale(1.1);

    }

}


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

.login-image-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(16,42,53,.45),
            rgba(16,42,53,.84)
        );
}


/* =========================================================
   BRAND
   ========================================================= */

.login-brand {

    position: absolute;

    top: 32px;

    left: 42px;

    display: flex;

    align-items: center;

    gap: 11px;

    color:
        #ffffff;

    font-size:
        1.65rem;

    font-weight:
        900;

    z-index: 5;

}


.login-brand i {

    color:
        var(--login-teal);

    font-size:
        1.9rem;

}


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

.login-visual-content {

    width:
        min(620px, 82%);

    margin-top:
        70px;

    color:
        #ffffff;

}


.login-eyebrow,
.login-form-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size:
        .78rem;

    font-weight:
        900;

    letter-spacing:
        2px;

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


.login-eyebrow i {

    font-size:
        .9rem;

}


.login-visual-content h1 {

    margin:
        18px 0 18px;

    font-size:
        clamp(3rem, 5vw, 5.5rem);

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -2px;

}


.login-visual-content h1 span {

    display: block;

    color:
        var(--login-teal);

}


.login-visual-content > p {

    max-width:
        600px;

    margin:
        0 0 38px;

    font-size:
        1.15rem;

    line-height:
        1.8;

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

}


/* =========================================================
   FEATURES
   ========================================================= */

.login-feature-list {

    display: flex;

    flex-wrap: wrap;

    gap: 26px;

}


.login-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width:
        160px;

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


.login-feature:nth-child(2) {

    animation-delay:
        .4s;

}


.login-feature:nth-child(3) {

    animation-delay:
        .8s;

}


@keyframes loginFeatureFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


.login-feature-icon {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(114,206,197,.14);

    border:
        1px solid rgba(114,206,197,.38);

    color:
        var(--login-teal);

    font-size:
        1.15rem;

}


.login-feature strong {

    display: block;

    color:
        #ffffff;

    font-size:
        .98rem;

}


.login-feature small {

    display: block;

    margin-top:
        3px;

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

    font-size:
        .78rem;

}


/* =========================================================
   FLOATING LEAVES
   ========================================================= */

.login-leaf {

    position: absolute;

    color:
        var(--login-teal);

    opacity:
        .22;

    pointer-events:
        none;

}


.login-leaf-one {

    top:
        20%;

    left:
        5%;

    font-size:
        4.5rem;

    transform:
        rotate(-25deg);

    animation:
        loginLeafOne 7s ease-in-out infinite;
}


.login-leaf-two {

    right:
        7%;

    bottom:
        20%;

    font-size:
        5rem;

    transform:
        rotate(30deg);

    animation:
        loginLeafTwo 8s ease-in-out infinite;
}


.login-leaf-three {

    left:
        45%;

    top:
        8%;

    font-size:
        2.5rem;

    animation:
        loginLeafThree 5s ease-in-out infinite;
}


@keyframes loginLeafOne {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-25deg);

    }

    50% {

        transform:
            translateY(-25px)
            rotate(-5deg);

    }

}


@keyframes loginLeafTwo {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(30deg);

    }

    50% {

        transform:
            translateY(22px)
            rotate(50deg);

    }

}


@keyframes loginLeafThree {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0);

    }

    50% {

        transform:
            translateY(-15px)
            rotate(25deg);

    }

}


/* =========================================================
   RIGHT FORM SECTION
   ========================================================= */

.login-form-section {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        80px 8% 60px;

    background:
        var(--login-bg);

    position: relative;

    overflow: hidden;
}


.login-form-section::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -130px;

    top: -100px;

    border-radius: 50%;

    background:
        var(--med-powder-blue);

    opacity:
        .35;

    filter:
        blur(50px);

    pointer-events:
        none;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.login-form-wrapper {

    width:
        min(610px, 100%);

    position: relative;

    z-index: 2;
}


.login-form-heading {

    margin:
        14px 0 32px;
}


.login-form-heading h2 {

    margin:
        10px 0;

    color:
        var(--login-deep);

    font-size:
        clamp(2.5rem, 4vw, 4rem);

    line-height:
        1;

    font-weight:
        900;

}


.login-form-heading p {

    margin:
        0;

    color:
        var(--login-text);

    opacity:
        .75;

    font-size:
        1.08rem;

    line-height:
        1.7;
}


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

.login-mobile-brand {

    display: none;

    align-items: center;

    gap: 8px;

    color:
        var(--login-deep);

    font-size:
        1.5rem;

    font-weight:
        900;

}


.login-mobile-brand i {

    color:
        var(--login-teal);

}


/* =========================================================
   FORM
   ========================================================= */

.med-login-form {

    width: 100%;
}


.login-field {

    margin-bottom:
        20px;

}


.login-field label {

    display: block;

    margin-bottom:
        8px;

    color:
        var(--login-deep);

    font-size:
        1rem;

    font-weight:
        800;
}


.login-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;
}


.login-input-wrapper > i {

    position: absolute;

    left:
        18px;

    color:
        var(--login-primary);

    font-size:
        1rem;

    z-index:
        2;

}


.login-input-wrapper input {

    width: 100%;

    height: 58px;

    padding:
        0 52px;

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

    border-radius:
        15px;

    outline:
        none;

    background:
        var(--login-card);

    color:
        var(--login-text);

    font-family:
        inherit;

    font-size:
        1rem;

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


.login-input-wrapper input::placeholder {

    color:
        var(--login-text);

    opacity:
        .45;
}


.login-input-wrapper input:focus {

    border-color:
        var(--login-primary);

    box-shadow:
        0 0 0 4px rgba(91,143,168,.12);

    transform:
        translateY(-1px);
}


/* =========================================================
   PASSWORD BUTTON
   ========================================================= */

.login-password-toggle {

    position: absolute;

    right:
        10px;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--login-text);

    opacity:
        .65;

    cursor:
        pointer;

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


.login-password-toggle:hover {

    background:
        var(--med-powder-blue);

    color:
        var(--login-primary);

}


/* =========================================================
   VALIDATION
   ========================================================= */

.login-input-wrapper.login-invalid input {

    border-color:
        #D94A4A;

    box-shadow:
        0 0 0 3px rgba(217,74,74,.10);
}


.login-input-wrapper.login-valid input {

    border-color:
        var(--login-teal);
}


.login-error {

    display: block;

    min-height:
        19px;

    margin-top:
        5px;

    color:
        #D94A4A;

    font-size:
        .82rem;

    font-weight:
        700;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.login-form-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin:
        3px 0 24px;
}


.login-remember {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--login-text);

    font-size:
        .92rem;

    cursor:
        pointer;
}


.login-remember input {

    width:
        17px;

    height:
        17px;

    accent-color:
        var(--login-primary);

}


.login-forgot {

    color:
        var(--login-primary);

    font-size:
        .92rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color .3s ease;
}


.login-forgot:hover {

    color:
        var(--login-teal);

}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-submit-button {

    width:
        100%;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        0;

    border-radius:
        15px;

    background:
        var(--login-deep);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        1rem;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 15px 35px rgba(49,86,107,.20);

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


.login-submit-button:hover {

    transform:
        translateY(-3px);

    background:
        var(--login-teal);

    box-shadow:
        0 20px 40px rgba(120,189,181,.25);

}


.login-submit-button i {

    transition:
        transform .3s ease;

}


.login-submit-button:hover i {

    transform:
        translateX(5px);

}


/* =========================================================
   STATUS
   ========================================================= */

.login-form-status {

    min-height:
        22px;

    margin-top:
        8px;

    text-align:
        center;

    font-size:
        .85rem;

    font-weight:
        700;
}


.login-form-status.success {

    color:
        var(--login-teal);

}


.login-form-status.error {

    color:
        #D94A4A;

}


/* =========================================================
   DIVIDER
   ========================================================= */

.login-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        22px 0;

}


.login-divider span {

    flex:
        1;

    height:
        1px;

    background:
        var(--login-border);
}


.login-divider strong {

    color:
        var(--login-text);

    opacity:
        .55;

    font-size:
        .8rem;

}


/* =========================================================
   SOCIAL BUTTONS
   ========================================================= */

.login-social-buttons {

    display:
        grid;

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

    gap:
        12px;

}


.login-social-button {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

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

    border-radius:
        14px;

    background:
        var(--login-card);

    color:
        var(--login-text);

    font-family:
        inherit;

    font-size:
        .9rem;

    font-weight:
        800;

    cursor:
        pointer;

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


.login-social-button:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--login-primary);

    box-shadow:
        0 12px 25px rgba(49,86,107,.12);

}


.google-login i {

    color:
        #4285F4;

}


.apple-login i {

    color:
        var(--login-text);

    font-size:
        1.1rem;

}


.facebook-login i {

    color:
        #1877F2;

}


/* =========================================================
   SIGN UP
   ========================================================= */

.login-signup {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        27px;

    color:
        var(--login-text);

    opacity:
        .75;

    font-size:
        .93rem;
}


.login-signup a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--login-primary);

    font-weight:
        900;

    text-decoration:
        none;

    opacity:
        1;

    transition:
        color .3s ease;
}


.login-signup a:hover {

    color:
        var(--login-teal);

}


.login-signup a i {

    transition:
        transform .3s ease;

}


.login-signup a:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   SCROLL / REVEAL ANIMATION
   ========================================================= */

.login-scroll-reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}


.login-scroll-reveal.login-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   DESKTOP-L
   ========================================================= */

@media (min-width: 1440px) {

    .login-visual-content {

        width:
            min(680px, 80%);

    }

    .login-form-section {

        padding-left:
            10%;

        padding-right:
            10%;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .login-visual-content h1 {

        font-size:
            clamp(3rem, 5vw, 4.5rem);

    }

    .login-form-section {

        padding:
            80px 7% 50px;

    }

}


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

@media (max-width: 1023px) {

    .login-main-container {

        grid-template-columns:
            1fr;

    }


    .login-visual-section {

        min-height:
            620px;

    }


    .login-form-section {

        min-height:
            auto;

        padding:
            85px 8% 80px;

    }


    .login-form-wrapper {

        max-width:
            650px;

    }


    .login-visual-content {

        margin-top:
            80px;

    }

}


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

@media (max-width: 767px) {

    .login-top-controls {

        top:
            15px;

        right:
            15px;

    }


    .login-control-button,
    .login-rtl-button {

        height:
            42px;

    }


    .login-control-button {

        width:
            42px;

    }


    .login-rtl-button {

        padding:
            0 13px;

    }


    .login-visual-section {

        min-height:
            590px;

    }


    .login-brand {

        left:
            25px;

        top:
            25px;

        font-size:
            1.35rem;

    }


    .login-visual-content {

        width:
            88%;

        margin-top:
            80px;

    }


    .login-visual-content h1 {

        font-size:
            clamp(2.8rem, 11vw, 4rem);

    }


    .login-visual-content > p {

        font-size:
            1rem;

    }


    .login-feature-list {

        gap:
            17px;

    }


    .login-feature {

        min-width:
            140px;

    }


    .login-form-section {

        padding:
            70px 6%;

    }


    .login-social-buttons {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width: 575px) {

    .login-visual-section {

        min-height:
            560px;

    }


    .login-visual-content {

        width:
            86%;

    }


    .login-visual-content h1 {

        font-size:
            2.8rem;

    }


    .login-feature-list {

        flex-direction:
            column;

    }


    .login-feature {

        width:
            100%;

    }


    .login-form-section {

        padding:
            65px 20px;

    }


    .login-form-heading h2 {

        font-size:
            2.8rem;

    }


    .login-form-heading p {

        font-size:
            1rem;

    }


    .login-form-options {

        align-items:
            flex-start;

    }


    .login-signup {

        flex-wrap:
            wrap;

        text-align:
            center;

    }

}


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

@media (max-width: 380px) {

    .login-top-controls {

        right:
            10px;

        gap:
            6px;

    }


    .login-control-button,
    .login-rtl-button {

        height:
            39px;

    }


    .login-control-button {

        width:
            39px;

    }


    .login-rtl-button {

        padding:
            0 10px;

        font-size:
            .78rem;

    }


    .login-visual-section {

        min-height:
            520px;

    }


    .login-visual-content h1 {

        font-size:
            2.45rem;

    }


    .login-form-section {

        padding:
            55px 15px;

    }


    .login-input-wrapper input {

        height:
            54px;

    }


    .login-submit-button {

        height:
            54px;

    }

}


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

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

    .login-hero-image,
    .login-feature,
    .login-leaf-one,
    .login-leaf-two,
    .login-leaf-three {

        animation:
            none;

    }

    .login-scroll-reveal {

        transition:
            none;

    }

}

/* =========================================================
   MEDIVANA SIGNUP PAGE
   ========================================================= */

.signup-page {
    --signup-bg: #FFF8EC;
    --signup-card: #FFFDF8;
    --signup-primary: #5B8FA8;
    --signup-deep: #31566B;
    --signup-powder: #DCECF2;
    --signup-teal: #78BDB5;
    --signup-peach: #F3B6A2;
    --signup-text: #34444B;
    --signup-muted: #65777D;
    --signup-border: rgba(49, 86, 107, .16);
    --signup-error: #C94343;

    min-height: 100vh;
    width: 100%;
    background: var(--signup-bg);
    color: var(--signup-text);
    font-family: "Nunito", sans-serif;

    overflow-x: hidden;
}


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

.signup-top-controls {
    position: fixed;

    top: 24px;
    right: 28px;

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

    z-index: 99999;
}


.signup-control-button {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(49, 86, 107, .9);

    color: #FFFDF8;

    font-size: 17px;

    cursor: pointer;

    backdrop-filter: blur(12px);

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


.signup-control-button:hover {
    transform: translateY(-3px);

    background: var(--signup-teal);

    color: var(--signup-deep);
}


/* =========================================================
   MAIN
   ========================================================= */

.signup-main {
    width: 100%;
    min-height: 100vh;

    padding: 0;
}


.signup-container {
    width: 100%;
    min-height: 100vh;

    display: grid;

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

    gap: 0;

    align-items: stretch;
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

.signup-visual-section {
    position: relative;

    min-width: 0;
    min-height: 100vh;

    overflow: hidden;

    display: flex;
    align-items: center;

    isolation: isolate;
}


.signup-image-wrapper {
    position: absolute;

    inset: 0;

    z-index: -3;
}


.signup-main-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    animation:
        signupImageReveal
        1.4s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


@keyframes signupImageReveal {

    from {
        opacity: 0;
        transform: scale(1.10);
    }

    to {
        opacity: 1;
        transform: scale(1.02);
    }
}


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

.signup-image-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(49,86,107,.78) 0%,
            rgba(49,86,107,.62) 45%,
            rgba(49,86,107,.30) 100%
        );
}


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

.signup-visual-content {
    width: min(650px, 88%);

    margin-left: clamp(
        35px,
        7vw,
        100px
    );

    padding:
        90px
        30px
        70px
        0;

    color: #FFFFFF;
}


.signup-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #8BE0D6;

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

    letter-spacing: 2px;

    margin-bottom: 24px;
}


.signup-eyebrow i {
    font-size: 15px;
}


.signup-visual-content h1 {
    margin: 0;

    max-width: 650px;

    font-size: clamp(
        42px,
        4.3vw,
        72px
    );

    line-height: .98;

    font-weight: 900;

    letter-spacing: -2px;

    color: #FFFFFF;
}


.signup-visual-content h1 span {
    display: block;

    color: #78D0C7;
}


.signup-visual-description {
    max-width: 610px;

    margin: 30px 0 42px;

    font-size: clamp(
        16px,
        1.25vw,
        20px
    );

    line-height: 1.75;

    font-weight: 600;

    color: #F4F9F8;
}


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

.signup-benefits {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.signup-benefit {
    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;
}


.signup-benefit-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(120,189,181,.18);

    border: 1px solid rgba(139,224,214,.4);

    color: #8BE0D6;

    font-size: 19px;
}


.signup-benefit div {
    min-width: 0;
}


.signup-benefit strong {
    display: block;

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 900;

    margin-bottom: 3px;
}


.signup-benefit small {
    display: block;

    color: #E3EFEE;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   FLOATING LEAVES
   ========================================================= */

.signup-floating-leaf {
    position: absolute;

    color: rgba(139,224,214,.25);

    z-index: -1;

    pointer-events: none;
}


.signup-leaf-one {
    top: 14%;
    left: 10%;

    font-size: 72px;

    animation:
        signupLeafFloat
        6s
        ease-in-out
        infinite;
}


.signup-leaf-two {
    top: 8%;
    right: 12%;

    font-size: 48px;

    animation:
        signupLeafFloat
        5s
        ease-in-out
        .5s
        infinite;
}


.signup-leaf-three {
    bottom: 10%;
    right: 9%;

    font-size: 80px;

    animation:
        signupLeafFloat
        7s
        ease-in-out
        1s
        infinite;
}


@keyframes signupLeafFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(8deg);
    }
}


/* =========================================================
   RIGHT FORM SECTION
   ========================================================= */

.signup-form-section {
    min-width: 0;
    min-height: 100vh;

    display: flex;

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

    background: var(--signup-card);

    padding:
        70px
        clamp(35px, 6vw, 100px);

    overflow: hidden;
}


.signup-form-wrapper {
    width: min(610px, 100%);

    margin: 0 auto;
}


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

.signup-form-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--signup-teal);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.8px;

    margin-bottom: 13px;
}


.signup-form-heading h2 {
    margin: 0;

    color: var(--signup-deep);

    font-size: clamp(
        38px,
        3.5vw,
        58px
    );

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1.5px;
}


.signup-form-heading p {
    margin:
        18px
        0
        30px;

    color: var(--signup-text);

    font-size: 16px;

    line-height: 1.65;

    font-weight: 600;
}


/* =========================================================
   FORM
   ========================================================= */

.signup-form {
    width: 100%;
}


.signup-field-row {
    display: grid;

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

    gap: 18px;
}


.signup-field {
    width: 100%;

    margin-bottom: 19px;
}


.signup-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--signup-deep);

    font-size: 15px;

    font-weight: 900;
}


.signup-input-wrapper {
    position: relative;

    width: 100%;
}


.signup-input-wrapper > i {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--signup-primary);

    font-size: 16px;

    pointer-events: none;

    z-index: 2;
}


.signup-input-wrapper input {
    width: 100%;
    height: 56px;

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

    border-radius: 15px;

    outline: none;

    background: var(--signup-powder);

    color: var(--signup-text);

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    padding:
        0
        50px
        0
        50px;

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


.signup-input-wrapper input::placeholder {
    color: #78909A;

    opacity: 1;
}


.signup-input-wrapper input:focus {
    border-color: var(--signup-teal);

    background: var(--signup-card);

    box-shadow:
        0 0 0 4px
        rgba(120,189,181,.16);
}


.signup-input-wrapper input.signup-invalid {
    border-color: var(--signup-error);

    box-shadow:
        0 0 0 3px
        rgba(201,67,67,.10);

    animation:
        signupInputShake
        .35s
        ease;
}


@keyframes signupInputShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}


/* =========================================================
   PASSWORD BUTTON
   ========================================================= */

.signup-password-toggle {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    width: 35px;
    height: 35px;

    border: 0;

    background: transparent;

    color: var(--signup-primary);

    cursor: pointer;

    display: grid;
    place-items: center;
}


.signup-password-toggle:hover {
    color: var(--signup-deep);
}


/* =========================================================
   ERROR
   ========================================================= */

.signup-error {
    display: block;

    min-height: 18px;

    margin-top: 5px;

    color: var(--signup-error);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   TERMS
   ========================================================= */

.signup-terms {
    margin:
        0
        0
        16px;
}


.signup-checkbox-label {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;

    color: var(--signup-text);

    font-size: 14px;

    line-height: 1.5;

    font-weight: 700;
}


.signup-checkbox-label input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.signup-custom-checkbox {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    margin-top: 1px;

    border:
        2px solid
        var(--signup-primary);

    border-radius: 5px;

    background: transparent;

    display: grid;
    place-items: center;

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


.signup-checkbox-label input:checked
+ .signup-custom-checkbox {
    background: var(--signup-teal);

    border-color: var(--signup-teal);
}


.signup-checkbox-label input:checked
+ .signup-custom-checkbox::after {
    content: "\f00c";

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

    color: var(--signup-deep);

    font-size: 10px;
}


.signup-checkbox-label a {
    color: var(--signup-primary);

    font-weight: 900;

    text-decoration: none;
}


.signup-checkbox-label a:hover {
    color: var(--signup-teal);

    text-decoration: underline;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.signup-submit-button {
    width: 100%;
    min-height: 58px;

    border: 0;

    border-radius: 15px;

    display: flex;

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

    gap: 13px;

    background: var(--signup-deep);

    color: #FFFDF8;

    font-family: inherit;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 14px 30px
        rgba(49,86,107,.18);

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


.signup-submit-button:hover {
    transform: translateY(-3px);

    background: var(--signup-teal);

    color: var(--signup-deep);

    box-shadow:
        0 18px 35px
        rgba(49,86,107,.22);
}


.signup-submit-button i {
    transition:
        transform .3s ease;
}


.signup-submit-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SUCCESS
   ========================================================= */

.signup-success-message {
    display: none;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding: 11px 14px;

    border-radius: 10px;

    background: rgba(120,189,181,.15);

    color: var(--signup-deep);

    font-size: 13px;

    font-weight: 800;
}


.signup-success-message.show {
    display: flex;

    animation:
        signupSuccessReveal
        .4s
        ease;
}


@keyframes signupSuccessReveal {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   DIVIDER
   ========================================================= */

.signup-divider {
    display: flex;

    align-items: center;

    gap: 15px;

    margin:
        23px
        0
        17px;
}


.signup-divider span {
    height: 1px;

    flex: 1;

    background: var(--signup-border);
}


.signup-divider strong {
    color: #71848B;

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   SOCIAL BUTTONS
   ========================================================= */

.signup-social-buttons {
    display: grid;

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

    gap: 12px;
}


.signup-social-button {
    min-height: 52px;

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

    border-radius: 14px;

    background: var(--signup-powder);

    color: var(--signup-deep);

    display: flex;

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

    gap: 9px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

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


.signup-social-button:hover {
    transform: translateY(-3px);

    background: var(--signup-card);

    border-color: var(--signup-teal);
}


.signup-social-button i {
    font-size: 16px;
}


/* =========================================================
   LOGIN LINK
   ========================================================= */

.signup-login-text {
    margin:
        22px
        0
        0;

    text-align: center;

    color: var(--signup-text);

    font-size: 14px;

    font-weight: 700;
}


.signup-login-text a {
    color: var(--signup-primary);

    font-weight: 900;

    text-decoration: none;

    margin-left: 4px;
}


.signup-login-text a:hover {
    color: var(--signup-teal);

    text-decoration: underline;
}


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

.signup-reveal-left,
.signup-reveal-right {
    opacity: 0;
}


.signup-reveal-left {
    transform: translateX(-45px);
}


.signup-reveal-right {
    transform: translateX(45px);
}


.signup-reveal-left.signup-visible,
.signup-reveal-right.signup-visible {
    opacity: 1;

    transform: translateX(0);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}


.signup-benefit:nth-child(2).signup-visible {
    transition-delay: .12s;
}


.signup-benefit:nth-child(3).signup-visible {
    transition-delay: .24s;
}


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

@media (max-width: 1199px) {

    .signup-form-section {
        padding:
            60px
            45px;
    }


    .signup-visual-content {
        margin-left: 50px;

        padding-right: 20px;
    }


    .signup-visual-content h1 {
        font-size: 48px;
    }

}


/* =========================================================
   TABLET 768–1023
   ========================================================= */

@media (max-width: 1023px) {

    .signup-container {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .signup-visual-section {
        min-height: 620px;

        align-items: flex-end;
    }


    .signup-visual-content {
        width: min(720px, 88%);

        margin:
            0 auto;

        padding:
            100px
            0
            70px;
    }


    .signup-visual-content h1 {
        font-size: clamp(
            44px,
            7vw,
            62px
        );
    }


    .signup-form-section {
        min-height: auto;

        padding:
            75px
            8%;
    }


    .signup-form-wrapper {
        max-width: 680px;
    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    .signup-top-controls {
        top: 16px;
        right: 16px;
    }


    .signup-control-button {
        width: 43px;
        height: 43px;

        font-size: 15px;
    }


    .signup-visual-section {
        min-height: 560px;
    }


    .signup-visual-content {
        width: 88%;

        padding:
            90px
            0
            55px;
    }


    .signup-visual-content h1 {
        font-size: clamp(
            38px,
            10vw,
            52px
        );

        letter-spacing: -1px;
    }


    .signup-visual-description {
        font-size: 15px;

        margin:
            23px
            0
            30px;
    }


    .signup-form-section {
        padding:
            55px
            6%;
    }


    .signup-field-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .signup-form-heading h2 {
        font-size: 40px;
    }


    .signup-social-buttons {
        grid-template-columns: 1fr;
    }


    .signup-social-button {
        min-height: 50px;
    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (max-width: 575px) {

    .signup-visual-section {
        min-height: 525px;
    }


    .signup-visual-content {
        width: 86%;

        padding:
            85px
            0
            45px;
    }


    .signup-eyebrow,
    .signup-form-eyebrow {
        font-size: 11px;

        letter-spacing: 1.4px;
    }


    .signup-visual-content h1 {
        font-size: 38px;

        line-height: 1.02;
    }


    .signup-visual-description {
        font-size: 14px;

        line-height: 1.65;
    }


    .signup-benefits {
        gap: 15px;
    }


    .signup-benefit-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        font-size: 16px;
    }


    .signup-benefit strong {
        font-size: 14px;
    }


    .signup-benefit small {
        font-size: 11px;
    }


    .signup-form-section {
        padding:
            48px
            6%;
    }


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


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


    .signup-input-wrapper input {
        height: 53px;

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 400px) {

    .signup-top-controls {
        top: 12px;
        right: 12px;

        gap: 6px;
    }


    .signup-control-button {
        width: 39px;
        height: 39px;
    }


    .signup-visual-section {
        min-height: 500px;
    }


    .signup-visual-content {
        width: 87%;

        padding:
            75px
            0
            40px;
    }


    .signup-visual-content h1 {
        font-size: 34px;
    }


    .signup-visual-description {
        font-size: 13px;
    }


    .signup-form-section {
        padding:
            42px
            5%;
    }


    .signup-form-heading h2 {
        font-size: 32px;
    }


    .signup-field label {
        font-size: 14px;
    }


    .signup-submit-button {
        min-height: 55px;
    }


    .signup-social-button {
        font-size: 13px;
    }

}


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

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

    .signup-main-image,
    .signup-floating-leaf,
    .signup-reveal-left,
    .signup-reveal-right,
    .signup-submit-button,
    .signup-social-button {
        animation: none !important;

        transition: none !important;
    }

}

/* =========================================================
   MEDIVANA — 404 PAGE
   ========================================================= */

.med-404-body {
    margin: 0;
    min-height: 100vh;
    background: var(--med-bg);
    color: var(--med-text);
    overflow-x: hidden;
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

.med-404-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;

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

    padding: 90px 30px 55px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(120,189,181,.13),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(91,143,168,.12),
            transparent 28%
        ),
        var(--med-bg);
}


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

.med-404-controls {
    position: absolute;
    top: 25px;
    right: 35px;

    display: flex;
    gap: 10px;

    z-index: 100;
}


.med-404-control {
    width: 48px;
    height: 48px;

    border-radius: 50%;

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

    background: var(--med-card);

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

    display: grid;
    place-items: center;

    cursor: pointer;

    font-size: 17px;

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


.med-404-control:hover {
    transform: translateY(-4px) rotate(5deg);

    background: var(--med-deep-blue);

    color: #FFFDF8;
}


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

.med-404-content {
    position: relative;

    width: min(900px, 100%);

    text-align: center;

    z-index: 5;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.med-404-eyebrow {
    display: inline-flex;

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

    gap: 9px;

    color: var(--med-teal);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2.5px;

    margin-bottom: 18px;
}


.med-404-eyebrow i {
    font-size: 14px;

    animation:
        med404LeafPulse
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   ILLUSTRATION
   ========================================================= */

.med-404-illustration {
    position: relative;

    width: min(650px, 100%);

    height: 270px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;
}


/* =========================================================
   404 NUMBERS
   ========================================================= */

.med-404-number {
    font-size: clamp(
        150px,
        18vw,
        235px
    );

    line-height: .75;

    font-weight: 1000;

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

    user-select: none;

    text-shadow:
        0 20px 35px rgba(49,86,107,.10);

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


.number-four {
    transform-origin: center;
}


.number-four-right {
    animation-delay: .45s;
}


/* =========================================================
   MEDICAL BOTTLE
   ========================================================= */

.med-404-bottle {
    position: relative;

    width: 105px;

    height: 150px;

    z-index: 10;

    animation:
        med404BottleFloat
        3.5s
        ease-in-out
        infinite;
}


/* CAP */

.med-404-bottle-cap {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 65px;
    height: 25px;

    border-radius: 10px 10px 5px 5px;

    background: var(--med-primary);

    border: 2px solid var(--med-deep-blue);
}


.med-404-bottle-cap span {
    position: absolute;

    width: 45px;
    height: 4px;

    border-radius: 5px;

    left: 50%;
    top: 7px;

    transform: translateX(-50%);

    background: rgba(255,255,255,.55);
}


/* BODY */

.med-404-bottle-body {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 92px;
    height: 130px;

    border-radius: 20px 20px 25px 25px;

    background: var(--med-card);

    border: 2px solid var(--med-primary);

    box-shadow:
        0 22px 45px rgba(49,86,107,.18);

    overflow: hidden;
}


/* BOTTLE LABEL */

.med-404-bottle-label {
    position: absolute;

    left: 10px;
    right: 10px;

    top: 34px;

    padding: 10px 5px;

    text-align: center;

    border-top: 2px solid var(--med-powder-blue);

    border-bottom: 2px solid var(--med-powder-blue);

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

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1px;
}


.med-404-bottle-label i {
    color: var(--med-teal);

    font-size: 18px;
}


.med-404-bottle-label strong {
    font-size: 13px;

    letter-spacing: 1px;
}


.med-404-bottle-label small {
    font-size: 7px;

    letter-spacing: 2px;
}


/* PLUS */

.med-404-bottle-plus {
    position: absolute;

    bottom: 12px;
    left: 50%;

    transform: translateX(-50%);

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-teal);

    color: #FFFDF8;

    font-size: 17px;

    font-weight: 900;
}


/* =========================================================
   FLOATING ICONS
   ========================================================= */

.med-404-float-icon {
    position: absolute;

    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--med-card);

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

    box-shadow:
        0 15px 30px rgba(49,86,107,.12);

    color: var(--med-teal);

    z-index: 20;
}


.float-heart {
    top: 20px;
    right: 17%;

    animation:
        med404FloatOne
        3s
        ease-in-out
        infinite;
}


.float-capsule {
    left: 14%;
    bottom: 35px;

    color: var(--med-primary);

    animation:
        med404FloatTwo
        3.8s
        ease-in-out
        infinite;
}


.float-plus {
    right: 10%;
    bottom: 35px;

    background: var(--med-peach);

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

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


/* =========================================================
   TEXT
   ========================================================= */

.med-404-text {
    width: min(720px, 100%);

    margin: 0 auto;
}


.med-404-small-title {
    display: block;

    color: var(--med-primary);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 13px;
}


.med-404-text h1 {
    margin: 0;

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

    font-size: clamp(
        34px,
        5vw,
        58px
    );

    line-height: 1.08;

    font-weight: 1000;

    letter-spacing: -1.5px;
}


.med-404-text h1 span {
    display: inline;

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


.med-404-text p {
    max-width: 670px;

    margin: 20px auto 0;

    color: var(--med-text);

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;

    opacity: .88;
}


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

.med-404-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 30px;
}


.med-404-primary-btn,
.med-404-secondary-btn {
    min-height: 56px;

    padding: 0 25px;

    border-radius: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 850;

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


/* PRIMARY */

.med-404-primary-btn {
    background: var(--med-deep-blue);

    color: #FFFDF8;

    box-shadow:
        0 15px 30px rgba(49,86,107,.20);
}


.med-404-primary-btn:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 38px rgba(49,86,107,.28);
}


.med-404-primary-btn i:last-child {
    transition: transform .3s ease;
}


.med-404-primary-btn:hover i:last-child {
    transform: translateX(5px);
}


/* SECONDARY */

.med-404-secondary-btn {
    background: transparent;

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

    border: 1.5px solid var(--med-primary);
}


.med-404-secondary-btn:hover {
    transform: translateY(-5px);

    background: var(--med-powder-blue);

    border-color: var(--med-teal);
}


/* =========================================================
   SUPPORT
   ========================================================= */

.med-404-support {
    margin-top: 24px;

    color: var(--med-text);

    font-size: 13px;

    opacity: .72;
}


.med-404-support span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;
}


.med-404-support i {
    color: var(--med-teal);
}


/* =========================================================
   LEAF OVERLAYS
   ========================================================= */

.med-404-leaf {
    position: absolute;

    color: var(--med-teal);

    opacity: .16;

    pointer-events: none;
}


.med-404-leaf-one {
    left: 4%;
    top: 15%;

    font-size: 75px;

    transform: rotate(-25deg);

    animation:
        med404LeafFloat
        6s
        ease-in-out
        infinite;
}


.med-404-leaf-two {
    right: 5%;
    top: 25%;

    font-size: 48px;

    transform: rotate(30deg);

    animation:
        med404LeafFloat
        5s
        ease-in-out
        infinite
        reverse;
}


.med-404-leaf-three {
    left: 12%;
    bottom: 10%;

    font-size: 42px;

    transform: rotate(25deg);

    animation:
        med404LeafFloat
        5.5s
        ease-in-out
        infinite;
}


.med-404-leaf-four {
    right: 13%;
    bottom: 8%;

    font-size: 70px;

    transform: rotate(-20deg);

    animation:
        med404LeafFloat
        6.5s
        ease-in-out
        infinite
        reverse;
}


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

.med-404-reveal {
    opacity: 0;

    transform:
        translateY(35px)
        scale(.97);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}


.med-404-reveal.med-404-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.med-404-text.med-404-visible {
    transition-delay: .12s;
}


.med-404-actions.med-404-visible {
    transition-delay: .22s;
}


.med-404-support.med-404-visible {
    transition-delay: .32s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes med404BottleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-13px) rotate(2deg);
    }
}


@keyframes med404NumberFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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


@keyframes med404FloatOne {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }
}


@keyframes med404FloatTwo {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(13px) rotate(8deg);
    }
}


@keyframes med404FloatThree {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-11px) rotate(-8deg);
    }
}


@keyframes med404LeafFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -18px;
    }
}


@keyframes med404LeafPulse {

    0%,
    100% {
        transform: rotate(0) scale(1);
    }

    50% {
        transform: rotate(12deg) scale(1.12);
    }
}


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

@media (max-width: 1023px) {

    .med-404-page {
        padding:
            85px 25px 50px;
    }


    .med-404-illustration {
        height: 250px;
    }


    .med-404-number {
        font-size: clamp(
            130px,
            20vw,
            200px
        );
    }


    .med-404-bottle {
        transform: scale(.9);
    }


    .med-404-text p {
        font-size: 16px;
    }


    .med-404-leaf-one {
        font-size: 60px;
    }


    .med-404-leaf-four {
        font-size: 55px;
    }
}


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

@media (max-width: 767px) {

    .med-404-page {
        min-height: 100svh;

        padding:
            85px 20px 40px;
    }


    .med-404-controls {
        top: 18px;
        right: 20px;
    }


    .med-404-control {
        width: 43px;
        height: 43px;

        font-size: 15px;
    }


    .med-404-illustration {
        height: 210px;

        gap: 8px;
    }


    .med-404-number {
        font-size: clamp(
            95px,
            27vw,
            145px
        );
    }


    .med-404-bottle {
        width: 78px;
        height: 118px;
    }


    .med-404-bottle-body {
        width: 70px;
        height: 100px;

        border-radius: 15px;
    }


    .med-404-bottle-cap {
        width: 48px;
        height: 20px;
    }


    .med-404-bottle-label {
        top: 27px;

        padding: 7px 3px;
    }


    .med-404-bottle-label i {
        font-size: 13px;
    }


    .med-404-bottle-label strong {
        font-size: 9px;
    }


    .med-404-bottle-label small {
        font-size: 5px;
    }


    .med-404-bottle-plus {
        width: 21px;
        height: 21px;

        bottom: 8px;

        font-size: 13px;
    }


    .med-404-float-icon {
        width: 42px;
        height: 42px;

        font-size: 14px;
    }


    .float-heart {
        right: 8%;
        top: 8px;
    }


    .float-capsule {
        left: 5%;
        bottom: 18px;
    }


    .float-plus {
        right: 5%;
        bottom: 18px;
    }


    .med-404-text h1 {
        font-size: clamp(
            31px,
            8vw,
            44px
        );

        letter-spacing: -.8px;
    }


    .med-404-text p {
        font-size: 15px;

        line-height: 1.65;
    }


    .med-404-actions {
        flex-direction: column;

        width: 100%;

        gap: 11px;
    }


    .med-404-primary-btn,
    .med-404-secondary-btn {
        width: min(330px, 100%);

        min-height: 54px;
    }


    .med-404-leaf-one {
        left: -20px;
        top: 18%;

        font-size: 50px;
    }


    .med-404-leaf-two {
        right: -15px;
        top: 30%;

        font-size: 38px;
    }


    .med-404-leaf-three {
        left: -10px;

        font-size: 32px;
    }


    .med-404-leaf-four {
        right: -10px;

        font-size: 48px;
    }
}


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

@media (max-width: 480px) {

    .med-404-page {
        padding:
            78px 16px 30px;
    }


    .med-404-eyebrow {
        font-size: 10px;

        letter-spacing: 1.7px;
    }


    .med-404-illustration {
        height: 175px;

        margin-bottom: 10px;
    }


    .med-404-number {
        font-size: 92px;
    }


    .med-404-bottle {
        transform: scale(.72);
    }


    .med-404-float-icon {
        width: 36px;
        height: 36px;

        font-size: 12px;
    }


    .med-404-text h1 {
        font-size: 29px;

        line-height: 1.12;
    }


    .med-404-text p {
        font-size: 14px;

        line-height: 1.6;

        margin-top: 15px;
    }


    .med-404-small-title {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .med-404-primary-btn,
    .med-404-secondary-btn {
        width: 100%;

        font-size: 14px;
    }


    .med-404-support {
        font-size: 11px;

        line-height: 1.5;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .med-404-illustration {
        height: 155px;
    }


    .med-404-number {
        font-size: 78px;
    }


    .med-404-bottle {
        transform: scale(.62);
    }


    .med-404-text h1 {
        font-size: 26px;
    }


    .med-404-text p {
        font-size: 13px;
    }
}


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

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

    .med-404-leaf,
    .med-404-bottle,
    .med-404-number,
    .med-404-float-icon,
    .med-404-eyebrow i {
        animation: none !important;
    }


    .med-404-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }
}
/* =========================================================
   MEDIVANA — COMING SOON PAGE
========================================================= */

.coming-soon-page {

    --coming-bg: #FFF8EC;
    --coming-card: #FFFDF8;

    --coming-primary: #5B8FA8;
    --coming-deep: #31566B;

    --coming-powder: #DCECF2;
    --coming-teal: #78BDB5;
    --coming-peach: #F3B6A2;

    --coming-text: #34444B;
    --coming-muted: #60747C;

    position: relative;

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: var(--coming-bg);
    color: var(--coming-text);

    font-family: "Nunito", sans-serif;
}



/* =========================================================
   MAIN
========================================================= */

.coming-main {

    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        100px
        30px
        65px;

    overflow: hidden;
}



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

.coming-controls {

    position: fixed;

    top: 24px;
    right: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 9999;
}



.coming-control-button {

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid
        rgba(91,143,168,.25);

    border-radius: 50%;

    background:
        rgba(255,253,248,.78);

    color: var(--coming-deep);

    cursor: pointer;

    font-size: 16px;

    backdrop-filter: blur(12px);

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



.coming-control-button:hover {

    transform:
        translateY(-4px)
        rotate(5deg);

    background:
        var(--coming-teal);

    color: #FFFDF8;

    box-shadow:
        0 12px 30px
        rgba(49,86,107,.18);
}



.coming-rtl-button {

    font-size: 17px;
}



/* =========================================================
   BRAND
========================================================= */

.coming-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: var(--coming-deep);

    font-size: 25px;

    font-weight: 900;

    letter-spacing: -.5px;
}



.coming-brand i {

    color: var(--coming-teal);

    font-size: 25px;

    animation:
        comingLeafFloat
        3.5s
        ease-in-out
        infinite;
}



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

.coming-content {

    position: relative;

    z-index: 5;

    width: min(850px, 100%);

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;
}



/* =========================================================
   EYEBROW
========================================================= */

.coming-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: var(--coming-primary);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2.5px;

    margin-bottom: 22px;
}



.coming-eyebrow-line {

    width: 38px;
    height: 2px;

    background:
        var(--coming-teal);

    border-radius: 10px;
}



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

.coming-title {

    margin: 0;

    max-width: 850px;

    color: var(--coming-deep);

    font-size:
        clamp(52px, 7vw, 96px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 900;
}



.coming-title span {

    display: block;

    color: var(--coming-primary);

    margin-top: 8px;
}



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

.coming-description {

    width: min(680px, 100%);

    margin:
        30px
        auto
        0;

    color: var(--coming-text);

    font-size: 18px;

    line-height: 1.8;

    font-weight: 600;
}



/* =========================================================
   ANIMATED LINE
========================================================= */

.coming-animated-line {

    width:
        min(600px, 90%);

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        18px
        auto
        8px;
}



.coming-animated-line svg {

    width: 100%;
    height: 100%;
}



.coming-animated-line path {

    fill: none;

    stroke:
        var(--coming-teal);

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 750;

    stroke-dashoffset: 750;

    animation:
        comingCurveDraw
        2.4s
        ease
        forwards;
}



.coming-line-dot {

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--coming-peach);

    animation:
        comingDotPulse
        2s
        ease-in-out
        infinite;
}



/* =========================================================
   COUNTDOWN
========================================================= */

.coming-countdown {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 10px;
}



.coming-time-unit {

    min-width: 88px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;
}



.coming-time-unit strong {

    display: block;

    color: var(--coming-deep);

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

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;

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



.coming-time-unit strong.coming-number-change {

    animation:
        comingNumberPop
        .4s
        ease;
}



.coming-time-unit span {

    color: var(--coming-primary);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;
}



.coming-time-separator {

    color: var(--coming-teal);

    font-size: 34px;

    font-weight: 900;

    margin-top: -20px;

    animation:
        comingSeparatorPulse
        1s
        ease-in-out
        infinite;
}



/* =========================================================
   COUNTDOWN NOTE
========================================================= */

.coming-countdown-note {

    margin:
        20px
        0
        0;

    color: var(--coming-muted);

    font-size: 14px;

    font-weight: 700;
}



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

.coming-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;
}



.coming-primary-button,
.coming-secondary-button {

    min-height: 54px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 16px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

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



.coming-primary-button {

    background:
        var(--coming-deep);

    color: #FFFDF8;

    box-shadow:
        0 12px 30px
        rgba(49,86,107,.16);
}



.coming-secondary-button {

    border: 1.5px solid
        var(--coming-primary);

    background:
        transparent;

    color: var(--coming-deep);
}



.coming-primary-button:hover,
.coming-secondary-button:hover {

    transform:
        translateY(-5px);

}



.coming-primary-button:hover {

    background:
        var(--coming-teal);

    box-shadow:
        0 18px 35px
        rgba(49,86,107,.2);
}



.coming-secondary-button:hover {

    background:
        var(--coming-powder);

}



/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.coming-bottom-message {

    position: absolute;

    bottom: 24px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--coming-muted);

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;
}



.coming-bottom-message i {

    color: var(--coming-teal);

    animation:
        comingHeartBeat
        1.8s
        ease-in-out
        infinite;
}



/* =========================================================
   FLOATING HEALTHCARE ELEMENTS
========================================================= */

.coming-floating {

    position: absolute;

    z-index: 2;

    display: grid;

    place-items: center;

    border-radius: 50%;

    pointer-events: none;
}



.coming-capsule {

    top: 22%;

    left: 10%;

    width: 62px;
    height: 62px;

    background:
        var(--coming-powder);

    color:
        var(--coming-primary);

    font-size: 23px;

    animation:
        comingFloatOne
        5s
        ease-in-out
        infinite;
}



.coming-heart {

    top: 30%;

    right: 10%;

    width: 58px;
    height: 58px;

    background:
        rgba(120,189,181,.18);

    color:
        var(--coming-teal);

    font-size: 21px;

    animation:
        comingFloatTwo
        4.5s
        ease-in-out
        infinite;
}



.coming-plus {

    bottom: 22%;

    left: 14%;

    width: 45px;
    height: 45px;

    background:
        rgba(243,182,162,.35);

    color:
        var(--coming-primary);

    font-size: 18px;

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



/* =========================================================
   LEAVES
========================================================= */

.coming-decoration {

    position: absolute;

    z-index: 1;

    pointer-events: none;

    color:
        var(--coming-teal);

    opacity: .25;
}



.coming-decoration i {

    display: block;

    font-size: 70px;
}



.coming-leaf-one {

    top: 13%;

    left: 25%;

    animation:
        comingLeafRotate
        8s
        ease-in-out
        infinite;
}



.coming-leaf-two {

    right: 22%;

    bottom: 15%;

    animation:
        comingLeafFloat
        6s
        ease-in-out
        infinite;
}



.coming-leaf-three {

    left: 5%;

    bottom: 13%;

    opacity: .14;

    animation:
        comingLeafFloat
        7s
        ease-in-out
        infinite reverse;
}



/* =========================================================
   CURVES
========================================================= */

.coming-curve {

    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;

    opacity: .65;
}



.coming-curve-one {

    width: 480px;
    height: 180px;

    top: 5%;
    right: -160px;

    transform:
        rotate(-18deg);
}



.coming-curve-two {

    width: 500px;
    height: 190px;

    bottom: 2%;
    left: -180px;

    transform:
        rotate(18deg);
}



/* =========================================================
   DOTS
========================================================= */

.coming-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--coming-peach);

    pointer-events: none;

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



.coming-dot-one {

    top: 22%;
    right: 25%;
}



.coming-dot-two {

    top: 65%;
    right: 7%;

    width: 5px;
    height: 5px;

    animation-delay: .8s;
}



.coming-dot-three {

    bottom: 24%;
    left: 26%;

    width: 6px;
    height: 6px;

    animation-delay: 1.3s;
}



.coming-dot-four {

    top: 38%;
    left: 7%;

    width: 5px;
    height: 5px;

    animation-delay: 1.8s;
}



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

.coming-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.16,1,.3,1);
}



.coming-reveal.coming-visible {

    opacity: 1;

    transform:
        translateY(0);
}



/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes comingCurveDraw {

    to {
        stroke-dashoffset: 0;
    }
}



@keyframes comingDotPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
    }
}



@keyframes comingNumberPop {

    0% {
        transform:
            translateY(8px)
            scale(.8);
        opacity: .3;
    }

    60% {
        transform:
            translateY(-4px)
            scale(1.08);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
        opacity: 1;
    }
}



@keyframes comingSeparatorPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}



@keyframes comingFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-20px)
            rotate(8deg);
    }
}



@keyframes comingFloatTwo {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(0);
    }

    50% {
        transform:
            translate(-12px,-18px)
            rotate(-8deg);
    }
}



@keyframes comingFloatThree {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(12deg);
    }
}



@keyframes comingLeafFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-13px)
            rotate(8deg);
    }
}



@keyframes comingLeafRotate {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(8deg)
            translateY(-14px);
    }
}



@keyframes comingHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.18);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.12);
    }
}



@keyframes comingDotFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

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



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

@media (max-width: 1023px) {

    .coming-main {

        padding:
            100px
            30px
            70px;
    }


    .coming-title {

        font-size:
            clamp(48px, 8vw, 75px);

        letter-spacing:
            -2.5px;
    }


    .coming-description {

        font-size: 17px;

        max-width: 620px;
    }


    .coming-capsule {

        left: 5%;
    }


    .coming-heart {

        right: 5%;
    }


    .coming-leaf-one {

        left: 12%;
    }


    .coming-leaf-two {

        right: 10%;
    }

}



/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    .coming-main {

        min-height: 100svh;

        padding:
            90px
            20px
            80px;
    }


    .coming-controls {

        top: 16px;

        right: 16px;

        gap: 7px;
    }


    .coming-control-button {

        width: 43px;
        height: 43px;
    }


    .coming-brand {

        font-size: 22px;

        margin-bottom: 22px;
    }


    .coming-eyebrow {

        font-size: 10px;

        letter-spacing: 1.8px;

        gap: 8px;
    }


    .coming-eyebrow-line {

        width: 25px;
    }


    .coming-title {

        font-size:
            clamp(43px, 12vw, 63px);

        letter-spacing:
            -2px;
    }


    .coming-description {

        margin-top: 23px;

        font-size: 15px;

        line-height: 1.7;
    }


    .coming-animated-line {

        height: 55px;

        width: 95%;
    }


    .coming-countdown {

        gap: 8px;
    }


    .coming-time-unit {

        min-width: 58px;
    }


    .coming-time-unit strong {

        font-size: 30px;
    }


    .coming-time-unit span {

        font-size: 8px;

        letter-spacing: 1px;
    }


    .coming-time-separator {

        font-size: 25px;

        margin-top: -14px;
    }


    .coming-countdown-note {

        font-size: 12px;
    }


    .coming-actions {

        width: 100%;

        flex-direction: column;

        gap: 11px;

        margin-top: 25px;
    }


    .coming-primary-button,
    .coming-secondary-button {

        width:
            min(330px, 100%);

        min-height: 52px;
    }


    .coming-bottom-message {

        bottom: 20px;

        font-size: 10px;
    }


    .coming-floating {

        transform: scale(.8);
    }


    .coming-capsule {

        top: 20%;

        left: 1%;
    }


    .coming-heart {

        top: 28%;

        right: 1%;
    }


    .coming-plus {

        bottom: 25%;

        left: 5%;
    }


    .coming-decoration i {

        font-size: 48px;
    }


    .coming-leaf-one {

        top: 17%;

        left: 8%;
    }


    .coming-leaf-two {

        right: 5%;

        bottom: 17%;
    }


    .coming-leaf-three {

        display: none;
    }

}



/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 600px) {

    .coming-title {

        font-size:
            clamp(40px, 12vw, 54px);
    }


    .coming-description {

        max-width: 450px;

        font-size: 14px;
    }


    .coming-time-unit {

        min-width: 52px;
    }


    .coming-time-unit strong {

        font-size: 27px;
    }


    .coming-time-separator {

        font-size: 21px;
    }

}



/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 480px) {

    .coming-main {

        padding:
            82px
            15px
            76px;
    }


    .coming-controls {

        top: 12px;

        right: 12px;
    }


    .coming-control-button {

        width: 39px;
        height: 39px;

        font-size: 14px;
    }


    .coming-brand {

        font-size: 20px;

        margin-bottom: 18px;
    }


    .coming-eyebrow {

        font-size: 9px;

        letter-spacing: 1.4px;
    }


    .coming-eyebrow-line {

        width: 18px;
    }


    .coming-title {

        font-size:
            clamp(36px, 12vw, 48px);

        line-height: 1;

        letter-spacing:
            -1.5px;
    }


    .coming-description {

        font-size: 13px;

        line-height: 1.65;

        margin-top: 20px;
    }


    .coming-animated-line {

        width: 100%;

        height: 45px;
    }


    .coming-countdown {

        gap: 3px;
    }


    .coming-time-unit {

        min-width: 47px;
    }


    .coming-time-unit strong {

        font-size: 23px;
    }


    .coming-time-unit span {

        font-size: 7px;

        letter-spacing: .7px;
    }


    .coming-time-separator {

        font-size: 18px;

        margin-top: -12px;
    }


    .coming-countdown-note {

        font-size: 11px;

        margin-top: 15px;
    }


    .coming-primary-button,
    .coming-secondary-button {

        width: 100%;

        max-width: 290px;

        font-size: 13px;
    }


    .coming-bottom-message {

        max-width: 90%;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .coming-floating {

        transform: scale(.65);
    }


    .coming-capsule {

        left: -5%;
    }


    .coming-heart {

        right: -5%;
    }


    .coming-plus {

        left: -3%;
    }


    .coming-curve-one,
    .coming-curve-two {

        opacity: .35;
    }

}



/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .coming-main {

        padding-top: 110px;
    }


    .coming-title {

        font-size: 100px;
    }


    .coming-description {

        font-size: 19px;

        max-width: 720px;
    }


    .coming-capsule {

        left: 15%;
    }


    .coming-heart {

        right: 15%;
    }

}



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

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

    .coming-soon-page *,
    .coming-soon-page *::before,
    .coming-soon-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}

/* =========================================================
   HOME 1 — SECTION 2 REDESIGN
   MEDIVANA HEALTH JOURNEY
   ADD THIS BLOCK AT THE VERY END OF styles.css
========================================================= */


/* ---------------------------------------------------------
   SECTION
--------------------------------------------------------- */

.mv-trust-section {

    position: relative;

    overflow: hidden;

    min-height: 1180px;

    padding:
        120px
        5%
        100px;

    background: var(--med-card);

}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.mv-trust-heading {

    position: relative;

    z-index: 5;

    width: min(1050px, 100%);

    margin: 0 auto 70px;

    text-align: center;

}


.mv-trust-heading-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


.mv-trust-heading .mv-section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--med-primary);

    font-size: .76rem;

    font-weight: 900;

    letter-spacing: 1.8px;

}


.mv-trust-heading .mv-section-label i {

    animation:
        mvTrustSparkle 2.8s ease-in-out infinite;

}


.mv-trust-heading h2 {

    margin-top: 16px;

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

    font-size: clamp(2rem, 4vw, 3.35rem);

    line-height: 1.08;

    letter-spacing: -1.5px;

}


.mv-trust-heading h2 span {

    color: var(--med-teal);

}


.mv-trust-heading-leaf {

    color: var(--med-teal);

    font-size: 1.35rem;

    animation:
        mvTrustLeafFloat 3.5s ease-in-out infinite;

}


/* ---------------------------------------------------------
   JOURNEY WRAPPER
--------------------------------------------------------- */

.mv-trust-journey {

    position: relative;

    width: min(1180px, 100%);

    min-height: 900px;

    margin: auto;

}


/* ---------------------------------------------------------
   CENTRAL PATH
--------------------------------------------------------- */

.mv-trust-path {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 160px;

    transform: translateX(-50%);

    z-index: 1;

    pointer-events: none;

}


.mv-trust-path svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


.mv-trust-path-base,
.mv-trust-path-progress {

    fill: none;

    stroke-width: 2.5;

    vector-effect: non-scaling-stroke;

}


.mv-trust-path-base {

    stroke: var(--med-powder-blue);

    opacity: .9;

}


.mv-trust-path-progress {

    stroke: var(--med-teal);

    stroke-linecap: round;

    stroke-dasharray: 1500;

    stroke-dashoffset: 1500;

    opacity: 0;

}


.mv-trust-section.mv-trust-active
.mv-trust-path-progress {

    opacity: 1;

    animation:
        mvTrustPathDraw
        4.8s
        cubic-bezier(.2,.7,.2,1)
        forwards;

}


/* ---------------------------------------------------------
   JOURNEY ITEMS
--------------------------------------------------------- */

.mv-trust-journey-item {

    position: absolute;

    width: min(430px, 38%);

    min-height: 180px;

    padding: 0;

    margin: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    overflow: visible;

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    column-gap: 18px;

    opacity: 0;

    transition: none;

}


/* Remove old card effects */

.mv-trust-journey-item:hover {

    transform: none;

    box-shadow: none;

}


/* ---------------------------------------------------------
   POSITIONING
--------------------------------------------------------- */

.mv-trust-item-one {

    left: 0;

    top: 40px;

}


.mv-trust-item-two {

    right: 0;

    top: 270px;

}


.mv-trust-item-three {

    left: 0;

    top: 500px;

}


.mv-trust-item-four {

    right: 0;

    top: 730px;

}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.mv-trust-journey-number {

    position: absolute;

    top: -30px;

    font-size: clamp(4rem, 7vw, 6.2rem);

    line-height: 1;

    font-weight: 1000;

    letter-spacing: -5px;

    color: var(--med-primary);

    opacity: .13;

    pointer-events: none;

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.mv-trust-item-one
.mv-trust-journey-number,
.mv-trust-item-three
.mv-trust-journey-number {

    left: 0;

}


.mv-trust-item-two
.mv-trust-journey-number,
.mv-trust-item-four
.mv-trust-journey-number {

    right: 0;

}


/* ---------------------------------------------------------
   NODE
--------------------------------------------------------- */

.mv-trust-node {

    position: relative;

    z-index: 5;

    width: 66px;

    height: 66px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border: 2px solid var(--med-teal);

    border-radius: 50%;

    background: var(--med-card);

    color: var(--med-primary);

    font-size: 1.15rem;

    box-shadow:
        0 0 0 9px
        color-mix(
            in srgb,
            var(--med-card) 78%,
            transparent
        );

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;

}


.mv-trust-node::after {

    content: "";

    position: absolute;

    inset: -7px;

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

    border-radius: 50%;

    opacity: .2;

    transform: scale(.85);

    animation:
        mvTrustNodePulse
        3s
        ease-in-out
        infinite;

}


.mv-trust-journey-item:hover
.mv-trust-node {

    background: var(--med-teal);

    color: var(--med-card);

    transform:
        scale(1.08)
        rotate(8deg);

    box-shadow:
        0 0 0 9px
        color-mix(
            in srgb,
            var(--med-card) 78%,
            transparent
        ),
        0 12px 35px
        rgba(120,189,181,.25);

}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.mv-trust-journey-content {

    position: relative;

    z-index: 4;

}


.mv-trust-mini-label {

    display: block;

    margin-bottom: 7px;

    color: var(--med-teal);

    font-size: .68rem;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.mv-trust-journey-content h3 {

    margin: 0;

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

    font-size: clamp(1.1rem, 1.8vw, 1.45rem);

    line-height: 1.25;

}


.mv-trust-journey-content p {

    max-width: 360px;

    margin-top: 9px;

    color: var(--med-text);

    font-size: .92rem;

    line-height: 1.65;

    opacity: .75;

}


/* ---------------------------------------------------------
   SIDE CONNECTOR
--------------------------------------------------------- */

.mv-trust-journey-item::before {

    content: "";

    position: absolute;

    top: 50%;

    width: 95px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--med-teal)
        );

    opacity: .55;

    transform: translateY(-50%);

}


.mv-trust-item-one::before,
.mv-trust-item-three::before {

    right: -95px;

}


.mv-trust-item-two::before,
.mv-trust-item-four::before {

    left: -95px;

    transform:
        translateY(-50%)
        rotate(180deg);

}


/* ---------------------------------------------------------
   COLLISION ANIMATION
--------------------------------------------------------- */

.mv-trust-journey-item.mv-trust-from-left {

    transform:
        translateX(-120px)
        rotate(-3deg)
        scale(.94);

}


.mv-trust-journey-item.mv-trust-from-right {

    transform:
        translateX(120px)
        rotate(3deg)
        scale(.94);

}


.mv-trust-journey-item.mv-trust-visible {

    opacity: 1;

}


.mv-trust-journey-item.mv-trust-from-left.mv-trust-visible {

    animation:
        mvTrustLeftCollision
        1.15s
        cubic-bezier(.16,1,.3,1)
        forwards;

}


.mv-trust-journey-item.mv-trust-from-right.mv-trust-visible {

    animation:
        mvTrustRightCollision
        1.15s
        .12s
        cubic-bezier(.16,1,.3,1)
        forwards;

}


/* ---------------------------------------------------------
   STAGGER
--------------------------------------------------------- */

.mv-trust-item-two.mv-trust-visible {

    animation-delay: .12s;

}


.mv-trust-item-three.mv-trust-visible {

    animation-delay: .24s;

}


.mv-trust-item-four.mv-trust-visible {

    animation-delay: .36s;

}


/* ---------------------------------------------------------
   ACTIVE NUMBER
--------------------------------------------------------- */

.mv-trust-journey-item.mv-trust-visible
.mv-trust-journey-number {

    animation:
        mvTrustNumberReveal
        .9s
        .25s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* ---------------------------------------------------------
   FLOATING LEAVES
--------------------------------------------------------- */

.mv-trust-floating-leaf {

    position: absolute;

    z-index: 0;

    color: var(--med-teal);

    pointer-events: none;

}


.mv-trust-leaf-one {

    top: 15%;

    left: 5%;

    font-size: 48px;

    opacity: .13;

    transform: rotate(-25deg);

    animation:
        mvTrustFloatingLeafOne
        7s
        ease-in-out
        infinite;

}


.mv-trust-leaf-two {

    top: 48%;

    right: 5%;

    font-size: 34px;

    opacity: .12;

    transform: rotate(35deg);

    animation:
        mvTrustFloatingLeafTwo
        8s
        ease-in-out
        infinite;

}


.mv-trust-leaf-three {

    bottom: 8%;

    left: 18%;

    font-size: 28px;

    opacity: .10;

    transform: rotate(-45deg);

    animation:
        mvTrustFloatingLeafThree
        6s
        ease-in-out
        infinite;

}


/* ---------------------------------------------------------
   SCROLL NOTE
--------------------------------------------------------- */

.mv-trust-scroll-note {

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

}


.mv-trust-scroll-note span {

    width: 1px;

    height: 32px;

    background: var(--med-teal);

    animation:
        mvTrustScrollLine
        1.8s
        ease-in-out
        infinite;

}


.mv-trust-scroll-note small {

    color: var(--med-primary);

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: 1.6px;

    opacity: .65;

}


/* ---------------------------------------------------------
   KEYFRAMES
--------------------------------------------------------- */

@keyframes mvTrustPathDraw {

    from {
        stroke-dashoffset: 1500;
    }

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes mvTrustLeftCollision {

    0% {

        opacity: 0;

        transform:
            translateX(-120px)
            rotate(-3deg)
            scale(.94);

    }

    55% {

        opacity: 1;

        transform:
            translateX(15px)
            rotate(1deg)
            scale(1.015);

    }

    72% {

        transform:
            translateX(-6px)
            rotate(-.4deg)
            scale(.995);

    }

    88% {

        transform:
            translateX(2px)
            rotate(.15deg)
            scale(1.002);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);

    }

}


@keyframes mvTrustRightCollision {

    0% {

        opacity: 0;

        transform:
            translateX(120px)
            rotate(3deg)
            scale(.94);

    }

    55% {

        opacity: 1;

        transform:
            translateX(-15px)
            rotate(-1deg)
            scale(1.015);

    }

    72% {

        transform:
            translateX(6px)
            rotate(.4deg)
            scale(.995);

    }

    88% {

        transform:
            translateX(-2px)
            rotate(-.15deg)
            scale(1.002);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);

    }

}


@keyframes mvTrustNumberReveal {

    0% {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.8);

    }

    100% {

        opacity: .13;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes mvTrustNodePulse {

    0%,
    100% {

        transform: scale(.88);

        opacity: .12;

    }

    50% {

        transform: scale(1.12);

        opacity: .32;

    }

}


@keyframes mvTrustFloatingLeafOne {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            rotate(-25deg);

    }

    50% {

        transform:
            translate3d(18px,-24px,0)
            rotate(-8deg);

    }

}


@keyframes mvTrustFloatingLeafTwo {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            rotate(35deg);

    }

    50% {

        transform:
            translate3d(-20px,20px,0)
            rotate(58deg);

    }

}


@keyframes mvTrustFloatingLeafThree {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            rotate(-45deg);

    }

    50% {

        transform:
            translate3d(14px,-18px,0)
            rotate(-20deg);

    }

}


@keyframes mvTrustScrollLine {

    0%,
    100% {

        transform:
            scaleY(.5)
            translateY(-4px);

        opacity: .4;

    }

    50% {

        transform:
            scaleY(1)
            translateY(4px);

        opacity: 1;

    }

}


@keyframes mvTrustSparkle {

    0%,
    100% {

        transform: rotate(0) scale(1);

    }

    50% {

        transform: rotate(15deg) scale(1.15);

    }

}


@keyframes mvTrustLeafFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0);

    }

    50% {

        transform:
            translateY(-5px)
            rotate(8deg);

    }

}


/* =========================================================
   LARGE LAPTOP / DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .mv-trust-section {

        min-height: 1180px;

    }

}


/* =========================================================
   LAPTOP — 1024–1199
========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .mv-trust-section {

        min-height: 1080px;

        padding-left: 4%;

        padding-right: 4%;

    }


    .mv-trust-journey {

        min-height: 850px;

    }


    .mv-trust-journey-item {

        width: 39%;

    }


    .mv-trust-path {

        width: 130px;

    }


    .mv-trust-item-one {

        top: 35px;

    }


    .mv-trust-item-two {

        top: 250px;

    }


    .mv-trust-item-three {

        top: 465px;

    }


    .mv-trust-item-four {

        top: 680px;

    }


    .mv-trust-journey-item::before {

        width: 75px;

    }


    .mv-trust-item-one::before,
    .mv-trust-item-three::before {

        right: -75px;

    }


    .mv-trust-item-two::before,
    .mv-trust-item-four::before {

        left: -75px;

    }

}


/* =========================================================
   TABLET — 768–1023
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .mv-trust-section {

        min-height: auto;

        padding:
            90px
            7%
            90px;

    }


    .mv-trust-heading {

        margin-bottom: 55px;

    }


    .mv-trust-journey {

        min-height: 980px;

        width: min(680px, 100%);

    }


    .mv-trust-path {

        left: 50%;

        width: 100px;

    }


    .mv-trust-journey-item {

        width: 46%;

        min-height: 175px;

    }


    .mv-trust-item-one {

        top: 25px;

    }


    .mv-trust-item-two {

        top: 280px;

    }


    .mv-trust-item-three {

        top: 535px;

    }


    .mv-trust-item-four {

        top: 790px;

    }


    .mv-trust-node {

        width: 58px;

        height: 58px;

    }


    .mv-trust-journey-content h3 {

        font-size: 1.05rem;

    }


    .mv-trust-journey-content p {

        font-size: .82rem;

    }


    .mv-trust-journey-item::before {

        display: none;

    }


    .mv-trust-leaf-one {

        left: 2%;

    }


    .mv-trust-leaf-two {

        right: 2%;

    }

}


/* =========================================================
   MOBILE L / M — <=767
========================================================= */

@media (max-width: 767px) {

    .mv-trust-section {

        min-height: auto;

        padding:
            75px
            6%
            80px;

    }


    .mv-trust-heading {

        margin-bottom: 40px;

        text-align: center;

    }


    .mv-trust-heading-line {

        gap: 8px;

    }


    .mv-trust-heading .mv-section-label {

        font-size: .62rem;

        letter-spacing: 1.2px;

    }


    .mv-trust-heading h2 {

        margin-top: 12px;

        font-size:
            clamp(
                1.8rem,
                8.5vw,
                2.5rem
            );

        letter-spacing: -1px;

    }


    .mv-trust-heading-leaf {

        font-size: 1rem;

    }


    .mv-trust-journey {

        width: 100%;

        min-height: 1060px;

        padding-left: 28px;

    }


    .mv-trust-path {

        left: 28px;

        width: 50px;

        transform: translateX(-50%);

    }


    .mv-trust-journey-item {

        left: 0 !important;

        right: auto !important;

        width: 100%;

        min-height: 210px;

        grid-template-columns:
            56px
            1fr;

        column-gap: 14px;

        padding-left: 0;

        padding-right: 0;

    }


    .mv-trust-item-one {

        top: 20px;

    }


    .mv-trust-item-two {

        top: 270px;

    }


    .mv-trust-item-three {

        top: 520px;

    }


    .mv-trust-item-four {

        top: 770px;

    }


    .mv-trust-node {

        width: 54px;

        height: 54px;

        font-size: 1rem;

    }


    .mv-trust-journey-content {

        padding-right: 5px;

    }


    .mv-trust-mini-label {

        font-size: .58rem;

        letter-spacing: 1.1px;

    }


    .mv-trust-journey-content h3 {

        font-size: 1.05rem;

        line-height: 1.3;

    }


    .mv-trust-journey-content p {

        max-width: none;

        margin-top: 7px;

        font-size: .82rem;

        line-height: 1.6;

        opacity: .8;

    }


    .mv-trust-journey-number {

        top: -13px;

        left: 70px !important;

        right: auto !important;

        font-size: 4rem;

        letter-spacing: -3px;

    }


    .mv-trust-journey-item::before {

        display: none;

    }


    .mv-trust-leaf-one {

        top: 12%;

        left: auto;

        right: 4%;

        font-size: 35px;

    }


    .mv-trust-leaf-two {

        top: 54%;

        right: 3%;

        font-size: 28px;

    }


    .mv-trust-leaf-three {

        bottom: 7%;

        left: auto;

        right: 14%;

        font-size: 24px;

    }


    .mv-trust-scroll-note {

        margin-top: 15px;

    }

}


/* =========================================================
   MOBILE S — <=480
========================================================= */

@media (max-width: 480px) {

    .mv-trust-section {

        padding:
            68px
            5%
            70px;

    }


    .mv-trust-heading {

        margin-bottom: 34px;

    }


    .mv-trust-heading .mv-section-label {

        font-size: .56rem;

        letter-spacing: .9px;

    }


    .mv-trust-heading h2 {

        font-size: 1.72rem;

        line-height: 1.15;

    }


    .mv-trust-journey {

        min-height: 1050px;

        padding-left: 23px;

    }


    .mv-trust-path {

        left: 23px;

        width: 42px;

    }


    .mv-trust-journey-item {

        grid-template-columns:
            48px
            1fr;

        column-gap: 11px;

        min-height: 215px;

    }


    .mv-trust-node {

        width: 46px;

        height: 46px;

        font-size: .9rem;

    }


    .mv-trust-journey-number {

        left: 60px !important;

        font-size: 3.4rem;

    }


    .mv-trust-journey-content h3 {

        font-size: .98rem;

    }


    .mv-trust-journey-content p {

        font-size: .78rem;

        line-height: 1.55;

    }


    .mv-trust-mini-label {

        font-size: .53rem;

    }


    .mv-trust-scroll-note small {

        font-size: .52rem;

        letter-spacing: 1.1px;

    }

}


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

html.reduce-motion
.mv-trust-path-progress,
html.reduce-motion
.mv-trust-journey-item,
html.reduce-motion
.mv-trust-floating-leaf,
html.reduce-motion
.mv-trust-node::after {

    animation: none !important;

    transition: none !important;

}

/* =========================================================
   HOME 1 — SECTION 2
   MOBILE TRUST JOURNEY
   ICON ABOVE CURVE FIX
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       TRUST JOURNEY STACKING
       ----------------------------------------------------- */

    .mv-trust-section .mv-trust-journey {
        position: relative;
        isolation: isolate;
    }


    /* -----------------------------------------------------
       DECORATIVE CURVE / SVG
       MUST ALWAYS STAY BEHIND CONTENT
       ----------------------------------------------------- */

    .mv-trust-section .mv-trust-path {
        position: absolute !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }


    .mv-trust-section .mv-trust-path svg {
        position: relative;
        z-index: 0 !important;
        pointer-events: none !important;
    }


    .mv-trust-section .mv-trust-path-base,
    .mv-trust-section .mv-trust-path-progress {
        position: relative;
        z-index: 0 !important;
    }


    /* -----------------------------------------------------
       EACH JOURNEY ITEM ABOVE THE CURVE
       ----------------------------------------------------- */

    .mv-trust-section .mv-trust-journey-item {
        position: relative !important;
        z-index: 10 !important;
    }


    /* -----------------------------------------------------
       CIRCULAR ICON NODE
       HIGHEST PRIORITY
       ----------------------------------------------------- */

    .mv-trust-section .mv-trust-node {
        position: relative !important;
        z-index: 100 !important;
        isolation: isolate;
    }


    /* Icon circle itself */
    .mv-trust-section .mv-trust-node::before,
    .mv-trust-section .mv-trust-node::after {
        z-index: -1;
    }


    /* Actual Font Awesome icon */
    .mv-trust-section .mv-trust-node i {
        position: relative !important;
        z-index: 101 !important;
    }


    /* -----------------------------------------------------
       TEXT ALSO STAYS ABOVE THE CURVE
       ----------------------------------------------------- */

    .mv-trust-section .mv-trust-journey-item .mv-trust-content {
        position: relative;
        z-index: 20 !important;
    }


    .mv-trust-section .mv-trust-journey-item h3,
    .mv-trust-section .mv-trust-journey-item p,
    .mv-trust-section .mv-trust-journey-item span,
    .mv-trust-section .mv-trust-journey-item small {
        position: relative;
        z-index: 20 !important;
    }

}

/* =========================================================
   MEDIVANA — GLOBAL CUSTOM CURSOR
   Isolated system
   Does not modify existing components
   ========================================================= */

/* ---------------------------------------------------------
   CURSOR VARIABLES
   --------------------------------------------------------- */

:root {

    --med-cursor-dot:
        var(--med-deep-blue);

    --med-cursor-ring:
        var(--med-primary);

    --med-cursor-ring-soft:
        rgba(91, 143, 168, 0.18);

    --med-cursor-hover:
        var(--med-teal);

    --med-cursor-click:
        var(--med-peach);
}


/* ---------------------------------------------------------
   CURSOR ELEMENTS
   --------------------------------------------------------- */

.med-custom-cursor,
.med-custom-cursor-ring,
.med-custom-cursor-dot {

    position: fixed;

    top: 0;
    left: 0;

    pointer-events: none;

    user-select: none;

    will-change:
        transform,
        width,
        height,
        opacity;

    z-index: 2147483647;

    direction: ltr;
}


/* ---------------------------------------------------------
   OUTER RING
   --------------------------------------------------------- */

.med-custom-cursor-ring {

    width: 38px;
    height: 38px;

    border: 1.5px solid var(--med-cursor-ring);

    border-radius: 50%;

    opacity: 0.78;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    transition:
        width .28s cubic-bezier(.16, 1, .3, 1),
        height .28s cubic-bezier(.16, 1, .3, 1),
        border-color .25s ease,
        background .25s ease,
        opacity .25s ease,
        border-width .25s ease;

    box-shadow:
        0 0 0 0 var(--med-cursor-ring-soft);
}


/* ---------------------------------------------------------
   CENTER DOT
   --------------------------------------------------------- */

.med-custom-cursor-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--med-cursor-dot);

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    transition:
        width .2s ease,
        height .2s ease,
        background .2s ease,
        transform .2s ease;
}


/* ---------------------------------------------------------
   INNER GLOW
   --------------------------------------------------------- */

.med-custom-cursor-ring::after {

    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    background:
        var(--med-cursor-ring-soft);

    opacity: 0;

    transform: scale(.4);

    transition:
        opacity .25s ease,
        transform .3s cubic-bezier(.16, 1, .3, 1);
}


/* ---------------------------------------------------------
   HOVER — LINKS / BUTTONS / CLICKABLE ELEMENTS
   --------------------------------------------------------- */

.med-custom-cursor-hover
.med-custom-cursor-ring {

    width: 58px;
    height: 58px;

    border-color:
        var(--med-cursor-hover);

    background:
        var(--med-cursor-ring-soft);

    opacity: .95;

    border-width: 1px;
}


.med-custom-cursor-hover
.med-custom-cursor-ring::after {

    opacity: 1;

    transform: scale(1);
}


.med-custom-cursor-hover
.med-custom-cursor-dot {

    width: 10px;
    height: 10px;

    background:
        var(--med-cursor-hover);

    transform:
        translate3d(
            -50%,
            -50%,
            0
        )
        scale(1.15);
}


/* ---------------------------------------------------------
   TEXT / INPUT STATE
   --------------------------------------------------------- */

.med-custom-cursor-text
.med-custom-cursor-ring {

    width: 30px;
    height: 30px;

    border-width: 1px;

    opacity: .7;
}


.med-custom-cursor-text
.med-custom-cursor-dot {

    width: 4px;
    height: 18px;

    border-radius: 3px;

    background:
        var(--med-cursor-ring);
}


/* ---------------------------------------------------------
   CLICK ANIMATION
   --------------------------------------------------------- */

.med-custom-cursor-click
.med-custom-cursor-ring {

    width: 72px;
    height: 72px;

    border-color:
        var(--med-cursor-click);

    background:
        transparent;

    opacity: 0;

    animation:
        medCursorClick
        .5s
        cubic-bezier(.16, 1, .3, 1);
}


.med-custom-cursor-click
.med-custom-cursor-dot {

    width: 12px;
    height: 12px;

    background:
        var(--med-cursor-click);

    animation:
        medCursorDotClick
        .35s
        ease-out;
}


@keyframes medCursorClick {

    0% {

        opacity: 1;

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(.65);
    }

    70% {

        opacity: .55;

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(1.05);
    }

    100% {

        opacity: 0;

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(1.25);
    }
}


@keyframes medCursorDotClick {

    0% {

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(1);
    }

    50% {

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(.55);
    }

    100% {

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(1);
    }
}


/* ---------------------------------------------------------
   ENABLE NATIVE CURSOR ONLY WHEN CUSTOM CURSOR IS OFF
   --------------------------------------------------------- */

html.med-custom-cursor-enabled,
html.med-custom-cursor-enabled body {

    cursor: none;
}


/* Keep custom cursor hidden until JS activates it */
.med-custom-cursor {

    display: none;

    opacity: 0;

    visibility: hidden;
}


/* ---------------------------------------------------------
   ACTIVE STATE
   --------------------------------------------------------- */

html.med-custom-cursor-enabled
.med-custom-cursor {

    display: block;

    opacity: 1;

    visibility: visible;
}


/* ---------------------------------------------------------
   CLICKABLE ELEMENTS
   Don't alter their existing cursor styling.
   Custom cursor handles the visual pointer.
   --------------------------------------------------------- */

html.med-custom-cursor-enabled
a,
html.med-custom-cursor-enabled
button,
html.med-custom-cursor-enabled
[role="button"],
html.med-custom-cursor-enabled
input[type="submit"],
html.med-custom-cursor-enabled
input[type="button"],
html.med-custom-cursor-enabled
input[type="reset"] {

    cursor: none;
}


/* ---------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------- */

html.med-custom-cursor-enabled
input,
html.med-custom-cursor-enabled
textarea,
html.med-custom-cursor-enabled
select {

    cursor: none;
}


/* ---------------------------------------------------------
   TOUCH / MOBILE SAFETY
   --------------------------------------------------------- */

@media (pointer: coarse) {

    .med-custom-cursor,
    .med-custom-cursor-ring,
    .med-custom-cursor-dot {

        display: none !important;

        visibility: hidden !important;
    }

    html.med-custom-cursor-enabled,
    html.med-custom-cursor-enabled body {

        cursor: auto !important;
    }

    html.med-custom-cursor-enabled a,
    html.med-custom-cursor-enabled button,
    html.med-custom-cursor-enabled input,
    html.med-custom-cursor-enabled textarea,
    html.med-custom-cursor-enabled select {

        cursor: auto !important;
    }
}


/* ---------------------------------------------------------
   VERY SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .med-custom-cursor,
    .med-custom-cursor-ring,
    .med-custom-cursor-dot {

        display: none !important;
    }

    html.med-custom-cursor-enabled,
    html.med-custom-cursor-enabled body {

        cursor: auto !important;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .med-custom-cursor-ring,
    .med-custom-cursor-dot {

        transition: none !important;

        animation: none !important;
    }
}

/* =========================================================
   HOME 1 — SECTION 2 HEADING ONLY
   Keep all other Section 2 styles unchanged
   ========================================================= */

.mv-trust-heading h2 {
    font-family: inherit;
    font-size: clamp(2.6rem, 4.2vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--med-deep-blue);
    margin: 0;
}

.mv-trust-heading h2 span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--med-primary);
}
/* =========================================================
   SECTION 2 HEADING — RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .mv-trust-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    }

}

@media (max-width: 1023px) {

    .mv-trust-heading h2 {
        font-size: clamp(2.25rem, 5vw, 3.2rem);
        line-height: 1.1;
    }

}

@media (max-width: 767px) {

    .mv-trust-heading h2 {
        font-size: clamp(2rem, 7vw, 2.7rem);
        line-height: 1.12;
        letter-spacing: -0.025em;
    }

}

@media (max-width: 480px) {

    .mv-trust-heading h2 {
        font-size: 2rem;
        line-height: 1.14;
        letter-spacing: -0.02em;
    }

}

/* =========================================================
   MEDIVANA LOGIN + SIGNUP
   BACK TO HOME BUTTON
   ========================================================= */


/* =========================================================
   LOGIN — BACK TO HOME
   ========================================================= */

.login-back-home {

    position: fixed;

    top: 24px;
    left: 28px;

    z-index: 99999;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 17px;

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

    border-radius: 30px;

    background:
        rgba(49,86,107,.88);

    color: #FFFDF8;

    text-decoration: none;

    font-family: "Nunito", sans-serif;

    font-size: .86rem;

    font-weight: 900;

    white-space: nowrap;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 10px 30px rgba(16,42,53,.16);

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


.login-back-home i {

    font-size: .85rem;

    transition:
        transform .3s ease;

}


.login-back-home:hover {

    transform:
        translateY(-3px);

    background:
        var(--login-teal);

    color:
        #ffffff;

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

    box-shadow:
        0 15px 35px rgba(49,86,107,.22);
}


.login-back-home:hover i {

    transform:
        translateX(-4px);

}


/* =========================================================
   SIGNUP — BACK TO HOME
   ========================================================= */

.signup-back-home {

    position: fixed;

    top: 24px;
    left: 28px;

    z-index: 99999;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 0 18px;

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

    border-radius: 30px;

    background:
        rgba(49,86,107,.90);

    color:
        #FFFDF8;

    text-decoration: none;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        .86rem;

    font-weight:
        900;

    white-space:
        nowrap;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 30px rgba(16,42,53,.16);

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


.signup-back-home i {

    font-size:
        .85rem;

    transition:
        transform .3s ease;

}


.signup-back-home:hover {

    transform:
        translateY(-3px);

    background:
        var(--signup-teal);

    color:
        #ffffff;

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

    box-shadow:
        0 15px 35px rgba(49,86,107,.22);
}


.signup-back-home:hover i {

    transform:
        translateX(-4px);

}


/* =========================================================
   LOGIN — KEEP BUTTONS CLEAR OF EACH OTHER
   ========================================================= */

.login-back-home,
.login-top-controls {

    pointer-events:
        auto;
}


/* =========================================================
   RESPONSIVE — LAPTOP / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .login-back-home,
    .signup-back-home {

        top: 20px;
        left: 20px;

        min-height: 44px;

        padding:
            0 15px;

        font-size:
            .82rem;
    }


    .login-top-controls,
    .signup-top-controls {

        top: 20px;
        right: 20px;
    }

}


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

@media (max-width: 1023px) {

    .login-back-home,
    .signup-back-home {

        top: 18px;
        left: 18px;

        min-height: 43px;

        padding:
            0 14px;

        font-size:
            .80rem;
    }


    .login-top-controls,
    .signup-top-controls {

        top: 18px;
        right: 18px;
    }

}


/* =========================================================
   MOBILE LARGE / MEDIUM
   ========================================================= */

@media (max-width: 767px) {

    .login-back-home,
    .signup-back-home {

        top: 14px;
        left: 14px;

        min-height: 40px;

        padding:
            0 12px;

        gap: 7px;

        font-size:
            .76rem;

        box-shadow:
            0 8px 22px rgba(16,42,53,.14);
    }


    .login-back-home i,
    .signup-back-home i {

        font-size:
            .75rem;
    }


    .login-top-controls,
    .signup-top-controls {

        top: 14px;
        right: 14px;

        gap: 7px;
    }

}


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

@media (max-width: 480px) {

    .login-back-home,
    .signup-back-home {

        top: 12px;
        left: 12px;

        min-height: 38px;

        padding:
            0 11px;

        gap: 6px;

        font-size:
            .70rem;

        border-radius:
            24px;
    }


    .login-back-home i,
    .signup-back-home i {

        font-size:
            .68rem;
    }


    .login-top-controls,
    .signup-top-controls {

        top: 12px;
        right: 12px;

        gap: 6px;
    }

}


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

@media (max-width: 380px) {

    .login-back-home,
    .signup-back-home {

        top: 10px;
        left: 10px;

        min-height: 36px;

        padding:
            0 10px;

        font-size:
            .67rem;
    }


    .login-top-controls,
    .signup-top-controls {

        top: 10px;
        right: 10px;
    }

}