.vkl-testimonial-item-desc p{
color: white !important;
font-size: 36px;
line-height: 36px;
}
.vkl-work-item-content h3{
    display: none !important;
}
.vkl-blog-item10-title{
    color: white;
}
.vl-sidebar-content-1 ul{
    padding: 0px 20px;
}
.vl-sidebar-content-1 ul li{
    list-style: initial;
}

/* ---------- Wrapper: floats the button and holds the leaves ---------- */
.consult-float {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    animation: consult-float 3s ease-in-out infinite;
}

/* ---------- Button (Bootstrap .btn + custom variables) ---------- */
.btn-consult {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: .9rem;
    --bs-btn-font-size: 1.125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: 50rem;

    --bs-btn-color: #111;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #111;

    --bs-btn-hover-color: #111;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #111;

    --bs-btn-active-color: #111;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #111;

    --bs-btn-focus-shadow-rgb: 255, 193, 7;

    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    box-shadow: 5px 5px 0 #111;
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn-consult:hover {
    color: #111;
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 #111;
}

.btn-consult:active {
    color: #111;
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 #111;
}

/* keep content above the shine */
.btn-consult>* {
    position: relative;
    z-index: 1;
}

.btn-consult .consult-icon {
    font-size: 1.35rem;
}

.btn-consult .consult-arrow {
    font-size: 1.25rem;
    transition: transform .25s ease;
    animation: consult-nudge 1.4s ease-in-out infinite;
}

.btn-consult:hover .consult-arrow {
    transform: translateX(5px);
    animation: none;
}

/* ---------- Swipe shine ---------- */
.btn-consult::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 40%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: skewX(-25deg);
    animation: consult-swipe 2.8s infinite;
}

.btn-consult:hover::before {
    animation-duration: .9s;
}

/* ---------- Leaves: pop up every 4 seconds ---------- */
.consult-leaf {
    /* rise is capped by the header's headroom so leaves never clip off-screen */
    --rise-1: -5px;
    --rise-2: -12px;
    --rise-3: -20px;

    position: absolute;
    top: 6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    fill: #2e7d32;
    opacity: 0;
    pointer-events: none;
    animation: consult-leaf 4s ease-out infinite;
}

.consult-leaf:nth-of-type(1) {
    left: 12%;
    --x: -22px;
    --r: -35deg;
}

.consult-leaf:nth-of-type(2) {
    left: 46%;
    --x: 0px;
    --r: 15deg;
    animation-delay: .12s;
}

.consult-leaf:nth-of-type(3) {
    left: 80%;
    --x: 24px;
    --r: 40deg;
    animation-delay: .24s;
}

/* ---------- Keyframes ---------- */
@keyframes consult-swipe {

    0%,
    50% {
        left: -70%;
    }

    100% {
        left: 130%;
    }
}

@keyframes consult-float {

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

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

@keyframes consult-nudge {

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

    50% {
        transform: translateX(4px);
    }
}

@keyframes consult-leaf {

    0%,
    68% {
        opacity: 0;
        transform: translate(0, 14px) scale(0) rotate(0);
    }

    76% {
        opacity: 1;
        transform: translate(calc(var(--x) * .5), var(--rise-1)) scale(1.25) rotate(calc(var(--r) * .5));
    }

    88% {
        opacity: 1;
        transform: translate(var(--x), var(--rise-2)) scale(1) rotate(var(--r));
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--x) * 1.3), var(--rise-3)) scale(.8) rotate(calc(var(--r) * 1.4));
    }
}

/* ---------- Fit the narrow xl header column (1200px - 1399px) ---------- */
@media only screen and (min-width:1200px) and (max-width:1399.98px) {
    .btn-consult {
        --bs-btn-padding-x: .75rem;
        --bs-btn-padding-y: .55rem;
        --bs-btn-font-size: .9rem;
        gap: .3rem;
    }

    .btn-consult .consult-icon {
        display: none;
    }

    .btn-consult .consult-arrow {
        font-size: 1rem;
    }

    .consult-leaf {
        width: 20px;
        height: 20px;
    }
}

/* ---------- Sticky header: less headroom, so travel is shortened ---------- */
.header-sticky .consult-leaf {
    --rise-1: -3px;
    --rise-2: -8px;
    --rise-3: -12px;
    top: 14px;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .consult-float,
    .btn-consult::before,
    .btn-consult .consult-arrow,
    .consult-leaf {
        animation: none;
    }
}

/* ---------- Appointment popup ---------- */
.appt-modal .modal-content {
    border: 2px solid #111;
    border-radius: 1.25rem;
    box-shadow: 8px 8px 0 #111;
    overflow: hidden;
}

.appt-modal .modal-header {
    background: #ffc107;
    color: #111;
    border-bottom: 2px solid #111;
    padding: 1.5rem 1.5rem 1.25rem;
    align-items: flex-start;
}

.appt-modal .modal-title {
    font-weight: 600;
    font-size: 1.5rem;
    color: #111;
    margin-bottom: 0;
}

.appt-modal .appt-subtitle {
    margin: .25rem 0 0;
    font-size: .95rem;
    line-height: 1.4;
}

.appt-modal .modal-header > div {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: .75rem;
}

.appt-modal .btn-close {
    flex: 0 0 auto;
    /* margin-left:auto is what pins it to the corner, so it must survive */
    margin: -.3rem -.3rem 0 auto;
    padding: .55rem;
    width: 1em;
    height: 1em;
    opacity: 1;
    background-color: #fff;
    border: 2px solid #111;
    border-radius: 50%;
    box-shadow: 2px 2px 0 #111;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.appt-modal .btn-close:hover {
    background-color: #ffc107;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #111;
}

.appt-modal .btn-close:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
    box-shadow: 2px 2px 0 #111;
}

.appt-modal .modal-body {
    padding: 1.5rem;
}

.appt-modal .form-label {
    font-weight: 500;
    color: #111;
    margin-bottom: .35rem;
}

/* theme inputs are element+attribute scoped (0,1,1) and beat .form-control (0,1,0),
   so the flat 56px / green / 1px-grey styling has to be reset here */
.appt-modal .form-control,
.appt-modal .form-select {
    height: auto;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
    color: #111;
    background-color: #fff;
    padding: .65rem .9rem;
    border: 2px solid #111;
    border-radius: .75rem;
}

.appt-modal .form-select {
    background-position: right .9rem center;
    padding-right: 2.4rem;
}

.appt-modal textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.appt-modal .form-control::placeholder,
.appt-modal .form-control:focus::placeholder {
    color: #6c757d;
    opacity: 1;
}

.appt-modal .form-control:focus,
.appt-modal .form-select:focus {
    border-color: #111;
    box-shadow: 3px 3px 0 #ffc107;
    background-color: #fff;
}

.appt-modal .form-control.is-invalid,
.appt-modal .form-select.is-invalid {
    border-color: #dc3545;
    background-image: none;
}

.appt-modal .form-control.is-valid,
.appt-modal .form-select.is-valid {
    border-color: #111;
    background-image: none;
}

.appt-modal .invalid-feedback {
    font-weight: 500;
}

/* ---------- Payment slip upload ---------- */
.appt-modal .appt-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #ffc107;
    border: 2px solid #111;
    border-radius: .75rem;
    box-shadow: 3px 3px 0 #111;
    padding: .6rem .9rem;
    margin-bottom: .9rem;
    color: #111;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

.appt-modal .appt-note strong {
    font-weight: 700;
}

.appt-modal .appt-note i {
    font-size: 1.15rem;
    line-height: 1;
}

.appt-modal .appt-file {
    padding: .5rem .6rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #111;
    background-color: #fff;
    cursor: pointer;
}

.appt-modal .appt-file::file-selector-button {
    font-weight: 600;
    color: #111;
    background: #ffc107;
    border: 2px solid #111;
    border-radius: .5rem;
    padding: .3rem .7rem;
    margin-right: .7rem;
    cursor: pointer;
}

.appt-modal .appt-file::file-selector-button:hover {
    box-shadow: 2px 2px 0 #111;
}

.appt-modal .appt-file-name {
    font-size: .85rem;
    font-weight: 500;
    color: #111;
    background: #fffdf5;
    border: 1px dashed #111;
    border-radius: .5rem;
    padding: .35rem .6rem;
    margin-top: .5rem;
    word-break: break-all;
}

.appt-modal .appt-file-name:empty {
    display: none;
}

/* theme file inputs are element+attribute scoped (0,1,1) and beat .form-control (0,1,0),
   so the flat 56px / green / 1px-grey styling has to be reset here */
.appt-modal input[type=file].form-control {
    height: auto;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
    color: #111;
    background-color: #fff;
    padding: .65rem .9rem;
    border: 2px solid #111;
    border-radius: .75rem;
}

/* ---------- Highlighted fixed session ---------- */
.appt-assignment {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #ffc107;
    border: 2px solid #111;
    border-radius: .75rem;
    box-shadow: 3px 3px 0 #111;
    padding: .65rem .9rem;
    font-size: 1rem;
    font-weight: 600;
    color: #111;
}

.appt-assignment i {
    font-size: 1.15rem;
}

/* ---------- Alerts ---------- */
.appt-modal .appt-error {
    display: none;
    border: 2px solid #111;
    border-radius: .75rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.45;
}

.appt-modal .appt-error.show {
    display: block;
}

.appt-modal .appt-error {
    background: #fde2e2;
    color: #7a1420;
}

/* ---------- Success popup ---------- */
.appt-modal .appt-success-modal .modal-content {
    background: #fff;
    border: 2px solid #111;
    border-radius: 1rem;
    box-shadow: 6px 6px 0 #111;
}

.appt-modal .appt-success-body {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

.appt-modal .appt-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 1rem;
    border: 2px solid #111;
    border-radius: 50%;
    background: #d8f5d8;
    box-shadow: 3px 3px 0 #111;
    color: #1b7f3b;
    font-size: 2.25rem;
    line-height: 1;
}

.appt-modal .appt-success-title {
    margin: 0 0 .6rem;
    color: #111;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.appt-modal .appt-success-text {
    margin: 0 0 1.4rem;
    color: #333;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.appt-modal .btn-consult.is-busy {
    opacity: .65;
    pointer-events: none;
}

/* ---------- Roomier header button label at xxl ---------- */
@media only screen and (min-width:1400px) {
    .vl-main-menu ul>li {
        margin: 0 10px;
    }
}.consult-float-right {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    transform: translateY(0);
}

.consult-float-right .btn-consult {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 576px) {
    .consult-float-right {
        right: 15px;
        bottom: 15px;
    }
}

.consult-float-right {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    animation: consult-float 3s ease-in-out infinite;
}

.consult-float-right .btn-consult {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 576px) {
    .consult-float-right {
        right: 15px;
        bottom: 15px;
    }
}

/* ---------- Program QR block (booking forms) ---------- */
.appt-qr {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: #f6faf7;
    border: 1px solid #e2eee6;
    border-radius: 8px;
}

.appt-qr-img {
    width: 200px;
    height: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.appt-qr-text {
    font-size: 0.875rem;
    color: #6c757d;
}

@media (max-width: 575px) {
    .appt-qr-img {
        width: 132px;
        height: 132px;
    }
}