/* =====================================================
   VMSS HOMEPAGE HERO
   Premium ENT & Head and Neck Oncology Banner
===================================================== */

:root {
    --hero-navy: #09243e;
    --hero-teal: #006f83;
    --hero-gold: #b48a4c;
    --hero-gold-light: #e7c78b;
    --hero-cream: #f8f5ee;
    --hero-muted: #4b596b;
    --hero-ease: cubic-bezier(.22, 1, .36, 1);
}

.vmss-hero,
.vmss-hero * {
    box-sizing: border-box;
}

.vmss-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 620px;
    margin: 0;
    padding: 65px 0 52px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 75% 20%,
            rgba(219, 200, 165, .18),
            transparent 45%
        ),
        linear-gradient(
            115deg,
            #fffdfa 0%,
            #fbf9f4 52%,
            #f2ece0 100%
        );
}

.vmss-hero-container {
    position: relative;
    width: min(calc(100% - 80px), 1380px);
    margin-inline: auto;
    z-index: 2;
}

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

.vmss-hero-bg-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.vmss-hero-bg-shape-1 {
    width: 850px;
    height: 850px;
    top: -585px;
    right: -210px;
    border: 1px solid rgba(180, 138, 76, .13);
    border-radius: 44%;
    background: rgba(255, 255, 255, .17);
    transform: rotate(-28deg);
}

.vmss-hero-bg-shape-2 {
    width: 1050px;
    height: 450px;
    bottom: -325px;
    left: -260px;
    border-top: 2px solid rgba(189, 145, 72, .32);
    border-radius: 50%;
    transform: rotate(-7deg);
}

.vmss-hero-bg-shape-3 {
    width: 700px;
    height: 500px;
    top: 50px;
    left: -450px;
    border-radius: 50%;
    background: linear-gradient(
        110deg,
        rgba(231, 209, 165, .23),
        transparent
    );
}

.vmss-hero-dots {
    position: absolute;
    width: 94px;
    height: 100px;
    top: 34px;
    right: 5%;
    opacity: .65;
    z-index: 1;

    background-image: radial-gradient(
        #c89b50 1.15px,
        transparent 1.15px
    );

    background-size: 15px 15px;
}

.vmss-hero-bottom-wave {
    position: absolute;
    z-index: 0;
    width: 130%;
    height: 220px;
    left: -15%;
    bottom: -175px;
    transform: rotate(-3deg);
    border-radius: 50% 50% 0 0;
    background: rgba(255, 255, 255, .4);
}

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

.vmss-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: 24px;
    min-height: 435px;
}

.vmss-hero-content {
    position: relative;
    z-index: 4;
    padding: 0 0 34px;
}

/* =====================================================
   EYEBROW
===================================================== */

.vmss-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.8px;
    line-height: 1.5;
    color: #a47737;
}

.vmss-hero-eyebrow-line {
    display: inline-block;
    flex-shrink: 0;
    width: 38px;
    height: 2px;
    background: #a47737;
}

/* =====================================================
   MAIN HEADLINE
===================================================== */

.vmss-hero-title {
    max-width: 760px;
    margin: 0 0 23px;
    color: var(--hero-navy);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5.15vw, 78px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -3.1px;
}

.vmss-hero-title > span {
    display: block;
    color: var(--hero-teal);

    background: linear-gradient(
        110deg,
        #087185,
        #005469 85%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.vmss-hero-description {
    max-width: 570px;
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 400;
    line-height: 1.65;
    color: var(--hero-muted);
}

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

.vmss-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}

/* =====================================================
   GOLD APPOINTMENT BUTTON
===================================================== */

.vmss-hero-appointment {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    min-height: 56px;
    padding: 12px 24px;

    border-radius: 100px;
    border: 1px solid #e9cb89;

    background: linear-gradient(
        150deg,
        #e1bd7a 0%,
        #ae7e36 53%,
        #866022 100%
    );

    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;

    box-shadow:
        0 3px 0 rgba(122, 81, 24, .35),
        0 13px 28px rgba(135, 97, 37, .2),
        inset 0 1px 0 rgba(255, 255, 255, .48);

    transition:
        transform .4s var(--hero-ease),
        box-shadow .4s ease;
}

.vmss-hero-appointment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        115deg,
        #0c5165,
        #08243e
    );
    transform: translateX(-102%);
    transition: transform .55s var(--hero-ease);
}

.vmss-hero-appointment::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -50%;
    left: -90px;
    width: 45px;
    height: 200%;
    transform: rotate(25deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .35),
        transparent
    );
    transition: left .7s ease;
    pointer-events: none;
}

.vmss-hero-btn-icon,
.vmss-hero-btn-text,
.vmss-hero-btn-arrow {
    position: relative;
    z-index: 3;
}

.vmss-hero-btn-icon svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-hero-btn-arrow {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    transition: transform .35s ease;
}

.vmss-hero-appointment:hover {
    color: #fff;
    transform: translateY(-4px);
    box-shadow:
        0 18px 36px rgba(8, 36, 62, .25),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}

.vmss-hero-appointment:hover::before {
    transform: translateX(0);
}

.vmss-hero-appointment:hover::after {
    left: 140%;
}

.vmss-hero-appointment:hover .vmss-hero-btn-arrow {
    transform: translateX(6px);
}

/* =====================================================
   MEET OUR DOCTORS LINK
===================================================== */

.vmss-hero-doctors-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--hero-navy);
    text-decoration: none;
    font-family: Georgia, serif;
    font-weight: 600;
    font-size: 15px;
}

.vmss-hero-doctors-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid rgba(194, 152, 80, .33);
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition:
        background .35s ease,
        transform .35s ease,
        color .35s ease;
}

.vmss-hero-doctors-icon svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-hero-doctors-text {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--hero-gold);
    padding: 0 0 5px;
}

.vmss-hero-doctors-text > span {
    transition: transform .3s ease;
}

.vmss-hero-doctors-link:hover {
    color: var(--hero-teal);
}

.vmss-hero-doctors-link:hover .vmss-hero-doctors-icon {
    background: var(--hero-navy);
    color: #fff;
    transform: rotate(-7deg);
}

.vmss-hero-doctors-link:hover .vmss-hero-doctors-text > span {
    transform: translateX(5px);
}

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

.vmss-hero-visual {
    position: relative;
    z-index: 2;
    height: 485px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmss-hero-visual-glow {
    position: absolute;
    width: 90%;
    height: 85%;
    right: -9%;
    top: 10%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(179, 141, 79, .15),
        transparent 68%
    );
    filter: blur(25px);
}

.vmss-hero-visual-circle {
    position: absolute;
    width: min(90%, 475px);
    aspect-ratio: 1;
    right: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid rgba(189, 145, 74, .6);
    background: linear-gradient(
        135deg,
        #096278,
        #043b52 70%,
        #062d47
    );
    box-shadow: 0 18px 60px rgba(5, 56, 74, .15);
}

/* Uploaded artwork overlays the backdrop */

.vmss-hero-image-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .7s var(--hero-ease);
}

.vmss-hero-doctor-image {
    display: block;
    width: min(100%, 560px);
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 23px rgba(19, 47, 57, .1));
    transform: translateZ(0);
}

.vmss-hero-visual:hover .vmss-hero-image-wrap {
    transform: translateY(-9px) scale(1.012);
}

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

.vmss-hero-features {
    position: relative;
    z-index: 5;

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

    width: min(100%, 690px);
    min-height: 86px;
    padding: 14px 22px;
    margin-top: -12px;

    border-radius: 38px;
    border: 1px solid rgba(255, 255, 255, .9);

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

    box-shadow:
        0 14px 36px rgba(144, 112, 65, .1),
        inset 0 1px 0 rgba(255, 255, 255, .85);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.vmss-hero-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex: 1 1 0;
    min-width: 0;
    transition: transform .35s var(--hero-ease);
}

.vmss-hero-feature:hover {
    transform: translateY(-5px);
}

.vmss-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    flex-shrink: 0;

    border: 1px solid rgba(193, 149, 75, .33);
    border-radius: 50%;
    background: rgba(255, 251, 243, .7);
    color: #ad7d31;

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

.vmss-feature-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-hero-feature:hover .vmss-feature-icon {
    color: #fff;
    background: var(--hero-gold);
    transform: rotate(-7deg);
}

.vmss-feature-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hero-navy);
}

.vmss-feature-title span {
    display: block;
}

.vmss-feature-divider {
    width: 1px;
    height: 30px;
    margin: 0 15px;
    background: rgba(190, 148, 77, .42);
}

/* =====================================================
   ENTRANCE ANIMATIONS
===================================================== */

@keyframes vmssHeroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(36px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vmssHeroVisualIn {
    0% {
        opacity: 0;
        transform: translate(55px, 25px) scale(.95);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Content remains visible without JavaScript */
.vmss-hero-reveal {
    opacity: 1;
}

.vmss-hero.vmss-hero-js .vmss-hero-reveal {
    opacity: 0;
}

.vmss-hero.vmss-hero-js.is-visible .vmss-hero-reveal {
    animation: vmssHeroFadeUp .9s var(--hero-ease) both;
    animation-delay: var(--reveal-delay, 0s);
}

.vmss-hero.vmss-hero-js.is-visible .vmss-hero-visual {
    animation: vmssHeroVisualIn 1.15s var(--hero-ease) both;
    animation-delay: var(--reveal-delay, 0s);
}

/* =====================================================
   RESPONSIVE: LAPTOP
===================================================== */

@media (max-width: 1400px) {
    .vmss-hero-container {
        width: min(calc(100% - 70px), 1250px);
    }

    .vmss-hero-title {
        font-size: clamp(49px, 5vw, 70px);
    }

    .vmss-hero-visual {
        height: 455px;
    }

    .vmss-hero-features {
        width: min(100%, 650px);
    }
}

@media (max-width: 1150px) {
    .vmss-hero {
        padding: 55px 0 45px;
    }

    .vmss-hero-grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 0;
    }

    .vmss-hero-title {
        font-size: clamp(45px, 5vw, 60px);
        letter-spacing: -2px;
    }

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

    .vmss-hero-description {
        font-size: 16px;
    }

    .vmss-hero-actions {
        gap: 14px;
    }

    .vmss-hero-appointment {
        font-size: 15px;
        padding-inline: 18px;
        gap: 10px;
    }

    .vmss-hero-features {
        margin-top: 0;
    }
}

/* =====================================================
   RESPONSIVE: TABLET
===================================================== */

@media (max-width: 900px) {
    .vmss-hero-container {
        width: calc(100% - 44px);
    }

    .vmss-hero {
        padding: 48px 0 42px;
    }

    .vmss-hero-grid {
        grid-template-columns: 1fr 1fr;
        min-height: 370px;
    }

    .vmss-hero-title {
        font-size: clamp(40px, 5.5vw, 52px);
    }

    .vmss-hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

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

    .vmss-hero-visual-circle {
        top: 10%;
    }

    .vmss-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .vmss-hero-features {
        width: 100%;
        margin-top: 15px;
    }
}

/* =====================================================
   RESPONSIVE: MOBILE
===================================================== */

@media (max-width: 650px) {
    .vmss-hero {
        padding: 42px 0 32px;
        min-height: auto;
    }

    .vmss-hero-container {
        width: calc(100% - 32px);
    }

    .vmss-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .vmss-hero-content {
        padding-bottom: 0;
    }

    .vmss-hero-eyebrow {
        gap: 10px;
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .vmss-hero-eyebrow-line {
        width: 27px;
    }

    .vmss-hero-title {
        margin-bottom: 18px;
        max-width: 550px;
        font-size: clamp(40px, 9vw, 56px);
        letter-spacing: -1.7px;
        line-height: 1.07;
    }

    .vmss-hero-description {
        max-width: 510px;
        font-size: 15px;
        line-height: 1.7;
    }

    .vmss-hero-actions {
        margin-top: 25px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 19px;
    }

    .vmss-hero-appointment {
        min-height: 51px;
        padding: 10px 17px;
        gap: 10px;
        font-size: 14px;
    }

    .vmss-hero-btn-icon svg {
        width: 20px;
        height: 20px;
    }

    .vmss-hero-btn-arrow {
        font-size: 21px;
    }

    .vmss-hero-doctors-link {
        font-size: 14px;
    }

    .vmss-hero-doctors-icon {
        width: 40px;
        height: 40px;
    }

    .vmss-hero-visual {
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 5px auto 0;
        aspect-ratio: 1024 / 926;
    }

    .vmss-hero-image-wrap {
        height: auto;
        align-self: center;
    }

    .vmss-hero-doctor-image {
        width: 100%;
        height: auto;
    }

    .vmss-hero-visual-circle {
        width: 80%;
        top: 8%;
        right: 2%;
    }

    .vmss-hero-features {
        margin-top: 12px;
        width: 100%;
        border-radius: 22px;
        padding: 17px 10px;
        gap: 4px;
    }

    .vmss-hero-feature {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .vmss-feature-icon {
        width: 43px;
        height: 43px;
    }

    .vmss-feature-icon svg {
        width: 25px;
        height: 25px;
    }

    .vmss-feature-title {
        font-size: 11px;
        line-height: 1.4;
    }

    .vmss-feature-divider {
        margin: 0 2px;
        height: 48px;
    }

    .vmss-hero-dots {
        right: 5%;
        top: 18px;
    }
}

@media (max-width: 390px) {
    .vmss-hero-title {
        font-size: 38px;
    }

    .vmss-hero-appointment {
        font-size: 13px;
    }

    .vmss-hero-actions {
        gap: 15px;
    }

    .vmss-feature-title {
        font-size: 10px;
    }
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

.vmss-hero a:focus-visible {
    outline: 3px solid var(--hero-teal);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vmss-hero *,
    .vmss-hero *::before,
    .vmss-hero *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-hero.vmss-hero-js .vmss-hero-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* ==========================================================
   VMSS PREMIUM SERVICES SECTION
   WHITE BACKGROUND + FILLED PREMIUM CARDS
   Theme: vmsoftsysofficial
========================================================== */

:root {
    --vs-navy: #09243e;
    --vs-gold: #ae7e36;
    --vs-gold-dark: #8d632c;
    --vs-gold-light: #e5c48b;

    --vs-text: #52617a;

    --vs-card-bg: #f8f4ed;
    --vs-card-hover: #f3e9d9;

    --vs-ease: cubic-bezier(.22, 1, .36, 1);
}

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

.vmss-services,
.vmss-services * {
    box-sizing: border-box;
}

.vmss-services {
    --vs-columns: 4;
    --vs-gap: 18px;

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 100%;

    padding: 55px 0 45px;
    margin: 0;

    background: #ffffff;

    overflow: hidden;
}

/* Remove old decorative backgrounds */

.vmss-services-shape {
    display: none !important;
}

/* Main container */

.vmss-services-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 80px), 1480px);
    max-width: 100%;

    margin: 0 auto;
}

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

.vmss-services-heading {
    position: relative;

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

    min-height: 135px;

    margin-bottom: 30px;
}

.vmss-services-heading-content {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

/* Gold Ornament */

.vmss-services-ornament {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 7px;

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

.vmss-services-ornament > span {
    width: 65px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--vs-gold)
    );
}

.vmss-services-ornament > span:last-child {
    transform: rotate(180deg);
}

.vmss-services-ornament svg {
    width: 28px;
    height: 26px;

    fill: currentColor;
}

/* Heading */

.vmss-services-heading h2 {
    margin: 0 0 10px;

    color: var(--vs-navy);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4.2vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.8px;
}

/* Description */

.vmss-services-heading p {
    max-width: 690px;

    margin: 0 auto;

    color: var(--vs-text);

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* ==========================================================
   TOP RIGHT SLIDER BUTTONS
========================================================== */

.vmss-services-controls {
    position: absolute;

    right: 0;
    top: 50%;

    display: flex;
    align-items: center;

    gap: 12px;

    transform: translateY(-50%);

    z-index: 5;
}

.vmss-services-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid #e8d9c4;
    border-radius: 50%;

    background: #ffffff;
    color: var(--vs-navy);

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s var(--vs-ease),
        box-shadow .35s ease,
        border-color .35s ease;
}

.vmss-services-arrow svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .3s ease;
}

/* Next button gold */

.vmss-services-next {
    background: linear-gradient(
        135deg,
        #c79c57,
        #a57532
    );

    color: #ffffff;

    border-color: #c79c57;

    box-shadow: 0 7px 18px rgba(174, 126, 54, .18);
}

/* Button hover */

.vmss-services-arrow:hover:not(:disabled) {
    background: var(--vs-navy);
    color: #ffffff;
    border-color: var(--vs-navy);

    transform: translateY(-3px);

    box-shadow: 0 10px 24px rgba(9, 36, 62, .18);
}

.vmss-services-prev:hover:not(:disabled) svg {
    transform: translateX(-3px);
}

.vmss-services-next:hover:not(:disabled) svg {
    transform: translateX(3px);
}

.vmss-services-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

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

.vmss-services-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vmss-services-track {
    display: flex;
    align-items: stretch;

    gap: var(--vs-gap);

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;

    padding: 10px 0 20px;
    margin: -10px 0 -20px;
}

.vmss-services-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   PREMIUM FILLED CARDS
========================================================== */

.vmss-service-card {
    position: relative;

    flex: 0 0 calc(
        (100% - (var(--vs-columns) - 1) * var(--vs-gap))
        / var(--vs-columns)
    );

    min-width: 0;
    max-width: 100%;

    scroll-snap-align: start;

    border-radius: 20px;

    background: linear-gradient(
        155deg,
        #fbf8f2 0%,
        #f6efe4 100%
    );

    border: 1px solid #e9dcc8;
    border-bottom: 3px solid var(--vs-gold);

    box-shadow: 0 8px 25px rgba(91, 65, 28, .055);

    overflow: hidden;

    transition:
        transform .45s var(--vs-ease),
        box-shadow .45s ease,
        background .4s ease,
        border-color .4s ease;
}

/* Fine decorative top line */

.vmss-service-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        var(--vs-gold),
        transparent
    );

    transition: width .45s var(--vs-ease);

    z-index: 3;
}

.vmss-service-card-link {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 365px;
    height: 100%;

    padding: 26px 20px 22px;

    color: var(--vs-navy);

    text-decoration: none;
    text-align: center;
}

/* ==========================================================
   SERVICE ICON CIRCLE
========================================================== */

.vmss-service-icon-outer {
    position: relative;
    z-index: 2;

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

    width: 118px;
    height: 118px;

    flex-shrink: 0;

    margin-bottom: 17px;

    border: 1px solid rgba(174, 126, 54, .45);
    border-radius: 50%;

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

    transition:
        transform .45s var(--vs-ease),
        border-color .35s ease,
        background .35s ease;
}

/* Gold dot */

.vmss-service-icon-outer::before {
    content: "";

    position: absolute;

    top: 22%;
    left: 4%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--vs-gold);
}

/* Inner ring */

.vmss-service-icon-outer::after {
    content: "";

    position: absolute;
    inset: 6px;

    border-radius: 50%;

    border: 1px solid rgba(174, 126, 54, .12);

    pointer-events: none;
}

.vmss-service-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f0e5d3
    );

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

/* WordPress featured icon */

.vmss-service-card-image {
    display: block;

    width: 70px;
    height: 70px;
    max-width: 70px;

    object-fit: contain;

    transition: transform .45s var(--vs-ease);
}

/* Fallback icon */

.vmss-service-fallback-icon {
    width: 63px;
    height: 63px;

    fill: none;
    stroke: var(--vs-gold);
    stroke-width: 1.7;
}

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

.vmss-service-card-title {
    position: relative;
    z-index: 2;

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

    width: 100%;
    min-height: 56px;

    margin: 0 0 10px;

    color: var(--vs-navy);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(19px, 1.65vw, 25px);
    font-weight: 500;

    line-height: 1.2;
    letter-spacing: -.4px;

    transition: color .35s ease;
}

/* Small gold separator */

.vmss-service-title-line {
    display: block;

    width: 35px;
    height: 2px;

    margin: 0 0 14px;

    background: var(--vs-gold);

    transition: width .4s var(--vs-ease);
}

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

.vmss-service-card-description {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--vs-text);

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;

    overflow: hidden;
}

/* ==========================================================
   EXPLORE LINK
========================================================== */

.vmss-service-card-more {
    position: relative;
    z-index: 2;

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

    gap: 8px;

    margin-top: auto;
    padding-top: 15px;

    color: var(--vs-gold-dark);

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

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

    transition:
        opacity .35s ease,
        transform .35s var(--vs-ease);
}

.vmss-service-card-more svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   PREMIUM HOVER EFFECT
========================================================== */

@media (hover: hover) {

    .vmss-service-card:hover {
        background: linear-gradient(
            155deg,
            #f7ecda 0%,
            #edddc3 100%
        );

        transform: translateY(-7px);

        border-color: rgba(174, 126, 54, .55);
        border-bottom-color: var(--vs-gold-dark);

        box-shadow:
            0 22px 38px rgba(98, 70, 34, .14),
            0 5px 12px rgba(174, 126, 54, .07);
    }

    .vmss-service-card:hover::before {
        width: 75%;
    }

    .vmss-service-card:hover .vmss-service-icon-outer {
        transform: translateY(-4px) rotate(5deg);

        border-color: var(--vs-gold);

        background: #ffffff;
    }

    .vmss-service-card:hover .vmss-service-icon-inner {
        background: linear-gradient(
            145deg,
            #fffaf0,
            #ead4ae
        );

        box-shadow: 0 7px 22px rgba(174, 126, 54, .12);
    }

    .vmss-service-card:hover .vmss-service-card-image {
        transform: scale(1.08);
    }

    .vmss-service-card:hover .vmss-service-card-title {
        color: var(--vs-gold-dark);
    }

    .vmss-service-card:hover .vmss-service-title-line {
        width: 65px;
    }

    .vmss-service-card:hover .vmss-service-card-more {
        opacity: 1;
        transform: translateY(0);
    }

}

/* Keyboard focus */

.vmss-service-card:focus-within {
    border-color: var(--vs-gold);
    box-shadow: 0 10px 30px rgba(174, 126, 54, .14);
}

.vmss-service-card:focus-within .vmss-service-card-more {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   PAGINATION DOTS
========================================================== */

.vmss-services-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 14px;

    margin-top: 32px;
}

.vmss-services-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #e9dfd0;

    cursor: pointer;

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

.vmss-services-dot.is-active {
    background: var(--vs-gold);

    transform: scale(1.2);

    box-shadow: 0 3px 9px rgba(174, 126, 54, .2);
}

.vmss-services-dot:hover {
    background: var(--vs-gold);
    transform: scale(1.15);
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssServicesFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes vmssServicesCardIn {

    from {
        opacity: 0;
        transform: translateY(35px) scale(.97);
    }

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

}

/* JS enhanced animation */

.vmss-services.vmss-services-js
.vmss-services-heading-content,
.vmss-services.vmss-services-js
.vmss-services-controls,
.vmss-services.vmss-services-js
.vmss-service-card,
.vmss-services.vmss-services-js
.vmss-services-pagination {
    opacity: 0;
}

.vmss-services.vmss-services-js.is-visible
.vmss-services-heading-content {
    animation: vmssServicesFadeUp .75s var(--vs-ease) both;
}

.vmss-services.vmss-services-js.is-visible
.vmss-services-controls {
    animation: vmssServicesFadeUp .7s var(--vs-ease) .12s both;
}

.vmss-services.vmss-services-js.is-visible
.vmss-service-card {
    animation: vmssServicesCardIn .8s var(--vs-ease) both;
    animation-delay: calc(.15s + var(--card-delay, 0s));
}

.vmss-services.vmss-services-js.is-visible
.vmss-services-pagination {
    animation: vmssServicesFadeUp .7s var(--vs-ease) .5s both;
}

/* Release entrance transforms for hover */

.vmss-services.vmss-services-js.is-visible.animations-complete
.vmss-service-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {

    .vmss-services.vmss-services-js.is-visible.animations-complete
    .vmss-service-card:hover {
        transform: translateY(-7px);
    }

}

/* ==========================================================
   RESPONSIVE - LARGE LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .vmss-services {
        --vs-columns: 3;
        --vs-gap: 18px;
    }

    .vmss-services-container {
        width: calc(100% - 65px);
    }

    .vmss-service-card-link {
        min-height: 360px;
    }

}

/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media (max-width: 1024px) {

    .vmss-services {
        --vs-columns: 2;
        --vs-gap: 18px;

        padding: 48px 0 40px;
    }

    .vmss-services-container {
        width: calc(100% - 50px);
    }

    .vmss-services-heading {
        min-height: 130px;
    }

    .vmss-services-heading-content {
        max-width: 600px;
    }

    .vmss-services-heading h2 {
        font-size: 49px;
    }

    .vmss-services-heading p {
        font-size: 15px;
    }

    .vmss-services-controls {
        top: auto;
        bottom: -12px;
        transform: none;
    }

    .vmss-service-card-link {
        min-height: 350px;
    }

}

/* ==========================================================
   RESPONSIVE - MOBILE
========================================================== */

@media (max-width: 767px) {

    .vmss-services {
        --vs-columns: 1;
        --vs-gap: 15px;

        padding: 42px 0 35px;
    }

    .vmss-services-container {
        width: calc(100% - 36px);
    }

    .vmss-services-heading {
        display: block;
        min-height: auto;

        margin-bottom: 25px;
    }

    .vmss-services-heading h2 {
        font-size: 43px;
        letter-spacing: -1.2px;
    }

    .vmss-services-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    .vmss-services-ornament > span {
        width: 48px;
    }

    .vmss-services-controls {
        position: static;

        justify-content: center;

        margin-top: 22px;

        transform: none;
    }

    .vmss-services-arrow {
        width: 44px;
        height: 44px;
    }

    .vmss-service-card-link {
        min-height: 350px;
        padding: 25px 22px 22px;
    }

    .vmss-service-card-title {
        font-size: 24px;
        min-height: auto;
        margin-bottom: 14px;
    }

    .vmss-service-card-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .vmss-service-card-more {
        opacity: 1;
        transform: none;
    }

    .vmss-services-pagination {
        margin-top: 25px;
    }

}

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

@media (max-width: 480px) {

    .vmss-services-container {
        width: calc(100% - 28px);
    }

    .vmss-services-heading h2 {
        font-size: 40px;
    }

    .vmss-service-icon-outer {
        width: 105px;
        height: 105px;
    }

    .vmss-service-icon-inner {
        width: 88px;
        height: 88px;
    }

    .vmss-service-card-image {
        width: 62px;
        height: 62px;
    }

    .vmss-service-card-link {
        min-height: 335px;
    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-services a:focus-visible,
.vmss-services button:focus-visible,
.vmss-services-track:focus-visible {
    outline: 3px solid var(--vs-gold);
    outline-offset: 4px;
}

/* Reduced motion */

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

    .vmss-services *,
    .vmss-services *::before,
    .vmss-services *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-services.vmss-services-js
    .vmss-services-heading-content,
    .vmss-services.vmss-services-js
    .vmss-services-controls,
    .vmss-services.vmss-services-js
    .vmss-service-card,
    .vmss-services.vmss-services-js
    .vmss-services-pagination {
        opacity: 1 !important;
        transform: none !important;
    }

}
/* ==========================================================
   VMSS PREMIUM COUNTERS
   COMPACT VERSION - FIXED LINES AND SPACING
   Theme: vmsoftsysofficial
========================================================== */

:root {
    --vcount-navy: #06283c;
    --vcount-dark: #031c2c;
    --vcount-teal: #0c465d;

    --vcount-gold: #c99449;
    --vcount-light-gold: #f1c989;
    --vcount-cream: #f8ebd7;

    --vcount-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================
   SECTION RESET
========================================================== */

.vmss-counters,
.vmss-counters * {
    box-sizing: border-box;
}

.vmss-counters {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 100%;

    min-height: 0;
    height: auto;

    padding: 28px 0;

    margin: 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            #0a4258 0%,
            #052c41 50%,
            #031c2e 100%
        );

    color: #ffffff;
}

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

.vmss-counters-container {
    position: relative;
    z-index: 5;

    width: min(calc(100% - 100px), 1380px);
    max-width: 100%;

    margin: 0 auto;
}

/* ==========================================================
   BACKGROUND SHAPES
   Keep shapes behind the content
========================================================== */

.vmss-counters::before,
.vmss-counters::after {
    content: "";

    position: absolute;
    z-index: 0;

    pointer-events: none;
}

.vmss-counters::before {
    width: 350px;
    height: 350px;

    top: -240px;
    left: -230px;

    border-radius: 50%;

    background: rgba(52, 118, 146, .17);
}

.vmss-counters::after {
    width: 420px;
    height: 420px;

    right: -340px;
    bottom: -300px;

    border-radius: 50%;

    background: rgba(39, 110, 137, .16);
}

/* ==========================================================
   DECORATIVE GOLD CURVES
   Moved to corners - away from text
========================================================== */

.vmss-counter-curve {
    position: absolute;
    z-index: 1;

    border: 1px solid rgba(221, 166, 81, .65);
    border-radius: 50%;

    pointer-events: none;
}

/* Left decorative curve */

.vmss-counter-curve.curve-left {
    width: 370px;
    height: 370px;

    left: -320px;
    bottom: -250px;

    transform: rotate(-20deg);
}

/* Right decorative curve */

.vmss-counter-curve.curve-right {
    width: 420px;
    height: 420px;

    right: -370px;
    top: -250px;

    transform: rotate(20deg);
}

/* ==========================================================
   GOLD DECORATIVE DOTS
========================================================== */

.vmss-counter-dots {
    position: absolute;
    z-index: 1;

    width: 85px;
    height: 95px;

    background-image: radial-gradient(
        var(--vcount-gold) 1.1px,
        transparent 1.1px
    );

    background-size: 17px 17px;

    opacity: .65;
    pointer-events: none;
}

.vmss-counter-dots.dots-left {
    left: 12px;
    bottom: 12px;
}

.vmss-counter-dots.dots-right {
    right: 12px;
    top: 12px;
}

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

.vmss-counters-grid {
    position: relative;
    z-index: 5;

    display: grid;

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

    align-items: center;

    width: 100%;
}

/* ==========================================================
   COUNTER ITEM
========================================================== */

.vmss-counter-item {
    position: relative;

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

    min-width: 0;
    height: 205px;
    min-height: 0;

    padding: 5px 20px;

    text-align: center;

    transition: transform .4s var(--vcount-ease);
}

/* ==========================================================
   VERTICAL SEPARATORS
   Short lines - do not overlap text
========================================================== */

.vmss-counter-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 105px;

    transform: translateY(-50%);

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(232, 190, 117, .75) 15%,
        rgba(232, 190, 117, .75) 85%,
        transparent
    );

    pointer-events: none;
}

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

.vmss-counter-icon {
    position: relative;
    z-index: 2;

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

    width: 70px;
    height: 70px;

    flex-shrink: 0;

    margin: 0 0 8px;

    border: 2px solid #d8aa65;
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f6ead6 55%,
        #e8ceaa 100%
    );

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .12),
        inset 0 2px 4px rgba(255, 255, 255, .8);

    color: #ac772e;

    transition:
        transform .4s var(--vcount-ease),
        box-shadow .4s ease;
}

.vmss-counter-icon svg {
    width: 39px;
    height: 39px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .4s ease;
}

/* ==========================================================
   COUNTER NUMBERS
========================================================== */

.vmss-counter-number {
    position: relative;
    z-index: 3;

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

    gap: 4px;

    width: 100%;
    min-width: 0;

    margin: 0 0 5px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 3.8vw, 56px);
    font-weight: 500;

    line-height: 1.1;
    letter-spacing: -1px;

    white-space: nowrap;

    color: var(--vcount-cream);

    background: linear-gradient(
        180deg,
        #fff8e9 0%,
        #f0c488 57%,
        #bb8742 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vmss-count-value {
    font-variant-numeric: tabular-nums;
}

.vmss-counter-suffix {
    font-size: .65em;
    letter-spacing: -.5px;
}

.vmss-suffix-lac {
    font-size: .48em;
    letter-spacing: -.3px;
}

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

.vmss-counter-label {
    position: relative;
    z-index: 3;

    margin: 0;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 400;

    line-height: 1.35;
}

.vmss-counter-label span {
    display: block;
}

/* ==========================================================
   PREMIUM HOVER
========================================================== */

@media (hover: hover) {

    .vmss-counter-item:hover {
        transform: translateY(-5px);
    }

    .vmss-counter-item:hover .vmss-counter-icon {
        transform: translateY(-4px) scale(1.07);

        box-shadow:
            0 10px 20px rgba(0, 0, 0, .2),
            0 0 18px rgba(216, 170, 101, .15);
    }

    .vmss-counter-item:hover .vmss-counter-icon svg {
        transform: scale(1.08);
    }

}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssCounterEntrance {

    from {
        opacity: 0;
        transform: translateY(24px) scale(.97);
    }

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

}

.vmss-counters.vmss-counters-js:not(.is-visible)
.vmss-counter-item {
    opacity: 0;
}

.vmss-counters.vmss-counters-js.is-visible
.vmss-counter-item {
    animation: vmssCounterEntrance .75s var(--vcount-ease) both;
    animation-delay: var(--counter-delay, 0s);
}

/* Enable hover after entrance animation */

.vmss-counters.vmss-counters-js.animations-complete
.vmss-counter-item {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {

    .vmss-counters.vmss-counters-js.animations-complete
    .vmss-counter-item:hover {
        transform: translateY(-5px);
    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .vmss-counters-container {
        width: calc(100% - 60px);
    }

    .vmss-counter-item {
        padding-inline: 12px;
    }

    .vmss-counter-number {
        font-size: clamp(36px, 4vw, 49px);
    }

}

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

@media (max-width: 850px) {

    .vmss-counters {
        padding: 30px 0;
    }

    .vmss-counters-container {
        width: calc(100% - 40px);
    }

    .vmss-counters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 12px;
    }

    .vmss-counter-item {
        height: 190px;
        padding: 10px;
    }

    .vmss-counter-item:nth-child(2)::after {
        display: none;
    }

    .vmss-counter-number {
        font-size: 48px;
    }

    .vmss-counter-label {
        font-size: 16px;
    }

}

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

@media (max-width: 600px) {

    .vmss-counters {
        padding: 25px 0;
    }

    .vmss-counters-container {
        width: calc(100% - 24px);
    }

    .vmss-counters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .vmss-counter-item {
        height: 165px;
        padding: 6px;
    }

    .vmss-counter-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 8px;
    }

    .vmss-counter-icon svg {
        width: 33px;
        height: 33px;
    }

    .vmss-counter-number {
        font-size: clamp(28px, 7vw, 39px);
        letter-spacing: -.5px;
    }

    .vmss-counter-label {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Only show separator between columns */

    .vmss-counter-item:nth-child(1)::after,
    .vmss-counter-item:nth-child(3)::after {
        display: block;
        height: 85px;
    }

    .vmss-counter-item:nth-child(2)::after {
        display: none;
    }

    .vmss-counter-curve.curve-left {
        left: -340px;
    }

    .vmss-counter-curve.curve-right {
        right: -390px;
    }

    .vmss-counter-dots {
        opacity: .4;
    }

}

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

@media (max-width: 380px) {

    .vmss-counter-number {
        font-size: 27px;
    }

    .vmss-suffix-lac {
        font-size: .42em;
    }

    .vmss-counter-label {
        font-size: 12px;
    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .vmss-counters *,
    .vmss-counters *::before,
    .vmss-counters *::after {
        animation: none !important;
        transition: none !important;
    }

    .vmss-counters.vmss-counters-js
    .vmss-counter-item {
        opacity: 1 !important;
        transform: none !important;
    }

}
/* ==========================================================
   VMSS PREMIUM INTRODUCTION SECTION
   NAVY + GOLD DESIGN
========================================================== */

:root {
    --intro-navy: #05283e;
    --intro-dark: #031b2d;
    --intro-teal: #0b4359;

    --intro-gold: #c79650;
    --intro-gold-light: #ebc489;
    --intro-gold-dark: #96672c;

    --intro-white: #ffffff;
    --intro-text: #e1e9ef;

    --intro-ease: cubic-bezier(.22, 1, .36, 1);
}

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

.vmss-intro,
.vmss-intro * {
    box-sizing: border-box;
}

.vmss-intro {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 100%;

    min-height: 0;
    margin: 0;

    padding: 46px 0 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 48% 12%,
            #0a435a 0%,
            #05334a 44%,
            #031e32 100%
        );

    color: var(--intro-white);
}

.vmss-intro-container {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 90px), 1380px);
    margin: 0 auto;
}

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

.vmss-intro-bg-circle {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.vmss-intro-bg-circle.intro-bg-left {
    width: 430px;
    height: 430px;

    top: -245px;
    left: -260px;

    background: rgba(34, 105, 134, .2);
}

.vmss-intro-bg-circle.intro-bg-right {
    width: 550px;
    height: 550px;

    bottom: -380px;
    right: -340px;

    background: rgba(33, 107, 138, .16);
}

/* ==========================================================
   GOLD DECORATIVE CURVES
========================================================== */

.vmss-intro-curve {
    position: absolute;
    z-index: 1;

    border: 1px solid rgba(221, 169, 88, .7);
    border-radius: 50%;

    pointer-events: none;
}

.vmss-intro-curve.intro-curve-left {
    width: 640px;
    height: 640px;

    left: -515px;
    top: 90px;
}

.vmss-intro-curve.intro-curve-right {
    width: 700px;
    height: 700px;

    right: -570px;
    bottom: -330px;
}

/* ==========================================================
   GOLD DOT PATTERNS
========================================================== */

.vmss-intro-dots {
    position: absolute;
    z-index: 1;

    width: 120px;
    height: 155px;

    background-image: radial-gradient(
        var(--intro-gold) 1.35px,
        transparent 1.35px
    );

    background-size: 23px 23px;

    opacity: .85;
    pointer-events: none;
}

.vmss-intro-dots.intro-dots-left {
    left: 12px;
    bottom: 32px;
}

.vmss-intro-dots.intro-dots-right {
    right: 18px;
    top: 43px;
}

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

.vmss-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(40px, 5vw, 90px);

    width: 100%;
    min-height: 495px;
}

/* ==========================================================
   LEFT DOCTOR VISUAL
========================================================== */

.vmss-intro-visual {
    position: relative;
    align-self: end;

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

    width: 100%;
    height: 525px;
    min-width: 0;

    overflow: visible;
}

/* Gold arch outer */

.vmss-intro-arch {
    position: absolute;
    z-index: 1;

    width: 83%;
    height: 85%;

    left: 8.5%;
    bottom: 0;

    border-radius: 48% 48% 0 0;

    border: 2px solid var(--intro-gold);

    background: linear-gradient(
        145deg,
        #f0d9ae 0%,
        #d4b17a 65%,
        #c69c63 100%
    );

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

/* Inner arch */

.vmss-intro-arch-inner {
    position: absolute;
    z-index: 1;

    width: 90%;
    height: 90%;

    left: 5%;
    bottom: 0;

    border: 1px solid rgba(233, 194, 129, .6);
    border-radius: 48% 48% 0 0;

    background: transparent;
}

/* Doctor image */

.vmss-intro-image-wrap {
    position: relative;
    z-index: 3;

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

    width: 100%;
    height: 100%;

    transition: transform .65s var(--intro-ease);
}

.vmss-intro-doctor-image {
    display: block;

    width: auto;
    height: 100%;

    max-width: 110%;
    max-height: 525px;

    object-fit: contain;
    object-position: bottom center;

    filter: drop-shadow(
        0 12px 15px rgba(0, 0, 0, .12)
    );

    transition:
        filter .5s ease,
        transform .6s var(--intro-ease);
}

/* Image hover */

@media (hover: hover) {

    .vmss-intro-visual:hover .vmss-intro-doctor-image {
        transform: scale(1.035);

        filter: drop-shadow(
            0 16px 20px rgba(0, 0, 0, .2)
        );
    }

}

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

.vmss-intro-content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;

    padding: 0 0 44px;
}

/* Gold eyebrow line */

.vmss-intro-small-line {
    display: block;

    width: 62px;
    height: 3px;

    margin-bottom: 17px;

    background: linear-gradient(
        90deg,
        #f3cf91,
        #c38d3e
    );
}

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

.vmss-intro-heading {
    margin: 0 0 22px;

    color: var(--intro-white);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 3.5vw, 54px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.vmss-intro-heading span {
    display: block;

    color: var(--intro-gold-light);

    background: linear-gradient(
        100deg,
        #edca92,
        #c48f4c 80%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.vmss-intro-description {
    max-width: 730px;
    margin-bottom: 22px;
}

.vmss-intro-description p {
    margin: 0;

    color: var(--intro-text);

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.68;
}

.vmss-intro-description strong {
    color: var(--intro-gold-light);
    font-weight: 700;
}

/* ==========================================================
   SPECIALIZATIONS
========================================================== */

.vmss-intro-specializations {
    margin-bottom: 25px;
}

.vmss-intro-specializations h3 {
    margin: 0 0 14px;

    color: var(--intro-white);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
}

/* Specialization Grid */

.vmss-intro-specialization-grid {
    display: grid;

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

    column-gap: 25px;
    row-gap: 13px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.vmss-intro-specialization {
    display: flex;
    align-items: center;

    gap: 12px;
    min-width: 0;

    color: var(--intro-text);

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;

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

.vmss-intro-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    color: var(--intro-gold);

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

.vmss-intro-check svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* List hover */

@media (hover: hover) {

    .vmss-intro-specialization:hover {
        color: #ffffff;
        transform: translateX(5px);
    }

    .vmss-intro-specialization:hover .vmss-intro-check {
        color: #f1c989;
        transform: scale(1.12);
    }

}

/* ==========================================================
   GOLD APPOINTMENT BUTTON
========================================================== */

.vmss-intro-action {
    display: flex;
    align-items: center;
}

.vmss-intro-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    gap: 15px;

    min-height: 58px;
    padding: 12px 28px;

    border: 1px solid rgba(246, 211, 152, .6);
    border-radius: 100px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #c9a166 0%,
        #af8143 55%,
        #84602d 100%
    );

    box-shadow:
        0 9px 24px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
    text-decoration: none;

    transition:
        transform .4s var(--intro-ease),
        box-shadow .4s ease;
}

/* Navy slide background */

.vmss-intro-button::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        120deg,
        #12627a,
        #084058
    );

    transform: translateX(-102%);

    transition: transform .55s var(--intro-ease);
}

/* Shine effect */

.vmss-intro-button::after {
    content: "";

    position: absolute;
    z-index: 2;

    top: -40%;
    left: -90px;

    width: 48px;
    height: 180%;

    transform: rotate(28deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .25),
        transparent
    );

    transition: left .7s ease;
    pointer-events: none;
}

.vmss-intro-button-icon,
.vmss-intro-button-arrow {
    position: relative;
    z-index: 3;
}

.vmss-intro-button-icon svg {
    display: block;

    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-intro-button-arrow {
    font-size: 24px;

    transition: transform .35s ease;
}

.vmss-intro-button:hover {
    color: #ffffff;

    transform: translateY(-4px);

    box-shadow: 0 16px 32px rgba(0, 0, 0, .23);
}

.vmss-intro-button:hover::before {
    transform: translateX(0);
}

.vmss-intro-button:hover::after {
    left: 130%;
}

.vmss-intro-button:hover .vmss-intro-button-arrow {
    transform: translateX(6px);
}

/* ==========================================================
   ENTRANCE ANIMATION
========================================================== */

@keyframes vmssIntroFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes vmssIntroImageEntrance {

    from {
        opacity: 0;
        transform: translateX(-65px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}

@keyframes vmssIntroArchEntrance {

    from {
        opacity: 0;
        transform: translateY(70px) scale(.94);
    }

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

}

/* Keep content visible if JS does not run */

.vmss-intro.vmss-intro-js:not(.is-visible)
.vmss-intro-image-wrap,
.vmss-intro.vmss-intro-js:not(.is-visible)
.vmss-intro-content > *,
.vmss-intro.vmss-intro-js:not(.is-visible)
.vmss-intro-specialization {
    opacity: 0;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-image-wrap {
    animation: vmssIntroImageEntrance
        1.1s var(--intro-ease) .12s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-arch,
.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-arch-inner {
    animation: vmssIntroArchEntrance
        1s var(--intro-ease) both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-small-line {
    animation: vmssIntroFadeUp
        .7s var(--intro-ease) .12s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-heading {
    animation: vmssIntroFadeUp
        .85s var(--intro-ease) .22s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-description {
    animation: vmssIntroFadeUp
        .8s var(--intro-ease) .34s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-specializations {
    animation: vmssIntroFadeUp
        .8s var(--intro-ease) .43s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-action {
    animation: vmssIntroFadeUp
        .8s var(--intro-ease) .58s both;
}

.vmss-intro.vmss-intro-js.is-visible
.vmss-intro-specialization {
    animation: vmssIntroFadeUp
        .65s var(--intro-ease) both;

    animation-delay: var(--item-delay, .5s);
}

/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1400px) {

    .vmss-intro-container {
        width: calc(100% - 80px);
    }

    .vmss-intro-grid {
        gap: 45px;
    }

    .vmss-intro-heading {
        font-size: 45px;
    }

    .vmss-intro-visual {
        height: 495px;
    }

    .vmss-intro-doctor-image {
        max-height: 495px;
    }

}

/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1150px) {

    .vmss-intro {
        padding-top: 40px;
    }

    .vmss-intro-container {
        width: calc(100% - 60px);
    }

    .vmss-intro-grid {
        grid-template-columns: .85fr 1.15fr;
        gap: 30px;

        min-height: 470px;
    }

    .vmss-intro-visual {
        height: 460px;
    }

    .vmss-intro-doctor-image {
        max-height: 460px;
    }

    .vmss-intro-heading {
        font-size: 39px;
    }

    .vmss-intro-description p {
        font-size: 14px;
    }

    .vmss-intro-specialization {
        font-size: 13px;
    }

    .vmss-intro-specialization-grid {
        gap: 12px 15px;
    }

}

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

@media (max-width: 900px) {

    .vmss-intro {
        padding: 45px 0 0;
    }

    .vmss-intro-container {
        width: calc(100% - 44px);
    }

    .vmss-intro-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        min-height: 0;
    }

    .vmss-intro-visual {
        height: 430px;
    }

    .vmss-intro-doctor-image {
        max-height: 430px;
    }

    .vmss-intro-heading {
        font-size: 35px;
    }

    .vmss-intro-description p {
        font-size: 13px;
        line-height: 1.6;
    }

    .vmss-intro-specializations h3 {
        font-size: 18px;
    }

    .vmss-intro-specialization-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .vmss-intro-specialization {
        font-size: 13px;
    }

    .vmss-intro-content {
        padding-bottom: 35px;
    }

    .vmss-intro-button {
        min-height: 50px;
        padding: 10px 20px;
        font-size: 13px;
    }

}

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

@media (max-width: 650px) {

    .vmss-intro {
        padding: 45px 0 0;
    }

    .vmss-intro-container {
        width: calc(100% - 32px);
    }

    .vmss-intro-grid {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    /* Content appears first on mobile */

    .vmss-intro-content {
        order: 1;
        padding-bottom: 0;
    }

    .vmss-intro-visual {
        order: 2;

        width: min(100%, 400px);
        height: 380px;

        margin: 0 auto;
    }

    .vmss-intro-arch {
        width: 78%;
        left: 11%;
    }

    .vmss-intro-arch-inner {
        width: 85%;
        left: 7.5%;
    }

    .vmss-intro-doctor-image {
        max-height: 380px;
        max-width: 100%;
    }

    .vmss-intro-small-line {
        width: 50px;
        margin-bottom: 15px;
    }

    .vmss-intro-heading {
        font-size: clamp(32px, 8vw, 42px);
        line-height: 1.15;
        margin-bottom: 20px;
    }

    .vmss-intro-description p {
        font-size: 15px;
        line-height: 1.7;
    }

    .vmss-intro-description {
        margin-bottom: 23px;
    }

    .vmss-intro-specializations h3 {
        font-size: 20px;
    }

    .vmss-intro-specialization-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vmss-intro-specialization {
        font-size: 14px;
    }

    .vmss-intro-button {
        min-height: 54px;
        font-size: 14px;
        padding: 10px 21px;
    }

    .vmss-intro-dots.intro-dots-right {
        opacity: .4;
    }

}

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

@media (max-width: 390px) {

    .vmss-intro-heading {
        font-size: 31px;
    }

    .vmss-intro-visual {
        height: 330px;
    }

    .vmss-intro-doctor-image {
        max-height: 330px;
    }

    .vmss-intro-specialization {
        font-size: 13px;
    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-intro a:focus-visible {
    outline: 3px solid var(--intro-gold-light);
    outline-offset: 4px;
}

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

    .vmss-intro *,
    .vmss-intro *::before,
    .vmss-intro *::after {
        animation: none !important;
        transition: none !important;
    }

    .vmss-intro.vmss-intro-js
    .vmss-intro-image-wrap,
    .vmss-intro.vmss-intro-js
    .vmss-intro-content > *,
    .vmss-intro.vmss-intro-js
    .vmss-intro-specialization {
        opacity: 1 !important;
        transform: none !important;
    }

}
/* ==========================================================
   VMSS FACILITIES & SERVICES
   PREMIUM IVORY + GOLD DESIGN
========================================================== */

:root {
    --vf-navy: #09243e;
    --vf-navy-dark: #061b30;
    --vf-gold: #bc8538;
    --vf-gold-light: #e6c48b;
    --vf-cream: #fbf7ef;
    --vf-text: #152c4b;
    --vf-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================
   RESET & SECTION
========================================================== */

.vmss-facilities,
.vmss-facilities * {
    box-sizing: border-box;
}

.vmss-facilities {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 100%;

    padding: 65px 0 72px;
    margin: 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            #ffffff 0%,
            #fdfaf5 60%,
            #f7efe3 100%
        );
}

.vmss-facilities-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 100px), 1380px);
    margin: 0 auto;
}

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

.vmss-facilities-circle {
    position: absolute;
    z-index: 0;

    border-radius: 50%;
    pointer-events: none;
}

.vmss-facilities-circle-left {
    width: 580px;
    height: 580px;

    top: -445px;
    left: -310px;

    border: 1px solid rgba(196, 145, 69, .58);

    box-shadow:
        27px 18px 0 -26px rgba(196, 145, 69, .35);
}

.vmss-facilities-circle-right {
    width: 640px;
    height: 640px;

    right: -460px;
    bottom: -440px;

    border: 1px solid rgba(196, 145, 69, .58);
}

.vmss-facilities::before {
    content: "";

    position: absolute;
    top: -190px;
    right: -210px;

    width: 540px;
    height: 370px;

    background: rgba(226, 205, 172, .09);

    border-radius: 50%;
    transform: rotate(-28deg);

    pointer-events: none;
}

.vmss-facilities::after {
    content: "";

    position: absolute;
    bottom: -260px;
    left: -170px;

    width: 470px;
    height: 370px;

    border-radius: 50%;

    background: rgba(222, 196, 155, .13);

    pointer-events: none;
}

/* Gold dots */

.vmss-facilities-dots {
    position: absolute;
    z-index: 1;

    width: 80px;
    height: 80px;

    background-image: radial-gradient(
        #ca9650 2px,
        transparent 2px
    );

    background-size: 22px 22px;

    pointer-events: none;
}

.vmss-facilities-dots-left {
    top: 65px;
    left: 7%;
}

.vmss-facilities-dots-right {
    bottom: 40px;
    right: 3%;
}

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

.vmss-facilities-heading {
    text-align: center;
    max-width: 950px;

    margin: 0 auto 34px;
}

/* ENT Care eyebrow */

.vmss-facilities-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    margin-bottom: 13px;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;

    color: #ac752f;
}

.vmss-facilities-eyebrow span {
    width: 63px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--vf-gold)
    );
}

.vmss-facilities-eyebrow span:last-child {
    transform: rotate(180deg);
}

/* Large heading */

.vmss-facilities-heading h2 {
    margin: 0;

    color: #071d3d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.6vw, 68px);
    font-weight: 500;

    line-height: 1.12;
    letter-spacing: -2.2px;
}

.vmss-facilities-heading h2 span {
    color: var(--vf-gold);

    background: linear-gradient(
        120deg,
        #ca9853,
        #94601f
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Decorative divider */

.vmss-facilities-ornament {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin: 12px 0 8px;
    color: var(--vf-gold);
}

.vmss-facilities-ornament > span {
    width: 85px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--vf-gold)
    );
}

.vmss-facilities-ornament > span:last-child {
    transform: rotate(180deg);
}

.vmss-facilities-ornament svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.vmss-facilities-heading p {
    margin: 0;
    color: #65758d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
}

/* ==========================================================
   THREE COLUMN GRID
========================================================== */

.vmss-facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px 24px;
    width: 100%;
}

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

.vmss-facility-card {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    gap: 17px;

    width: 100%;
    min-width: 0;
    min-height: 83px;

    padding: 12px 22px;

    border: 1.3px solid #d59c4b;
    border-radius: 16px;

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

    box-shadow:
        0 6px 15px rgba(103, 74, 37, .045);

    overflow: hidden;

    transition:
        transform .45s var(--vf-ease),
        box-shadow .45s ease,
        border-color .35s ease;
}

/* Animated navy background */

.vmss-facility-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        120deg,
        #0b4056,
        #071f38
    );

    transform: translateX(-101%);

    transition: transform .55s var(--vf-ease);
}

/* Small gold shine */

.vmss-facility-card::after {
    content: "";

    position: absolute;
    top: -50%;
    left: -90px;

    width: 40px;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .16),
        transparent
    );

    transform: rotate(25deg);

    transition: left .75s ease;
    pointer-events: none;
}

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

.vmss-facility-icon {
    position: relative;
    z-index: 2;

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

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #fff9ef,
        #f5e8d2
    );

    color: #aa7329;

    transition:
        background .35s ease,
        color .35s ease,
        transform .45s var(--vf-ease),
        box-shadow .35s ease;
}

.vmss-facility-icon svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .4s ease;
}

/* ==========================================================
   VERTICAL GOLD DIVIDER
========================================================== */

.vmss-facility-divider {
    position: relative;
    z-index: 2;

    display: block;

    width: 1px;
    height: 42px;

    flex-shrink: 0;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(189, 137, 59, .68),
        transparent
    );

    transition: background .35s ease;
}

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

.vmss-facility-name {
    position: relative;
    z-index: 2;

    flex: 1;
    min-width: 0;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 600;

    line-height: 1.38;
    letter-spacing: -.15px;

    color: var(--vf-text);

    transition:
        color .35s ease,
        transform .4s var(--vf-ease);
}

/* Decorative corner */

.vmss-facility-corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 0;

    border-bottom: 28px solid rgba(214, 171, 101, .13);
    border-left: 28px solid transparent;

    opacity: 0;

    transition: opacity .35s ease;
}

/* ==========================================================
   PREMIUM HOVER EFFECT
========================================================== */

@media (hover: hover) {

    .vmss-facility-card:hover {
        transform: translateY(-5px);

        border-color: #c99b57;

        box-shadow:
            0 16px 30px rgba(9, 36, 62, .17),
            0 4px 12px rgba(9, 36, 62, .08);
    }

    .vmss-facility-card:hover::before {
        transform: translateX(0);
    }

    .vmss-facility-card:hover::after {
        left: 140%;
    }

    .vmss-facility-card:hover .vmss-facility-icon {
        color: #fff;

        background: linear-gradient(
            140deg,
            #ddb573,
            #a67535
        );

        transform: rotate(-7deg) scale(1.07);

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

    .vmss-facility-card:hover .vmss-facility-icon svg {
        transform: scale(1.07);
    }

    .vmss-facility-card:hover .vmss-facility-name {
        color: #ffffff;
        transform: translateX(3px);
    }

    .vmss-facility-card:hover .vmss-facility-divider {
        background: rgba(231, 197, 140, .65);
    }

    .vmss-facility-card:hover .vmss-facility-corner {
        opacity: 1;
    }
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssFacilityHeadingIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vmssFacilityCardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.975);
    }

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

/* Hidden only when JS animation is enabled */

.vmss-facilities.vmss-facilities-js:not(.is-visible)
.vmss-facilities-heading,
.vmss-facilities.vmss-facilities-js:not(.is-visible)
.vmss-facility-card {
    opacity: 0;
}

.vmss-facilities.vmss-facilities-js.is-visible
.vmss-facilities-heading {
    animation: vmssFacilityHeadingIn
        .8s var(--vf-ease) both;
}

.vmss-facilities.vmss-facilities-js.is-visible
.vmss-facility-card {
    animation: vmssFacilityCardIn
        .75s var(--vf-ease) both;

    animation-delay: var(--facility-delay, 0s);
}

/* Restore hover transform after entrance */

.vmss-facilities.vmss-facilities-js.animations-complete
.vmss-facility-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {
    .vmss-facilities.vmss-facilities-js.animations-complete
    .vmss-facility-card:hover {
        transform: translateY(-5px);
    }
}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .vmss-facilities-container {
        width: calc(100% - 65px);
    }

    .vmss-facilities-grid {
        gap: 16px;
    }

    .vmss-facility-card {
        padding: 11px 15px;
        gap: 12px;
    }

    .vmss-facility-icon {
        width: 52px;
        height: 52px;
    }

    .vmss-facility-icon svg {
        width: 28px;
        height: 28px;
    }

    .vmss-facility-name {
        font-size: 15px;
    }
}

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

@media (max-width: 950px) {

    .vmss-facilities {
        padding: 55px 0;
    }

    .vmss-facilities-container {
        width: calc(100% - 48px);
    }

    .vmss-facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .vmss-facilities-heading h2 {
        font-size: 51px;
    }

    .vmss-facility-card {
        min-height: 78px;
    }

    .vmss-facility-name {
        font-size: 16px;
    }
}

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

@media (max-width: 650px) {

    .vmss-facilities {
        padding: 43px 0 48px;
    }

    .vmss-facilities-container {
        width: calc(100% - 32px);
    }

    .vmss-facilities-heading {
        margin-bottom: 25px;
    }

    .vmss-facilities-eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .vmss-facilities-eyebrow span {
        width: 42px;
    }

    .vmss-facilities-heading h2 {
        font-size: clamp(35px, 8.5vw, 46px);
        letter-spacing: -1.3px;
    }

    .vmss-facilities-heading p {
        font-size: 16px;
    }

    .vmss-facilities-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .vmss-facility-card {
        min-height: 75px;
        padding: 10px 16px;
        border-radius: 13px;
        gap: 14px;
    }

    .vmss-facility-icon {
        width: 49px;
        height: 49px;
    }

    .vmss-facility-icon svg {
        width: 26px;
        height: 26px;
    }

    .vmss-facility-divider {
        height: 37px;
    }

    .vmss-facility-name {
        font-size: 16px;
        line-height: 1.4;
    }

    .vmss-facilities-dots {
        opacity: .4;
    }
}

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

@media (max-width: 380px) {

    .vmss-facility-card {
        gap: 10px;
        padding: 9px 12px;
    }

    .vmss-facility-name {
        font-size: 14px;
    }

    .vmss-facility-icon {
        width: 45px;
        height: 45px;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .vmss-facilities *,
    .vmss-facilities *::before,
    .vmss-facilities *::after {
        animation: none !important;
        transition: none !important;
    }

    .vmss-facilities.vmss-facilities-js
    .vmss-facilities-heading,
    .vmss-facilities.vmss-facilities-js
    .vmss-facility-card {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* ==========================================================
   VMSS MEET OUR TEAM
   Premium Doctor Cards + Responsive Slider
========================================================== */

:root {
    --vt-navy: #062a40;
    --vt-navy-dark: #031d30;
    --vt-gold: #c99752;
    --vt-gold-light: #e8c48b;
    --vt-cream: #faf7f1;
    --vt-ease: cubic-bezier(.22, 1, .36, 1);
}

.vmss-team,
.vmss-team * {
    box-sizing: border-box;
}

.vmss-team {
    --vt-columns: 3;
    --vt-gap: 20px;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 42px 0 43px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            #fffdfa 0%,
            #faf7f1 65%,
            #f3ede4 100%
        );
}

.vmss-team-container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 100px), 1600px);
    margin-inline: auto;
}

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

.vmss-team-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}

.vmss-team-deco-left {
    width: 560px;
    height: 560px;
    left: -375px;
    top: -410px;
    border: 1.5px solid rgba(202, 147, 69, .65);
    background: rgba(226, 209, 181, .08);
}

.vmss-team-deco-right {
    width: 700px;
    height: 700px;
    right: -525px;
    top: -590px;
    border: 1.5px solid rgba(202, 147, 69, .75);
}

.vmss-team::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 500px;
    left: -340px;
    top: -250px;
    border-radius: 50%;
    background: rgba(218, 189, 147, .1);
    pointer-events: none;
}

.vmss-team::after {
    content: "";
    position: absolute;
    right: -290px;
    bottom: -400px;
    width: 570px;
    height: 570px;
    border-radius: 50%;
    background: rgba(231, 214, 184, .16);
    pointer-events: none;
}

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

.vmss-team-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 135px;
    margin-bottom: 22px;
}

.vmss-team-heading-center {
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
}

.vmss-team-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--vt-gold);
}

.vmss-team-ornament > span {
    width: 65px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        currentColor
    );
}

.vmss-team-ornament > span:last-child {
    transform: rotate(180deg);
}

.vmss-team-ornament svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.vmss-team-heading h2 {
    margin: 0 0 8px;
    color: #071e38;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4vw, 60px);
    font-weight: 500;
    letter-spacing: -1.6px;
    line-height: 1.1;
}

.vmss-team-heading h2 span {
    color: #b8843f;
    background: linear-gradient(
        115deg,
        #d3a765,
        #a66b29
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vmss-team-heading p {
    margin: 0;
    color: #6e737b;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

/* ==========================================================
   SLIDER CONTROLS
========================================================== */

.vmss-team-controls {
    position: absolute;
    right: 0;
    top: 54%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 5;
}

.vmss-team-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #e9ddca;
    border-radius: 50%;
    background: #fff;
    color: var(--vt-navy);
    cursor: pointer;
    transition:
        transform .3s var(--vt-ease),
        color .3s,
        background .3s,
        box-shadow .3s;
}

.vmss-team-arrow svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-team-next {
    border-color: #d6aa69;
    background: linear-gradient(135deg, #dfb475, #ad7937);
    color: #fff;
}

.vmss-team-arrow:hover:not(:disabled) {
    background: var(--vt-navy);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(3, 30, 49, .2);
}

.vmss-team-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ==========================================================
   SLIDER TRACK
========================================================== */

.vmss-team-slider {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.vmss-team-track {
    display: flex;
    align-items: stretch;
    gap: var(--vt-gap);
    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;

    padding: 8px 0 18px;
    margin: -8px 0 -18px;
}

.vmss-team-track::-webkit-scrollbar {
    display: none;
}

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

.vmss-team-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 calc(
        (100% - (var(--vt-columns) - 1) * var(--vt-gap))
        / var(--vt-columns)
    );

    min-width: 0;
    height: 320px;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 76% 38%,
            rgba(17, 90, 117, .65),
            transparent 54%
        ),
        linear-gradient(
            120deg,
            #05354e,
            #02263c 65%,
            #052e45
        );

    box-shadow: 0 10px 26px rgba(4, 39, 60, .12);

    transition:
        box-shadow .45s var(--vt-ease),
        transform .45s var(--vt-ease);
}

.vmss-team-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    left: -100px;
    top: -135px;
    border-radius: 50%;
    background: rgba(21, 106, 132, .18);
}

.vmss-team-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3px;
    top: 0;
    left: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--vt-gold-light),
        transparent
    );
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .5s var(--vt-ease);
}

.vmss-team-card-pattern {
    position: absolute;
    z-index: 0;
    width: 300px;
    height: 300px;
    top: -165px;
    right: -95px;
    border-radius: 50%;
    border: 1px solid rgba(223, 180, 115, .11);
}

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

.vmss-team-card-content {
    position: absolute;
    z-index: 5;
    top: 38px;
    left: 28px;
    bottom: 30px;
    width: 47%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    pointer-events: none;
}

.vmss-team-card-line {
    display: block;
    width: 38px;
    height: 2px;
    flex-shrink: 0;
    background: var(--vt-gold-light);
    margin-bottom: 18px;
    transition: width .35s ease;
}

.vmss-team-doctor-name {
    margin: 0 0 16px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 1.8vw, 29px);
    font-weight: 500;
    line-height: 1.13;
    letter-spacing: -.5px;
}

.vmss-team-designation,
.vmss-team-speciality {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.vmss-team-designation {
    margin-bottom: 2px;
}

.vmss-team-speciality {
    max-width: 205px;
}

/* ==========================================================
   VIEW PROFILE BUTTON
========================================================== */

.vmss-team-profile-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: auto;
    min-height: 48px;
    padding: 10px 17px;
    min-width: 155px;
    max-width: 100%;

    border-radius: 13px;
    border: 1px solid rgba(242, 205, 146, .45);

    background: linear-gradient(135deg, #dcb477, #bc8743);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    pointer-events: auto;

    transition:
        transform .35s var(--vt-ease),
        box-shadow .35s,
        background .35s;
}

.vmss-team-profile-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, #e5c58d, #ad762d);
    transform: translateX(-102%);
    transition: transform .45s var(--vt-ease);
}

.vmss-team-btn-arrow {
    font-size: 23px;
    line-height: 1;
    transition: transform .3s ease;
}

.vmss-team-profile-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.vmss-team-profile-btn:hover::before {
    transform: translateX(0);
}

.vmss-team-profile-btn:hover .vmss-team-btn-arrow {
    transform: translateX(5px);
}

/* ==========================================================
   DOCTOR PORTRAIT + GOLD ARCH
========================================================== */

.vmss-team-card-visual {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 59%;
    height: 100%;

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

.vmss-team-portrait-arch {
    position: absolute;
    z-index: 1;
    bottom: -12px;
    right: 2%;
    width: 93%;
    height: 87%;
    border-radius: 49% 49% 0 0;
    border: 2px solid #dba755;
    background: linear-gradient(
        145deg,
        #fffdfa,
        #eee1ca
    );
    box-shadow: 0 0 0 5px rgba(205, 155, 80, .12);
    transition:
        transform .5s var(--vt-ease),
        box-shadow .5s ease;
}

.vmss-team-doctor-image {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .12));
    transition: transform .6s var(--vt-ease);
    transform-origin: center bottom;
}

.vmss-team-image-placeholder {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85%;
    color: #b2874a;
}

.vmss-team-image-placeholder svg {
    width: 95px;
    height: 95px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}

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

@media (hover: hover) {
    .vmss-team-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 20px 38px rgba(3, 36, 57, .23);
    }

    .vmss-team-card:hover::after {
        transform: scaleX(1);
    }

    .vmss-team-card:hover .vmss-team-card-line {
        width: 62px;
    }

    .vmss-team-card:hover .vmss-team-portrait-arch {
        transform: scale(1.035);
        box-shadow: 0 0 0 7px rgba(205, 155, 80, .17);
    }

    .vmss-team-card:hover .vmss-team-doctor-image {
        transform: scale(1.055);
    }
}

/* ==========================================================
   PAGINATION
========================================================== */

.vmss-team-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
    min-height: 14px;
    margin-top: 30px;
}

.vmss-team-pagination[hidden],
.vmss-team-controls[hidden] {
    display: none !important;
}

.vmss-team-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e8dfd2;
    cursor: pointer;
    transition: background .3s, transform .3s;
}

.vmss-team-dot.is-active {
    background: #d0a261;
    transform: scale(1.15);
}

.vmss-team-dot:hover {
    background: #bd8b49;
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssTeamFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vmssTeamCardReveal {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.965);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vmss-team.vmss-team-js:not(.is-visible) .vmss-team-heading,
.vmss-team.vmss-team-js:not(.is-visible) .vmss-team-card {
    opacity: 0;
}

.vmss-team.vmss-team-js.is-visible .vmss-team-heading {
    animation: vmssTeamFadeUp .8s var(--vt-ease) both;
}

.vmss-team.vmss-team-js.is-visible .vmss-team-card {
    animation: vmssTeamCardReveal .85s var(--vt-ease) both;
    animation-delay: var(--team-delay, 0s);
}

.vmss-team.vmss-team-js.animations-complete .vmss-team-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {
    .vmss-team.vmss-team-js.animations-complete .vmss-team-card:hover {
        transform: translateY(-7px);
    }
}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1450px) {
    .vmss-team-container {
        width: calc(100% - 70px);
    }

    .vmss-team {
        --vt-gap: 16px;
    }

    .vmss-team-card {
        height: 305px;
    }

    .vmss-team-card-content {
        top: 31px;
        left: 23px;
        bottom: 23px;
        width: 48%;
    }

    .vmss-team-doctor-name {
        font-size: 24px;
    }

    .vmss-team-designation,
    .vmss-team-speciality {
        font-size: 13px;
    }
}

/* ==========================================================
   SMALL LAPTOP
========================================================== */

@media (max-width: 1100px) {
    .vmss-team {
        --vt-columns: 2;
        padding: 40px 0;
    }

    .vmss-team-container {
        width: calc(100% - 55px);
    }

    .vmss-team-card {
        height: 315px;
    }

    .vmss-team-doctor-name {
        font-size: 27px;
    }

    .vmss-team-designation,
    .vmss-team-speciality {
        font-size: 15px;
    }
}

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

@media (max-width: 767px) {
    .vmss-team {
        --vt-columns: 1;
        --vt-gap: 14px;
        padding: 35px 0;
    }

    .vmss-team-container {
        width: calc(100% - 36px);
    }

    .vmss-team-heading {
        display: block;
        min-height: 0;
        margin-bottom: 25px;
    }

    .vmss-team-heading h2 {
        font-size: clamp(38px, 8vw, 48px);
    }

    .vmss-team-heading p {
        font-size: 15px;
    }

    .vmss-team-controls {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 20px;
    }

    .vmss-team-arrow {
        width: 43px;
        height: 43px;
    }

    .vmss-team-card {
        height: 330px;
    }

    .vmss-team-card-content {
        top: 34px;
        left: 27px;
        bottom: 26px;
        width: 47%;
    }

    .vmss-team-doctor-name {
        font-size: clamp(23px, 5.5vw, 29px);
    }

    .vmss-team-pagination {
        margin-top: 23px;
    }
}

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

@media (max-width: 420px) {
    .vmss-team-container {
        width: calc(100% - 26px);
    }

    .vmss-team-card {
        height: 285px;
    }

    .vmss-team-card-content {
        left: 17px;
        top: 25px;
        bottom: 20px;
        width: 49%;
    }

    .vmss-team-card-line {
        margin-bottom: 12px;
    }

    .vmss-team-doctor-name {
        font-size: 21px;
        margin-bottom: 12px;
    }

    .vmss-team-designation,
    .vmss-team-speciality {
        font-size: 12px;
    }

    .vmss-team-profile-btn {
        min-width: 0;
        min-height: 42px;
        padding: 9px 12px;
        font-size: 12px;
        gap: 8px;
    }

    .vmss-team-card-visual {
        width: 57%;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-team a:focus-visible,
.vmss-team button:focus-visible,
.vmss-team-track:focus-visible {
    outline: 3px solid #c99752;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vmss-team *,
    .vmss-team *::before,
    .vmss-team *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-team.vmss-team-js .vmss-team-heading,
    .vmss-team.vmss-team-js .vmss-team-card {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* ==========================================================
   VMSS PREMIUM PATIENT TESTIMONIALS
   OFFICIAL SITE COLORS - NAVY + GOLD
   Theme: vmsoftsysofficial
========================================================== */

:root {
    --vtest-navy: #09243e;
    --vtest-navy-dark: #031c2c;
    --vtest-navy-light: #123d5c;

    --vtest-gold: #b58a48;
    --vtest-gold-light: #dfbd7b;
    --vtest-gold-dark: #84602f;

    --vtest-white: #ffffff;
    --vtest-cream: #fffdfa;
    --vtest-card-cream: #fbf5e9;

    --vtest-text: #596477;
    --vtest-border: #e9ddcb;

    --vtest-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================
   RESET
========================================================== */

.vmss-testimonials,
.vmss-testimonials * {
    box-sizing: border-box;
}

.vmss-testimonials {
    --vtest-columns: 3;
    --vtest-gap: 20px;

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 100%;

    padding: 48px 0 40px;
    margin: 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            #ffffff 0%,
            #fffdfa 55%,
            #f8f3eb 100%
        );
}

.vmss-testimonials-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 130px), 1500px);
    margin-inline: auto;
}

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

.vmss-testimonials-circle {
    position: absolute;
    z-index: 0;

    border-radius: 50%;
    pointer-events: none;
}

.vmss-testimonials-circle.circle-left {
    width: 440px;
    height: 560px;

    left: -300px;
    top: -240px;

    background: rgba(223, 189, 123, .08);

    border: 1px solid rgba(181, 138, 72, .4);

    transform: rotate(-30deg);
}

.vmss-testimonials-circle.circle-right {
    width: 660px;
    height: 660px;

    right: -430px;
    top: 35px;

    background: rgba(181, 138, 72, .06);

    border: 1px solid rgba(181, 138, 72, .4);
}

/* Decorative gold dots */

.vmss-testimonials-dots {
    position: absolute;
    z-index: 1;

    width: 105px;
    height: 120px;

    background-image: radial-gradient(
        var(--vtest-gold) 1.2px,
        transparent 1.2px
    );

    background-size: 23px 23px;

    opacity: .65;
    pointer-events: none;
}

.vmss-testimonials-dots.dots-left {
    left: 8px;
    bottom: 30px;
}

.vmss-testimonials-dots.dots-right {
    right: 8px;
    top: 30px;
}

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

.vmss-testimonials-heading {
    max-width: 950px;

    margin: 0 auto 28px;

    text-align: center;
}

/* Gold ornament */

.vmss-testimonials-ornament {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 10px;

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

.vmss-testimonials-ornament span {
    width: 65px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--vtest-gold)
    );
}

.vmss-testimonials-ornament span:last-child {
    transform: rotate(180deg);
}

.vmss-testimonials-ornament svg {
    width: 27px;
    height: 27px;

    fill: currentColor;
}

/* Heading */

.vmss-testimonials-heading h2 {
    margin: 0 0 9px;

    color: var(--vtest-navy);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 3.8vw, 60px);
    font-weight: 500;

    line-height: 1.13;
    letter-spacing: -1.5px;
}

.vmss-testimonials-heading h2 span {
    color: var(--vtest-gold);

    background: linear-gradient(
        110deg,
        #d2aa70,
        #94652b
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

/* Subtitle */

.vmss-testimonials-heading p {
    margin: 0;

    color: #737d89;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* ==========================================================
   SLIDER LAYOUT
========================================================== */

.vmss-testimonials-slider {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
}

.vmss-testimonials-track {
    display: flex;
    align-items: stretch;

    gap: var(--vtest-gap);

    flex: 1 1 auto;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;

    padding: 12px 0 16px;
    margin: -12px 0 -16px;
}

.vmss-testimonials-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   PREVIOUS / NEXT BUTTONS
========================================================== */

.vmss-testimonial-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

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

    width: 50px;
    height: 50px;

    padding: 0;

    border: 1px solid #e8dccb;
    border-radius: 50%;

    background: #ffffff;
    color: var(--vtest-navy);

    box-shadow: 0 7px 22px rgba(9, 36, 62, .09);

    transform: translateY(-50%);

    cursor: pointer;

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

.vmss-testimonial-prev {
    left: -65px;
}

.vmss-testimonial-next {
    right: -65px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #d5ad72,
        #a97938
    );

    border-color: var(--vtest-gold);
}

.vmss-testimonial-arrow svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .35s ease;
}

.vmss-testimonial-arrow:hover:not(:disabled) {
    color: #ffffff;

    background: var(--vtest-navy);
    border-color: var(--vtest-navy);

    box-shadow: 0 12px 28px rgba(9, 36, 62, .2);
}

.vmss-testimonial-prev:hover:not(:disabled) svg {
    transform: translateX(-4px);
}

.vmss-testimonial-next:hover:not(:disabled) svg {
    transform: translateX(4px);
}

.vmss-testimonial-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.vmss-testimonial-arrow[hidden] {
    display: none !important;
}

/* ==========================================================
   TESTIMONIAL CARDS
========================================================== */

.vmss-testimonial-card {
    position: relative;
    isolation: isolate;

    flex: 0 0 calc(
        (100% - (var(--vtest-columns) - 1)
        * var(--vtest-gap)) / var(--vtest-columns)
    );

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 310px;

    padding: 25px 27px 22px;

    border-radius: 20px;
    border: 1px solid var(--vtest-border);

    background: #ffffff;

    box-shadow: 0 10px 30px rgba(54, 47, 35, .07);

    scroll-snap-align: start;

    transition:
        transform .45s var(--vtest-ease),
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}

/* ==========================================================
   ACTIVE CENTRE CARD - GOLD HIGHLIGHT
========================================================== */

.vmss-testimonial-card.is-featured {
    border: 1.5px solid var(--vtest-gold);

    background: linear-gradient(
        145deg,
        #fffdf8 0%,
        #f8efe0 100%
    );

    box-shadow:
        0 12px 33px rgba(181, 138, 72, .11);
}

/* Small gold top accent */

.vmss-testimonial-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        var(--vtest-gold),
        transparent
    );

    border-radius: 4px;

    transition: width .45s var(--vtest-ease);
}

.vmss-testimonial-card.is-featured::before {
    width: 55%;
}

/* ==========================================================
   PATIENT INFORMATION
========================================================== */

.vmss-testimonial-person {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-height: 68px;

    margin-bottom: 20px;
}

.vmss-testimonial-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f4eadb;

    border: 2px solid rgba(181, 138, 72, .2);

    overflow: hidden;

    transition:
        transform .45s var(--vtest-ease),
        box-shadow .4s ease,
        border-color .4s ease;
}

.vmss-testimonial-photo {
    display: block;

    width: 100%;
    height: 100%;

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

.vmss-testimonial-avatar > svg {
    width: 38px;
    height: 38px;

    fill: none;
    stroke: var(--vtest-gold);
    stroke-width: 1.5;
}

/* Patient name */

.vmss-testimonial-person-info {
    min-width: 0;
    flex: 1;
}

.vmss-testimonial-name {
    margin: 0 0 5px;

    color: var(--vtest-navy);

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;

    line-height: 1.35;

    transition: color .35s ease;
}

.vmss-testimonial-city {
    display: block;

    color: #83909d;

    font-family: Arial, sans-serif;
    font-size: 14px;

    line-height: 1.3;
}

/* ==========================================================
   GOLD QUOTATION MARK
========================================================== */

.vmss-testimonial-quote {
    position: absolute;

    right: 0;
    top: -23px;

    font-family: Georgia, serif;
    font-size: 90px;
    line-height: 1;

    color: rgba(181, 138, 72, .22);

    pointer-events: none;

    transition:
        color .4s ease,
        transform .4s var(--vtest-ease);
}

.vmss-testimonial-card.is-featured
.vmss-testimonial-quote {
    color: rgba(181, 138, 72, .36);
}

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

.vmss-testimonial-review {
    position: relative;

    flex: 1;
    min-height: 0;
}

.vmss-testimonial-review p {
    margin: 0;

    color: var(--vtest-text);

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;

    overflow: hidden;
}

/* ==========================================================
   GOLD RATINGS
========================================================== */

.vmss-testimonial-rating {
    display: flex;
    align-items: center;

    gap: 5px;

    width: fit-content;

    margin-top: 18px;
    padding-top: 12px;
}

.vmss-testimonial-rating svg {
    width: 19px;
    height: 19px;

    stroke: var(--vtest-gold);
    stroke-width: 1.5;

    transition: transform .3s ease;
}

.vmss-testimonial-rating svg.is-filled {
    fill: var(--vtest-gold);
}

.vmss-testimonial-rating svg.is-empty {
    fill: transparent;
}

/* ==========================================================
   PREMIUM NAVY + GOLD HOVER
========================================================== */

@media (hover: hover) {

    .vmss-testimonial-card:hover {
        transform: translateY(-8px);

        border-color: var(--vtest-gold);

        background: linear-gradient(
            145deg,
            #fffdf8 0%,
            #f5ead8 100%
        );

        box-shadow:
            0 22px 45px rgba(90, 65, 34, .16),
            0 5px 14px rgba(181, 138, 72, .07);
    }

    /* Expand top gold line */

    .vmss-testimonial-card:hover::before {
        width: 75%;
    }

    /* Patient portrait animation */

    .vmss-testimonial-card:hover
    .vmss-testimonial-avatar {
        transform: scale(1.08);

        border-color: var(--vtest-gold);

        box-shadow:
            0 0 0 5px rgba(181, 138, 72, .1),
            0 8px 20px rgba(181, 138, 72, .12);
    }

    /* Quote animation */

    .vmss-testimonial-card:hover
    .vmss-testimonial-quote {
        transform: translateY(-7px) rotate(-7deg);

        color: rgba(181, 138, 72, .48);
    }

    /* Patient name */

    .vmss-testimonial-card:hover
    .vmss-testimonial-name {
        color: var(--vtest-gold-dark);
    }

    /* Star animation */

    .vmss-testimonial-card:hover
    .vmss-testimonial-rating svg {
        transform: translateY(-2px);
    }

}

/* ==========================================================
   PAGINATION DOTS
========================================================== */

.vmss-testimonials-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 14px;

    margin-top: 30px;
}

.vmss-testimonials-pagination[hidden] {
    display: none !important;
}

.vmss-testimonial-dot {
    width: 12px;
    height: 12px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #e8ded0;

    cursor: pointer;

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

.vmss-testimonial-dot.is-active {
    background: var(--vtest-gold);

    transform: scale(1.18);

    box-shadow: 0 3px 10px rgba(181, 138, 72, .2);
}

.vmss-testimonial-dot:hover {
    background: var(--vtest-gold-dark);
    transform: scale(1.12);
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssTestimonialFadeUp {

    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes vmssTestimonialCardEntrance {

    from {
        opacity: 0;
        transform: translateY(38px) scale(.97);
    }

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

}

/* Initial animation state */

.vmss-testimonials.vmss-testimonials-js:not(.is-visible)
.vmss-testimonials-heading,
.vmss-testimonials.vmss-testimonials-js:not(.is-visible)
.vmss-testimonial-card {
    opacity: 0;
}

/* Heading entrance */

.vmss-testimonials.vmss-testimonials-js.is-visible
.vmss-testimonials-heading {
    animation: vmssTestimonialFadeUp
        .8s var(--vtest-ease) both;
}

/* Card entrance */

.vmss-testimonials.vmss-testimonials-js.is-visible
.vmss-testimonial-card {
    animation: vmssTestimonialCardEntrance
        .8s var(--vtest-ease) both;

    animation-delay: var(--testimonial-delay, 0s);
}

/* Release entrance transform after animation */

.vmss-testimonials.vmss-testimonials-js.animations-complete
.vmss-testimonial-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {

    .vmss-testimonials.vmss-testimonials-js.animations-complete
    .vmss-testimonial-card:hover {
        transform: translateY(-8px);
    }

}

/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1350px) {

    .vmss-testimonials-container {
        width: calc(100% - 115px);
    }

    .vmss-testimonial-card {
        padding: 23px;
    }

    .vmss-testimonial-review p {
        font-size: 14px;
    }

    .vmss-testimonial-name {
        font-size: 15px;
    }

}

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

@media (max-width: 1050px) {

    .vmss-testimonials {
        --vtest-columns: 2;
        --vtest-gap: 16px;
    }

    .vmss-testimonials-container {
        width: calc(100% - 110px);
    }

    .vmss-testimonial-card {
        min-height: 300px;
    }

    .vmss-testimonials-heading h2 {
        font-size: 47px;
    }

}

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

@media (max-width: 700px) {

    .vmss-testimonials {
        --vtest-columns: 1;
        --vtest-gap: 14px;

        padding: 38px 0 35px;
    }

    .vmss-testimonials-container {
        width: calc(100% - 66px);
    }

    .vmss-testimonials-heading {
        margin-bottom: 23px;
    }

    .vmss-testimonials-heading h2 {
        font-size: clamp(34px, 8vw, 44px);
        letter-spacing: -1px;
    }

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

    .vmss-testimonials-ornament span {
        width: 45px;
    }

    .vmss-testimonial-card {
        min-height: 295px;

        padding: 22px 20px;

        border-radius: 17px;
    }

    .vmss-testimonial-person {
        gap: 12px;
    }

    .vmss-testimonial-avatar {
        width: 58px;
        height: 58px;
    }

    .vmss-testimonial-name {
        font-size: 15px;
    }

    .vmss-testimonial-review p {
        font-size: 14px;
    }

    .vmss-testimonial-arrow {
        width: 38px;
        height: 38px;
    }

    .vmss-testimonial-prev {
        left: -44px;
    }

    .vmss-testimonial-next {
        right: -44px;
    }

    .vmss-testimonials-pagination {
        margin-top: 24px;
    }

}

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

@media (max-width: 390px) {

    .vmss-testimonials-container {
        width: calc(100% - 58px);
    }

    .vmss-testimonial-card {
        padding: 19px 15px;
    }

    .vmss-testimonial-prev {
        left: -39px;
    }

    .vmss-testimonial-next {
        right: -39px;
    }

    .vmss-testimonial-quote {
        font-size: 70px;
    }

    .vmss-testimonial-name {
        font-size: 14px;
    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-testimonials button:focus-visible,
.vmss-testimonials-track:focus-visible {
    outline: 3px solid var(--vtest-gold);
    outline-offset: 4px;
}

/* Reduced motion */

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

    .vmss-testimonials *,
    .vmss-testimonials *::before,
    .vmss-testimonials *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-testimonials.vmss-testimonials-js
    .vmss-testimonials-heading,
    .vmss-testimonials.vmss-testimonials-js
    .vmss-testimonial-card {
        opacity: 1 !important;
        transform: none !important;
    }

}
/* ==========================================================
   VMSS PATIENT TESTIMONIAL VIDEOS
   Premium Navy + Gold + Ivory
========================================================== */

:root {
    --vtv-navy: #09243e;
    --vtv-dark: #031c2c;
    --vtv-gold: #b58a48;
    --vtv-gold-light: #dfbd7b;
    --vtv-ivory: #fffdfa;
    --vtv-ease: cubic-bezier(.22, 1, .36, 1);
}

.vmss-video-testimonials,
.vmss-video-testimonials *,
.vmss-vt-modal,
.vmss-vt-modal * {
    box-sizing: border-box;
}

.vmss-video-testimonials {
    --vtv-gap: 22px;
    --vtv-columns: 2;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding: 55px 0 55px;
    margin: 0;

    background:
        radial-gradient(
            ellipse at 50% 28%,
            #ffffff 0%,
            #fffdfa 55%,
            #f8f3e9 100%
        );
}

.vmss-vt-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 150px), 1440px);
    margin: 0 auto;
}

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

.vmss-vt-shape,
.vmss-vt-wave {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.vmss-vt-shape-left {
    width: 510px;
    height: 420px;
    top: -290px;
    left: -280px;
    border-radius: 50%;
    background: rgba(223, 189, 123, .10);
}

.vmss-vt-shape-right {
    width: 560px;
    height: 530px;
    right: -350px;
    top: -270px;
    border-radius: 50%;
    background: rgba(223, 189, 123, .09);
}

.vmss-vt-wave-left {
    width: 850px;
    height: 320px;
    left: -310px;
    bottom: -260px;
    transform: rotate(13deg);
    border-radius: 50%;
    border-top: 1.4px solid rgba(181, 138, 72, .55);
}

.vmss-vt-wave-right {
    width: 700px;
    height: 650px;
    right: -550px;
    bottom: -380px;
    border-radius: 50%;
    border: 1px solid rgba(181, 138, 72, .55);
}

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

.vmss-vt-heading {
    max-width: 950px;
    margin: 0 auto 35px;
    text-align: center;
}

.vmss-vt-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    margin-bottom: 15px;

    color: #a47130;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
}

.vmss-vt-eyebrow span {
    width: 38px;
    height: 1px;
    background: var(--vtv-gold);
}

.vmss-vt-heading h2 {
    margin: 0 0 12px;

    color: var(--vtv-navy);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.2vw, 63px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -1.8px;
}

.vmss-vt-heading h2 span {
    color: var(--vtv-gold);
    background: linear-gradient(
        110deg,
        #d4aa70,
        #94652b
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vmss-vt-heading p {
    max-width: 760px;
    margin: 0 auto;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;

    color: #617087;
}

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

.vmss-vt-slider {
    position: relative;
    width: 100%;
    min-width: 0;
}

.vmss-vt-track {
    display: flex;
    align-items: stretch;
    gap: var(--vtv-gap);

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;

    padding: 8px 0 18px;
    margin: -8px 0 -18px;
}

.vmss-vt-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   VIDEO CARDS
========================================================== */

.vmss-vt-card {
    flex: 0 0 calc(
        (100% - (var(--vtv-columns) - 1) * var(--vtv-gap))
        / var(--vtv-columns)
    );

    min-width: 0;
    aspect-ratio: 16 / 9;

    border: 2px solid rgba(181, 138, 72, .48);
    border-radius: 16px;

    background: var(--vtv-dark);
    overflow: hidden;

    scroll-snap-align: start;

    box-shadow: 0 12px 30px rgba(9, 36, 62, .11);

    transition:
        transform .45s var(--vtv-ease),
        box-shadow .45s ease,
        border-color .35s ease;
}

.vmss-vt-video-trigger {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;

    background: var(--vtv-dark);
    color: #ffffff;

    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.vmss-vt-thumbnail {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

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

    transition:
        transform .7s var(--vtv-ease),
        filter .45s ease;
}

.vmss-vt-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .76) 0%,
            rgba(0, 0, 0, .10) 38%,
            rgba(0, 0, 0, .03) 65%,
            rgba(0, 0, 0, .2) 100%
        );

    transition: background .4s ease;
}

/* ==========================================================
   VIDEO TEXT
========================================================== */

.vmss-vt-video-heading {
    position: absolute;
    top: 21px;
    left: 28px;
    right: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 5px;

    z-index: 3;
}

.vmss-vt-video-heading strong {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(17px, 1.5vw, 23px);
    font-weight: 600;
    line-height: 1.25;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .32);
}

.vmss-vt-video-heading small {
    color: rgba(255, 255, 255, .92);

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.5;
}

.vmss-vt-gold-line {
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 4px;
    background: var(--vtv-gold-light);
}

/* ==========================================================
   CIRCULAR PLAY BUTTON
========================================================== */

.vmss-vt-play {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

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

    width: 65px;
    height: 65px;

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

    border: 3px solid #ffffff;
    border-radius: 50%;

    color: #ffffff;
    background: rgba(181, 138, 72, .92);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .17),
        0 0 0 7px rgba(255, 255, 255, .12);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .4s var(--vtv-ease);
}

.vmss-vt-play svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    stroke: currentColor;
    stroke-linejoin: round;
    margin-left: 4px;
}

/* ==========================================================
   VIDEO DURATION
========================================================== */

.vmss-vt-duration {
    position: absolute;
    right: 14px;
    bottom: 13px;
    z-index: 4;

    display: inline-block;

    padding: 5px 8px;

    border-radius: 5px;

    background: rgba(0, 0, 0, .70);
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
}

/* ==========================================================
   HOVER ANIMATION
========================================================== */

@media (hover: hover) {

    .vmss-vt-card:hover {
        transform: translateY(-7px);

        border-color: var(--vtv-gold-light);

        box-shadow:
            0 24px 45px rgba(9, 36, 62, .19),
            0 6px 15px rgba(181, 138, 72, .1);
    }

    .vmss-vt-card:hover .vmss-vt-thumbnail {
        transform: scale(1.065);
        filter: brightness(.9);
    }

    .vmss-vt-card:hover .vmss-vt-play {
        transform: translate(-50%, -50%) scale(1.13);

        background: var(--vtv-navy);

        box-shadow:
            0 12px 30px rgba(0, 0, 0, .2),
            0 0 0 12px rgba(255, 255, 255, .18);
    }
}

/* ==========================================================
   NAVIGATION
========================================================== */

.vmss-vt-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;

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

    width: 46px;
    height: 46px;

    padding: 0;

    transform: translateY(-50%);

    background: #fffdfa;
    border: 1px solid var(--vtv-gold-light);
    border-radius: 50%;

    color: var(--vtv-gold);
    cursor: pointer;

    box-shadow: 0 7px 20px rgba(9, 36, 62, .07);

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

.vmss-vt-prev {
    left: -65px;
}

.vmss-vt-next {
    right: -65px;
}

.vmss-vt-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-vt-arrow:hover:not(:disabled) {
    background: var(--vtv-navy);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(9, 36, 62, .2);
}

.vmss-vt-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.vmss-vt-arrow[hidden] {
    display: none !important;
}

/* ==========================================================
   PAGINATION
========================================================== */

.vmss-vt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 15px;
    margin-top: 33px;
}

.vmss-vt-pagination[hidden] {
    display: none !important;
}

.vmss-vt-dot {
    width: 11px;
    height: 11px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #e3ded6;
    cursor: pointer;

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

.vmss-vt-dot.is-active {
    background: var(--vtv-gold);
    transform: scale(1.2);
}

/* ==========================================================
   VIDEO POPUP
========================================================== */

.vmss-vt-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 25px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.vmss-vt-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vmss-vt-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(1, 14, 25, .88);
    backdrop-filter: blur(8px);
}

.vmss-vt-modal-dialog {
    position: relative;
    z-index: 2;

    width: min(100%, 1050px);

    border-radius: 14px;
    border: 1px solid rgba(223, 189, 123, .38);

    background: #06192d;

    box-shadow: 0 25px 70px rgba(0, 0, 0, .35);
}

.vmss-vt-modal-player {
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
    border-radius: 14px;
}

.vmss-vt-modal-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.vmss-vt-modal-close {
    position: absolute;
    top: -49px;
    right: 0;

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

    width: 41px;
    height: 41px;

    border: 1px solid var(--vtv-gold-light);
    border-radius: 50%;

    background: var(--vtv-navy);
    color: #ffffff;

    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

body.vmss-vt-modal-open {
    overflow: hidden;
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssVtFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vmssVtCardIn {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.96);
    }

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

.vmss-video-testimonials.vt-js:not(.is-visible)
.vmss-vt-heading,
.vmss-video-testimonials.vt-js:not(.is-visible)
.vmss-vt-card {
    opacity: 0;
}

.vmss-video-testimonials.vt-js.is-visible
.vmss-vt-heading {
    animation: vmssVtFadeUp .8s var(--vtv-ease) both;
}

.vmss-video-testimonials.vt-js.is-visible
.vmss-vt-card {
    animation: vmssVtCardIn .8s var(--vtv-ease) both;
    animation-delay: var(--vt-delay, 0s);
}

.vmss-video-testimonials.vt-js.animations-complete
.vmss-vt-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {
    .vmss-video-testimonials.vt-js.animations-complete
    .vmss-vt-card:hover {
        transform: translateY(-7px);
    }
}

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

@media (max-width: 1050px) {

    .vmss-vt-container {
        width: calc(100% - 110px);
    }

    .vmss-video-testimonials {
        --vtv-gap: 16px;
        padding: 45px 0;
    }

    .vmss-vt-heading h2 {
        font-size: 48px;
    }

    .vmss-vt-video-heading {
        top: 16px;
        left: 18px;
    }

    .vmss-vt-video-heading strong {
        font-size: 16px;
    }
}

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

@media (max-width: 700px) {

    .vmss-video-testimonials {
        --vtv-columns: 1;
        --vtv-gap: 14px;
        padding: 38px 0;
    }

    .vmss-vt-container {
        width: calc(100% - 65px);
    }

    .vmss-vt-heading {
        margin-bottom: 26px;
    }

    .vmss-vt-heading h2 {
        font-size: clamp(35px, 8vw, 45px);
        letter-spacing: -1px;
    }

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

    .vmss-vt-card {
        border-radius: 12px;
    }

    .vmss-vt-play {
        width: 50px;
        height: 50px;
        border-width: 2px;
    }

    .vmss-vt-play svg {
        width: 22px;
        height: 22px;
    }

    .vmss-vt-video-heading {
        top: 11px;
        left: 13px;
        right: 12px;
        gap: 3px;
    }

    .vmss-vt-video-heading strong {
        font-size: 14px;
    }

    .vmss-vt-video-heading small {
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .vmss-vt-gold-line {
        margin-top: 2px;
    }

    .vmss-vt-arrow {
        width: 37px;
        height: 37px;
    }

    .vmss-vt-prev {
        left: -46px;
    }

    .vmss-vt-next {
        right: -46px;
    }

    .vmss-vt-duration {
        right: 8px;
        bottom: 8px;
        font-size: 10px;
    }

    .vmss-vt-modal {
        padding: 12px;
    }

    .vmss-vt-pagination {
        margin-top: 25px;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-video-testimonials button:focus-visible,
.vmss-vt-modal button:focus-visible,
.vmss-vt-track:focus-visible {
    outline: 3px solid var(--vtv-gold);
    outline-offset: 4px;
}

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

    .vmss-video-testimonials *,
    .vmss-video-testimonials *::before,
    .vmss-video-testimonials *::after,
    .vmss-vt-modal * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-video-testimonials.vt-js
    .vmss-vt-heading,
    .vmss-video-testimonials.vt-js
    .vmss-vt-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   VMSS OFFICIAL - APPOINTMENT SECTION
   COMPLETE DARK NAVY + GOLD CSS
   Compact, Responsive, Premium Design
========================================================== */

.vmss-appointment {
    --ap-navy: #09243e;
    --ap-dark: #031c2c;
    --ap-teal: #0b4058;
    --ap-gold: #b58a48;
    --ap-gold-light: #dfbd7b;
    --ap-gold-dark: #84602f;
    --ap-white: #ffffff;
    --ap-muted: #65748a;
    --ap-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 32px 0;
    margin: 0;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(27, 104, 132, .36),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 90% 85%,
            rgba(18, 81, 110, .32),
            transparent 48%
        ),
        linear-gradient(
            125deg,
            #031c2c 0%,
            #092f46 50%,
            #031c2c 100%
        );

    color: #ffffff;
}

.vmss-appointment,
.vmss-appointment *,
.vmss-appointment *::before,
.vmss-appointment *::after {
    box-sizing: border-box;
}

/* ==========================================================
   MAIN CONTAINER AND GRID
========================================================== */

.vmss-appt-container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 80px), 1380px);
    margin-inline: auto;
}

.vmss-appt-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
    width: 100%;
}

/* ==========================================================
   DECORATIVE BACKGROUND ELEMENTS
========================================================== */

.vmss-appt-decoration {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.vmss-appt-deco-one {
    width: 440px;
    height: 440px;
    top: -350px;
    left: -310px;
    border: 1px solid rgba(223, 189, 123, .45);
    background: rgba(28, 100, 130, .13);
}

.vmss-appt-deco-two {
    width: 540px;
    height: 540px;
    right: -460px;
    bottom: -420px;
    border: 1px solid rgba(223, 189, 123, .42);
    background: rgba(28, 100, 130, .08);
}

.vmss-appt-dots {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 20px;
    width: 85px;
    height: 105px;
    opacity: .7;
    pointer-events: none;

    background-image: radial-gradient(
        #dfbd7b 1.2px,
        transparent 1.2px
    );
    background-size: 19px 19px;
}

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

.vmss-appt-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* Eyebrow */

.vmss-appt-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;

    color: var(--ap-gold-light);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.7px;
    line-height: 1.5;
}

.vmss-appt-eyebrow > span {
    display: block;
    width: 43px;
    height: 2px;
    flex-shrink: 0;
    background: var(--ap-gold-light);
}

/* Main heading */

.vmss-appt-content h2 {
    margin: 0 0 17px;
    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(39px, 3.8vw, 60px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2px;
}

.vmss-appt-content h2 span {
    display: block;
    color: var(--ap-gold-light);

    background: linear-gradient(
        110deg,
        #f2d5a2 0%,
        #d5aa68 55%,
        #b58a48 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Description */

.vmss-appt-description {
    max-width: 470px;
    margin: 0 0 25px;

    color: #d5e0e8;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

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

.vmss-appt-benefits {
    display: grid;
    gap: 17px;
}

.vmss-appt-benefit {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;

    transition: transform .4s var(--ap-ease);
}

/* Gold icon circles */

.vmss-appt-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    border: 1px solid #dfbd7b;
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #fffaf0 0%,
        #e9d1ac 100%
    );

    color: #a87934;

    box-shadow: 0 7px 18px rgba(0, 0, 0, .12);

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s var(--ap-ease),
        box-shadow .4s ease;
}

.vmss-appt-benefit-icon svg {
    display: block;
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-appt-benefit h3 {
    margin: 0 0 4px;

    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
}

.vmss-appt-benefit p {
    margin: 0;
    color: #cbd9e2;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* Benefit hover */

@media (hover: hover) {
    .vmss-appt-benefit:hover {
        transform: translateX(7px);
    }

    .vmss-appt-benefit:hover .vmss-appt-benefit-icon {
        transform: translateY(-3px) rotate(-7deg);

        background: linear-gradient(
            145deg,
            #dfbd7b,
            #b58a48
        );

        color: var(--ap-navy);

        box-shadow:
            0 10px 23px rgba(0, 0, 0, .22),
            0 0 20px rgba(223, 189, 123, .15);
    }
}

/* ==========================================================
   PHONE / SUPPORT LINE
========================================================== */

.vmss-appt-help {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 24px;

    color: #d5e0e8;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.vmss-appt-help-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    margin-right: 5px;

    border-radius: 50%;
    background: var(--ap-gold-light);
    box-shadow: 0 0 0 4px rgba(223, 189, 123, .15);
}

.vmss-appt-help a {
    color: #f0c987;
    font-weight: 700;
    text-decoration: none;
    transition: color .3s ease;
}

.vmss-appt-help a:hover {
    color: #ffffff;
}

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

.vmss-appt-form-card {
    position: relative;
    z-index: 3;
    min-width: 0;

    padding: 25px 30px;

    border: 1px solid rgba(223, 189, 123, .45);
    border-radius: 20px;

    background: #ffffff;
    color: var(--ap-navy);

    box-shadow:
        0 23px 55px rgba(0, 0, 0, .24),
        0 0 0 5px rgba(255, 255, 255, .035);
}

/* Subtle internal outline */

.vmss-appt-form-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;

    border: 1px solid rgba(181, 138, 72, .08);
    border-radius: 15px;
    pointer-events: none;
}

.vmss-appt-form-card > * {
    position: relative;
    z-index: 1;
}

/* Gold accent line */

.vmss-appt-form-topline {
    width: 50px;
    height: 3px;
    margin-bottom: 12px;

    background: linear-gradient(
        90deg,
        #dfbd7b,
        #b58a48
    );
}

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

.vmss-appt-form-heading {
    margin-bottom: 17px;
}

.vmss-appt-form-kicker {
    display: block;
    margin-bottom: 5px;

    color: #a87934;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.5;
}

.vmss-appt-form-heading h3 {
    margin: 0 0 7px;

    color: var(--ap-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 2.6vw, 37px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.9px;
}

.vmss-appt-form-heading p {
    margin: 0;

    color: #65748a;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

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

.vmss-appt-form {
    width: 100%;
    min-width: 0;
}

.vmss-appt-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    width: 100%;
}

.vmss-appt-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vmss-appt-field-full {
    grid-column: 1 / -1;
}

/* ==========================================================
   FORM LABELS
========================================================== */

.vmss-appt-field label {
    display: block;
    margin: 0 0 5px;

    color: var(--ap-navy);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.vmss-appt-field label > span:not(.vmss-appt-optional) {
    color: #a87934;
}

.vmss-appt-optional {
    margin-left: 4px;
    color: #87919c;
    font-size: 10px;
    font-weight: 400;
}

/* ==========================================================
   FORM INPUTS
========================================================== */

.vmss-appt-field input,
.vmss-appt-field select,
.vmss-appt-field textarea {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 43px;

    margin: 0;
    padding: 9px 12px;

    border: 1px solid #dfe4e9;
    border-radius: 9px;

    background: #fafbfc;
    color: var(--ap-navy);

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    outline: none;
    appearance: auto;

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

.vmss-appt-field textarea {
    height: 74px;
    min-height: 74px;
    resize: vertical;
}

.vmss-appt-field input::placeholder,
.vmss-appt-field textarea::placeholder {
    color: #96a0ad;
}

.vmss-appt-field input:hover,
.vmss-appt-field select:hover,
.vmss-appt-field textarea:hover {
    border-color: #cbb18a;
}

.vmss-appt-field input:focus,
.vmss-appt-field select:focus,
.vmss-appt-field textarea:focus {
    background: #ffffff;
    border-color: var(--ap-gold);

    box-shadow:
        0 0 0 3px rgba(181, 138, 72, .13);
}

.vmss-appt-field select {
    cursor: pointer;
}

.vmss-appt-field input[type="date"] {
    color-scheme: light;
    cursor: pointer;
}

/* ==========================================================
   VALIDATION STATES
========================================================== */

.vmss-appt-field.is-invalid input,
.vmss-appt-field.is-invalid select,
.vmss-appt-field.is-invalid textarea {
    border-color: #ba4444;
    background: #fffafa;
}

.vmss-appt-error,
.vmss-appt-consent-error {
    display: block;

    margin-top: 4px;

    color: #a52d2d;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
}

.vmss-appt-error:empty,
.vmss-appt-consent-error:empty {
    display: none;
}

/* ==========================================================
   SPAM HONEYPOT
========================================================== */

.vmss-appt-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   CONSENT CHECKBOX
========================================================== */

.vmss-appt-consent {
    margin-top: 13px;
}

.vmss-appt-consent label {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 0;
    cursor: pointer;
}

.vmss-appt-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;

    margin: 2px 0 0;
    padding: 0;

    accent-color: var(--ap-gold-dark);
    cursor: pointer;
}

.vmss-appt-consent label span {
    color: #65748a;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.55;
}

.vmss-appt-consent strong {
    color: #b34343;
}

/* ==========================================================
   FORM RESPONSE MESSAGES
========================================================== */

.vmss-appt-response {
    margin: 13px 0 0;
    padding: 11px 13px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.vmss-appt-response[hidden] {
    display: none !important;
}

.vmss-appt-response.is-success {
    border-color: #a5d5ba;
    background: #eef9f1;
    color: #21643e;
}

.vmss-appt-response.is-error {
    border-color: #e1b0aa;
    background: #fff1f0;
    color: #9c3030;
}

/* ==========================================================
   PREMIUM GOLD SUBMIT BUTTON
========================================================== */

.vmss-appt-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-height: 48px;

    margin-top: 14px;
    padding: 10px 20px;

    border: 1px solid #dfbd7b;
    border-radius: 9px;

    background: linear-gradient(
        110deg,
        #d4ab70 0%,
        #b58a48 55%,
        #926a35 100%
    );

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(181, 138, 72, .18),
        inset 0 1px 0 rgba(255, 255, 255, .2);

    transition:
        transform .35s var(--ap-ease),
        box-shadow .35s ease;
}

.vmss-appt-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        110deg,
        #123d5c,
        #031c2c
    );

    transform: translateX(-102%);

    transition: transform .5s var(--ap-ease);
}

.vmss-appt-submit-text,
.vmss-appt-submit-arrow,
.vmss-appt-submit-spinner {
    position: relative;
    z-index: 2;
}

.vmss-appt-submit-arrow {
    font-size: 23px;
    line-height: 1;
    transition: transform .3s ease;
}

.vmss-appt-submit:hover:not(:disabled) {
    transform: translateY(-3px);
    color: #ffffff;

    box-shadow:
        0 14px 28px rgba(9, 36, 62, .22);
}

.vmss-appt-submit:hover:not(:disabled)::before {
    transform: translateX(0);
}

.vmss-appt-submit:hover:not(:disabled)
.vmss-appt-submit-arrow {
    transform: translateX(6px);
}

.vmss-appt-submit:active:not(:disabled) {
    transform: translateY(-1px);
}

.vmss-appt-submit:disabled {
    opacity: .72;
    cursor: wait;
}

/* ==========================================================
   LOADING SPINNER
========================================================== */

.vmss-appt-submit-spinner {
    display: none;

    width: 17px;
    height: 17px;
    flex-shrink: 0;

    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: vmssApptSpin .7s linear infinite;
}

.vmss-appt-submit.is-loading .vmss-appt-submit-spinner {
    display: block;
}

.vmss-appt-submit.is-loading .vmss-appt-submit-arrow {
    display: none;
}

@keyframes vmssApptSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   FORM DISCLAIMER
========================================================== */

.vmss-appt-disclaimer {
    margin: 10px 0 0;

    color: #87919e;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

/* ==========================================================
   ENTRANCE ANIMATIONS
========================================================== */

@keyframes vmssApptRevealLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes vmssApptRevealRight {
    from {
        opacity: 0;
        transform: translate(30px, 18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.vmss-appointment.appt-js:not(.is-visible)
.vmss-appt-content,
.vmss-appointment.appt-js:not(.is-visible)
.vmss-appt-form-card {
    opacity: 0;
}

.vmss-appointment.appt-js.is-visible
.vmss-appt-content {
    animation:
        vmssApptRevealLeft .85s var(--ap-ease) both;
}

.vmss-appointment.appt-js.is-visible
.vmss-appt-form-card {
    animation:
        vmssApptRevealRight .9s var(--ap-ease) .12s both;
}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {
    .vmss-appointment {
        padding: 28px 0;
    }

    .vmss-appt-grid {
        gap: 65px;
    }
}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1150px) {
    .vmss-appt-container {
        width: calc(100% - 55px);
    }

    .vmss-appt-grid {
        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.15fr);
        gap: 30px;
    }

    .vmss-appt-content h2 {
        font-size: 43px;
    }

    .vmss-appt-form-card {
        padding: 22px;
    }

    .vmss-appt-benefit h3 {
        font-size: 17px;
    }

    .vmss-appt-benefit-icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
    }
}

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

@media (max-width: 850px) {
    .vmss-appointment {
        padding: 43px 0;
    }

    .vmss-appt-container {
        width: calc(100% - 42px);
    }

    .vmss-appt-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .vmss-appt-content h2 {
        font-size: clamp(40px, 6vw, 55px);
    }

    .vmss-appt-description {
        max-width: 650px;
        margin-bottom: 22px;
    }

    .vmss-appt-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .vmss-appt-benefit {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .vmss-appt-benefit h3 {
        font-size: 16px;
    }

    .vmss-appt-benefit p {
        font-size: 12px;
    }

    .vmss-appt-help {
        margin-top: 23px;
    }

    .vmss-appt-form-card {
        width: 100%;
        max-width: 750px;
        margin-inline: auto;
    }
}

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

@media (max-width: 600px) {
    .vmss-appointment {
        padding: 33px 0;
    }

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

    .vmss-appt-grid {
        gap: 25px;
    }

    .vmss-appt-eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .vmss-appt-content h2 {
        font-size: clamp(36px, 9vw, 45px);
        line-height: 1.1;
        letter-spacing: -1.4px;
    }

    .vmss-appt-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.65;
    }

    .vmss-appt-benefits {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .vmss-appt-benefit {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .vmss-appt-benefit-icon {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }

    .vmss-appt-benefit-icon svg {
        width: 23px;
        height: 23px;
    }

    .vmss-appt-benefit h3 {
        font-size: 16px;
    }

    .vmss-appt-benefit p {
        font-size: 12px;
    }

    .vmss-appt-help {
        margin-top: 19px;
        font-size: 12px;
    }

    /* Mobile form */

    .vmss-appt-form-card {
        padding: 22px 17px;
        border-radius: 16px;
    }

    .vmss-appt-form-topline {
        margin-bottom: 11px;
    }

    .vmss-appt-form-heading {
        margin-bottom: 16px;
    }

    .vmss-appt-form-heading h3 {
        font-size: 30px;
    }

    .vmss-appt-form-heading p {
        font-size: 12px;
    }

    .vmss-appt-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .vmss-appt-field-full {
        grid-column: auto;
    }

    .vmss-appt-field input,
    .vmss-appt-field select,
    .vmss-appt-field textarea {
        min-height: 45px;
        font-size: 16px;
    }

    .vmss-appt-field textarea {
        height: 80px;
        min-height: 80px;
    }

    .vmss-appt-consent label span {
        font-size: 11px;
    }

    .vmss-appt-submit {
        min-height: 50px;
        font-size: 14px;
    }

    .vmss-appt-disclaimer {
        font-size: 10px;
    }
}

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

@media (max-width: 380px) {
    .vmss-appt-container {
        width: calc(100% - 24px);
    }

    .vmss-appt-content h2 {
        font-size: 35px;
    }

    .vmss-appt-form-card {
        padding: 19px 14px;
    }

    .vmss-appt-form-heading h3 {
        font-size: 27px;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.vmss-appointment a:focus-visible,
.vmss-appointment button:focus-visible,
.vmss-appointment input:focus-visible,
.vmss-appointment select:focus-visible,
.vmss-appointment textarea:focus-visible {
    outline: 2px solid var(--ap-gold-light);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .vmss-appointment *,
    .vmss-appointment *::before,
    .vmss-appointment *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vmss-appointment.appt-js .vmss-appt-content,
    .vmss-appointment.appt-js .vmss-appt-form-card {
        opacity: 1 !important;
        transform: none !important;
    }

    .vmss-appt-submit-spinner {
        animation: vmssApptSpin .7s linear infinite !important;
    }
}


/* ====================================================
   VMSOFTSYS OFFICIAL
   PREMIUM HOMEPAGE BLOGS
   COMPLETE UPDATED CSS
==================================================== */

.vmss-blogs {
    --vb-navy: #031c2c;
    --vb-blue: #09243e;
    --vb-gold: #b58a48;
    --vb-gold-light: #dfbd7b;
    --vb-text: #65748a;
    --vb-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    padding: 45px 0 50px;
    margin: 0;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            #fbfcfd 68%,
            #f5f6f7 100%
        );
}

.vmss-blogs,
.vmss-blogs *,
.vmss-blogs *::before,
.vmss-blogs *::after {
    box-sizing: border-box;
}

.vmss-blogs-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 80px), 1440px);
    margin: 0 auto;
}

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

.vmss-blogs-shape {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.vmss-blogs-shape-left {
    width: 450px;
    height: 450px;
    top: -345px;
    left: -280px;
    border: 1px solid rgba(181, 138, 72, .38);
    background: rgba(181, 138, 72, .025);
}

.vmss-blogs-shape-right {
    width: 570px;
    height: 570px;
    right: -440px;
    top: -395px;
    border: 1px solid rgba(181, 138, 72, .33);
    background: rgba(181, 138, 72, .025);
}

.vmss-blogs-dots {
    position: absolute;
    z-index: 0;
    top: 35px;
    right: 35px;
    width: 100px;
    height: 110px;
    opacity: .55;
    pointer-events: none;

    background-image: radial-gradient(
        var(--vb-gold) 1.3px,
        transparent 1.3px
    );

    background-size: 20px 20px;
}

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

.vmss-blogs-heading {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

.vmss-blogs-heading-line {
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 14px;
    border-radius: 5px;

    background: linear-gradient(
        90deg,
        #b58a48,
        #dfbd7b
    );
}

.vmss-blogs-heading h2 {
    margin: 0 0 10px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(43px, 4vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.7px;

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

.vmss-blogs-heading h2 span {
    color: var(--vb-gold);

    background: linear-gradient(
        110deg,
        #d8b27a,
        #a67532
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vmss-blogs-heading p {
    max-width: 850px;
    margin: 0 auto;

    color: var(--vb-text);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

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

.vmss-blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    width: 100%;
}

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

.vmss-blog-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    margin: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(9, 36, 62, .08);
    border-radius: 19px;

    box-shadow: 0 11px 30px rgba(9, 36, 62, .07);

    transition:
        transform .5s var(--vb-ease),
        box-shadow .45s ease,
        border-color .4s ease;
}

/* Gold bottom line */

.vmss-blog-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 3;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        var(--vb-gold),
        transparent
    );

    transition: width .5s var(--vb-ease);
}

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

.vmss-blog-image-link {
    position: relative;
    display: block;

    width: 100%;
    height: 220px;
    flex-shrink: 0;

    overflow: hidden;
    background: #e9edf0;
    text-decoration: none;
}

.vmss-blog-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

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

    transform: scale(1);

    transition:
        transform .8s var(--vb-ease),
        filter .5s ease;
}

.vmss-blog-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        135deg,
        #e9edf0,
        #f8f1e6
    );

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

.vmss-blog-image-placeholder svg {
    width: 55px;
    height: 55px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

/* Image overlay */

.vmss-blog-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0;

    background: linear-gradient(
        to bottom,
        transparent 35%,
        rgba(3, 28, 44, .55)
    );

    transition: opacity .45s ease;
}

/* Floating arrow */

.vmss-blog-image-arrow {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: 17px;

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

    width: 44px;
    height: 44px;

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

    background: var(--vb-gold);
    color: #ffffff;

    font-size: 23px;
    line-height: 1;

    opacity: 0;

    transform: translateY(15px) rotate(-25deg);

    transition:
        opacity .4s ease,
        transform .5s var(--vb-ease);
}

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

.vmss-blog-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: 1;
    min-width: 0;

    padding: 22px 24px 24px;
}

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

.vmss-blog-category {
    display: flex;
    align-items: center;

    gap: 11px;
    min-width: 0;

    margin: 0 0 15px;
}

.vmss-blog-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    border-radius: 50%;
    background: #f6eee2;
    color: var(--vb-gold);

    transition:
        transform .4s var(--vb-ease),
        background .35s ease,
        color .35s ease;
}

.vmss-blog-category-icon svg {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vmss-blog-category-name {
    min-width: 0;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
    line-height: 1.4;
    text-transform: uppercase;

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

.vmss-blog-category-line {
    width: 35px;
    height: 1px;
    flex-shrink: 0;

    background: var(--vb-gold);
}

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

.vmss-blog-title {
    width: 100%;
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 1.7vw, 25px);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -.4px;

    color: var(--vb-navy);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;

    overflow: hidden;
}

.vmss-blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.vmss-blog-title a:hover {
    color: var(--vb-gold);
}

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

.vmss-blog-excerpt {
    margin: 0 0 20px;

    color: var(--vb-text);

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;

    overflow: hidden;
}

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

.vmss-blog-readmore {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    gap: 11px;

    min-height: 44px;
    margin-top: auto;
    padding: 10px 24px;

    border: 1px solid var(--vb-gold-light);
    border-radius: 50px;

    background: linear-gradient(
        125deg,
        #cda166,
        #ad7b39
    );

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    box-shadow:
        0 7px 16px rgba(181, 138, 72, .15);

    transition:
        transform .35s var(--vb-ease),
        box-shadow .35s ease;
}

.vmss-blog-readmore::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        120deg,
        #123d5c,
        #031c2c
    );

    transform: translateX(-102%);
    transition: transform .5s var(--vb-ease);
}

.vmss-blog-readmore svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .35s ease;
}

.vmss-blog-readmore:hover {
    color: #ffffff;
    transform: translateY(-3px);

    box-shadow:
        0 12px 24px rgba(9, 36, 62, .18);
}

.vmss-blog-readmore:hover::before {
    transform: translateX(0);
}

.vmss-blog-readmore:hover svg {
    transform: translateX(5px);
}

/* ====================================================
   CARD HOVER ANIMATIONS
==================================================== */

@media (hover: hover) {

    .vmss-blog-card:hover {
        transform: translateY(-8px);

        border-color: rgba(181, 138, 72, .4);

        box-shadow:
            0 24px 43px rgba(9, 36, 62, .14),
            0 5px 14px rgba(181, 138, 72, .06);
    }

    .vmss-blog-card:hover::after {
        width: 82%;
    }

    .vmss-blog-card:hover .vmss-blog-image {
        transform: scale(1.07);
        filter: saturate(1.08);
    }

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

    .vmss-blog-card:hover .vmss-blog-image-arrow {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }

    .vmss-blog-card:hover .vmss-blog-category-icon {
        transform: rotate(-7deg) scale(1.07);
        color: var(--vb-gold-light);
        background: var(--vb-navy);
    }
}

/* ====================================================
   ENTRANCE ANIMATIONS
==================================================== */

@keyframes vmssBlogsHeadingIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vmssBlogCardIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.97);
    }

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

/* Hidden before entrance */

.vmss-blogs.vmss-blogs-js:not(.is-visible)
.vmss-blogs-heading,
.vmss-blogs.vmss-blogs-js:not(.is-visible)
.vmss-blog-card {
    opacity: 0;
}

/* Heading animation */

.vmss-blogs.vmss-blogs-js.is-visible
.vmss-blogs-heading {
    animation:
        vmssBlogsHeadingIn .8s var(--vb-ease) both;
}

/* Card animation */

.vmss-blogs.vmss-blogs-js.is-visible
.vmss-blog-card {
    animation:
        vmssBlogCardIn .85s var(--vb-ease) both;

    animation-delay:
        calc(.12s + var(--blog-delay, 0s));
}

/* Restore normal hover after entrance */

.vmss-blogs.vmss-blogs-js.animations-complete
.vmss-blog-card {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (hover: hover) {
    .vmss-blogs.vmss-blogs-js.animations-complete
    .vmss-blog-card:hover {
        transform: translateY(-8px);
    }
}

/* ====================================================
   LAPTOP
==================================================== */

@media (max-width: 1200px) {

    .vmss-blogs-container {
        width: calc(100% - 60px);
    }

    .vmss-blogs-grid {
        gap: 18px;
    }

    .vmss-blog-image-link {
        height: 200px;
    }

    .vmss-blog-body {
        padding: 20px;
    }

    .vmss-blog-title {
        font-size: 22px;
    }

    .vmss-blog-excerpt {
        font-size: 14px;
    }
}

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

@media (max-width: 900px) {

    .vmss-blogs {
        padding: 43px 0 48px;
    }

    .vmss-blogs-container {
        width: calc(100% - 44px);
    }

    .vmss-blogs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .vmss-blogs-heading h2 {
        font-size: 50px;
    }

    .vmss-blog-image-link {
        height: 215px;
    }
}

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

@media (max-width: 650px) {

    .vmss-blogs {
        padding: 36px 0 42px;
    }

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

    .vmss-blogs-heading {
        margin-bottom: 24px;
    }

    .vmss-blogs-heading h2 {
        font-size: 42px;
        letter-spacing: -1.3px;
    }

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

    .vmss-blogs-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .vmss-blog-card {
        border-radius: 17px;
    }

    .vmss-blog-image-link {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .vmss-blog-body {
        padding: 21px;
    }

    .vmss-blog-category {
        margin-bottom: 14px;
    }

    .vmss-blog-title {
        font-size: 23px;
    }

    .vmss-blog-excerpt {
        font-size: 14px;
        margin-bottom: 19px;
    }

    .vmss-blog-readmore {
        min-height: 43px;
        padding: 9px 22px;
    }
}

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

@media (max-width: 380px) {

    .vmss-blogs-container {
        width: calc(100% - 24px);
    }

    .vmss-blog-body {
        padding: 18px;
    }

    .vmss-blog-title {
        font-size: 21px;
    }
}

/* ====================================================
   ACCESSIBILITY
==================================================== */

.vmss-blogs a:focus-visible {
    outline: 3px solid var(--vb-gold);
    outline-offset: 4px;
}

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

    .vmss-blogs *,
    .vmss-blogs *::before,
    .vmss-blogs *::after {
        animation: none !important;
        transition: none !important;
    }

    .vmss-blogs.vmss-blogs-js
    .vmss-blogs-heading,
    .vmss-blogs.vmss-blogs-js
    .vmss-blog-card {
        opacity: 1 !important;
        transform: none !important;
    }
}