/* ==========================================================
   VED VAIDYA - PREMIUM DARK HOMEPAGE BANNER

   FINAL UPDATED CSS
   - Premium dark blue background
   - Sharp animated serif heading
   - Cyan and green accent typography
   - Three premium trust cards
   - Transparent doctors image touching bottom
   - Smooth hover and live animations
   - No diagonal waves
   - Responsive desktop, tablet and mobile
========================================================== */


/* ==========================================================
   01. VARIABLES
========================================================== */

:root {
    --vvd-dark: #031d3e;
    --vvd-navy: #052c59;
    --vvd-blue: #087fbc;

    --vvd-cyan: #20e3e9;
    --vvd-green: #58ef91;

    --vvd-white: #ffffff;
    --vvd-muted: #cbdfea;

    --vvd-font: "Manrope", Arial, sans-serif;
    --vvd-serif: Georgia, "Times New Roman", serif;
}


/* ==========================================================
   02. MAIN HERO SECTION
========================================================== */

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

.vvd-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    min-height: clamp(
        640px,
        calc(100svh - 96px),
        820px
    );

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: none;
    border-radius: 0;

    background:
        radial-gradient(
            ellipse at 83% 31%,
            rgba(0, 196, 202, 0.23) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse at 7% 18%,
            rgba(5, 134, 208, 0.32) 0%,
            transparent 45%
        ),
        linear-gradient(
            112deg,
            #052b59 0%,
            #073a70 47%,
            #075676 78%,
            #087b83 100%
        );

    color: #ffffff;

    font-family: var(--vvd-font);
}

.vvd-hero a {
    text-decoration: none;
}

.vvd-hero a:focus-visible {
    outline: 3px solid #62f4a3;
    outline-offset: 5px;
}


/* ==========================================================
   03. AMBIENT BACKGROUND
========================================================== */

.vvd-hero__atmosphere {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.vvd-hero__light {
    position: absolute;
    display: block;

    border-radius: 50%;

    filter: blur(85px);

    animation:
        vvdAmbientMove 15s ease-in-out infinite;
}

.vvd-hero__light--one {
    top: -280px;
    left: -190px;

    width: 550px;
    height: 550px;

    background: rgba(0, 139, 222, 0.14);
}

.vvd-hero__light--two {
    right: -170px;
    bottom: -230px;

    width: 580px;
    height: 580px;

    background: rgba(0, 208, 183, 0.12);

    animation-delay: -7s;
}

/* Very subtle dots on right only */

.vvd-hero__grid {
    position: absolute;
    inset: 0 0 0 52%;

    background-image: radial-gradient(
        rgba(192, 244, 251, 0.17) 0.75px,
        transparent 0.75px
    );

    background-size: 29px 29px;

    opacity: 0.23;

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

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


/* ==========================================================
   04. MAIN CONTAINER

   IMPORTANT:
   No bottom padding on the container.
   This allows the image to touch the section bottom.
========================================================== */

.vvd-hero__container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(0, 0.93fr);

    align-items: stretch;

    gap: clamp(24px, 3vw, 52px);

    width: min(
        1540px,
        calc(100% - clamp(48px, 8vw, 140px))
    );

    min-height: inherit;

    margin: 0 auto;

    padding: 0;
}


/* ==========================================================
   05. LEFT CONTENT
========================================================== */

.vvd-hero__content {
    position: relative;
    z-index: 5;

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

    align-self: center;

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

    margin: 0;

    padding: 34px 0 38px;

    transform: none;
    filter: none;

    text-shadow: none;
    will-change: auto;

    animation:
        vvdContentFade 0.85s ease both;
}


/* ==========================================================
   06. PREMIUM BADGE
========================================================== */

.vvd-hero__badge {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    min-height: 43px;

    padding: 5px 16px 5px 5px;

    border: 1px solid rgba(98, 231, 243, 0.36);
    border-radius: 100px;

    background: rgba(0, 116, 172, 0.17);

    color: #effcff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.vvd-hero__badge:hover {
    background: rgba(0, 183, 201, 0.19);

    border-color: rgba(88, 242, 224, 0.75);

    box-shadow:
        0 0 25px rgba(9, 223, 211, 0.13);
}

/* Badge icon */

.vvd-hero__badge-icon {
    display: grid;
    place-items: center;

    flex: none;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #08d7e3;
    color: #003c64;

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

.vvd-hero__badge-icon svg {
    display: block;

    width: 19px;
    height: 19px;
}

.vvd-hero__badge:hover
.vvd-hero__badge-icon {
    background: #60ef96;

    transform: rotate(-10deg);
}

/* Live indicator */

.vvd-hero__badge-dot {
    flex: none;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--vvd-green);

    animation:
        vvdPulse 2.7s ease-out infinite;
}


/* ==========================================================
   07. PREMIUM ANIMATED HEADING
========================================================== */

.vvd-hero__heading {
    position: relative;

    display: block;

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

    margin: 23px 0 0;
    padding: 0;

    font-family: var(--vvd-serif);

    font-size: clamp(42px, 3.8vw, 66px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -0.039em;

    color: #ffffff;

    text-shadow: none;
    filter: none;
    transform: none;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* Reserve the heading width during typing */

.vvd-hero__line {
    position: relative;

    display: block;

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

    min-height: 1.1em;

    color: #ffffff;

    white-space: nowrap;
}

/* Invisible ghost text */

.vvd-hero__ghost {
    display: block;

    visibility: hidden;
    user-select: none;

    white-space: nowrap;
}

/* Live text */

.vvd-hero__typed {
    position: absolute;

    top: 0;
    left: 0;

    display: inline-block;

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

    white-space: nowrap;

    color: inherit;

    text-shadow: none;
    filter: none;
    transform: none;

    will-change: auto;
}


/* ==========================================================
   08. GREEN + CYAN ACCENT H1
========================================================== */

.vvd-hero__line--accent {
    margin-top: 5px;
}

.vvd-hero__green {
    color: #57ef91;
    -webkit-text-fill-color: #57ef91;

    transition:
        color 0.35s ease,
        -webkit-text-fill-color 0.35s ease;
}

.vvd-hero__cyan {
    color: #1ce4ed;
    -webkit-text-fill-color: #1ce4ed;

    transition:
        color 0.35s ease,
        -webkit-text-fill-color 0.35s ease;
}

/* Text hover */

.vvd-hero__heading:hover
.vvd-hero__green {
    color: #8affb2;
    -webkit-text-fill-color: #8affb2;
}

.vvd-hero__heading:hover
.vvd-hero__cyan {
    color: #85faff;
    -webkit-text-fill-color: #85faff;
}

/* Animated typing caret */

.vvd-hero__typed.is-typing::after {
    content: "";

    display: inline-block;

    width: 3px;
    height: 0.76em;

    margin-left: 5px;

    border-radius: 2px;

    background: #70faca;

    vertical-align: -0.06em;

    animation:
        vvdCaretBlink 0.75s steps(1) infinite;
}


/* ==========================================================
   09. HEADING ACCENT
========================================================== */

.vvd-hero__heading-accent {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 18px;
}

.vvd-hero__heading-accent span:first-child {
    display: block;

    width: 58px;
    height: 3px;

    border-radius: 10px;

    background: #37e7d9;

    transition: width 0.5s ease;
}

.vvd-hero__heading-accent span:last-child {
    display: block;

    width: 19px;
    height: 3px;

    border-radius: 10px;

    background: #65f49b;
}

.vvd-hero__content:hover
.vvd-hero__heading-accent span:first-child {
    width: 86px;
}


/* ==========================================================
   10. DESCRIPTION
========================================================== */

.vvd-hero__description {
    max-width: 580px;

    margin: 21px 0 0;
    padding: 0;

    font-family: var(--vvd-font);

    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 500;

    line-height: 1.67;
    letter-spacing: -0.01em;

    color: #d4e8f3;

    text-shadow: none;
    filter: none;
    transform: none;
}

.vvd-hero__description strong {
    color: #ffffff;

    font-weight: 800;
}


/* ==========================================================
   11. CTA BUTTONS
========================================================== */

.vvd-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 27px;
}

.vvd-hero__button {
    position: relative;
    isolation: isolate;

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

    gap: 22px;

    min-width: 170px;
    min-height: 53px;

    padding: 7px 7px 7px 22px;

    overflow: hidden;

    border-radius: 100px;

    font-family: var(--vvd-font);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;

    white-space: nowrap;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

.vvd-hero__button > span {
    position: relative;
    z-index: 2;
}

/* Arrow container */

.vvd-hero__arrow {
    display: grid;
    place-items: center;

    flex: none;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    transition:
        transform 0.4s cubic-bezier(.16, 1, .3, 1),
        background 0.35s ease,
        color 0.35s ease;
}

.vvd-hero__arrow svg {
    display: block;

    width: 19px;
    height: 19px;
}

.vvd-hero__button:hover
.vvd-hero__arrow {
    transform: translateX(4px);
}


/* ==========================================================
   12. PRIMARY BUTTON
========================================================== */

.vvd-hero__button--primary {
    color: #003455 !important;

    border: 1px solid transparent;

    background: linear-gradient(
        110deg,
        #04d3e8 0%,
        #29e5b9 54%,
        #5ff08d 100%
    );

    box-shadow:
        0 12px 30px rgba(0, 24, 60, 0.17);
}

/* Animated light reflection */

.vvd-hero__button--primary::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: -100%;
    left: -80%;

    width: 55%;
    height: 300%;

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

    transform: rotate(24deg);

    transition: left 0.8s ease;

    pointer-events: none;
}

.vvd-hero__button--primary:hover::before {
    left: 145%;
}

.vvd-hero__button--primary:hover {
    box-shadow:
        0 18px 38px rgba(0, 24, 61, 0.27),
        0 0 0 4px rgba(85, 241, 174, 0.12);
}

.vvd-hero__button--primary
.vvd-hero__arrow {
    background: rgba(255, 255, 255, 0.25);
}


/* ==========================================================
   13. SECONDARY BUTTON
========================================================== */

.vvd-hero__button--secondary {
    color: #ffffff !important;

    border: 1px solid rgba(165, 233, 248, 0.75);

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

.vvd-hero__button--secondary::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    background: linear-gradient(
        110deg,
        #087db6,
        #0ba49b
    );

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

    transition:
        transform 0.45s cubic-bezier(.16, 1, .3, 1);
}

.vvd-hero__button--secondary:hover::before {
    transform: scaleX(1);
}

.vvd-hero__button--secondary:hover {
    border-color: #62f2dc;

    box-shadow:
        0 12px 28px rgba(0, 26, 61, 0.21);
}

.vvd-hero__button--secondary
.vvd-hero__arrow {
    border: 1px solid rgba(255, 255, 255, 0.24);
}


/* ==========================================================
   14. PREMIUM TRUST CARDS
========================================================== */

.vvd-hero__features {
    display: grid;

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

    gap: 11px;

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

    margin-top: 31px;
}

.vvd-hero__feature {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: flex-start;

    gap: 11px;

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

    padding: 13px 11px;

    border: 1px solid rgba(165, 224, 242, 0.17);
    border-radius: 14px;

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

    box-shadow:
        0 8px 25px rgba(0, 25, 65, 0.045);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

/* Hover light */

.vvd-hero__feature::after {
    content: "";

    position: absolute;

    top: -50px;
    right: -50px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(53, 228, 218, 0.12),
        transparent 70%
    );

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}

.vvd-hero__feature:hover {
    background: rgba(255, 255, 255, 0.105);

    border-color: rgba(95, 241, 220, 0.42);

    box-shadow:
        0 15px 34px rgba(0, 23, 57, 0.17);
}

.vvd-hero__feature:hover::after {
    opacity: 1;
}


/* ==========================================================
   15. FEATURE ICONS
========================================================== */

.vvd-hero__feature-icon {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(125, 223, 245, 0.18);
    border-radius: 11px;

    background: rgba(39, 186, 223, 0.17);

    color: #ffffff;

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

.vvd-hero__feature-icon svg {
    display: block;

    width: 22px;
    height: 22px;
}

.vvd-hero__feature:hover
.vvd-hero__feature-icon {
    color: #003d5f;

    background: linear-gradient(
        135deg,
        #16dce4,
        #5ff098
    );

    transform: translateY(-4px) rotate(-5deg);

    box-shadow:
        0 11px 25px rgba(0, 25, 62, 0.23);
}


/* ==========================================================
   16. FEATURE TEXT
========================================================== */

.vvd-hero__feature-copy {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 5px;
}

.vvd-hero__feature-copy strong {
    display: block;

    color: #ffffff;

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

    line-height: 1.45;
    letter-spacing: -0.015em;

    transition: color 0.35s ease;
}

.vvd-hero__feature-copy small {
    display: block;

    color: #c9dfea;

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

    line-height: 1.5;
}

.vvd-hero__feature:hover
.vvd-hero__feature-copy strong {
    color: #84f6ca;
}


/* ==========================================================
   17. RIGHT VISUAL

   KEY FIX:
   No bottom margin, no bottom padding,
   and the visual stretches to hero bottom.
========================================================== */

.vvd-hero__visual {
    position: relative;
    isolation: isolate;

    align-self: stretch;

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

    width: 100%;
    min-width: 0;

    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: visible;
}


/* ==========================================================
   18. PREMIUM HALO
========================================================== */

.vvd-hero__visual-halo {
    position: absolute;
    z-index: 0;

    left: 50%;
    bottom: 8%;

    width: min(96%, 610px);
    aspect-ratio: 1;

    border-radius: 50%;

    background: radial-gradient(
        circle at 36% 30%,
        rgba(175, 255, 250, 0.29),
        rgba(35, 191, 217, 0.2) 38%,
        rgba(0, 125, 183, 0.08) 68%,
        transparent 74%
    );

    border: 1px solid rgba(137, 237, 246, 0.18);

    box-shadow:
        0 0 0 23px rgba(55, 225, 222, 0.035),
        0 0 0 54px rgba(55, 225, 222, 0.018);

    transform: translateX(-50%);

    animation:
        vvdHaloBreathe 8s ease-in-out infinite;

    pointer-events: none;
}


/* ==========================================================
   19. DECORATIVE ORBITS
========================================================== */

.vvd-hero__visual-orbit {
    position: absolute;
    z-index: 1;

    inset: 8% 0 8% 0;

    pointer-events: none;
}

.vvd-hero__visual-orbit span {
    position: absolute;
    display: block;

    border-radius: 50%;
}

.vvd-hero__visual-orbit span:first-child {
    top: 8%;
    right: -7%;

    width: 58%;
    aspect-ratio: 1;

    border: 1px solid rgba(121, 237, 244, 0.22);
    border-left-color: transparent;

    transform: rotate(-20deg);
}

.vvd-hero__visual-orbit span:last-child {
    left: 0;
    bottom: 4%;

    width: 39%;
    aspect-ratio: 1;

    border: 1px solid rgba(101, 247, 195, 0.16);
    border-right-color: transparent;
}


/* ==========================================================
   20. MEDICAL CROSS
========================================================== */

.vvd-hero__medical-cross {
    position: absolute;
    z-index: 1;

    top: 15%;
    right: 6%;

    width: 75px;
    height: 75px;

    color: rgba(148, 232, 247, 0.27);

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


/* ==========================================================
   21. TRANSPARENT DOCTORS IMAGE

   MAIN BOTTOM ALIGNMENT FIX
========================================================== */

.vvd-hero__photo {
    position: absolute;
    z-index: 3;

    top: 0;
    right: 0;
    bottom: -12px;
    left: 0;

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

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    overflow: visible;
}

/* ACTUAL IMAGE */

.vvd-hero__doctors-image {
    display: block;

    width: 112%;
    max-width: none;

    height: 100%;
    max-height: none;

    margin: 0;
    padding: 0;

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

    transform: translateY(6px) scale(1.025);
    transform-origin: right bottom;

    filter: drop-shadow(
        0 17px 28px rgba(0, 19, 49, 0.24)
    );

    transition:
        transform 0.85s cubic-bezier(.16, 1, .3, 1),
        filter 0.85s ease;
}

/* HOVER IMAGE */

.vvd-hero__visual:hover
.vvd-hero__doctors-image {
    transform:
        translateY(2px)
        scale(1.045);

    filter: drop-shadow(
        0 24px 37px rgba(0, 17, 46, 0.32)
    );
}


/* ==========================================================
   22. REMOVE OLD BOTTOM IMAGE FADE

   Prevents the rectangular colour strip
   underneath the doctors.
========================================================== */

.vvd-hero__visual-glow {
    display: none !important;
}


/* ==========================================================
   23. LIVE ANIMATIONS
========================================================== */

@keyframes vvdCaretBlink {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes vvdContentFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vvdPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(87, 239, 145, 0.31);
    }

    60% {
        box-shadow:
            0 0 0 7px rgba(87, 239, 145, 0);
    }
}

@keyframes vvdAmbientMove {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(32px, 23px, 0);
    }
}

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

    50% {
        transform: translateX(-50%) scale(1.045);
    }
}

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

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


/* ==========================================================
   24. MEDIUM DESKTOP
========================================================== */

@media (max-width: 1450px) {

    .vvd-hero__container {
        gap: 28px;
    }

    .vvd-hero__heading {
        font-size: clamp(40px, 3.8vw, 57px);
    }

    .vvd-hero__features {
        gap: 9px;
    }

    .vvd-hero__feature {
        padding: 12px 9px;
        gap: 9px;
    }

    .vvd-hero__feature-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .vvd-hero__feature-icon svg {
        width: 20px;
        height: 20px;
    }

    .vvd-hero__doctors-image {
        width: 114%;
    }
}


/* ==========================================================
   25. LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .vvd-hero {
        min-height: 610px;
    }

    .vvd-hero__container {
        width: calc(100% - 64px);

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(0, 0.9fr);

        gap: 15px;
    }

    .vvd-hero__heading {
        font-size: clamp(36px, 3.7vw, 46px);
    }

    .vvd-hero__content {
        padding: 27px 0 30px;
    }

    .vvd-hero__description {
        font-size: 16px;
        line-height: 1.6;
    }

    .vvd-hero__features {
        gap: 7px;
        margin-top: 25px;
    }

    .vvd-hero__feature {
        padding: 10px 8px;
        gap: 8px;
    }

    .vvd-hero__feature-copy strong {
        font-size: 12px;
    }

    .vvd-hero__feature-copy small {
        font-size: 12px;
    }

    .vvd-hero__doctors-image {
        width: 116%;
    }
}


/* ==========================================================
   26. SHORT DESKTOP SCREENS
========================================================== */

@media (min-width: 1051px) and (max-height: 780px) {

    .vvd-hero {
        min-height: 610px;
    }

    .vvd-hero__content {
        padding: 22px 0 25px;
    }

    .vvd-hero__heading {
        margin-top: 17px;

        font-size: clamp(36px, 3.45vw, 52px);
    }

    .vvd-hero__heading-accent {
        margin-top: 13px;
    }

    .vvd-hero__description {
        margin-top: 16px;
        line-height: 1.58;
    }

    .vvd-hero__actions {
        margin-top: 19px;
    }

    .vvd-hero__features {
        margin-top: 22px;
    }

    .vvd-hero__photo {
        bottom: -12px;
    }
}


/* ==========================================================
   27. TABLET
========================================================== */

@media (max-width: 1050px) {

    .vvd-hero {
        min-height: 0;
    }

    .vvd-hero__container {
        grid-template-columns: 1fr;

        gap: 0;

        width: calc(100% - 54px);

        min-height: 0;
        padding: 0;
    }

    .vvd-hero__content {
        width: 100%;
        max-width: 760px;

        padding: 48px 0 30px;

        margin: 0 auto;
    }

    .vvd-hero__heading {
        font-size: clamp(40px, 5.7vw, 60px);
    }

    .vvd-hero__features {
        max-width: 720px;
    }

    /* Doctors remain aligned to bottom */

    .vvd-hero__visual {
        position: relative;

        width: min(100%, 720px);

        min-height: 460px;
        height: 460px;

        margin: 0 auto;
        padding: 0;

        align-self: stretch;
    }

    .vvd-hero__photo {
        inset: 0 0 -10px 0;

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

    .vvd-hero__doctors-image {
        width: 100%;
        height: 100%;

        object-position: center bottom;

        transform: translateY(5px) scale(1.025);
        transform-origin: center bottom;
    }

    .vvd-hero__visual:hover
    .vvd-hero__doctors-image {
        transform: translateY(2px) scale(1.045);
    }

    .vvd-hero__visual-halo {
        width: min(75%, 500px);
        bottom: 4%;
    }
}


/* ==========================================================
   28. MOBILE
========================================================== */

@media (max-width: 650px) {

    .vvd-hero__container {
        width: calc(100% - 36px);
    }

    .vvd-hero__content {
        padding: 35px 0 25px;
    }

    /* BADGE */

    .vvd-hero__badge {
        min-height: 38px;
        font-size: 11px;
    }

    .vvd-hero__badge-icon {
        width: 28px;
        height: 28px;
    }

    /* H1 */

    .vvd-hero__heading {
        margin-top: 21px;

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

        line-height: 1.11;
        letter-spacing: -0.04em;
    }

    .vvd-hero__line {
        min-height: 1.13em;
    }

    /* ACCENT */

    .vvd-hero__heading-accent {
        margin-top: 14px;
    }

    /* DESCRIPTION */

    .vvd-hero__description {
        margin-top: 17px;

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

    /* BUTTONS */

    .vvd-hero__actions {
        gap: 10px;
        margin-top: 21px;
    }

    .vvd-hero__button {
        min-width: 0;
        min-height: 49px;

        gap: 12px;

        padding: 6px 6px 6px 15px;

        font-size: 13px;
    }

    .vvd-hero__arrow {
        width: 35px;
        height: 35px;
    }

    /* TRUST CARDS */

    .vvd-hero__features {
        grid-template-columns: 1fr;

        gap: 9px;
        margin-top: 25px;
    }

    .vvd-hero__feature {
        min-height: 65px;

        padding: 10px 12px;
    }

    .vvd-hero__feature-copy strong {
        font-size: 14px;
    }

    .vvd-hero__feature-copy small {
        font-size: 13px;
    }

    /* DOCTORS IMAGE */

    .vvd-hero__visual {
        width: 100%;

        min-height: 340px;
        height: 340px;

        margin: 0;
        padding: 0;
    }

    .vvd-hero__photo {
        inset: 0 0 -8px 0;
    }

    .vvd-hero__doctors-image {
        width: 105%;
        height: 100%;

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

        transform: translateY(4px) scale(1.01);
    }

    .vvd-hero__visual:hover
    .vvd-hero__doctors-image {
        transform: translateY(2px) scale(1.025);
    }

    .vvd-hero__visual-halo {
        width: 85%;
        bottom: 3%;
    }

    .vvd-hero__medical-cross {
        width: 55px;
        height: 55px;
    }
}


/* ==========================================================
   29. SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .vvd-hero__container {
        width: calc(100% - 28px);
    }

    .vvd-hero__heading {
        font-size: clamp(26px, 7vw, 31px);
    }

    .vvd-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vvd-hero__button {
        width: 100%;
    }

    .vvd-hero__visual {
        min-height: 300px;
        height: 300px;
    }

    .vvd-hero__photo {
        bottom: -7px;
    }
}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

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

    .vvd-hero *,
    .vvd-hero *::before,
    .vvd-hero *::after {
        animation: none !important;
        transition: none !important;
    }

    .vvd-hero__typed.is-typing::after {
        display: none;
    }

    .vvd-hero__doctors-image {
        transform: none !important;
    }
}

/* ==========================================
   OUR SERVICES - SHARP PREMIUM OUTLINE
========================================== */

.vvd-hero__button--secondary {
    position: relative;

    color: #ffffff !important;

    /* Solid border for crisp edges */
    border: 1.5px solid #86dded !important;
    border-radius: 100px;

    background: rgba(3, 45, 87, 0.35) !important;

    /* Remove glow and blur */
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;

    transform: none !important;
    will-change: auto;

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease !important;
}

/* REMOVE THE OLD GRADIENT OVERLAY */

.vvd-hero__button--secondary::before,
.vvd-hero__button--secondary::after {
    display: none !important;
}

/* PREMIUM HOVER */

.vvd-hero__button--secondary:hover {
    color: #ffffff !important;

    background: #087f9c !important;

    border-color: #b3f5f6 !important;

    box-shadow: none !important;
    transform: none !important;
}

/* SHARP ARROW CIRCLE */

.vvd-hero__button--secondary .vvd-hero__arrow {
    border: 1px solid #66b6d5;
    border-radius: 50%;

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

    color: #ffffff;

    box-shadow: none;

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

/* ARROW HOVER */

.vvd-hero__button--secondary:hover .vvd-hero__arrow {
    background: #ffffff;
    border-color: #ffffff;

    color: #087f9c;

    transform: translateX(3px);
}


/* ==========================================================
   VED VAIDYA - PREMIUM INTRODUCTION SECTION

   WHITE BACKGROUND
   NAVY EDITORIAL TYPOGRAPHY
   PREMIUM PHOTO COMPOSITION
   SMOOTH ENTRANCE + HOVER
   COMPACT DESKTOP HEIGHT
   RESPONSIVE ON ALL DEVICES

   Compatible with existing:
   home-intro.php
   home-intro.js
========================================================== */

/* ==========================================================
   01. DESIGN VARIABLES
========================================================== */

.vvi-section {
    --vvi-navy: #062b52;
    --vvi-deep: #041f3e;
    --vvi-blue: #0879b9;
    --vvi-teal: #0a9da8;
    --vvi-green: #0ab783;

    --vvi-text: #476579;
    --vvi-muted: #70899a;

    --vvi-border: #e1ecf1;
    --vvi-white: #ffffff;

    --vvi-font: "Manrope", Arial, sans-serif;
    --vvi-serif: Georgia, "Times New Roman", serif;
}

/* ==========================================================
   02. MAIN SECTION
========================================================== */

.vvi-section,
.vvi-section * {
    box-sizing: border-box;
}

.vvi-section {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: clamp(46px, 5vw, 72px) 0;

    overflow: hidden;

    background: #ffffff;

    color: var(--vvi-navy);
    font-family: var(--vvi-font);
}

.vvi-section::before,
.vvi-section::after {
    display: none;
}

.vvi-section a {
    text-decoration: none;
}

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

/* ==========================================================
   03. TWO-COLUMN LAYOUT
========================================================== */

.vvi-container {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, .96fr)
        minmax(0, 1.04fr);

    align-items: center;

    gap: clamp(42px, 5.1vw, 82px);

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

    margin: 0 auto;
    padding: 0;
}

/* ==========================================================
   04. LEFT VISUAL WRAPPER
========================================================== */

.vvi-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 13px 18px 14px 8px;
}

/* DELICATE OUTER FRAME */

.vvi-image-outline {
    position: absolute;

    inset: 0 8px 5px 0;

    border: 1px solid rgba(8, 135, 173, .20);
    border-radius: 25px;

    background: transparent;

    pointer-events: none;

    transition:
        border-color .45s ease,
        transform .45s ease;
}

.vvi-visual:hover .vvi-image-outline {
    transform: translate(5px, -4px);

    border-color: rgba(10, 167, 158, .52);
}

/* ==========================================================
   05. MAIN IMAGE CARD
========================================================== */

.vvi-main-image {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    aspect-ratio: 1.20;

    max-height: 480px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 21px;

    background: #052d4d;

    box-shadow:
        0 24px 58px rgba(5, 48, 83, .15),
        0 6px 17px rgba(5, 48, 83, .06);

    /*
     * Keep caption text crisp.
     * The JavaScript's 3D values will affect
     * the image area, not the entire text panel.
     */

    transform: none;
    will-change: auto;

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

.vvi-main-image:hover {
    border-color: #ffffff;

    box-shadow:
        0 30px 72px rgba(5, 48, 83, .22),
        0 9px 26px rgba(5, 48, 83, .08);
}

/* ==========================================================
   06. PHOTO AREA
========================================================== */

.vvi-image-inner {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    /* Separate caption area below the image */

    bottom: 105px;

    overflow: hidden;

    border-radius: 16px 16px 0 0;

    background: #dceff3;

    transform:
        perspective(1200px)
        rotateX(var(--vvi-rx, 0deg))
        rotateY(var(--vvi-ry, 0deg));

    transform-origin: center center;

    transition:
        transform .3s ease-out;
}

/* MAIN DOCTOR / LAPTOP IMAGE */

.vvi-image-inner img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

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

    transform: scale(1.012);

    filter: none;

    transition:
        transform 1.1s cubic-bezier(.16, 1, .3, 1),
        filter .7s ease;
}

.vvi-main-image:hover .vvi-image-inner img {
    transform: scale(1.065);

    filter: saturate(1.06);
}

/* ==========================================================
   07. IMAGE SHINE
========================================================== */

.vvi-image-shine {
    position: absolute;
    z-index: 2;

    inset: 0;

    background: radial-gradient(
        circle at
        var(--vvi-mouse-x, 50%)
        var(--vvi-mouse-y, 50%),
        rgba(255,255,255,.25),
        transparent 43%
    );

    opacity: 0;

    pointer-events: none;

    transition: opacity .4s ease;
}

.vvi-main-image:hover .vvi-image-shine {
    opacity: 1;
}

/* SOFT PHOTO OVERLAY */

.vvi-image-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(3, 37, 61, .11) 0%,
        transparent 34%,
        transparent 78%,
        rgba(3, 37, 61, .1) 100%
    );

    pointer-events: none;
}

/* ==========================================================
   08. PHOTO TOP LABEL
========================================================== */

.vvi-photo-label {
    position: absolute;
    z-index: 5;

    top: 19px;
    left: 19px;

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

    gap: 9px;

    min-height: 35px;

    padding: 8px 13px;

    border: 1px solid rgba(255,255,255,.85);
    border-radius: 100px;

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

    color: #073b63;

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

    letter-spacing: .11em;
    line-height: 1.3;

    box-shadow:
        0 8px 25px rgba(3, 45, 75, .11);

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

.vvi-photo-label:hover {
    background: #ffffff;

    border-color: #d7efee;

    box-shadow:
        0 12px 30px rgba(3, 45, 75, .17);
}

.vvi-photo-dot {
    flex: none;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--vvi-green);

    animation: vviDotPulse 3s ease-out infinite;
}

/* ==========================================================
   09. DEDICATED CAPTION PANEL

   Caption is completely separate from photo.
   It will not cover the doctor or laptop.
========================================================== */

.vvi-photo-caption {
    position: absolute;
    z-index: 4;

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

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

    gap: 8px;

    height: 105px;

    margin: 0;

    /* Reserve right area for visual balance */

    padding: 15px 26px;

    background: linear-gradient(
        110deg,
        #052b4c 0%,
        #073c60 70%,
        #07546d 100%
    );

    color: #ffffff;
}

/* THIN TOP SEPARATOR */

.vvi-main-image::after {
    content: "";

    position: absolute;
    z-index: 5;

    bottom: 105px;
    left: 0;
    right: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        #0a85bf,
        #0eacae,
        #19bc8e
    );

    pointer-events: none;
}

/* CAPTION EYEBROW */

.vvi-photo-caption > span {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #9ad7de;

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

    letter-spacing: .14em;
    line-height: 1.4;

    white-space: nowrap;
}

.vvi-photo-caption > span::before {
    content: "";

    display: block;

    flex: none;

    width: 22px;
    height: 2px;

    background: #29d09f;
}

/* LARGE CAPTION TEXT */

.vvi-photo-caption strong {
    display: block;

    max-width: 100%;

    margin: 0;
    padding: 0;

    color: #ffffff;

    font-family: var(--vvi-font);

    font-size: clamp(20px, 1.75vw, 27px);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -.038em;

    text-shadow: none;

    transform: none;
}

/* ==========================================================
   10. FLOATING CLINIC IMAGE

   Positioned OVER THE PHOTO AREA,
   NOT OVER THE CAPTION.
========================================================== */

.vvi-small-image {
    position: absolute;
    z-index: 7;

    right: -5px;

    /* Keeps the entire thumbnail above caption */

    bottom: 129px;

    width: 32%;
    aspect-ratio: 1.29;

    overflow: hidden;

    border: 5px solid #ffffff;
    border-radius: 15px;

    background: #e8f5f7;

    box-shadow:
        0 19px 45px rgba(3, 44, 74, .22),
        0 3px 12px rgba(3, 44, 74, .09);

    transform: rotate(2deg);

    transition:
        transform .55s cubic-bezier(.16, 1, .3, 1),
        box-shadow .45s ease;
}

.vvi-small-image:hover {
    transform:
        translateY(-8px)
        rotate(0deg);

    box-shadow:
        0 27px 58px rgba(3, 44, 74, .28);
}

.vvi-small-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

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

    transition: transform .8s ease;
}

.vvi-small-image:hover img {
    transform: scale(1.08);
}

/* ==========================================================
   11. IMAGE INDEX
========================================================== */

.vvi-image-index {
    position: absolute;

    top: -9px;
    right: 14px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #668da3;

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

    letter-spacing: .14em;
    line-height: 1.4;
}

.vvi-image-index > span {
    display: block;

    width: 27px;
    height: 2px;

    background: #0b9ca9;
}

/* ==========================================================
   12. RIGHT CONTENT AREA
========================================================== */

.vvi-content {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}

/* ==========================================================
   13. EDITORIAL EYEBROW
========================================================== */

.vvi-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin: 0 0 16px;

    color: #0b839a;

    font-family: var(--vvi-font);

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

    line-height: 1.5;
    letter-spacing: .15em;
}

.vvi-eyebrow-rule {
    display: block;

    flex: none;

    width: 34px;
    height: 2px;

    background: #0a9ba9;
}

.vvi-section-number {
    color: #91a9b6;

    font-weight: 700;
}

/* ==========================================================
   14. PREMIUM SOLID-NAVY HEADING

   Serif heading complements your dark banner,
   but the colour remains solid navy.
========================================================== */

.vvi-heading {
    max-width: 740px;

    margin: 0;
    padding: 0;

    color: #062b52;

    font-family: var(--vvi-serif);

    font-size: clamp(34px, 3.15vw, 48px);
    font-weight: 700;

    line-height: 1.14;
    letter-spacing: -.043em;

    text-wrap: balance;

    text-shadow: none;
    filter: none;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

/* SHORT ACCENT UNDER HEADING */

.vvi-heading::after {
    content: "";

    display: block;

    width: 62px;
    height: 3px;

    margin-top: 21px;

    border-radius: 5px;

    background: #0b9da8;

    transition: width .55s ease;
}

.vvi-heading:hover::after {
    width: 104px;
}

/* ==========================================================
   15. INTRODUCTION PARAGRAPHS
========================================================== */

.vvi-copy {
    max-width: 650px;

    margin-top: 23px;
    padding: 0;

    border: 0;
}

.vvi-copy p {
    margin: 0 0 13px;

    color: #4a697e;

    font-family: var(--vvi-font);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.75;
    letter-spacing: 0;

    text-shadow: none;
    filter: none;
}

.vvi-copy p:last-child {
    margin-bottom: 0;
}

.vvi-copy strong {
    color: #06395f;

    font-weight: 800;

    transition: color .3s ease;
}

.vvi-copy:hover strong {
    color: #087f9d;
}

/* ==========================================================
   16. THREE SERVICE HIGHLIGHTS
========================================================== */

.vvi-highlights {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;
}

.vvi-highlight {
    position: relative;

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

    gap: 9px;

    min-height: 43px;

    padding: 6px 13px 6px 7px;

    overflow: hidden;

    border: 1px solid #dfeaf0;
    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 5px 16px rgba(5, 65, 105, .035);

    color: #093a61;

    font-family: var(--vvi-font);

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

    line-height: 1.4;

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

/* SUBTLE ACCENT ON HOVER */

.vvi-highlight::after {
    content: "";

    position: absolute;

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

    height: 2px;

    background: linear-gradient(
        90deg,
        #087fbb,
        #0bae9e
    );

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

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);
}

.vvi-highlight:hover {
    background: #f6fcfc;

    border-color: #a7dcdf;

    box-shadow:
        0 10px 25px rgba(5, 75, 110, .1);
}

.vvi-highlight:hover::after {
    transform: scaleX(1);
}

/* HIGHLIGHT ICON */

.vvi-highlight-icon {
    display: grid;
    place-items: center;

    flex: none;

    width: 29px;
    height: 29px;

    border-radius: 7px;

    background: #eaf8f6;

    color: #0b92a2;

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

.vvi-highlight-icon svg {
    display: block;

    width: 17px;
    height: 17px;
}

.vvi-highlight:hover .vvi-highlight-icon {
    background: #0b9da8;

    color: #ffffff;

    transform: rotate(-5deg);
}

/* ==========================================================
   17. CTA ROW
========================================================== */

.vvi-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 23px;

    margin-top: 27px;
}

/* ==========================================================
   18. PREMIUM PRIMARY CTA
========================================================== */

.vvi-primary-btn {
    position: relative;
    isolation: isolate;

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

    gap: 22px;

    min-height: 52px;

    padding: 6px 7px 6px 22px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 100px;

    background: linear-gradient(
        110deg,
        #0878b8 0%,
        #0a96aa 55%,
        #0da590 100%
    );

    color: #ffffff !important;

    font-family: var(--vvi-font);

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

    line-height: 1.4;
    white-space: nowrap;

    box-shadow:
        0 12px 28px rgba(6, 105, 150, .17);

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

/* HOVER SHIMMER */

.vvi-primary-btn::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: -100%;
    left: -80%;

    width: 55%;
    height: 300%;

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

    transform: rotate(24deg);

    transition: left .8s ease;

    pointer-events: none;
}

.vvi-primary-btn:hover::before {
    left: 145%;
}

.vvi-primary-btn:hover {
    background: linear-gradient(
        110deg,
        #076eae,
        #088eaa,
        #0a9e8b
    );

    box-shadow:
        0 17px 35px rgba(6, 105, 150, .27);
}

.vvi-primary-btn > span {
    position: relative;
    z-index: 2;
}

/* CTA ARROW */

.vvi-primary-arrow {
    display: grid;
    place-items: center;

    flex: none;

    width: 38px;
    height: 38px;

    border-radius: 50%;

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

    color: #ffffff;

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

.vvi-primary-arrow svg {
    display: block;

    width: 19px;
    height: 19px;
}

.vvi-primary-btn:hover .vvi-primary-arrow {
    transform: rotate(45deg);

    background: #ffffff;
    color: #087f9a;
}

/* ==========================================================
   19. SECONDARY CTA
========================================================== */

.vvi-secondary-link {
    position: relative;

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

    gap: 12px;

    min-height: 45px;

    padding: 8px 0;

    border-bottom: 1px solid #c1d8df;

    color: #07395f;

    font-family: var(--vvi-font);

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

    transition:
        color .35s ease,
        border-color .35s ease;
}

.vvi-secondary-link > span {
    display: inline-block;

    color: #0b9aa5;

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

    transition: transform .35s ease;
}

.vvi-secondary-link:hover {
    color: #087fa1;
    border-color: #0b9da8;
}

.vvi-secondary-link:hover > span {
    transform: translate(4px, -4px);
}

/* ==========================================================
   20. SCROLL ENTRANCE ANIMATIONS

   Images slide in gently.
   Text fades in without transforms to stay sharp.
========================================================== */

.vvi-section.vvi-animate .vvi-reveal {
    opacity: 0;

    transition:
        opacity .85s ease;
}

/* VISUAL SLIDES FROM LEFT */

.vvi-section.vvi-animate .vvi-visual {
    transform: translateX(-24px);

    transition:
        opacity .85s ease,
        transform .95s cubic-bezier(.16, 1, .3, 1);
}

/* ALL ITEMS BECOME VISIBLE */

.vvi-section.vvi-animate
.vvi-reveal.is-visible {
    opacity: 1;
}

/* IMAGE RETURNS TO NATURAL POSITION */

.vvi-section.vvi-animate
.vvi-visual.is-visible {
    transform: none;
}

/* Keep text untransformed */

.vvi-section.vvi-animate
.vvi-eyebrow,
.vvi-section.vvi-animate
.vvi-heading,
.vvi-section.vvi-animate
.vvi-copy,
.vvi-section.vvi-animate
.vvi-highlights,
.vvi-section.vvi-animate
.vvi-actions {
    transform: none;
}

/* STAGGER ENTRANCE */

.vvi-section.vvi-animate .vvi-eyebrow {
    transition-delay: .06s;
}

.vvi-section.vvi-animate .vvi-heading {
    transition-delay: .14s;
}

.vvi-section.vvi-animate .vvi-copy {
    transition-delay: .23s;
}

.vvi-section.vvi-animate .vvi-highlights {
    transition-delay: .32s;
}

.vvi-section.vvi-animate .vvi-actions {
    transition-delay: .41s;
}

/* ==========================================================
   21. LIVE DOT ANIMATION
========================================================== */

@keyframes vviDotPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(10,183,131,.28);
    }

    60% {
        box-shadow:
            0 0 0 7px rgba(10,183,131,0);
    }
}

/* ==========================================================
   22. LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .vvi-container {
        width: calc(100% - 72px);
        gap: 43px;
    }

    .vvi-heading {
        font-size: clamp(33px, 3.1vw, 42px);
    }

    .vvi-main-image {
        aspect-ratio: 1.12;
    }

    .vvi-photo-caption strong {
        font-size: 22px;
    }

    .vvi-small-image {
        bottom: 125px;
        width: 32%;
    }
}

/* ==========================================================
   23. SMALL LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .vvi-section {
        padding: 48px 0 53px;
    }

    .vvi-container {
        gap: 34px;
    }

    .vvi-heading {
        font-size: clamp(31px, 3.2vw, 39px);
    }

    .vvi-photo-caption {
        padding-left: 20px;
    }

    .vvi-photo-caption strong {
        font-size: 20px;
    }

    .vvi-highlights {
        gap: 7px;
    }

    .vvi-highlight {
        font-size: 12px;
        padding-right: 10px;
    }
}

/* ==========================================================
   24. TABLET
========================================================== */

@media (max-width: 960px) {

    .vvi-section {
        padding: 58px 0;
    }

    .vvi-container {
        grid-template-columns: 1fr;

        width: calc(100% - 56px);
        max-width: 760px;

        gap: 44px;
    }

    .vvi-visual {
        width: min(100%, 650px);

        margin: 0 auto;
    }

    .vvi-main-image {
        aspect-ratio: 1.2;
        max-height: 480px;
    }

    .vvi-content {
        max-width: 760px;
    }

    .vvi-heading {
        max-width: 760px;

        font-size: clamp(36px, 5vw, 47px);
    }

    .vvi-copy {
        max-width: 730px;
    }
}

/* ==========================================================
   25. MOBILE
========================================================== */

@media (max-width: 650px) {

    .vvi-section {
        padding: 43px 0 49px;
    }

    .vvi-container {
        width: calc(100% - 36px);

        gap: 32px;
    }

    /* CONTENT FIRST ON MOBILE */

    .vvi-content {
        order: 1;
    }

    .vvi-visual {
        order: 2;

        width: 100%;

        padding: 11px 8px 13px 6px;
    }

    /* EYEBROW */

    .vvi-eyebrow {
        gap: 9px;
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: .09em;
    }

    .vvi-eyebrow-rule {
        width: 25px;
    }

    /* HEADING */

    .vvi-heading {
        font-size: clamp(32px, 7.5vw, 42px);

        line-height: 1.16;
        letter-spacing: -.04em;
    }

    .vvi-heading::after {
        width: 49px;
        margin-top: 17px;
    }

    /* PARAGRAPHS */

    .vvi-copy {
        margin-top: 19px;
    }

    .vvi-copy p {
        font-size: 16px;
        line-height: 1.72;
    }

    /* HIGHLIGHTS */

    .vvi-highlights {
        gap: 8px;
        margin-top: 20px;
    }

    .vvi-highlight {
        min-height: 41px;

        font-size: 13px;

        padding: 6px 11px 6px 6px;
    }

    .vvi-highlight-icon {
        width: 28px;
        height: 28px;
    }

    /* BUTTON ROW */

    .vvi-actions {
        gap: 18px;
        margin-top: 23px;
    }

    .vvi-primary-btn {
        min-height: 50px;

        padding-left: 18px;

        font-size: 13px;
    }

    /* IMAGE */

    .vvi-main-image {
        aspect-ratio: 1.09;

        max-height: none;

        border-width: 4px;
        border-radius: 18px;
    }

    .vvi-image-outline {
        border-radius: 21px;
    }

    .vvi-image-inner {
        bottom: 103px;

        border-radius: 14px 14px 0 0;
    }

    .vvi-image-inner img {
        object-position: center 38%;
    }

    .vvi-main-image::after {
        bottom: 103px;
    }

    /* CAPTION PANEL */

    .vvi-photo-caption {
        height: 103px;

        padding: 13px 17px;

        gap: 7px;
    }

    .vvi-photo-caption > span {
        font-size: 9px;
    }

    .vvi-photo-caption strong {
        font-size: clamp(19px, 5.4vw, 24px);

        line-height: 1.22;
    }

    .vvi-photo-label {
        top: 13px;
        left: 13px;

        min-height: 31px;

        padding: 7px 10px;

        font-size: 9px;
    }

    /* Clean mobile photo composition */

    .vvi-small-image {
        display: none;
    }

    .vvi-image-index {
        top: -11px;
        right: 9px;

        font-size: 9px;
    }
}

/* ==========================================================
   26. SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

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

    .vvi-heading {
        font-size: clamp(29px, 7.5vw, 33px);
    }

    .vvi-actions {
        flex-direction: column;
        align-items: stretch;

        gap: 13px;
    }

    .vvi-primary-btn {
        width: 100%;
    }

    .vvi-secondary-link {
        width: fit-content;
    }

    .vvi-photo-caption strong {
        font-size: 19px;
    }
}

/* ==========================================================
   27. TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .vvi-image-inner {
        transform: none;
    }

    .vvi-main-image:hover .vvi-image-inner img {
        transform: scale(1.012);
    }

    .vvi-small-image:hover {
        transform: rotate(2deg);
    }

    .vvi-highlight:hover .vvi-highlight-icon {
        transform: none;
    }
}

/* ==========================================================
   28. REDUCED MOTION
========================================================== */

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

    .vvi-section *,
    .vvi-section *::before,
    .vvi-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .vvi-section.vvi-animate .vvi-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .vvi-image-inner,
    .vvi-main-image,
    .vvi-small-image {
        transform: none !important;
        will-change: auto;
    }

    .vvi-image-shine {
        display: none;
    }
}


/* =====================================================
   VED VAIDYA - ACF CLIENT LOGO MARQUEE
   Premium Navy / Two Rows / Left to Right
===================================================== */

:root {
    --vvcl-navy: #061c30;
    --vvcl-deep: #041625;

    --vvcl-blue: #087db9;
    --vvcl-cyan: #1cb9cc;
    --vvcl-green: #0da879;

    --vvcl-gap: 18px;
    --vvcl-duration: 42s;
}

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

.vvcl-section,
.vvcl-section * {
    box-sizing: border-box;
}

.vvcl-section {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin: -2px 0 0;
    padding: 23px 0 32px;

    overflow: hidden;

    background: linear-gradient(
        115deg,
        #061c30 0%,
        #092b44 52%,
        #061c30 100%
    );

    animation: vvclEnter .8s ease both;
}

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

.vvcl-background {
    position: absolute;
    inset: 0;

    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

/* SUBTLE DOT GRID */

.vvcl-background::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image: radial-gradient(
        rgba(165,225,230,.13) 1px,
        transparent 1px
    );

    background-size: 26px 26px;

    opacity: .23;

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

/* AMBIENT LIGHT */

.vvcl-glow {
    position: absolute;

    display: block;

    border-radius: 50%;
    filter: blur(80px);

    animation:
        vvclGlowMove 15s ease-in-out infinite;
}

.vvcl-glow-one {
    top: -200px;
    left: 12%;

    width: 350px;
    height: 350px;

    background: rgba(25,171,202,.16);
}

.vvcl-glow-two {
    right: 8%;
    bottom: -260px;

    width: 350px;
    height: 350px;

    background: rgba(15,175,124,.12);

    animation-delay: -7s;
}

/* =====================================================
   MAIN CONTAINER
===================================================== */

.vvcl-content {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* =====================================================
   MARQUEE ROW
===================================================== */

.vvcl-marquee {
    position: relative;
    isolation: isolate;

    width: 100%;

    margin: 0;
    padding: 7px 0;

    overflow: hidden;

    /* Softer edges */

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );

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

.vvcl-marquee + .vvcl-marquee {
    margin-top: 12px;
}

/* =====================================================
   ANIMATED TRACK
===================================================== */

.vvcl-track {
    display: flex;
    align-items: center;

    width: max-content;
    max-width: none;

    margin: 0;
    padding: 0;

    transform: translate3d(0,0,0);
}

/* Start only when JS has cloned the logos */

.vvcl-section.vvcl-ready .vvcl-track {
    animation:
        vvclMoveRight
        var(--vvcl-duration)
        linear infinite;

    will-change: transform;
}

/* Pause only the hovered row */

.vvcl-marquee:hover .vvcl-track,
.vvcl-marquee:focus-within .vvcl-track {
    animation-play-state: paused;
}

/* =====================================================
   LOGO SET
===================================================== */

.vvcl-set {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    width: max-content;

    gap: var(--vvcl-gap);

    padding-right: var(--vvcl-gap);
}

/* =====================================================
   PREMIUM LOGO CARDS
===================================================== */

.vvcl-card {
    position: relative;
    isolation: isolate;

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

    flex: 0 0 190px;

    width: 190px;
    height: 83px;

    padding: 0;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(230,241,246,.96);
    border-radius: 14px;

    background: linear-gradient(
        140deg,
        #ffffff,
        #f1f7fa
    );

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

    transform: translate3d(0,0,0);

    transition:
        transform .42s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .42s ease;
}

/* ANIMATED LOWER ACCENT */

.vvcl-card::before {
    content: "";

    position: absolute;

    left: 13%;
    right: 13%;
    bottom: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--vvcl-blue),
        var(--vvcl-cyan),
        var(--vvcl-green)
    );

    border-radius: 4px;

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

    transition:
        transform .45s cubic-bezier(.16,1,.3,1);
}

/* SHINE SWEEP */

.vvcl-card::after {
    content: "";

    position: absolute;
    z-index: 2;

    top: -100%;
    left: -80%;

    width: 55%;
    height: 300%;

    transform: rotate(24deg);

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

    pointer-events: none;

    transition: left .85s ease;
}

/* PREMIUM HOVER */

.vvcl-card:hover {
    z-index: 5;

    transform:
        translateY(-5px)
        scale(1.035);

    border-color: rgba(43,197,195,.78);

    background: #ffffff;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24),
        0 0 0 1px rgba(29,191,180,.13),
        0 0 30px rgba(25,190,200,.12);
}

.vvcl-card:hover::before {
    transform: scaleX(1);
}

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

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

.vvcl-card-inner {
    position: relative;
    z-index: 1;

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

    width: 100%;
    height: 100%;

    padding: 15px 20px;
}

/* =====================================================
   CLIENT LOGO IMAGE
===================================================== */

.vvcl-logo-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 155px;
    max-height: 53px;

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

    opacity: .9;

    filter:
        grayscale(.15)
        saturate(.9);

    transform: scale(1);

    transition:
        opacity .35s ease,
        filter .35s ease,
        transform .4s cubic-bezier(.16,1,.3,1);
}

.vvcl-card:hover .vvcl-logo-image {
    opacity: 1;

    filter:
        grayscale(0)
        saturate(1.08);

    transform: scale(1.06);
}

/* =====================================================
   INFINITE ANIMATION
   BOTH ROWS MOVE LEFT TO RIGHT
===================================================== */

@keyframes vvclMoveRight {
    from {
        transform: translate3d(-50%,0,0);
    }

    to {
        transform: translate3d(0,0,0);
    }
}

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

@keyframes vvclEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =====================================================
   BACKGROUND AMBIENT MOTION
===================================================== */

@keyframes vvclGlowMove {
    0%, 100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(35px,20px,0);
    }
}


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

@media (max-width: 900px) {

    .vvcl-section {
        padding: 16px 0 25px;
    }

    .vvcl-card {
        flex-basis: 170px;

        width: 170px;
        height: 76px;

        border-radius: 12px;
    }

    .vvcl-card-inner {
        padding: 12px 16px;
    }

    .vvcl-logo-image {
        max-width: 140px;
        max-height: 49px;
    }

    .vvcl-marquee + .vvcl-marquee {
        margin-top: 9px;
    }
}

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

@media (max-width: 600px) {

    .vvcl-section {
        --vvcl-gap: 12px;

        padding: 12px 0 20px;
    }

    .vvcl-marquee {
        padding: 5px 0;

        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );

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

    .vvcl-marquee + .vvcl-marquee {
        margin-top: 8px;
    }

    .vvcl-card {
        flex-basis: 145px;

        width: 145px;
        height: 67px;

        border-radius: 10px;
    }

    .vvcl-card-inner {
        padding: 10px 14px;
    }

    .vvcl-logo-image {
        max-width: 120px;
        max-height: 45px;
    }
}

/* =====================================================
   TOUCH DEVICES
===================================================== */

@media (hover: none) {

    .vvcl-marquee:hover .vvcl-track {
        animation-play-state: running;
    }

    .vvcl-card:hover {
        transform: none;
    }
}

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

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

    .vvcl-section *,
    .vvcl-section *::before,
    .vvcl-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .vvcl-marquee {
        overflow-x: auto;

        -webkit-mask-image: none;
        mask-image: none;
    }

    .vvcl-track {
        transform: none !important;
        will-change: auto;
    }

    .vvcl-set--duplicate {
        display: none !important;
    }

    .vvcl-card:hover {
        transform: none !important;
    }
}
/* ================================================
   VED VAIDYA - CLIENT LOGO MARQUEE
   ROW 1: LEFT TO RIGHT
   ROW 2: RIGHT TO LEFT
   NO SECTION BACKGROUND
================================================ */

/* MAIN SECTION */

.vvcl-section {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 12px 0;

    background: transparent !important;
    background-image: none !important;

    border: 0;
    box-shadow: none;

    overflow: hidden;
    animation: none;
}

/* REMOVE OLD BACKGROUND DECORATIONS */

.vvcl-background,
.vvcl-glow,
.vvcl-section::before,
.vvcl-section::after {
    display: none !important;
}

/* CONTENT */

.vvcl-content {
    position: relative;
    z-index: 1;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* ================================================
   TWO PREMIUM ROWS
================================================ */

.vvcl-marquee {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    width: 100%;
    height: 94px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid #e4edf1;
    border-radius: 0;

    background: #ffffff;

    box-shadow:
        0 5px 22px rgba(5, 52, 85, 0.035);

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* GAP BETWEEN ROWS */

.vvcl-marquee + .vvcl-marquee {
    margin-top: 12px;
}

/* SOFT FADE AT BOTH ENDS */

.vvcl-marquee::before,
.vvcl-marquee::after {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    bottom: 0;

    display: block;

    width: clamp(30px, 5vw, 90px);
    height: auto;

    pointer-events: none;
}

.vvcl-marquee::before {
    left: 0;

    background: linear-gradient(
        90deg,
        #ffffff,
        rgba(255,255,255,0)
    );
}

.vvcl-marquee::after {
    left: auto;
    right: 0;

    background: linear-gradient(
        270deg,
        #ffffff,
        rgba(255,255,255,0)
    );
}

/* ================================================
   MARQUEE TRACKS
================================================ */

.vvcl-track {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    width: max-content;
    max-width: none;
    height: 100%;

    margin: 0;
    padding: 0;

    will-change: transform;
}

.vvcl-set {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    width: max-content;
    height: 100%;

    gap: 0;

    padding: 0;
    margin: 0;
}

/* ================================================
   ROW 1 - LEFT TO RIGHT
================================================ */

.vvcl-section.vvcl-ready
.vvcl-marquee-1 .vvcl-track {
    animation:
        vvclLeftToRight
        var(--vvcl-duration, 38s)
        linear
        infinite !important;
}

/* ================================================
   ROW 2 - RIGHT TO LEFT
================================================ */

.vvcl-section.vvcl-ready
.vvcl-marquee-2 .vvcl-track {
    animation:
        vvclRightToLeft
        var(--vvcl-duration, 34s)
        linear
        infinite !important;
}

/* ================================================
   INFINITE ANIMATIONS
================================================ */

@keyframes vvclLeftToRight {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes vvclRightToLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* PAUSE ONLY HOVERED ROW */

.vvcl-section.vvcl-ready
.vvcl-marquee:hover .vvcl-track {
    animation-play-state: paused !important;
}

/* ================================================
   LOGO ITEM - NO WHITE BOX CARDS
================================================ */

.vvcl-card {
    position: relative;
    isolation: isolate;

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

    flex: 0 0 200px;

    width: 200px;
    height: 86px;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: hidden;

    transform: none !important;

    transition:
        background 0.35s ease !important;
}

/* VERTICAL DIVIDER */

.vvcl-card::after {
    content: "";

    position: absolute;

    top: 25%;
    right: 0;
    left: auto;

    display: block;

    width: 1px;
    height: 50%;

    background: linear-gradient(
        180deg,
        transparent,
        #d4e5ea,
        transparent
    );

    transform: none;

    pointer-events: none;
}

/* HOVER ACCENT */

.vvcl-card::before {
    content: "";

    position: absolute;

    left: 25%;
    right: 25%;
    bottom: 0;

    display: block;

    width: auto;
    height: 3px;

    background: linear-gradient(
        90deg,
        #087db9,
        #0ba78a
    );

    transform: scaleX(0);

    transition:
        transform 0.45s ease;
}

/* HOVER EFFECT */

.vvcl-card:hover {
    background: #f3fbfb !important;
    box-shadow: none !important;
}

.vvcl-card:hover::before {
    transform: scaleX(1);
}

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

.vvcl-card-inner {
    position: relative;
    z-index: 1;

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

    width: 100%;
    height: 100%;

    padding: 8px 17px;

    background: transparent;
}

.vvcl-card img,
.vvcl-logo-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 170px;
    max-height: 66px;

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

    opacity: 1;

    filter: none;

    transform: scale(1);

    transition:
        transform 0.4s ease,
        filter 0.4s ease !important;
}

/* LOGO HOVER */

.vvcl-card:hover img,
.vvcl-card:hover .vvcl-logo-image {
    transform: scale(1.1);
    filter: saturate(1.12);
}

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

@media (max-width: 900px) {

    .vvcl-marquee {
        height: 83px;
    }

    .vvcl-card {
        flex-basis: 175px;

        width: 175px;
        height: 77px;
    }

    .vvcl-card img,
    .vvcl-logo-image {
        max-width: 148px;
        max-height: 58px;
    }
}

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

@media (max-width: 600px) {

    .vvcl-section {
        padding: 8px 0;
    }

    .vvcl-marquee {
        height: 72px;
    }

    .vvcl-marquee + .vvcl-marquee {
        margin-top: 9px;
    }

    .vvcl-card {
        flex-basis: 150px;

        width: 150px;
        height: 66px;
    }

    .vvcl-card-inner {
        padding: 7px 12px;
    }

    .vvcl-card img,
    .vvcl-logo-image {
        max-width: 130px;
        max-height: 50px;
    }

    .vvcl-marquee::before,
    .vvcl-marquee::after {
        width: 30px;
    }
}

/* ================================================
   TOUCH DEVICES
================================================ */

@media (hover: none) {

    .vvcl-section.vvcl-ready
    .vvcl-marquee:hover .vvcl-track {
        animation-play-state: running !important;
    }

    .vvcl-card:hover {
        background: transparent !important;
    }

    .vvcl-card:hover img {
        transform: none;
    }
}

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

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

    .vvcl-section.vvcl-ready
    .vvcl-marquee .vvcl-track {
        animation: none !important;
        transform: none !important;
    }

    .vvcl-marquee {
        overflow-x: auto;
    }

    .vvcl-set--duplicate {
        display: none !important;
    }
}

/* ==========================================================
   VED VAIDYA - HOMEPAGE ABOUT SECTION
   PREMIUM SOFT AQUA + MIDNIGHT BLUE DESIGN
========================================================== */

.vva-about {
    --vva-navy: #062b52;
    --vva-deep: #041c35;
    --vva-blue: #087eb8;
    --vva-teal: #0b9da4;
    --vva-green: #13b786;
    --vva-text: #476679;
    --vva-font: "Manrope", Arial, sans-serif;

    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: clamp(58px, 6vw, 86px) 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 96% 9%,
            rgba(43, 178, 181, .13),
            transparent 37%
        ),
        linear-gradient(
            115deg,
            #edf7f9 0%,
            #e8f4f7 48%,
            #dceef2 100%
        );

    color: var(--vva-navy);
    font-family: var(--vva-font);
}

.vva-about,
.vva-about * {
    box-sizing: border-box;
}

.vva-about a {
    text-decoration: none;
}

.vva-about a:focus-visible {
    outline: 3px solid #11b99d;
    outline-offset: 5px;
}

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

.vva-about__background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

.vva-about__ambient-one,
.vva-about__ambient-two {
    position: absolute;

    display: block;
    border-radius: 50%;

    filter: blur(70px);
}

.vva-about__ambient-one {
    width: 360px;
    height: 360px;

    top: -190px;
    left: -180px;

    background: rgba(24, 149, 187, .11);
}

.vva-about__ambient-two {
    width: 390px;
    height: 390px;

    right: -210px;
    bottom: -240px;

    background: rgba(15, 169, 150, .11);
}

/* ==========================================================
   MAIN TWO COLUMN LAYOUT
========================================================== */

.vva-about__container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    align-items: center;

    gap: clamp(45px, 6vw, 100px);

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

    margin: 0 auto;
}

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

.vva-about__content {
    position: relative;

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

    margin: 0;
    padding: 0;
}

/* EYEBROW */

.vva-about__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin: 0 0 22px;

    color: #087d96;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.5;
}

.vva-about__eyebrow-line {
    width: 38px;
    height: 2px;

    background: var(--vva-teal);
    border-radius: 5px;

    transition: width .4s ease;
}

.vva-about__content:hover
.vva-about__eyebrow-line {
    width: 58px;
}

.vva-about__eyebrow-index {
    color: #8aa5b2;
}

/* ==========================================================
   MAIN HEADING - SOLID NAVY
========================================================== */

.vva-about__heading {
    max-width: 740px;

    margin: 0;
    padding: 0;

    color: #062b52;

    font-family: var(--vva-font);
    font-size: clamp(35px, 3.25vw, 51px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -.052em;

    text-wrap: balance;

    text-shadow: none;
    filter: none;
    transform: none;
}

/* SMALL ACCENT UNDER HEADING */

.vva-about__heading-accent {
    display: flex;
    align-items: center;

    gap: 8px;
    margin-top: 23px;
}

.vva-about__heading-accent span:first-child {
    display: block;

    width: 56px;
    height: 3px;

    border-radius: 10px;

    background: #087cb8;

    transition: width .5s ease;
}

.vva-about__heading-accent span:last-child {
    display: block;

    width: 16px;
    height: 3px;

    border-radius: 10px;

    background: #13b786;
}

.vva-about__content:hover
.vva-about__heading-accent span:first-child {
    width: 89px;
}

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

.vva-about__copy {
    max-width: 680px;

    margin-top: 24px;
}

.vva-about__copy p {
    margin: 0 0 15px;

    color: #476679;

    font-family: var(--vva-font);
    font-size: 16px;
    font-weight: 500;

    line-height: 1.8;
    letter-spacing: -.005em;

    text-shadow: none;
    filter: none;
}

.vva-about__copy p:last-child {
    margin-bottom: 0;
}

.vva-about__copy strong {
    color: #07365e;
    font-weight: 800;
}

/* ==========================================================
   CTA ROW
========================================================== */

.vva-about__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 29px;
}

/* PRIMARY BUTTON */

.vva-about__button {
    position: relative;
    isolation: isolate;

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

    gap: 22px;

    min-height: 55px;

    padding: 7px 7px 7px 23px;

    overflow: hidden;

    border: 1px solid #087fa0;
    border-radius: 100px;

    background: linear-gradient(
        110deg,
        #0864a2 0%,
        #087e9f 60%,
        #0b999b 100%
    );

    color: #ffffff !important;

    box-shadow:
        0 13px 30px rgba(6, 96, 141, .18);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;

    white-space: nowrap;

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

/* SWEEPING HOVER REFLECTION */

.vva-about__button::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: -100%;
    left: -80%;

    width: 54%;
    height: 300%;

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

    transform: rotate(23deg);

    transition:
        left .8s cubic-bezier(.16, 1, .3, 1);

    pointer-events: none;
}

.vva-about__button:hover::before {
    left: 145%;
}

.vva-about__button:hover {
    border-color: #0a9a9b;

    box-shadow:
        0 18px 36px rgba(6, 96, 141, .29),
        0 0 0 4px rgba(11, 157, 164, .08);
}

.vva-about__button-label,
.vva-about__button-icon {
    position: relative;
    z-index: 2;
}

.vva-about__button-icon {
    display: grid;
    place-items: center;

    flex: none;

    width: 39px;
    height: 39px;

    border-radius: 50%;

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

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

.vva-about__button-icon svg {
    display: block;

    width: 18px;
    height: 18px;
}

.vva-about__button:hover
.vva-about__button-icon {
    transform: rotate(45deg);

    background: #ffffff;
    color: #087e98;
}

/* SMALL BRAND NOTE */

.vva-about__note {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #688697;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.vva-about__note-mark {
    display: grid;
    place-items: center;

    flex: none;

    width: 31px;
    height: 31px;

    border: 1px solid #c6e5e6;
    border-radius: 9px;

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

    color: #0b9da4;
    font-size: 20px;

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

.vva-about__note strong {
    display: block;

    color: #0b526d;
    font-weight: 800;
}

.vva-about__note:hover
.vva-about__note-mark {
    background: #0b9da4;
    color: #ffffff;
}

/* ==========================================================
   RIGHT ARTWORK WRAPPER
========================================================== */

.vva-about__visual {
    position: relative;

    width: 100%;
    min-width: 0;

    padding: 12px 13px 12px 0;
}

/* DELICATE OFFSET FRAME */

.vva-about__frame-detail {
    position: absolute;

    inset: 0 0 0 13px;

    border: 1px solid rgba(9, 121, 155, .22);
    border-radius: 27px;

    pointer-events: none;

    transition:
        transform .5s ease,
        border-color .5s ease;
}

.vva-about__visual:hover
.vva-about__frame-detail {
    transform: translate(5px, -5px);

    border-color: rgba(11, 167, 148, .5);
}

/* ==========================================================
   MIDNIGHT BLUE BRAND PANEL
========================================================== */

.vva-about__artwork {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

    padding: 27px;

    overflow: hidden;

    border: 1px solid rgba(116, 203, 227, .28);
    border-radius: 24px;

    background:
        radial-gradient(
            ellipse at 80% 22%,
            rgba(20, 189, 187, .22),
            transparent 47%
        ),
        linear-gradient(
            135deg,
            #062b4c 0%,
            #05223e 55%,
            #073a4a 100%
        );

    box-shadow:
        0 28px 66px rgba(4, 51, 80, .16),
        0 7px 21px rgba(4, 51, 80, .05);

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

.vva-about__artwork:hover {
    border-color: rgba(107, 231, 217, .46);

    box-shadow:
        0 34px 77px rgba(4, 51, 80, .22);
}

/* BACKGROUND MICRO GRID */

.vva-about__artwork-grid {
    position: absolute;
    inset: 0;

    z-index: -1;

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

    background-size: 34px 34px;

    mask-image: radial-gradient(
        ellipse at 65% 45%,
        #000 0%,
        transparent 75%
    );

    -webkit-mask-image: radial-gradient(
        ellipse at 65% 45%,
        #000 0%,
        transparent 75%
    );

    pointer-events: none;
}

/* CURSOR-FOLLOWING LIGHT */

.vva-about__artwork-glow {
    position: absolute;
    z-index: 0;

    inset: 0;

    background: radial-gradient(
        circle 270px at
        var(--vva-mouse-x, 65%)
        var(--vva-mouse-y, 38%),
        rgba(29, 213, 210, .16),
        transparent 75%
    );

    opacity: .75;

    pointer-events: none;

    transition: opacity .35s ease;
}

.vva-about__artwork:hover
.vva-about__artwork-glow {
    opacity: 1;
}

/* ==========================================================
   ARTWORK HEADER
========================================================== */

.vva-about__artwork-top {
    position: relative;
    z-index: 3;

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

    flex-wrap: wrap;
    gap: 12px;
}

.vva-about__artwork-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #c8e9ee;

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

    letter-spacing: .13em;
}

.vva-about__live-dot {
    display: block;

    flex: none;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #49edaa;

    animation: vvaLivePulse 3s infinite;
}

.vva-about__artwork-number {
    color: #8ac3cf;

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

    letter-spacing: .12em;
}

/* ==========================================================
   DECORATIVE ORBIT ART
========================================================== */

.vva-about__artwork-orbit {
    position: absolute;
    z-index: 1;

    top: 10%;
    right: -5%;

    width: min(70%, 340px);
    aspect-ratio: 1;

    pointer-events: none;
}

.vva-about__orbit-one,
.vva-about__orbit-two,
.vva-about__orbit-three {
    position: absolute;

    display: block;

    border-radius: 50%;
}

.vva-about__orbit-one {
    inset: 0;

    border: 1px solid rgba(95, 216, 224, .22);

    box-shadow:
        0 0 0 22px rgba(40, 209, 208, .035),
        0 0 0 44px rgba(40, 209, 208, .018);

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

.vva-about__orbit-two {
    inset: 14%;

    border: 1px dashed rgba(107, 240, 203, .30);

    animation: vvaOrbitRotate 46s linear infinite;
}

.vva-about__orbit-three {
    inset: 29%;

    border: 1px solid rgba(161, 249, 240, .22);

    background: radial-gradient(
        circle,
        rgba(30, 211, 209, .12),
        transparent 75%
    );
}

.vva-about__orbit-centre {
    position: absolute;

    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 85px;
    height: 85px;

    border: 1px solid rgba(153, 242, 239, .38);
    border-radius: 24px;

    background: linear-gradient(
        135deg,
        rgba(10, 143, 180, .46),
        rgba(25, 183, 146, .29)
    );

    color: #83f1df;

    transform: translate(-50%, -50%) rotate(-9deg);

    box-shadow:
        0 13px 33px rgba(1, 24, 45, .20);
}

.vva-about__orbit-centre svg {
    width: 50px;
    height: 50px;
}

/* ==========================================================
   ARTWORK MESSAGE
========================================================== */

.vva-about__artwork-message {
    position: relative;
    z-index: 2;

    max-width: 390px;

    margin-top: auto;
    padding: 125px 0 25px;
}

.vva-about__artwork-kicker {
    display: block;

    margin-bottom: 13px;

    color: #91d5dd;

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

    letter-spacing: .17em;
}

.vva-about__artwork-message strong {
    display: block;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 2.6vw, 42px);
    font-weight: 700;

    line-height: 1.12;
    letter-spacing: -.035em;

    text-wrap: balance;
}

.vva-about__artwork-message strong span {
    display: block;
    color: #7ce8db;
}

.vva-about__artwork-message p {
    max-width: 360px;

    margin: 17px 0 0;

    color: #c3dce7;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}

/* ==========================================================
   ARTWORK BOTTOM LABELS
========================================================== */

.vva-about__artwork-bottom {
    position: relative;
    z-index: 3;

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

    gap: 9px;

    padding-top: 18px;

    border-top: 1px solid rgba(172, 225, 239, .16);
}

.vva-about__artwork-bottom > span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 10px;

    border: 1px solid rgba(155, 229, 229, .16);
    border-radius: 7px;

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

    color: #d4eaf0;

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

    line-height: 1.35;

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

.vva-about__artwork-bottom > span i {
    display: block;

    flex: none;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #41dcaf;
}

.vva-about__artwork-bottom > span:hover {
    background: rgba(30, 204, 188, .15);
    border-color: rgba(101, 234, 218, .42);
}

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

/* Only hide after JS has enabled animations */

.vva-about.vva-motion .vva-reveal {
    opacity: 0;

    transition:
        opacity .8s ease;
}

/* Visual alone slides very slightly */

.vva-about.vva-motion .vva-about__visual {
    transform: translateX(25px);

    transition:
        opacity .9s ease,
        transform .95s cubic-bezier(.16, 1, .3, 1);
}

.vva-about.vva-motion .vva-reveal.is-visible {
    opacity: 1;
}

.vva-about.vva-motion
.vva-about__visual.is-visible {
    transform: none;
}

/* STAGGER */

.vva-about.vva-motion .vva-about__eyebrow {
    transition-delay: .05s;
}

.vva-about.vva-motion .vva-about__heading {
    transition-delay: .12s;
}

.vva-about.vva-motion .vva-about__heading-accent {
    transition-delay: .18s;
}

.vva-about.vva-motion .vva-about__copy {
    transition-delay: .24s;
}

.vva-about.vva-motion .vva-about__actions {
    transition-delay: .32s;
}

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes vvaLivePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(73,237,170,.3);
    }

    60% {
        box-shadow: 0 0 0 7px rgba(73,237,170,0);
    }
}

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

    50% {
        transform: scale(1.045);
    }
}

@keyframes vvaOrbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

@media (max-width: 1300px) {

    .vva-about__container {
        width: calc(100% - 76px);
        gap: 48px;
    }

    .vva-about__heading {
        font-size: clamp(35px, 3.3vw, 45px);
    }

    .vva-about__artwork {
        min-height: 435px;
    }
}

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

@media (max-width: 980px) {

    .vva-about {
        padding: 62px 0;
    }

    .vva-about__container {
        grid-template-columns: 1fr;

        width: calc(100% - 54px);
        max-width: 760px;

        gap: 40px;
    }

    .vva-about__content {
        max-width: 760px;
    }

    .vva-about__heading {
        font-size: clamp(37px, 5.1vw, 49px);
    }

    .vva-about__visual {
        max-width: 680px;
        margin: 0 auto;
    }

    .vva-about__artwork {
        min-height: 425px;
    }
}

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

@media (max-width: 650px) {

    .vva-about {
        padding: 45px 0 50px;
    }

    .vva-about__container {
        width: calc(100% - 36px);
        gap: 30px;
    }

    .vva-about__eyebrow {
        margin-bottom: 17px;

        font-size: 10px;
        letter-spacing: .12em;
    }

    .vva-about__heading {
        font-size: clamp(31px, 7.5vw, 42px);

        line-height: 1.17;
        letter-spacing: -.045em;
    }

    .vva-about__heading-accent {
        margin-top: 18px;
    }

    .vva-about__copy {
        margin-top: 20px;
    }

    .vva-about__copy p {
        font-size: 16px;
        line-height: 1.72;

        margin-bottom: 13px;
    }

    .vva-about__actions {
        gap: 17px;
        margin-top: 24px;
    }

    .vva-about__button {
        min-height: 52px;
        padding-left: 18px;

        font-size: 13px;
    }

    .vva-about__button-icon {
        width: 36px;
        height: 36px;
    }

    .vva-about__visual {
        padding: 8px 9px 8px 0;
    }

    .vva-about__artwork {
        min-height: 380px;

        padding: 20px;

        border-radius: 19px;
    }

    .vva-about__frame-detail {
        border-radius: 21px;
    }

    .vva-about__artwork-orbit {
        width: 250px;

        top: 10%;
        right: -45px;
    }

    .vva-about__orbit-centre {
        width: 64px;
        height: 64px;

        border-radius: 19px;
    }

    .vva-about__orbit-centre svg {
        width: 39px;
        height: 39px;
    }

    .vva-about__artwork-message {
        padding-top: 100px;
        padding-bottom: 20px;
    }

    .vva-about__artwork-message strong {
        font-size: clamp(30px, 7vw, 37px);
    }

    .vva-about__artwork-message p {
        font-size: 16px;
    }

    .vva-about__artwork-bottom {
        gap: 7px;
    }

    .vva-about__artwork-bottom > span {
        font-size: 10px;
        padding: 7px 8px;
    }
}

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

@media (max-width: 390px) {

    .vva-about__container {
        width: calc(100% - 28px);
    }

    .vva-about__heading {
        font-size: 30px;
    }

    .vva-about__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .vva-about__artwork {
        padding: 17px;
    }

    .vva-about__artwork-number {
        display: none;
    }
}

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

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

    .vva-about *,
    .vva-about *::before,
    .vva-about *::after {
        animation: none !important;
        transition: none !important;
    }

    .vva-about.vva-motion .vva-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   VED VAIDYA - PREMIUM VISIBILITY BENTO SECTION

   WHITE SECTION BACKGROUND
   DEEP NAVY / TEAL PLATFORM CARDS
   HIGH-CONTRAST CRISP TYPOGRAPHY
   PREMIUM BENTO GRID
   ANIMATED HOVER ACCENTS
   STAGGERED ENTRANCE ANIMATION
========================================================= */

.vvsv-section {
    --vvsv-navy: #062b50;
    --vvsv-deep: #041d37;
    --vvsv-blue: #087fb7;
    --vvsv-cyan: #12dce3;
    --vvsv-teal: #0aa69f;
    --vvsv-green: #41e7ac;
    --vvsv-font: "Manrope", Arial, sans-serif;

    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    padding: 82px 0 88px;

    background: #ffffff !important;
    background-image: none !important;

    color: var(--vvsv-navy);
    font-family: var(--vvsv-font);

    overflow: hidden;
}

.vvsv-section,
.vvsv-section * {
    box-sizing: border-box;
}

/* REMOVE PREVIOUS BACKGROUND EFFECTS */

.vvsv-background,
.vvsv-background-orb,
.vvsv-background-grid {
    display: none !important;
}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.vvsv-container {
    position: relative;
    z-index: 1;

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

    margin: 0 auto;
    padding: 0;
}

/* =========================================================
   EDITORIAL HEADER
========================================================= */

.vvsv-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        210px;

    align-items: center;

    gap: 60px;

    margin-bottom: 42px;
}

.vvsv-header-main {
    max-width: 850px;
    min-width: 0;
}

/* EYEBROW */

.vvsv-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;

    margin: 0 0 19px;

    color: #087c97 !important;

    font-family: var(--vvsv-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .12em;

    opacity: 1;
    filter: none;
    text-shadow: none;
}

.vvsv-eyebrow-line {
    display: block;

    flex: none;
    width: 37px;
    height: 3px;

    background: #0a9d9e;
    border-radius: 2px;

    transition: width .4s ease;
}

.vvsv-header:hover .vvsv-eyebrow-line {
    width: 61px;
}

/* H2 */

.vvsv-heading {
    max-width: 830px;

    margin: 0;
    padding: 0;

    color: #052a50 !important;

    font-family: var(--vvsv-font);
    font-size: clamp(38px, 3.5vw, 56px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.052em;

    text-wrap: balance;

    opacity: 1;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}

/* INTRO PARAGRAPH */

.vvsv-intro {
    max-width: 710px;

    margin: 20px 0 0;
    padding: 0;

    color: #405e73 !important;

    font-family: var(--vvsv-font);
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.75;

    opacity: 1;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}

/* =========================================================
   12 PLACES NUMBER - EDITORIAL DISPLAY
========================================================= */

.vvsv-header-aside {
    position: relative;

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

    min-height: 165px;

    margin: 0;
    padding: 12px 0 12px 24px;

    background: transparent !important;
    background-image: none !important;

    border: 0;
    border-left: 3px solid #0aa69f;
    border-radius: 0;

    box-shadow: none !important;

    overflow: visible;

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

/* REMOVE OLD COUNTER ORBIT */

.vvsv-header-aside::before,
.vvsv-header-aside::after {
    display: none !important;
}

.vvsv-counter {
    display: flex;
    align-items: center;

    gap: 13px;
}

.vvsv-counter-number {
    color: #052b51 !important;

    font-size: 92px;
    font-weight: 800;
    letter-spacing: -.105em;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.vvsv-counter-copy {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.vvsv-counter-copy strong {
    color: #078c9a !important;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.vvsv-counter-copy small {
    color: #4e6c7f !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.vvsv-counter-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 13px;
    padding: 0;

    border: 0;
}

.vvsv-counter-indicator {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #0a6f85 !important;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .075em;
}

.vvsv-counter-indicator i {
    flex: none;

    width: 7px;
    height: 7px;

    background: #0eaa87;
    border-radius: 50%;

    animation: vvsvDotPulse 2.8s infinite;
}

.vvsv-counter-spark {
    color: #079da8;
    font-size: 19px;

    transition: transform .5s ease;
}

.vvsv-header-aside:hover .vvsv-counter-spark {
    transform: rotate(90deg);
}

/* =========================================================
   THE PREMIUM BENTO GRID
========================================================= */

.vvsv-grid {
    display: grid;

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

    grid-auto-flow: row dense;
    grid-auto-rows: minmax(238px, auto);

    gap: 14px;

    width: 100%;
    margin: 0;
    padding: 0;
}

/*
   4 WIDE FEATURE CARDS:

   01 Google Search
   04 ChatGPT
   08 Apple Maps
   12 YouTube

   This creates a deliberate premium
   editorial / bento layout.
*/

.vvsv-card:nth-child(1),
.vvsv-card:nth-child(4),
.vvsv-card:nth-child(8),
.vvsv-card:nth-child(12) {
    grid-column: span 2;
}

/* =========================================================
   BASE CARD - STRONG NAVY, NOT PALE
========================================================= */

.vvsv-card {
    --vvsv-card-bg: #062a4c;
    --vvsv-card-accent: #27dcda;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

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

    margin: 0;
    padding: 24px 24px 19px;

    border: 1px solid #194b6b;
    border-radius: 17px;

    background: var(--vvsv-card-bg) !important;
    background-image: none !important;

    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(3, 35, 67, .08);

    overflow: hidden;

    filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;

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

/* =========================================================
   DISTINCT FEATURED CARD COLOURS
========================================================= */

.vvsv-card:nth-child(1) {
    --vvsv-card-bg: #06466a;
    --vvsv-card-accent: #41f1bf;
}

.vvsv-card:nth-child(4) {
    --vvsv-card-bg: #075276;
    --vvsv-card-accent: #44e9f0;
}

.vvsv-card:nth-child(8) {
    --vvsv-card-bg: #073c5d;
    --vvsv-card-accent: #5de6b3;
}

.vvsv-card:nth-child(12) {
    --vvsv-card-bg: #075572;
    --vvsv-card-accent: #5ef1d0;
}

/* Minor variation for remaining cards */

.vvsv-card:nth-child(3n + 2):not(:nth-child(8)) {
    --vvsv-card-bg: #082f53;
    --vvsv-card-accent: #3cdebb;
}

.vvsv-card:nth-child(3n):not(:nth-child(12)) {
    --vvsv-card-bg: #073454;
    --vvsv-card-accent: #38daec;
}

/* =========================================================
   COLOURED TOP EDGE
========================================================= */

.vvsv-card::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    left: 24px;

    display: block;

    width: 52px;
    height: 4px;

    background: var(--vvsv-card-accent);
    border-radius: 0 0 4px 4px;

    transition:
        width .5s cubic-bezier(.16, 1, .3, 1);
}

.vvsv-card:hover::before {
    width: calc(100% - 48px);
}

/* =========================================================
   ARCHITECTURAL CIRCLE DECORATION
   SOLID BORDERS - NO BLUR
========================================================= */

.vvsv-card::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -93px;
    right: -87px;

    width: 210px;
    height: 210px;

    border: 1px solid rgba(123, 225, 237, .17);
    border-radius: 50%;

    box-shadow:
        0 0 0 24px rgba(255,255,255,.025),
        0 0 0 48px rgba(255,255,255,.015);

    pointer-events: none;

    transition:
        border-color .4s ease,
        transform .6s ease;
}

.vvsv-card:hover::after {
    border-color: rgba(113, 243, 217, .45);

    transform: scale(1.08);
}

/* =========================================================
   CARD HOVER - CRISP AND PREMIUM
========================================================= */

.vvsv-card:hover {
    border-color: #2bdbd3;

    box-shadow:
        0 18px 36px rgba(3, 35, 67, .18),
        0 0 0 1px rgba(31, 214, 205, .12);
}

/* Remove previous cursor-following blur */

.vvsv-card-shine {
    display: none !important;
}

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

.vvsv-card-top {
    position: relative;
    z-index: 2;

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

    gap: 12px;

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

/* ICON BLOCK */

.vvsv-card-icon {
    display: grid;
    place-items: center;

    flex: none;

    width: 55px;
    height: 55px;

    border: 1px solid rgba(139, 226, 239, .32);
    border-radius: 13px;

    background: #114f70 !important;
    color: #ffffff !important;

    box-shadow: none !important;

    filter: none !important;

    transition:
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .45s cubic-bezier(.16, 1, .3, 1);
}

/* Same styling for all earlier nth-child icons */

.vvsv-card:nth-child(n) .vvsv-card-icon {
    background: #115274 !important;
    color: #ffffff !important;
    border-color: #337691;
}

.vvsv-card-icon i {
    display: block;

    font-size: 25px;
    line-height: 1;

    color: inherit !important;

    filter: none !important;
    text-shadow: none !important;
}

/* ICON HOVER - MOVEMENT ONLY ON ICON */

.vvsv-card:hover .vvsv-card-icon,
.vvsv-card:nth-child(n):hover .vvsv-card-icon {
    background: var(--vvsv-card-accent) !important;

    border-color: var(--vvsv-card-accent);

    color: #052c48 !important;

    transform: translateY(-4px) rotate(-5deg);
}

/* CARD NUMBER */

.vvsv-card-number {
    color: #a5d1de !important;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;

    line-height: 1.3;

    font-variant-numeric: tabular-nums;

    filter: none !important;

    transition: color .35s ease;
}

.vvsv-card:hover .vvsv-card-number {
    color: var(--vvsv-card-accent) !important;
}

/* =========================================================
   CARD HEADING - BOLD WHITE
========================================================= */

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

    margin: 0 0 9px;
    padding: 0;

    color: #ffffff !important;

    font-family: var(--vvsv-font);
    font-size: clamp(19px, 1.25vw, 23px);
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: -.032em;

    opacity: 1 !important;
    filter: none !important;

    text-shadow: none !important;
    transform: none !important;

    transition: color .3s ease;
}

/* Bigger names in featured cards */

.vvsv-card:nth-child(1) .vvsv-card-title,
.vvsv-card:nth-child(4) .vvsv-card-title,
.vvsv-card:nth-child(8) .vvsv-card-title,
.vvsv-card:nth-child(12) .vvsv-card-title {
    font-size: clamp(23px, 1.6vw, 28px);
}

.vvsv-card:hover .vvsv-card-title {
    color: #ffffff !important;
}

/* =========================================================
   DESCRIPTION - CRISP LIGHT TEXT
========================================================= */

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

    max-width: 390px;

    margin: 0 0 18px;
    padding: 0;

    color: #d5e8f2 !important;

    font-family: var(--vvsv-font);

    font-size: 16px !important;
    font-weight: 500;

    line-height: 1.6;
    letter-spacing: 0;

    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;

    transition: color .3s ease;
}

.vvsv-card:hover .vvsv-card-description {
    color: #ffffff !important;
}

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

.vvsv-card-bottom {
    position: relative;
    z-index: 2;

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

    gap: 12px;

    width: 100%;

    margin-top: auto;
    padding: 13px 0 0;

    border-top: 1px solid #2b5672;
}

/* CATEGORY */

.vvsv-card-category {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-width: 0;

    color: #b9deeb !important;

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

    line-height: 1.4;
    letter-spacing: .08em;

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

/* SMALL GREEN DOT */

.vvsv-card-category-dot {
    flex: none;

    width: 7px;
    height: 7px;

    background: var(--vvsv-card-accent);
    border-radius: 50%;
}

/* ARROW DETAIL */

.vvsv-card-corner {
    display: grid;
    place-items: center;

    flex: none;

    width: 29px;
    height: 29px;

    border: 1px solid #356882;
    border-radius: 8px;

    background: #114661;
    color: #d8f0f4;

    box-shadow: none;

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

.vvsv-card-corner svg {
    display: block;

    width: 16px;
    height: 16px;
}

.vvsv-card:hover .vvsv-card-corner {
    background: var(--vvsv-card-accent);
    border-color: var(--vvsv-card-accent);
    color: #052b47;
}

/* =========================================================
   BOTTOM EDITORIAL SIGNATURE
========================================================= */

.vvsv-footer {
    margin-top: 30px;
}

.vvsv-footer-rule {
    position: relative;

    height: 1px;

    background: #d9e8ee;
}

.vvsv-footer-rule span {
    position: absolute;

    top: 0;
    left: 0;

    width: 85px;
    height: 2px;

    background: #0a9fa8;
}

.vvsv-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    padding-top: 19px;
}

/* FOOTER LABEL */

.vvsv-footer-label {
    color: #3b6077 !important;

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

    line-height: 1.5;
    letter-spacing: .12em;
}

/* DISCOVERY CATEGORIES */

.vvsv-footer-types {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    color: #073d61 !important;

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

    line-height: 1.5;
}

.vvsv-footer-types i {
    flex: none;

    width: 5px;
    height: 5px;

    background: #0aa98f;
    border-radius: 50%;
}

/* =========================================================
   SCROLL ENTRANCE
   NO TRANSFORMS OR BLUR ON TEXT
========================================================= */

/* Animations only enabled by JS */

.vvsv-section.is-motion .vvsv-reveal {
    opacity: 0;

    transition:
        opacity .75s ease;
}

/* Reveal all normal content */

.vvsv-section.is-motion
.vvsv-reveal.is-visible {
    opacity: 1;
}

/* Header stagger */

.vvsv-section.is-motion
.vvsv-eyebrow {
    transition-delay: .04s;
}

.vvsv-section.is-motion
.vvsv-heading {
    transition-delay: .12s;
}

.vvsv-section.is-motion
.vvsv-intro {
    transition-delay: .2s;
}

/* Individual card entrance delay */

.vvsv-section.is-motion
.vvsv-card {
    transition:
        opacity .7s ease,
        border-color .35s ease,
        box-shadow .4s ease,
        background-color .35s ease;

    transition-delay: var(--vvsv-delay, 0ms);
}

/* Remove stagger delay after revealed */

.vvsv-section.is-motion
.vvsv-card.is-visible {
    transition-delay: 0ms;
}

/* Animated top accent after entrance */

.vvsv-section.is-motion
.vvsv-card::before {
    width: 0;
}

.vvsv-section.is-motion
.vvsv-card.is-visible::before {
    width: 52px;
}

.vvsv-section.is-motion
.vvsv-card.is-visible:hover::before {
    width: calc(100% - 48px);
}

/* =========================================================
   SMALL LIVE ANIMATION
========================================================= */

@keyframes vvsvDotPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(9, 173, 137, .3);
    }

    65% {
        box-shadow:
            0 0 0 7px rgba(9, 173, 137, 0);
    }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1650px) {

    .vvsv-container {
        max-width: 1500px;
    }

    .vvsv-grid {
        grid-auto-rows: minmax(249px, auto);
        gap: 16px;
    }

    .vvsv-card {
        padding: 27px 27px 21px;
    }

    .vvsv-card::before {
        left: 27px;
    }
}

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

@media (max-width: 1280px) {

    .vvsv-section {
        padding: 71px 0 77px;
    }

    .vvsv-container {
        width: calc(100% - 72px);
    }

    .vvsv-header {
        gap: 35px;
    }

    .vvsv-grid {
        gap: 12px;
        grid-auto-rows: minmax(240px, auto);
    }

    .vvsv-card {
        padding: 21px 19px 17px;
    }

    .vvsv-card::before {
        left: 19px;
    }

    .vvsv-card:hover::before {
        width: calc(100% - 38px);
    }

    .vvsv-card-title {
        font-size: 19px;
    }
}

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

@media (max-width: 1000px) {

    .vvsv-container {
        width: calc(100% - 52px);
    }

    .vvsv-header {
        grid-template-columns: 1fr auto;
        gap: 25px;
    }

    .vvsv-heading {
        font-size: clamp(35px, 4.8vw, 46px);
    }

    /* TWO-COLUMN BENTO */

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

        grid-auto-rows: minmax(220px, auto);
    }

    /* Featured cards span the whole row */

    .vvsv-card:nth-child(1),
    .vvsv-card:nth-child(4),
    .vvsv-card:nth-child(8),
    .vvsv-card:nth-child(12) {
        grid-column: span 2;
    }

    .vvsv-card {
        min-height: 220px;
    }

    .vvsv-header-aside {
        padding-left: 19px;
    }

    .vvsv-counter-number {
        font-size: 72px;
    }

    .vvsv-counter-bottom {
        display: none;
    }
}

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

@media (max-width: 750px) {

    .vvsv-header {
        grid-template-columns: 1fr;
        gap: 19px;

        margin-bottom: 28px;
    }

    .vvsv-header-aside {
        width: fit-content;
        min-height: 0;

        padding: 0 0 0 17px;
    }

    .vvsv-counter-number {
        font-size: 61px;
    }

    .vvsv-counter-copy small {
        max-width: 220px;
    }
}

/* =========================================================
   MOBILE - PREMIUM TWO COLUMN TILES
========================================================= */

@media (max-width: 650px) {

    .vvsv-section {
        padding: 48px 0 53px;
    }

    .vvsv-container {
        width: calc(100% - 34px);
    }

    .vvsv-eyebrow {
        margin-bottom: 15px;

        font-size: 10px;
        letter-spacing: .075em;
    }

    .vvsv-eyebrow-line {
        width: 25px;
    }

    .vvsv-heading {
        font-size: clamp(31px, 7.4vw, 42px);
        line-height: 1.16;
    }

    .vvsv-intro {
        margin-top: 16px;

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

    .vvsv-header {
        gap: 21px;
        margin-bottom: 25px;
    }

    .vvsv-counter-number {
        font-size: 56px;
    }

    .vvsv-counter-copy strong {
        font-size: 11px;
    }

    /* SINGLE COLUMN FOR FULL READABILITY */

    .vvsv-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .vvsv-card,
    .vvsv-card:nth-child(1),
    .vvsv-card:nth-child(4),
    .vvsv-card:nth-child(8),
    .vvsv-card:nth-child(12) {
        grid-column: auto;

        min-height: 218px;

        padding: 21px 20px 17px;
    }

    .vvsv-card-title,
    .vvsv-card:nth-child(1) .vvsv-card-title,
    .vvsv-card:nth-child(4) .vvsv-card-title,
    .vvsv-card:nth-child(8) .vvsv-card-title,
    .vvsv-card:nth-child(12) .vvsv-card-title {
        font-size: 21px;
    }

    .vvsv-card-icon {
        width: 49px;
        height: 49px;
    }

    .vvsv-card-icon i {
        font-size: 22px;
    }

    .vvsv-card-top {
        margin-bottom: 17px;
    }

    .vvsv-card-description {
        font-size: 16px !important;
    }

    .vvsv-footer {
        margin-top: 25px;
    }

    .vvsv-footer-content {
        gap: 12px;
    }
}

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

@media (max-width: 390px) {

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

    .vvsv-heading {
        font-size: 30px;
    }

    .vvsv-card {
        padding: 19px 17px 15px;
    }

    .vvsv-card-category {
        font-size: 10px;
    }

    .vvsv-footer-types {
        gap: 8px;
    }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .vvsv-card:hover {
        box-shadow:
            0 8px 22px rgba(3, 35, 67, .08);
    }

    .vvsv-card:hover .vvsv-card-icon {
        transform: none;
    }
}

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

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

    .vvsv-section *,
    .vvsv-section *::before,
    .vvsv-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .vvsv-section.is-motion
    .vvsv-reveal {
        opacity: 1 !important;
    }

    .vvsv-card::before {
        width: 52px !important;
    }
}


/* ==========================================================
   VED VAIDYA - PREMIUM SERVICES SLIDER
   Dynamic CPT | Responsive | No carousel plugin
========================================================== */

.vvsvc-section {
    --vvsvc-night: #041c35;
    --vvsvc-navy: #062f50;
    --vvsvc-cyan: #50d9e6;
    --vvsvc-mint: #62eec4;
    --vvsvc-gap: 22px;
    --vvsvc-visible: 3;
    --vvsvc-font: 'Manrope', Arial, sans-serif;

    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 78px 0 66px;
    overflow: hidden;

    color: #ffffff;
    font-family: var(--vvsvc-font);

    background: linear-gradient(
        114deg,
        #031b32 0%,
        #052e4d 58%,
        #06475c 100%
    );
}

.vvsvc-section,
.vvsvc-section * {
    box-sizing: border-box;
}

.vvsvc-section a {
    text-decoration: none;
}

.vvsvc-section button {
    font: inherit;
}

.vvsvc-section a:focus-visible,
.vvsvc-section button:focus-visible,
.vvsvc-viewport:focus-visible {
    outline: 3px solid #8cf8d9;
    outline-offset: 4px;
}

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

.vvsvc-decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.vvsvc-decor-grid {
    position: absolute;
    inset: 0 0 0 42%;

    background-image:
        linear-gradient(
            #5fdfdb0c 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #5fdfdb0c 1px,
            transparent 1px
        );

    background-size: 38px 38px;
}

.vvsvc-decor-glow {
    position: absolute;

    top: -270px;
    right: -220px;

    width: 660px;
    height: 660px;

    border: 1px solid #69e8d62b;
    border-radius: 50%;

    box-shadow:
        0 0 0 68px #69e8d608,
        0 0 0 137px #69e8d604;
}

.vvsvc-decor-line {
    position: absolute;

    top: 0;

    left: max(
        48px,
        calc((100% - 1400px) / 2)
    );

    width: 143px;
    height: 4px;

    background: linear-gradient(
        90deg,
        #1bc6de,
        #73f3c7
    );
}

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

.vvsvc-shell {
    position: relative;

    width: min(
        1400px,
        calc(100% - 96px)
    );

    margin: 0 auto;
}

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

.vvsvc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 31px;
}

.vvsvc-heading-group {
    max-width: 900px;
    min-width: 0;
}

/* EYEBROW */

.vvsvc-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0 0 16px;

    color: #8feadf;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.5;
}

.vvsvc-signal {
    display: inline-block;
    flex: none;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #5cf0c1;

    box-shadow: 0 0 0 5px #5cf0c11f;

    animation:
        vvsvcPulse 3.5s ease-out infinite;
}

.vvsvc-eyebrow-rule {
    width: 24px;
    height: 1px;

    background: #6dabae;
}

/* MAIN HEADING */

.vvsvc-heading {
    margin: 0;
    padding: 0;

    color: #ffffff !important;

    font-family: var(--vvsvc-font);

    font-size: clamp(
        36px,
        4.35vw,
        64px
    );

    font-weight: 850;
    line-height: 1.13;
    letter-spacing: -.052em;

    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.vvsvc-heading span {
    display: block;

    color: #75f0ce;
}

.vvsvc-intro {
    max-width: 690px;

    margin: 15px 0 0;

    color: #d5e9ef;

    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.7;
}

/* ==========================================
   TOP RIGHT SLIDER CONTROLS
========================================== */

.vvsvc-navigation {
    display: flex;
    align-items: center;

    gap: 11px;
    flex: none;

    margin-bottom: 4px;
}

.vvsvc-count {
    display: flex;
    align-items: baseline;

    gap: 8px;
    margin-right: 13px;

    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vvsvc-count strong {
    color: #ffffff;

    font-size: 25px;
    font-weight: 850;
}

.vvsvc-count-slash {
    color: #5a9eb0;
    font-size: 17px;
}

.vvsvc-count > span:last-child {
    color: #9acbd6;

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

/* PREVIOUS AND NEXT BUTTONS */

.vvsvc-arrow {
    display: grid;
    place-items: center;
    flex: none;

    width: 56px;
    height: 56px;
    padding: 0;

    border: 1px solid #37778f;
    border-radius: 14px;

    background: #0c4965;
    color: #ffffff;

    cursor: pointer;

    transition:
        background-color .3s,
        border-color .3s,
        color .3s,
        box-shadow .3s;
}

.vvsvc-arrow svg {
    display: block;

    width: 23px;
    height: 23px;

    transition: translate .28s;
}

.vvsvc-arrow:hover:not(:disabled) {
    background: #65efc5;
    border-color: #65efc5;

    color: #053b51;

    box-shadow:
        0 12px 26px #00162455;
}

.vvsvc-prev:hover:not(:disabled) svg {
    translate: -3px 0;
}

.vvsvc-next:hover:not(:disabled) svg {
    translate: 3px 0;
}

.vvsvc-arrow:disabled {
    opacity: .43;
    cursor: not-allowed;
}

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

.vvsvc-viewport {
    width: 100%;

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

    padding: 3px 1px 19px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.vvsvc-viewport::-webkit-scrollbar {
    display: none;
}

.vvsvc-track {
    position: relative;

    display: flex;
    gap: var(--vvsvc-gap);

    width: 100%;
}

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

.vvsvc-card {
    position: relative;

    flex: 0 0 calc(
        (
            100% -
            (var(--vvsvc-visible) - 1) * var(--vvsvc-gap)
        ) / var(--vvsvc-visible)
    );

    min-width: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    border: 1px solid #b9d6df;
    border-radius: 20px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 18px 38px #00142440;

    transition:
        border-color .35s,
        box-shadow .4s;
}

.vvsvc-card:hover,
.vvsvc-card:focus-within {
    border-color: #77f1d2;

    box-shadow:
        0 26px 52px #00142472;
}

.vvsvc-card-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;
}

/* ==========================================
   PREMIUM CARD ARTWORK
========================================== */

.vvsvc-card-art {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: 190px;
    padding: 22px;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #0b4868,
        #087c91
    );
}

/* VARIATIONS FOR SEVEN SERVICES */

.vvsvc-card:nth-child(7n+2)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #074c67,
        #0b9e99
    );
}

.vvsvc-card:nth-child(7n+3)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #093d6b,
        #0b719b
    );
}

.vvsvc-card:nth-child(7n+4)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #053c55,
        #087b7c
    );
}

.vvsvc-card:nth-child(7n+5)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #062f63,
        #116da5
    );
}

.vvsvc-card:nth-child(7n+6)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #053b61,
        #087a9a
    );
}

.vvsvc-card:nth-child(7n+7)
.vvsvc-card-art {
    background: linear-gradient(
        135deg,
        #07475f,
        #087e88
    );
}

/* OPTIONAL FEATURED IMAGE */

.vvsvc-card-image {
    position: absolute;
    z-index: 0;
    inset: 0;

    width: 100%;
    height: 100%;

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

/* IMAGE TINT */

.vvsvc-card-art::before {
    content: "";

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

    background: linear-gradient(
        110deg,
        #032f4f8a,
        #043a4a70
    );

    pointer-events: none;
}

/* DECORATIVE GRID */

.vvsvc-art-grid {
    position: absolute;
    z-index: 2;
    inset: 0;

    background-image:
        linear-gradient(
            #b3ffef15 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #b3ffef15 1px,
            transparent 1px
        );

    background-size: 26px 26px;
}

/* CIRCULAR TECH ORBITS */

.vvsvc-art-orbit {
    position: absolute;
    z-index: 2;

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

    transition:
        scale .5s,
        border-color .35s;
}

.vvsvc-art-orbit-one {
    width: 235px;
    height: 235px;

    right: -64px;
    top: -42px;
}

.vvsvc-art-orbit-two {
    width: 167px;
    height: 167px;

    right: -26px;
    top: -8px;

    border-style: dashed;
}

.vvsvc-card:hover .vvsvc-art-orbit-one {
    scale: 1.06;
    border-color: #c6ffed;
}

.vvsvc-card:hover .vvsvc-art-orbit-two {
    scale: .95;
}

/* MAIN SERVICE ICON */

.vvsvc-art-icon {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 93px;
    height: 93px;

    border: 1px solid #b0f6ea;
    border-radius: 25px;

    background: #093e5d;
    color: #8dffdc;

    box-shadow:
        0 16px 27px #001c3570;

    transition:
        background-color .35s,
        color .35s,
        transform .4s,
        border-color .35s;
}

.vvsvc-art-icon svg {
    width: 43px;
    height: 43px;
}

.vvsvc-card:hover .vvsvc-art-icon {
    background: #70f2ca;
    color: #043c50;

    border-color: #ffffff;

    transform: rotate(-6deg);
}

/* ARTWORK CORNER LABEL */

.vvsvc-art-corner {
    position: absolute;
    z-index: 3;

    top: 18px;
    right: 18px;

    color: #e2fff9;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
}

/* BIG DECORATIVE NUMBER */

.vvsvc-art-index {
    position: absolute;
    z-index: 3;

    right: 17px;
    bottom: 1px;

    color: #d5fff81f;

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

    letter-spacing: -.1em;
    line-height: 1;

    pointer-events: none;
}

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

.vvsvc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    min-height: 240px;

    padding: 24px 24px 19px;
}

.vvsvc-card-label {
    display: flex;
    align-items: center;

    gap: 8px;
    min-height: 17px;

    color: #078394;

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

    letter-spacing: .095em;
    line-height: 1.45;
}

.vvsvc-card-label-dot {
    display: block;
    flex: none;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #0cb59e;
}

/* CARD H3 */

.vvsvc-card-title {
    margin: 14px 0 9px;
    padding: 0;

    color: #063453 !important;

    font-size: clamp(
        23px,
        2.05vw,
        29px
    );

    font-weight: 850;

    line-height: 1.22;
    letter-spacing: -.04em;

    text-shadow: none !important;
    filter: none !important;
}

/* CARD EXCERPT */

.vvsvc-card-description {
    margin: 0 0 22px;

    color: #47697c;

    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.58;

    text-shadow: none !important;
}

/* BOTTOM CARD LINK */

.vvsvc-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

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

    border-top: 1px solid #dfedf0;

    color: #074562;

    font-size: 13px;
    font-weight: 850;
}

.vvsvc-card-cta-icon {
    display: grid;
    place-items: center;
    flex: none;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    background: #e0f7f1;
    color: #08798b;

    transition:
        background-color .3s,
        color .3s,
        transform .3s;
}

.vvsvc-card-cta-icon svg {
    width: 19px;
    height: 19px;
}

.vvsvc-card:hover .vvsvc-card-cta-icon {
    background: #076b88;
    color: #ffffff;

    transform: translateX(3px);
}

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

.vvsvc-footer {
    display: flex;
    align-items: center;

    gap: 24px;
    padding-top: 11px;
}

.vvsvc-foot-caption,
.vvsvc-swipe-hint {
    display: inline-flex;
    align-items: center;

    gap: 11px;
    flex: none;

    color: #a9dbe2;

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

    line-height: 1.5;
    letter-spacing: .08em;
}

.vvsvc-foot-line {
    width: 22px;
    height: 2px;

    background: #62f1c6;
}

.vvsvc-swipe-hint {
    color: #92e7d9;
}

.vvsvc-swipe-hint span {
    color: #71edca;
    font-size: 17px;
}

/* PROGRESS BAR */

.vvsvc-progress {
    flex: 1;
    min-width: 45px;

    height: 3px;

    border-radius: 4px;
    overflow: hidden;

    background: #316a81;
}

.vvsvc-progress-fill {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #4bdbe2,
        #72f4c7
    );

    transition: width .3s ease;
}

/* SCREEN READER STATUS */

.vvsvc-sr-only {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;
    border: 0;
}

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

/* Content remains visible without JavaScript. */

.vvsvc-section.is-inview
.vvsvc-header {
    animation: vvsvcFade .75s .05s ease both;
}

.vvsvc-section.is-inview
.vvsvc-card:nth-child(1) {
    animation: vvsvcFade .65s .15s ease both;
}

.vvsvc-section.is-inview
.vvsvc-card:nth-child(2) {
    animation: vvsvcFade .65s .25s ease both;
}

.vvsvc-section.is-inview
.vvsvc-card:nth-child(3) {
    animation: vvsvcFade .65s .35s ease both;
}

.vvsvc-section.is-inview
.vvsvc-footer {
    animation: vvsvcFade .7s .45s ease both;
}

@keyframes vvsvcFade {
    from {
        opacity: .55;
    }

    to {
        opacity: 1;
    }
}

@keyframes vvsvcPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 #5cf0c145;
    }

    65% {
        box-shadow:
            0 0 0 9px #5cf0c100;
    }
}

/* ==========================================
   TABLET / SMALL LAPTOP
   TWO VISIBLE CARDS
========================================== */

@media (max-width: 1110px) {

    .vvsvc-section {
        --vvsvc-visible: 2;

        padding: 63px 0 56px;
    }

    .vvsvc-shell {
        width: calc(100% - 70px);
    }

    .vvsvc-heading {
        font-size: clamp(
            35px,
            4.6vw,
            54px
        );
    }

    .vvsvc-card-title {
        font-size: 26px;
    }

    .vvsvc-foot-caption {
        display: none;
    }
}

/* ==========================================
   SMALL TABLETS
========================================== */

@media (max-width: 760px) {

    .vvsvc-section {
        padding: 52px 0 49px;
    }

    .vvsvc-shell {
        width: calc(100% - 40px);
    }

    .vvsvc-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 22px;
        margin-bottom: 24px;
    }

    .vvsvc-heading {
        font-size: clamp(
            36px,
            7vw,
            48px
        );
    }

    .vvsvc-intro {
        font-size: 16px !important;
        margin-top: 13px;
    }

    .vvsvc-navigation {
        align-self: flex-end;
    }

    .vvsvc-arrow {
        width: 46px;
        height: 46px;

        border-radius: 12px;
    }

    .vvsvc-arrow svg {
        width: 20px;
        height: 20px;
    }

    .vvsvc-count strong {
        font-size: 22px;
    }

    .vvsvc-card-art {
        min-height: 177px;
    }

    .vvsvc-footer {
        gap: 12px;
    }

    .vvsvc-swipe-hint {
        font-size: 9px;
    }
}

/* ==========================================
   MOBILE — ONE VISIBLE CARD
========================================== */

@media (max-width: 660px) {

    .vvsvc-section {
        --vvsvc-visible: 1;
        --vvsvc-gap: 14px;
    }

    .vvsvc-shell {
        width: calc(100% - 34px);
    }

    .vvsvc-heading {
        font-size: clamp(
            34px,
            9vw,
            45px
        );
    }

    .vvsvc-eyebrow {
        font-size: 9px;
        gap: 8px;
    }

    .vvsvc-eyebrow-rule {
        width: 16px;
    }

    .vvsvc-card-body {
        padding: 21px 21px 18px;
        min-height: 226px;
    }

    .vvsvc-card-title {
        font-size: 28px;
    }

    .vvsvc-card-description {
        font-size: 16px !important;
    }

    .vvsvc-card-art {
        min-height: 175px;
    }

    .vvsvc-art-icon {
        width: 80px;
        height: 80px;
        border-radius: 22px;
    }

    .vvsvc-art-icon svg {
        width: 39px;
        height: 39px;
    }

    .vvsvc-foot-caption {
        display: none;
    }

    .vvsvc-swipe-hint {
        white-space: nowrap;
    }
}

/* VERY SMALL SCREENS */

@media (max-width: 370px) {

    .vvsvc-shell {
        width: calc(100% - 26px);
    }

    .vvsvc-heading {
        font-size: 34px;
    }

    .vvsvc-count {
        margin-right: 5px;
    }
}

/* ACCESSIBILITY */

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

    .vvsvc-section *,
    .vvsvc-section *::before,
    .vvsvc-section *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/* Ved Vaidya | Why Choose Us | 08 | COMPLETE REPLACEMENT */
/* VISUALS LEFT / COPY RIGHT / COMPACT VIEWPORT HEIGHT */
.vvwhy-section {
  --vvwhy-mint:#69efc8;
  --vvwhy-teal:#087e91;
  --vvwhy-font:'Manrope',Arial,sans-serif;
  position:relative; isolation:isolate; width:100%;
  display:flex; align-items:center; overflow:hidden;
  min-height:min(650px,100svh);
  padding:clamp(32px,3.5vw,48px) 0;
  background:linear-gradient(112deg,#031b33 0%,#06314f 54%,#086079 100%);
  color:#fff; font-family:var(--vvwhy-font);
}
.vvwhy-section,.vvwhy-section * {box-sizing:border-box}
.vvwhy-section a {text-decoration:none}
.vvwhy-section a:focus-visible {outline:3px solid #85ffdb;outline-offset:4px}
.vvwhy-bg {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.vvwhy-bg-grid {position:absolute;inset:0 44% 0 0;background-image:linear-gradient(#80dedb0d 1px,transparent 1px),linear-gradient(90deg,#80dedb0d 1px,transparent 1px);background-size:34px 34px}
.vvwhy-bg-glow {position:absolute;width:550px;height:550px;left:-280px;bottom:-310px;border:1px solid #84f4d529;border-radius:50%;box-shadow:0 0 0 58px #84f4d509,0 0 0 115px #84f4d506}
.vvwhy-bg-rule {position:absolute;top:0;left:max(32px,calc((100% - 1360px)/2));width:133px;height:4px;background:linear-gradient(90deg,#1bcce4,#73f2c7)}
.vvwhy-layout {position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;gap:clamp(35px,5vw,78px);width:min(1360px,calc(100% - 90px));margin:0 auto}
.vvwhy-visual,.vvwhy-content {min-width:0;opacity:1;visibility:visible;clip-path:none!important}
/* LEFT BOARD */
.vvwhy-visual {position:relative;padding:0 11px 11px 0}
.vvwhy-outline {position:absolute;z-index:-1;inset:12px 0 0 12px;border:1px solid #60a8b7;border-radius:21px;pointer-events:none;transition:translate .4s,border-color .4s}
.vvwhy-visual:hover .vvwhy-outline {translate:4px 4px;border-color:#7ef0d6}
.vvwhy-board {position:relative;z-index:1;overflow:hidden;padding:16px;border:1px solid #c1e0e2;border-radius:20px;background:#eaf5f5;box-shadow:0 26px 54px #00172f60;transition:border-color .35s,box-shadow .35s}
.vvwhy-board:hover {border-color:#7debd2;box-shadow:0 31px 66px #00172f7e}
.vvwhy-board:before {content:'';position:absolute;z-index:3;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#0a92af,#6bf0c6);pointer-events:none}
.vvwhy-board-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.vvwhy-board-identity {display:flex;align-items:center;gap:10px;min-width:0}
.vvwhy-board-identity-icon {display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#06445f;color:#6cf0d2}
.vvwhy-board-identity-icon svg {width:23px;height:23px}
.vvwhy-board-identity>span:last-child {display:flex;flex-direction:column;gap:4px;min-width:0}
.vvwhy-board-identity strong {color:#063a54;font-size:11px;font-weight:850;letter-spacing:.055em;line-height:1.25}
.vvwhy-board-identity small {color:#527584;font-size:12px;line-height:1.3}
.vvwhy-board-fraction {flex:none;color:#087d8e;font-size:11px;font-weight:850;white-space:nowrap}
.vvwhy-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vvwhy-card {--vvwhy-x:50%;--vvwhy-y:50%;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:169px;padding:16px;overflow:hidden;border:1px solid #c9e0e4;border-radius:12px;background:#fff;box-shadow:0 4px 15px #0648630a;transition:background-color .35s,border-color .35s,box-shadow .35s}
.vvwhy-card:before {content:'';position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;background:radial-gradient(160px circle at var(--vvwhy-x) var(--vvwhy-y),#5be7cd33,transparent 74%);transition:opacity .35s}
.vvwhy-card>* {position:relative;z-index:1}
.vvwhy-card:hover {background:#083c57;border-color:#3dbdb8;box-shadow:0 12px 29px #03354e35}
.vvwhy-card:hover:before {opacity:1}
.vvwhy-card-top {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.vvwhy-card-icon {display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:9px;border:1px solid #bfe4e0;background:#e0f4f1;color:#078392;transition:background-color .35s,color .35s,rotate .35s}
.vvwhy-card-icon svg {width:21px;height:21px}
.vvwhy-card-number {color:#81a0ab;font-size:11px;font-weight:850}
.vvwhy-card h3 {margin:0 0 6px;color:#063953!important;font-family:var(--vvwhy-font);font-size:17px;font-weight:850;line-height:1.29;letter-spacing:-.02em;transition:color .35s}
.vvwhy-card p {margin:0 0 12px;color:#486b7e;font-size:16px!important;font-weight:500;line-height:1.38;transition:color .35s}
.vvwhy-card-underline {display:block;width:27px;height:3px;margin-top:auto;border-radius:3px;background:#0baaa4;transition:width .35s,background-color .35s}
.vvwhy-card:hover .vvwhy-card-icon {background:#67edc5;color:#064558;rotate:-5deg}
.vvwhy-card:hover .vvwhy-card-number {color:#a4ebdd}
.vvwhy-card:hover h3 {color:#fff!important}
.vvwhy-card:hover p {color:#e2f0f3}
.vvwhy-card:hover .vvwhy-card-underline {width:66px;background:#6df0c9}
.vvwhy-board-bottom {display:flex;align-items:center;gap:9px;min-height:43px;margin-top:11px;padding:8px 11px;border-radius:9px;background:#07546d;color:#fff}
.vvwhy-board-bottom-mark {display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:7px;background:#65edc1;color:#06455a;font-size:16px;font-weight:900}
.vvwhy-board-bottom>span:nth-child(2) {display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:850;letter-spacing:.05em}
.vvwhy-board-bottom i {font-style:normal;color:#73eecb}
.vvwhy-board-bottom-brand {margin-left:auto;color:#a4e7e4;font-size:9px;font-weight:850;letter-spacing:.05em;white-space:nowrap}
/* RIGHT TEXT */
.vvwhy-content {width:100%;max-width:630px}
.vvwhy-eyebrow {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:15px;color:#b6eeeb;font-size:11px;font-weight:850;letter-spacing:.11em}
.vvwhy-eyebrow-number {display:grid;place-items:center;flex:none;width:35px;height:35px;border:1px solid #448ca2;border-radius:9px;background:#0b526e;color:#74f6d0;font-size:13px}
.vvwhy-eyebrow-line {width:32px;height:2px;background:#5ae3dc;transition:width .35s}
.vvwhy-content:hover .vvwhy-eyebrow-line {width:54px}
.vvwhy-heading {margin:0;color:#fff!important;font-family:var(--vvwhy-font);font-size:clamp(39px,4vw,58px);font-weight:850;line-height:1.11;letter-spacing:-.055em;filter:none!important;text-shadow:none!important;transform:none!important}
.vvwhy-heading span {display:block;color:#74f0ce}
.vvwhy-subheading {margin:13px 0 0;color:#fff;font-family:var(--vvwhy-font);font-size:clamp(21px,2.15vw,28px);font-weight:800;line-height:1.27;letter-spacing:-.03em}
.vvwhy-subheading strong {color:#a6eaf0;font-weight:800}
.vvwhy-content-rule {display:flex;gap:7px;margin-top:17px}
.vvwhy-content-rule i {display:block;width:61px;height:3px;border-radius:3px;background:#43dfe7;transition:width .35s}
.vvwhy-content-rule i:last-child {width:17px;background:#6bf0bd}
.vvwhy-content:hover .vvwhy-content-rule i:first-child {width:91px}
.vvwhy-copy {margin-top:17px;max-width:600px}
.vvwhy-copy p {margin:0 0 10px;color:#d9ecf0;font-size:16px!important;line-height:1.62;font-weight:500;filter:none!important;text-shadow:none!important}
.vvwhy-copy p:last-child {margin-bottom:0}
.vvwhy-copy strong {color:#fff;font-weight:800}
.vvwhy-note {display:flex;align-items:center;gap:11px;margin-top:18px;padding:12px 13px;border:1px solid #3c8b99;border-left:3px solid #6ae9c3;border-radius:10px;background:#0c4b65;transition:background-color .3s,border-color .3s}
.vvwhy-note:hover {background:#125e75;border-color:#72e6d3}
.vvwhy-note-icon {display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:9px;background:#66ebc2;color:#06445a}
.vvwhy-note-icon svg {width:21px;height:21px}
.vvwhy-note>span:last-child {display:flex;flex-direction:column;gap:3px;min-width:0}
.vvwhy-note strong {color:#fff;font-size:14px;font-weight:850;line-height:1.3}
.vvwhy-note small {color:#d2eaf0;font-size:12px;font-weight:600;line-height:1.35}
.vvwhy-actions {display:flex;align-items:center;flex-wrap:wrap;gap:19px;margin-top:21px}
.vvwhy-button {position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:15px;min-height:50px;padding:6px 6px 6px 19px;overflow:hidden;border:1px solid #75f1cc;border-radius:99px;background:#69eec3;color:#064054!important;font-size:14px;font-weight:850;box-shadow:0 10px 23px #00152840;transition:background-color .35s,box-shadow .35s}
.vvwhy-button:before {content:'';position:absolute;left:-80%;top:-80%;width:50%;height:260%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#fff8,transparent);transition:left .7s;pointer-events:none}
.vvwhy-button:hover:before {left:145%}
.vvwhy-button:hover {background:#91ffdc;box-shadow:0 15px 31px #00152860}
.vvwhy-button>span {position:relative;z-index:1}
.vvwhy-button-icon {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#07546c;color:#fff;transition:translate .3s}
.vvwhy-button-icon svg {width:19px;height:19px}
.vvwhy-button:hover .vvwhy-button-icon {translate:3px 0}
.vvwhy-textlink {display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 0;border-bottom:1px solid #77b4bd;color:#fff!important;font-size:14px;font-weight:800;transition:color .3s,border-color .3s}
.vvwhy-textlink span {color:#78efcf;font-size:20px;transition:translate .3s}
.vvwhy-textlink:hover {color:#9bffe1!important;border-color:#9bffe1}
.vvwhy-textlink:hover span {translate:3px -3px}
/* STAGGERED ENTRANCE - VISIBLE FALLBACK */
.vvwhy-section.is-inview .vvwhy-board {animation:vvwhyReveal .65s .05s both}
.vvwhy-section.is-inview .vvwhy-board-top {animation:vvwhyReveal .55s .12s both}
.vvwhy-section.is-inview .vvwhy-card:nth-child(1){animation:vvwhyReveal .55s .22s both}
.vvwhy-section.is-inview .vvwhy-card:nth-child(2){animation:vvwhyReveal .55s .31s both}
.vvwhy-section.is-inview .vvwhy-card:nth-child(3){animation:vvwhyReveal .55s .4s both}
.vvwhy-section.is-inview .vvwhy-card:nth-child(4){animation:vvwhyReveal .55s .49s both}
.vvwhy-section.is-inview .vvwhy-board-bottom{animation:vvwhyReveal .6s .58s both}
.vvwhy-section.is-inview .vvwhy-eyebrow {animation:vvwhyReveal .55s .07s both}
.vvwhy-section.is-inview .vvwhy-heading {animation:vvwhyReveal .65s .16s both}
.vvwhy-section.is-inview .vvwhy-subheading {animation:vvwhyReveal .6s .24s both}
.vvwhy-section.is-inview .vvwhy-content-rule {animation:vvwhyReveal .6s .3s both}
.vvwhy-section.is-inview .vvwhy-copy {animation:vvwhyReveal .65s .36s both}
.vvwhy-section.is-inview .vvwhy-note {animation:vvwhyReveal .6s .47s both}
.vvwhy-section.is-inview .vvwhy-actions {animation:vvwhyReveal .6s .55s both}
.vvwhy-section.is-inview .vvwhy-board:before {animation:vvwhyDraw 1.1s .35s ease forwards}
@keyframes vvwhyReveal {from{opacity:.55}to{opacity:1}}
@keyframes vvwhyDraw {from{width:0}to{width:100%}}
/* SMALL DESKTOP VIEWPORT - GUARDED COMPRESSION */
@media (min-width:961px) and (max-height:790px) {
  .vvwhy-section {min-height:0;padding:28px 0}
  .vvwhy-card {min-height:153px;padding:13px}
  .vvwhy-card-top {margin-bottom:7px}
  .vvwhy-card h3 {font-size:16px;margin-bottom:5px}
  .vvwhy-card p {line-height:1.32;margin-bottom:9px}
  .vvwhy-heading {font-size:clamp(37px,3.65vw,52px)}
  .vvwhy-copy {margin-top:13px}
  .vvwhy-copy p {line-height:1.5;margin-bottom:8px}
  .vvwhy-note {margin-top:13px}
  .vvwhy-actions {margin-top:15px}
}
/* LAPTOP */
@media (max-width:1250px) {
  .vvwhy-layout {width:calc(100% - 68px);gap:30px}
  .vvwhy-card {min-height:170px;padding:13px}
  .vvwhy-card h3 {font-size:16px}
  .vvwhy-heading {font-size:clamp(36px,4vw,52px)}
  .vvwhy-board-bottom-brand {display:none}
}
@media (max-width:1060px) and (min-width:961px) {
  .vvwhy-layout {gap:22px}
  .vvwhy-board {padding:12px}
  .vvwhy-cards {gap:7px}
  .vvwhy-card {padding:11px;min-height:184px}
  .vvwhy-card h3 {font-size:15px}
  .vvwhy-card p {line-height:1.36}
  .vvwhy-board-fraction {display:none}
  .vvwhy-heading {font-size:40px}
  .vvwhy-subheading {font-size:22px}
}
/* TABLET - TEXT FIRST ON SMALL SCREENS */
@media (max-width:960px) {
  .vvwhy-section {min-height:0;padding:52px 0}
  .vvwhy-layout {grid-template-columns:1fr;max-width:700px;width:calc(100% - 54px);gap:33px}
  .vvwhy-content {order:1;max-width:none}
  .vvwhy-visual {order:2;max-width:680px;width:100%;margin:0 auto}
  .vvwhy-heading {font-size:clamp(43px,6vw,57px)}
  .vvwhy-subheading {font-size:clamp(24px,3.2vw,29px)}
  .vvwhy-card {min-height:160px;padding:16px}
  .vvwhy-card h3 {font-size:17px}
}
@media (max-width:620px) {
  .vvwhy-section {padding:42px 0 47px}
  .vvwhy-layout {width:calc(100% - 34px);gap:26px}
  .vvwhy-eyebrow {font-size:10px;gap:8px;margin-bottom:13px}
  .vvwhy-eyebrow-number {width:32px;height:32px}
  .vvwhy-eyebrow-line {width:22px}
  .vvwhy-heading {font-size:clamp(37px,9vw,49px)}
  .vvwhy-subheading {font-size:clamp(22px,5.5vw,27px);margin-top:10px}
  .vvwhy-content-rule {margin-top:14px}
  .vvwhy-copy {margin-top:15px}
  .vvwhy-copy p {font-size:16px!important;line-height:1.61}
  .vvwhy-note {margin-top:16px;padding:11px}
  .vvwhy-actions {margin-top:18px;gap:15px}
  .vvwhy-visual {padding:0 7px 7px 0}
  .vvwhy-board {padding:11px;border-radius:15px}
  .vvwhy-outline {inset:8px 0 0 8px;border-radius:16px}
  .vvwhy-board-top {margin-bottom:11px}
  .vvwhy-board-identity-icon {width:35px;height:35px}
  .vvwhy-board-identity strong {font-size:10px}
  .vvwhy-board-identity small {font-size:11px}
  .vvwhy-board-fraction {display:none}
  .vvwhy-cards {gap:7px}
  .vvwhy-card {min-height:185px;padding:11px;border-radius:10px}
  .vvwhy-card-top {margin-bottom:9px}
  .vvwhy-card-icon {width:33px;height:33px}
  .vvwhy-card-icon svg {width:19px;height:19px}
  .vvwhy-card h3 {font-size:15px}
  .vvwhy-card p {font-size:16px!important;line-height:1.4}
  .vvwhy-board-bottom {padding:8px;font-size:10px}
  .vvwhy-board-bottom>span:nth-child(2) {gap:6px;font-size:10px}
}
@media (max-width:430px) {
  .vvwhy-cards {grid-template-columns:1fr}
  .vvwhy-card {min-height:0;padding:15px}
  .vvwhy-card h3 {font-size:17px}
  .vvwhy-card p {margin-bottom:10px}
  .vvwhy-board-bottom-brand {display:none}
}
@media (max-width:380px) {
  .vvwhy-layout {width:calc(100% - 26px)}
  .vvwhy-heading {font-size:36px}
  .vvwhy-actions {flex-direction:column;align-items:flex-start}
  .vvwhy-button {width:100%}
}
@media (hover:none) { .vvwhy-card:before {display:none} .vvwhy-card:hover .vvwhy-card-icon {rotate:0deg} .vvwhy-visual:hover .vvwhy-outline {translate:0}}
@media (prefers-reduced-motion:reduce) {
  .vvwhy-section *, .vvwhy-section *:before, .vvwhy-section *:after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .vvwhy-board:before {width:100%!important}
}

/* =============================================================
   VED VAIDYA — PREMIUM BLOG SLIDER
   Native WordPress Posts | 3 / 2 / 1 cards
   No slider library
============================================================= */

.vvblog-section {
  --vvblog-navy: #052b50;
  --vvblog-deep: #073955;
  --vvblog-teal: #087f92;
  --vvblog-mint: #61eec5;
  --vvblog-gap: 22px;
  --vvblog-font: 'Manrope', Arial, sans-serif;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  margin: 0;
  padding: clamp(48px,6vh,68px) 0 48px;

  background: linear-gradient(
    115deg,
    #fff 0%,
    #f7fbfc 55%,
    #ebf6f5 100%
  );

  color: var(--vvblog-navy);
  font-family: var(--vvblog-font);
}

.vvblog-section,
.vvblog-section * {
  box-sizing: border-box;
}

.vvblog-section a {
  text-decoration: none;
}

.vvblog-section :is(a,button,[tabindex]):focus-visible {
  outline: 3px solid #11acaa;
  outline-offset: 4px;
}

/* BACKGROUND */

.vvblog-decor {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.vvblog-decor-dots {
  position: absolute;

  right: 0;
  top: 0;

  width: 37%;
  height: 100%;

  background-image:
    radial-gradient(#0b799215 1px, transparent 1px);

  background-size: 23px 23px;

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

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

.vvblog-decor-ring {
  position: absolute;

  width: 490px;
  height: 490px;

  top: -280px;
  right: -155px;

  border: 1px solid #0b88951c;
  border-radius: 50%;

  box-shadow:
    0 0 0 55px #0b889508,
    0 0 0 112px #0b889505;
}

.vvblog-container {
  position: relative;
  z-index: 1;

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

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

.vvblog-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 28px;
  margin-bottom: 26px;
}

.vvblog-heading-copy {
  max-width: 870px;
  min-width: 0;
}

.vvblog-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
  margin-bottom: 12px;

  color: #087d8b;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1.4;
}

.vvblog-eyebrow-icon {
  display: grid;
  place-items: center;

  flex: none;

  width: 31px;
  height: 31px;

  border-radius: 9px;
  border: 1px solid #c4e4e2;

  background: #e0f4f0;
  color: #087e8f;
}

.vvblog-eyebrow-icon svg {
  width: 18px;
  height: 18px;
}

.vvblog-eyebrow-line {
  width: 25px;
  height: 2px;

  background: #0fb0a6;
}

.vvblog-title {
  margin: 0;
  padding: 0;

  color: #052b50 !important;

  font-family: var(--vvblog-font);
  font-size: clamp(42px,4.5vw,64px);
  font-weight: 850;

  letter-spacing: -.06em;
  line-height: 1.09;

  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.vvblog-title span {
  color: #087e94;
}

.vvblog-intro {
  max-width: 760px;

  margin: 10px 0 0;

  color: #426478;

  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.65;
}

/* =============================================================
   TOP RIGHT PREVIOUS / NEXT ARROWS
============================================================= */

.vvblog-navigation {
  display: flex;
  align-items: center;

  gap: 10px;
  flex: none;

  padding-bottom: 3px;
}

.vvblog-count {
  display: flex;
  align-items: baseline;

  gap: 7px;
  margin-right: 9px;

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vvblog-count strong {
  color: #052b50;
  font-size: 25px;
  font-weight: 850;
}

.vvblog-count > span:nth-child(2) {
  color: #a0b9c3;
  font-size: 18px;
}

.vvblog-count > span:last-child {
  color: #7295a5;
  font-size: 14px;
  font-weight: 750;
}

.vvblog-arrow {
  display: grid;
  place-items: center;

  flex: none;

  width: 54px;
  height: 54px;
  padding: 0;

  border: 1px solid #bddbe1;
  border-radius: 14px;

  background: #fff;
  color: #073955;

  box-shadow: 0 7px 19px #063d5810;

  cursor: pointer;

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

.vvblog-arrow svg {
  width: 22px;
  height: 22px;

  transition: transform .3s;
}

.vvblog-arrow:hover:not(:disabled) {
  background: #073f5b;
  border-color: #073f5b;
  color: #fff;

  box-shadow: 0 12px 23px #063d582a;

  transform: translateY(-2px);
}

.vvblog-next {
  background: #073f5b;
  border-color: #073f5b;
  color: #fff;
}

.vvblog-next:hover:not(:disabled) {
  background: #0a8694;
  border-color: #0a8694;
}

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

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

.vvblog-arrow:disabled {
  opacity: .38;
  cursor: not-allowed;
  box-shadow: none;
}

/* =============================================================
   CAROUSEL VIEWPORT
============================================================= */

.vvblog-viewport {
  width: 100%;

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

  padding: 3px 1px 16px;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vvblog-viewport::-webkit-scrollbar {
  display: none;
}

.vvblog-track {
  display: flex;

  gap: var(--vvblog-gap);

  width: 100%;
  position: relative;
}

/* =============================================================
   BLOG CARDS
============================================================= */

.vvblog-card {
  position: relative;
  min-width: 0;

  flex: 0 0 calc((100% - 44px)/3);

  border: 1px solid #d4e4e9;
  border-radius: 18px;

  background: #fff;
  overflow: hidden;

  scroll-snap-align: start;

  box-shadow: 0 10px 28px #0a50650b;

  transition:
    border-color .35s,
    box-shadow .4s;
}

.vvblog-card:hover,
.vvblog-card:focus-within {
  border-color: #3eb4ad;

  box-shadow: 0 22px 46px #0b4e6925;
}

.vvblog-card-link {
  display: flex;
  flex-direction: column;

  height: 100%;
  color: inherit;
}

/* =============================================================
   FEATURED IMAGE AREA
============================================================= */

.vvblog-media {
  position: relative;
  isolation: isolate;

  height: 190px;
  overflow: hidden;

  background: #0c4e6a;
}

.vvblog-image {
  display: block;

  width: 100%;
  height: 100%;

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

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

.vvblog-card:hover .vvblog-image {
  transform: scale(1.075);
}

.vvblog-media::after {
  content: '';

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

  background:
    linear-gradient(0deg,#041d3880,transparent);

  pointer-events: none;
}

/* CATEGORY PILL */

.vvblog-category {
  position: absolute;
  z-index: 3;

  top: 14px;
  left: 14px;

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

  max-width: calc(100% - 78px);
  min-height: 31px;

  padding: 6px 12px;

  border: 1px solid #d1fff0aa;
  border-radius: 8px;

  background: #063a53e8;
  color: #e5fff8;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FLOATING IMAGE ARROW */

.vvblog-image-arrow {
  position: absolute;
  z-index: 3;

  right: 14px;
  top: 14px;

  display: grid;
  place-items: center;

  width: 37px;
  height: 37px;

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

  background: #ffffffed;
  color: #07546a;

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

.vvblog-image-arrow svg {
  width: 19px;
  height: 19px;
}

.vvblog-card:hover .vvblog-image-arrow {
  background: #6cf1c9;
  color: #063e52;

  transform: rotate(45deg);
}

/* =============================================================
   FALLBACK FOR POSTS WITHOUT IMAGES
============================================================= */

.vvblog-fallback {
  position: absolute;
  inset: 0;

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

  overflow: hidden;

  background: linear-gradient(
    128deg,#052b50,#087b91
  );
}

.vvblog-fallback-ring {
  position: absolute;

  width: 290px;
  height: 290px;

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

  right: -70px;
  top: -80px;

  box-shadow:
    0 0 0 38px #aaf7e40c,
    0 0 0 76px #aaf7e408;

  transition: transform .6s;
}

.vvblog-card:hover .vvblog-fallback-ring {
  transform: scale(1.09);
}

.vvblog-fallback-symbol {
  position: relative;

  display: grid;
  place-items: center;

  width: 90px;
  height: 90px;

  border: 1px solid #a8f8e4;
  border-radius: 24px;

  background: #0b526c;
  color: #89f7d4;

  box-shadow: 0 15px 28px #00203877;

  transform: rotate(-9deg);

  transition:
    transform .5s,
    background .5s;
}

.vvblog-fallback-symbol svg {
  width: 46px;
  height: 46px;
}

.vvblog-card:hover .vvblog-fallback-symbol {
  transform: rotate(0deg);
  background: #0d6a77;
}

.vvblog-fallback-word {
  position: absolute;

  left: 17px;
  bottom: 11px;

  color: #cffbed;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}

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

.vvblog-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;

  min-height: 207px;

  padding: 20px 22px 17px;
}

.vvblog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 9px;
  margin-bottom: 10px;

  color: #66879a;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.vvblog-meta-dot {
  display: block;

  width: 5px;
  height: 5px;

  flex: none;

  border-radius: 50%;
  background: #0ca89d;
}

/* BLOG TITLE */

.vvblog-card-title {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;

  margin: 0 0 10px;
  padding: 0;

  min-height: 2.55em;

  color: #073751 !important;

  font-family: var(--vvblog-font);
  font-size: clamp(20px,1.85vw,25px);
  font-weight: 850;

  line-height: 1.27;
  letter-spacing: -.035em;

  transition: color .3s;
}

.vvblog-card:hover .vvblog-card-title {
  color: #087f91 !important;
}

/* DESCRIPTION */

.vvblog-excerpt {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;

  margin: 0 0 18px;

  color: #4f7080;

  font-size: 16px !important;
  font-weight: 500;

  line-height: 1.5;
  min-height: 3em;
}

/* READ ARTICLE */

.vvblog-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

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

  border-top: 1px solid #e2edef;

  color: #07516e;

  font-size: 13px;
  font-weight: 850;
}

.vvblog-read-icon {
  display: grid;
  place-items: center;

  flex: none;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #e2f6f1;
  color: #087e91;

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

.vvblog-read-icon svg {
  width: 18px;
  height: 18px;
}

.vvblog-card:hover .vvblog-read-icon {
  background: #087c8f;
  color: #fff;

  transform: translateX(3px);
}

/* =============================================================
   BOTTOM PROGRESS AND VIEW ALL
============================================================= */

.vvblog-bottom-row {
  display: flex;
  align-items: center;

  gap: 24px;
  margin-top: 6px;
}

.vvblog-progress {
  flex: 1;
  min-width: 40px;

  height: 3px;

  border-radius: 3px;
  background: #cfe0e5;

  overflow: hidden;
}

.vvblog-progress-fill {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(
    90deg,#087eaa,#0abda5
  );

  transition: width .25s ease;
}

.vvblog-all-link {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  min-height: 39px;
  padding: 7px 0;

  border-bottom: 1px solid #8aaeb9;

  color: #073b57 !important;

  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;

  transition:
    color .3s,
    border-color .3s;
}

.vvblog-all-link svg {
  width: 19px;
  height: 19px;

  color: #0a8392;

  transition: transform .3s;
}

.vvblog-all-link:hover {
  color: #087f91 !important;
  border-color: #087f91;
}

.vvblog-all-link:hover svg {
  transform: translateX(4px);
}

.vvblog-sr-only {
  position: absolute !important;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;
  border: 0;
}

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

/* Cards and text remain visible if JS is unavailable */

.vvblog-section.is-inview .vvblog-heading-row {
  animation: vvblog-appear .68s .03s ease both;
}

.vvblog-section.is-inview .vvblog-card:nth-child(1) {
  animation: vvblog-appear .68s .16s ease both;
}

.vvblog-section.is-inview .vvblog-card:nth-child(2) {
  animation: vvblog-appear .68s .27s ease both;
}

.vvblog-section.is-inview .vvblog-card:nth-child(3) {
  animation: vvblog-appear .68s .38s ease both;
}

.vvblog-section.is-inview .vvblog-bottom-row {
  animation: vvblog-appear .65s .46s ease both;
}

@keyframes vvblog-appear {
  from {
    opacity: .6;
  }

  to {
    opacity: 1;
  }
}

/* =============================================================
   TABLET — TWO CARDS
============================================================= */

@media (max-width:1100px) {

  .vvblog-section {
    padding: 52px 0 46px;
  }

  .vvblog-container {
    width: calc(100% - 70px);
  }

  .vvblog-card {
    flex-basis: calc((100% - 22px)/2);
  }

  .vvblog-card-title {
    font-size: 24px;
  }
}

@media (max-width:760px) {

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

  .vvblog-heading-row {
    align-items: flex-start;
    gap: 16px;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .vvblog-navigation {
    align-self: flex-end;
  }

  .vvblog-title {
    font-size: clamp(39px,7vw,54px);
  }

  .vvblog-arrow {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .vvblog-count strong {
    font-size: 22px;
  }

  .vvblog-media {
    height: 180px;
  }
}

/* =============================================================
   MOBILE — ONE CARD
============================================================= */

@media (max-width:620px) {

  .vvblog-section {
    --vvblog-gap: 14px;

    padding: 44px 0 43px;
  }

  .vvblog-container {
    width: calc(100% - 34px);
  }

  .vvblog-card {
    flex-basis: 100%;
  }

  .vvblog-eyebrow {
    font-size: 9px;
    letter-spacing: .07em;
    gap: 7px;
  }

  .vvblog-eyebrow-icon {
    width: 28px;
    height: 28px;
  }

  .vvblog-eyebrow-line {
    width: 16px;
  }

  .vvblog-title {
    font-size: clamp(38px,10vw,50px);
  }

  .vvblog-intro {
    font-size: 16px !important;
  }

  .vvblog-media {
    height: 195px;
  }

  .vvblog-card-content {
    min-height: 200px;
    padding: 19px 19px 16px;
  }

  .vvblog-card-title {
    font-size: 24px;
  }

  .vvblog-bottom-row {
    gap: 13px;
  }

  .vvblog-all-link {
    font-size: 13px;
  }
}

@media (max-width:365px) {

  .vvblog-container {
    width: calc(100% - 26px);
  }

  .vvblog-title {
    font-size: 37px;
  }

  .vvblog-card-title {
    font-size: 22px;
  }

  .vvblog-count {
    margin-right: 2px;
  }
}

/* TOUCH AND ACCESSIBILITY */

@media (hover:none) {
  .vvblog-card:hover .vvblog-fallback-symbol {
    transform: rotate(-9deg);
  }
}

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

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

/* =======================================================
   VED VAIDYA MEDIA
   SIGNATURE INTERACTIVE SERVICES INDEX

   File: assets/css/home-services.css

   Light editorial background
   No cards or service links
   Animated selection rail
   Interactive service showcase
   Premium motion and responsive design
======================================================= */

.vvx-services {
    --vvx-ink: #082e42;
    --vvx-teal: #07858d;
    --vvx-mint: #43bba9;
    --vvx-muted: #58747e;
    --vvx-rule: rgba(9, 74, 92, .17);
    --vvx-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;

    padding: clamp(44px, 4.7vw, 66px) 0;

    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #f8fcfa 50%,
        #eef9f6 100%
    );

    color: var(--vvx-ink);
    font-family: Manrope, Arial, sans-serif;
}

.vvx-services,
.vvx-services *,
.vvx-services *::before,
.vvx-services *::after {
    box-sizing: border-box;
}

.vvx-services h2,
.vvx-services h3,
.vvx-services p {
    margin: 0;
}

.vvx-services button {
    font: inherit;
}

/* =======================================================
   SOFT AMBIENT BACKGROUND
======================================================= */

.vvx-ambient {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            ellipse at 78% 0%,
            rgba(7, 162, 155, .09),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 7% 100%,
            rgba(7, 100, 163, .05),
            transparent 45%
        );
}

.vvx-ambient::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(12, 134, 135, .08);
    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(7, 135, 141, .017),
        0 0 0 140px rgba(7, 135, 141, .009);
}

.vvx-container {
    width: min(1420px, calc(100% - 92px));
    margin: auto;
}

/* =======================================================
   PREMIUM EDITORIAL HEADING
======================================================= */

.vvx-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    color: #0a7c88;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .145em;
    line-height: 1.6;
}

.vvx-eyebrow-dot {
    display: inline-block;
    flex: none;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #0da59e;

    box-shadow: 0 0 0 5px rgba(13, 165, 158, .11);
}

.vvx-eyebrow-rule {
    width: 36px;
    height: 1px;
    background: #76b8b5;
}

.vvx-heading-line {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;

    margin-top: 12px;
    padding-bottom: 27px;

    border-bottom: 1px solid rgba(10, 80, 99, .32);
}

.vvx-heading h2 {
    max-width: 980px;

    font-size: clamp(38px, 4.4vw, 67px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.064em;
    color: #062e42;
}

.vvx-heading h2 em {
    position: relative;
    display: inline-block;

    color: #078a91;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.055em;
}

.vvx-heading h2 em::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 1%;

    width: 98%;
    height: 7px;

    border-radius: 50%;

    background: linear-gradient(
        90deg,
        rgba(16, 178, 161, .2),
        rgba(16, 178, 161, 0)
    );

    transform: skewX(-21deg);
    pointer-events: none;
}

.vvx-heading-line > p {
    flex: 0 0 290px;
    max-width: 290px;
    padding-bottom: 6px;

    color: #526f7b;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* =======================================================
   TWO-COLUMN INTERACTIVE STAGE
======================================================= */

.vvx-stage {
    display: grid;

    grid-template-columns:
        minmax(0, .96fr)
        minmax(0, 1.12fr);

    gap: clamp(36px, 5.7vw, 96px);
    align-items: stretch;

    margin-top: 23px;
}

/* =======================================================
   LEFT ACTIVE SERVICE SHOWCASE
======================================================= */

.vvx-spotlight {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

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

    padding: 6px 0 10px;
    overflow: hidden;
}

.vvx-spotlight-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;

    position: relative;
    z-index: 2;
}

.vvx-overline {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
    color: #12818c;
    line-height: 1.5;
}

.vvx-overline > span {
    margin: 0 8px;
    color: #9bb8b7;
}

.vvx-counter {
    flex: none;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.04em;
    color: #0a8390;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.vvx-counter small {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .03em;
    color: #7fa0a7;
}

/* =======================================================
   ANIMATED GRAPHIC / ORBIT
======================================================= */

.vvx-orbit {
    position: absolute;
    right: 8px;
    top: 51px;
    z-index: 0;

    width: 216px;
    height: 216px;

    border-radius: 50%;
    border: 1px solid rgba(11, 141, 142, .15);

    background: radial-gradient(
        circle at 50% 50%,
        rgba(19, 191, 175, .06),
        rgba(19, 191, 175, 0) 72%
    );

    display: grid;
    place-items: center;

    pointer-events: none;
}

.vvx-orbit::before {
    content: "";
    position: absolute;
    inset: 23px;

    border: 1px dashed rgba(7, 132, 143, .23);
    border-radius: 50%;

    animation: vvx-rotate 24s linear infinite;
}

.vvx-orbit::after {
    content: "";
    position: absolute;
    inset: 47px;

    border: 1px solid rgba(7, 132, 143, .12);
    border-radius: 50%;
}

.vvx-orbit-ring {
    position: absolute;
    inset: -16px;

    border: 1px solid rgba(7, 132, 143, .055);
    border-radius: 50%;
}

.vvx-orbit-dot {
    position: absolute;
    left: 17px;
    top: 47px;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #0aa8a6;

    box-shadow:
        0 0 0 9px rgba(10, 168, 166, .08),
        0 0 22px rgba(10, 168, 166, .25);
}

.vvx-orbit svg {
    width: 69px;
    height: 69px;
    z-index: 1;

    color: #0b8e98;

    filter: drop-shadow(
        0 9px 15px rgba(7, 145, 151, .1)
    );

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

@keyframes vvx-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* =======================================================
   DYNAMIC SERVICE INFORMATION
======================================================= */

.vvx-spotlight-body {
    z-index: 1;
    position: relative;

    margin: auto 0 26px;
    max-width: 480px;

    padding-top: 60px;
}

.vvx-spotlight-num {
    display: block;
    margin-bottom: 13px;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .17em;
    color: #078a92;
}

.vvx-spotlight-body h3 {
    max-width: 490px;

    color: #062f44;
    font-size: clamp(41px, 4.1vw, 64px);
    font-weight: 850;
    letter-spacing: -.063em;
    line-height: 1.1;

    text-wrap: balance;
}

.vvx-spotlight-body p {
    max-width: 445px;
    margin-top: 17px !important;

    color: #4c6e7b;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.68 !important;
}

/* Content switch animations */

.vvx-spotlight.is-changing .vvx-spotlight-body {
    animation: vvx-copy .48s var(--vvx-ease) both;
}

.vvx-spotlight.is-changing .vvx-orbit svg {
    animation: vvx-icon .55s var(--vvx-ease) both;
}

@keyframes vvx-copy {
    from {
        opacity: .4;
        transform: translateY(15px);
    }

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

@keyframes vvx-icon {
    from {
        opacity: .2;
        transform: scale(.65) rotate(-20deg);
    }

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

.vvx-spotlight-foot {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #608a92;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.vvx-foot-line {
    width: 45px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #07878e,
        #65dbc0
    );
}

/* =======================================================
   RIGHT INTERACTIVE SERVICE INDEX
======================================================= */

.vvx-index {
    min-width: 0;
}

.vvx-index-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 3px 0 12px;

    color: #0b8390;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
}

.vvx-index-list {
    position: relative;
    border-top: 1px solid rgba(8, 82, 98, .29);
}

/* Moving vertical turquoise selector */

.vvx-active-rail {
    position: absolute;
    z-index: 4;

    left: 0;
    top: 0;

    width: 3px;
    height: 58px;

    border-radius: 100px;

    background: linear-gradient(
        180deg,
        #008e9a,
        #7ceac7
    );

    box-shadow: 0 0 19px rgba(4, 158, 148, .28);

    transition:
        transform .52s var(--vvx-ease),
        height .52s var(--vvx-ease);

    pointer-events: none;
}

/* =======================================================
   INDIVIDUAL SERVICE ROW
======================================================= */

.vvx-entry {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        37px minmax(0, 1fr) 123px 24px;

    gap: 11px;
    align-items: center;

    width: 100%;
    min-height: 58px;
    padding: 10px 9px 10px 19px;

    text-align: left;
    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    border: 0;
    border-bottom: 1px solid var(--vvx-rule);
    border-radius: 0;

    color: var(--vvx-ink);
    cursor: pointer;

    transition: padding-left .35s var(--vvx-ease);
}

/* Cursor-following ambient hover highlight */

.vvx-entry::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    background:
        radial-gradient(
            ellipse 170px 90px at
            var(--vvx-mx, 80%)
            var(--vvx-my, 50%),
            rgba(24, 170, 164, .14),
            transparent 90%
        ),
        linear-gradient(
            90deg,
            rgba(8, 160, 154, .09),
            rgba(8, 160, 154, 0) 75%
        );

    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}

/* Animated horizontal line */

.vvx-entry::after {
    content: "";
    position: absolute;

    bottom: -1px;
    left: 19px;
    right: 10px;

    height: 1px;

    background: linear-gradient(
        90deg,
        #04969f,
        #8cead0,
        transparent
    );

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

    transition: transform .6s var(--vvx-ease);
    pointer-events: none;
}

.vvx-entry.is-active::before,
.vvx-entry:hover::before,
.vvx-entry:focus-visible::before {
    opacity: 1;
}

.vvx-entry.is-active::after,
.vvx-entry:hover::after,
.vvx-entry:focus-visible::after {
    transform: scaleX(1);
}

.vvx-entry:focus-visible {
    outline: 2px solid #079d9e;
    outline-offset: -2px;
    z-index: 3;
}

/* Number */

.vvx-entry-number {
    font-size: 12px;
    font-weight: 800;
    color: #7a9da5;
    font-variant-numeric: tabular-nums;

    transition: color .3s ease;
}

/* Service name */

.vvx-entry-title {
    font-size: clamp(17px, 1.6vw, 23px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.035em;

    color: #113d50;

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

/* Short label */

.vvx-entry-category {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-align: right;

    color: #7c99a3;
    white-space: nowrap;

    transition: color .3s ease;
}

/* Arrow */

.vvx-entry-mark {
    display: grid;
    place-items: center;

    color: #86a7a9;

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

.vvx-entry-mark svg {
    width: 20px;
    height: 20px;
}

/* =======================================================
   PREMIUM HOVER AND ACTIVE STATES
======================================================= */

.vvx-entry.is-active .vvx-entry-number,
.vvx-entry:hover .vvx-entry-number {
    color: #07868e;
}

.vvx-entry.is-active .vvx-entry-title,
.vvx-entry:hover .vvx-entry-title {
    color: #037e88;
    transform: translateX(5px);
}

.vvx-entry.is-active .vvx-entry-category {
    color: #0b8890;
}

.vvx-entry.is-active .vvx-entry-mark,
.vvx-entry:hover .vvx-entry-mark {
    color: #008b93;
    transform: translateX(4px);
}

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

.vvx-index-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;

    color: #86a4aa;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
}

.vvx-index-foot span {
    color: #079397;
    font-size: 18px;
}

/* =======================================================
   STAGGERED ENTRANCE

   Elements are visible without JavaScript.
======================================================= */

.vvx-reveal {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .9s var(--vvx-ease),
        transform .9s var(--vvx-ease);

    transition-delay: var(--vvx-delay, 0ms);
}

.vvx-services.vvx-motion:not(.is-inview) .vvx-reveal {
    opacity: 0;
    transform: translateY(28px);
}

.vvx-services.vvx-motion.is-inview .vvx-reveal {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 1200px) {

    .vvx-container {
        width: calc(100% - 56px);
    }

    .vvx-heading-line > p {
        flex-basis: 240px;
    }

    .vvx-stage {
        gap: 35px;

        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);
    }

    .vvx-orbit {
        width: 165px;
        height: 165px;
        top: 72px;
        right: 0;
    }

    .vvx-orbit svg {
        width: 56px;
        height: 56px;
    }

    .vvx-entry {
        grid-template-columns:
            30px minmax(0, 1fr) 90px 22px;

        gap: 7px;
    }

    .vvx-entry-title {
        font-size: 18px;
    }

    .vvx-entry-category {
        font-size: 9px;
    }
}

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

@media (max-width: 900px) {

    .vvx-heading-line {
        display: block;
    }

    .vvx-heading-line > p {
        max-width: 570px;
        margin-top: 11px !important;
    }

    .vvx-stage {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vvx-spotlight {
        min-height: 260px;
        padding: 4px 0 18px;
    }

    .vvx-spotlight-body {
        padding-top: 28px;
        margin: 14px 0 18px;
        max-width: 600px;
    }

    .vvx-spotlight-body h3 {
        font-size: clamp(38px, 5.5vw, 54px);
    }

    .vvx-spotlight-body p {
        max-width: 570px;
    }

    .vvx-orbit {
        top: 22px;
        right: 7%;

        width: 150px;
        height: 150px;

        opacity: .45;
    }

    .vvx-index {
        margin-top: 6px;
    }

    .vvx-entry {
        min-height: 54px;

        grid-template-columns:
            37px minmax(0, 1fr) 123px 24px;

        gap: 9px;
    }
}

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

@media (max-width: 600px) {

    .vvx-services {
        padding: 40px 0 44px;
    }

    .vvx-container {
        width: calc(100% - 34px);
    }

    .vvx-eyebrow {
        gap: 8px;
        font-size: 9px;
    }

    .vvx-eyebrow-rule {
        width: 16px;
    }

    .vvx-heading-line {
        padding-bottom: 19px;
    }

    .vvx-heading h2 {
        font-size: clamp(36px, 9.5vw, 48px);
        line-height: 1.1;
    }

    .vvx-spotlight {
        min-height: 0;
        padding-bottom: 14px;
    }

    .vvx-spotlight-top {
        padding-top: 4px;
    }

    .vvx-overline {
        font-size: 9px;
    }

    .vvx-counter {
        font-size: 17px;
    }

    .vvx-orbit {
        right: -20px;
        top: 37px;

        width: 125px;
        height: 125px;

        opacity: .32;
    }

    .vvx-orbit svg {
        width: 46px;
        height: 46px;
    }

    .vvx-spotlight-body {
        padding-top: 11px;
        margin: 21px 0 14px;
    }

    .vvx-spotlight-body h3 {
        font-size: clamp(36px, 9vw, 49px);
        max-width: 350px;
    }

    .vvx-spotlight-body p {
        margin-top: 12px !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .vvx-spotlight-foot {
        font-size: 9px;
    }

    .vvx-index-caption {
        padding-bottom: 10px;
    }

    .vvx-entry {
        min-height: 56px;
        padding: 10px 4px 10px 15px;

        grid-template-columns:
            27px minmax(0, 1fr) 20px;

        gap: 8px;
    }

    .vvx-entry-category {
        display: none;
    }

    .vvx-entry-title {
        font-size: clamp(17px, 4.7vw, 21px);
    }

    .vvx-index-foot {
        font-size: 8px;
    }
}

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

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

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

    .vvx-services.vvx-motion .vvx-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}