/* ----------------------------------------------------------------------------
 * Physio Devotion — site CSS
 * Yahan sirf hamare apne changes hain. Vendor ki style.css ko chhedna nahi;
 * ye file uske baad load hoti hai isliye yahan likha hua jeet jaata hai.
 *
 * 00. Logo
 * 01. Header nav — hover / active
 * 02. Services dropdown
 * 03. Book Appointment CTA
 * 04. Header top bar
 * 05. Floating contact dock (call + whatsapp)
 * 06. Footer
 * 07. Home page sections (pd-*)
 * -------------------------------------------------------------------------- */


/* ============================================================
   00. Logo
   ------------------------------------------------------------
   Client ka asli logo wordmark hai (4.2:1), theme ka purana logo
   isse chaura tha — 146px par "PHYSIOTHERAPY" wali line padhi hi
   nahi jaati thi. Footer navy hai, isliye wahan white version.
   ============================================================ */

.vl-logo {
    width: 200px;
}

.vl-logo img,
.vl-offcanvas-logo img,
.vl-footer .vl-footer-logo img {
    height: auto;
    display: block;
}

.vl-offcanvas-logo img {
    width:200px;
}

.vl-footer .vl-footer-logo img {
    width: 208px;
    max-width: 100%;
}

@media (max-width: 575px) {
    .vl-logo {
        width: 162px;
    }
}


/* ============================================================
   01. Header nav — hover / active
   ------------------------------------------------------------
   Theme ka hover color --vkl-text-text-1 tha. Naye palette me
   wo light blue-grey (#E5EAEC) hai, jo white header par bilkul
   nahi dikhta. Carefirst apne nav ka hover muted text color par
   le jaata hai — wahi yahan bhi.
   ============================================================ */

.vl-main-menu ul > li > a {
    transition: color 0.25s ease-in-out;
}

.vl-main-menu ul > li:hover > a,
.vl-main-menu-black ul li:hover > a {
    color: var(--vkl-text-text-3);
}

/* Parent li ka :hover submenu ke links ko bhi light kar deta tha — rok do */
.vl-main-menu ul > li:hover .sub-menu li a,
.vl-main-menu-black ul li:hover .sub-menu li a {
    color: var(--vkl-text-text-black);
}

.vl-main-menu ul > li .sub-menu li:hover > a,
.vl-main-menu-black ul li .sub-menu li:hover > a {
    color: var(--vkl-text-text-2);
}

/* --- active tab --- */
.vl-main-menu ul > li.active > a,
.vl-main-menu-black ul li.active > a,
.vl-main-menu ul > li.active:hover > a,
.vl-main-menu-black ul li.active:hover > a {
    color: var(--vkl-text-text-black);
    font-weight: var(--vkl-weight-semibold);
}

.vl-main-menu ul > li.active > a::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--vkl-text-text-2);
}

.vl-main-menu ul > li .sub-menu li.active > a {
    color: var(--vkl-text-text-2);
    font-weight: var(--vkl-weight-semibold);
}


/* ============================================================
   02. Services dropdown
   ------------------------------------------------------------
   Theme ka sub-menu 180px ka hai — "Sports Injury Rehabilitation"
   jaise naam usme toot jaate hain.
   ============================================================ */

.vl-main-menu ul > li .sub-menu.sub-menu-wide {
    width: 274px;
    padding: 12px 0;
}

.vl-main-menu ul > li .sub-menu.sub-menu-wide li {
    margin-left: 0;
}

.vl-main-menu ul > li .sub-menu.sub-menu-wide li a {
    padding: 10px 24px;
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.4em;
    border-left: 2px solid transparent;
    transition: 0.25s;
}

.vl-main-menu ul > li .sub-menu.sub-menu-wide li:hover > a,
.vl-main-menu ul > li .sub-menu.sub-menu-wide li.active > a {
    background: var(--vkl-bg-bg-2);
    border-left-color: var(--vkl-text-text-2);
}


/* ============================================================
   03. Book Appointment CTA
   ============================================================ */

.vl-header-btn .vl-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 12px 24px 12px 12px;
    border-radius: 50px;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(2, 48, 71, 0.18);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* hover par accent navy left-to-right bharta hai */
.vl-header-btn .vl-book-btn::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: -1;
    border-radius: 50px;
    background: var(--vkl-text-text-2);
    transition: width 0.35s ease-in-out;
}

.vl-header-btn .vl-book-btn:hover {
    color: var(--vkl-text-text-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(2, 48, 71, 0.28);
}

.vl-header-btn .vl-book-btn:hover::after {
    width: 100%;
}

.vl-header-btn .vl-book-btn .vl-book-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vkl-text-text-1);
    color: var(--vkl-text-text-black);
    font-size: 13px;
    transition: 0.3s;
}

.vl-header-btn .vl-book-btn:hover .vl-book-btn-icon {
    background: var(--vkl-text-text-white);
}

/* 1200–1399px me nav aur CTA dono ko thodi jagah kam chahiye */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .vl-main-menu ul > li {
        margin: 0 9px;
    }

    .vl-header-btn .vl-book-btn {
        padding: 10px 18px 10px 10px;
        font-size: var(--vkl-font-size-font-s14);
    }

    .vl-header-btn .vl-book-btn .vl-book-btn-icon {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

/* offcanvas (mobile) me bhi wahi CTA */
.vkl-offcanvas-btn .vl-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 50px;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1;
    transition: 0.3s;
}

.vkl-offcanvas-btn .vl-book-btn:hover {
    background: var(--vkl-text-text-2);
    color: var(--vkl-text-text-white);
}

.vkl-offcanvas-btn .vl-book-btn .vl-book-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vkl-text-text-1);
    color: var(--vkl-text-text-black);
    font-size: 13px;
}


/* ============================================================
   04. Header top bar
   ------------------------------------------------------------
   Theme me ye 64px ka tha (19px padding + 18px text). Utility bar
   itni moti nahi honi chahiye — ~40px par le aaya, text chhota
   aur divider halka.
   ============================================================ */

.header-top-9 .row {
    min-height: 40px;
}

.header-top-9 .header-top {
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-top-9 .vkl-header-top-contact {
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-top-9 .vkl-header-top-contact .para {
    font-size: var(--vkl-font-size-font-s14);
    line-height: 1.5em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

.header-top-9 .vkl-header-top-contact .top-contact {
    font-size: var(--vkl-font-size-font-s14);
    line-height: 1.5em;
    font-weight: var(--vkl-weight-semibold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 1px;
    transition: 0.25s;
}

.header-top-9 .vkl-header-top-contact .top-contact:hover {
    border-bottom-color: var(--vkl-text-text-white);
}

.header-top-9 .header-top ul li {
    margin-right: 14px;
    padding-right: 14px;
}

/* divider: 2px solid white se 1px halki line */
.header-top-9 .header-top ul li::after {
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.header-top-9 .header-top ul li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--vkl-font-size-font-s14);
    line-height: 1.5em;
    font-weight: var(--vkl-weight-medium);
    color: rgba(255, 255, 255, 0.88);
}

.header-top-9 .header-top ul li a:hover {
    color: var(--vkl-text-text-white);
}

.header-top-9 .header-top ul li a img {
    width: 15px;
    height: 15px;
    margin-top: 0;
}

.header-top-9 .header-top ul li a span.mr-4 {
    margin-right: 0 !important;
    display: inline-flex;
}


/* ============================================================
   05. Floating contact dock (call + whatsapp)
   ------------------------------------------------------------
   Theme ka scroll-to-top (.progress-wrap) neeche-daaye baithta
   hai, isliye dock uske upar rakha hai — takraate nahi.

   Dono button par ek pulse ring hai jo dhyan kheenchti hai, aur
   ek halka wiggle. Ring hamesha ek hi waqt par nahi chalti —
   call ka delay alag hai, warna dono ek saath dhadakte hain aur
   ad-banner jaisa lagta hai.
   ============================================================ */

.pd-float {
    position: fixed;
    right: 30px;
    bottom: 110px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-float-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(2, 48, 71, 0.28);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.pd-float-btn:hover,
.pd-float-btn:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 28px rgba(2, 48, 71, 0.38);
}

.pd-float-call {
    background: var(--vkl-text-text-4);
}

.pd-float-wa {
    background: #25D366;
}

/* icon khud halka hilta hai — sirf 6 second me ek baar */
.pd-float-btn .pd-i {
    position: relative;
    z-index: 2;
    animation: pdWiggle 6s ease-in-out infinite;
}

.pd-float-wa .pd-i {
    animation-delay: 3s;
}

/* pulse ring: button ke peeche se bahar phailti hai */
.pd-float-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.55;
    animation: pdPulse 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.pd-float-wa .pd-float-ring {
    animation-delay: 1.2s;
}

/* hover par naam — mobile par jagah nahi, isliye wahan chhupa hai */
.pd-float-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s14);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.pd-float-btn:hover .pd-float-tip,
.pd-float-btn:focus-visible .pd-float-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@keyframes pdPulse {
    0% { transform: scale(1); opacity: 0.55; }
    70% { transform: scale(1.75); opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

@keyframes pdWiggle {
    0%, 84%, 100% { transform: rotate(0deg); }
    87% { transform: rotate(-14deg); }
    90% { transform: rotate(12deg); }
    93% { transform: rotate(-8deg); }
    96% { transform: rotate(5deg); }
}

@media (max-width: 991px) {
    .pd-float-tip {
        display: none;
    }
}

@media (max-width: 575px) {
    .pd-float {
        right: 20px;
        bottom: 92px;
        gap: 12px;
    }

    .pd-float-btn {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

/* jisne motion band kiya hai uske liye sirf hover ka effect */
@media (prefers-reduced-motion: reduce) {

    .pd-float-ring,
    .pd-float-btn .pd-i {
        animation: none;
    }

    .pd-float-ring {
        opacity: 0;
    }
}


/* ============================================================
   06. Footer
   ------------------------------------------------------------
   Working Hours widget hata kar "Our Services" lagaya. Chaaron
   column ab ek hi baseline par shuru hote hain aur spacing ek
   jaisi hai — pehle har widget apna alag margin le raha tha.
   ============================================================ */

/* Fixed WhatsApp + scroll-top buttons neeche-daaye tairate hain.
   Desktop par legal links ko padding-right se hataya hai, isliye
   yahan sirf saans lene ki jagah chahiye. Mobile par links poori
   chaudai lete hain, isliye wahan thodi zyada. */
.vl-footer {
    padding-bottom: 14px;
}

/* <768px par copyright poori chaudai leti hai, isliye button ke
   liye neeche jagah chahiye */
@media (max-width: 767px) {
    .vl-footer {
        padding-bottom:0px;
    }
}

/* har column ek hi baseline se — theme ke per-widget margins hata do */
.vl-footer .vl-footer-widget {
    margin-bottom: 0;
}

.vl-footer .vl-footer-widget-title {
    margin-bottom: 26px;
    font-size: var(--vkl-font-size-font-s22);
    line-height: 1.3em;
}

.vl-footer .vl-footer-logo img {
    max-width: 190px;
    height: auto;
}

.vl-footer .vl-footer-widget-1 .para {
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.7em;
    max-width: 330px;
}

/* --- link lists (Our Services + Quick Links) --- */
.vl-footer .vl-footer-menu ul li a {
    margin-bottom: 0;
    padding: 5px 0;
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.5em;
}

.vl-footer .vl-footer-menu ul li:last-child a {
    padding-bottom: 0;
}

/* --- contact list --- */
.vl-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* floating button ki patti se door — warna address uske neeche chala jaata hai */
    max-width: 340px;
}

.vl-contact-list li {
    margin-bottom: 14px;
}

.vl-contact-list li:last-child {
    margin-bottom: 0;
}

.vl-contact-list li a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-medium);
    line-height: 1.55em;
    transition: color 0.3s ease-in-out;
}

.vl-contact-list li a:hover {
    color: var(--vkl-text-text-2);
}

.vl-contact-list .vl-contact-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vkl-bg-bg-2);
    color: var(--vkl-text-text-black);
    font-size: 14px;
    transition: 0.3s;
}

.vl-contact-list li a:hover .vl-contact-ico {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.vl-contact-list .vl-contact-txt {
    /* 34px icon ke bilkul beech me pehli line — (34 - 24.8) / 2 */
    padding-top: 5px;
    min-height: 34px;
}

.vl-contact-list .vl-contact-note {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--vkl-bg-bg-2);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s12);
    font-style: normal;
    font-weight: var(--vkl-weight-semibold);
    vertical-align: 2px;
}

/* --- social --- */
/* theme ka hover --vkl-text-text-1 tha; naye palette me wo bg se
   almost milta-julta hai, isliye solid navy par bheja */
.vl-footer .social-area a {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    transition: 0.3s;
}

.vl-footer .social-area a:hover {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

/* --- bottom bar --- */
.vl-footer-bottom {
    margin-top: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--vkl-border-border-2);
}

.vl-footer-bottom .vl-footer-copy {
    margin-bottom: 0;
    font-size: var(--vkl-font-size-font-s16);
}

.vl-footer-legal {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    padding: 0;
    margin: 0;
}

.vl-footer-legal li a {
    position: relative;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    transition: 0.3s;
}

.vl-footer-legal li:not(:last-child)::after {
    position: absolute;
    content: "";
    margin-left: 14px;
    width: 1px;
    height: 14px;
    background: var(--vkl-border-border-2);
    transform: translateY(2px);
    display: inline-block;
}

.vl-footer-legal li a:hover {
    color: var(--vkl-text-text-2);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .vl-footer .vl-footer-widget-title {
        font-size: var(--vkl-font-size-font-s20);
    }

    .vl-contact-list li a,
    .vl-footer .vl-footer-menu ul li a {
        font-size: var(--vkl-font-size-font-s14);
    }
}

/* 768–1399px me floating button container ke andar ghus aata hai,
   isliye contact text ko aur andar rakho */
@media (min-width: 768px) and (max-width: 1399px) {
    .vl-contact-list {
        max-width: 270px;
    }
}

/* desktop par legal links ko floating buttons ki patti se hata kar rakho */
@media (min-width: 992px) {
    .vl-footer-legal {
        padding-right: 76px;
    }
}

@media (max-width: 991px) {
    .vl-footer-legal {
        justify-content: flex-start;
        margin-top: 14px;
    }
}


/* ============================================================
   07. Home page — Physio Devotion
   ------------------------------------------------------------
   Sab kuch `pd-` prefix par, taaki vendor theme ki `vkl-`/`vl-`
   classes se kabhi na takraaye.

   07.0 Spacing scale + section headings
   07.1 Buttons
   07.2 Hero slider
   07.3 Trust strip
   07.4 About
   07.5 Services
   07.6 Why choose us
   07.7 Conditions
   07.8 How we work
   07.9 Blog
   07.10 FAQ
   07.11 Booking CTA
   07.12 Responsive
   ============================================================ */


/* ---------- 07.0 Spacing scale ---------- */
/* Har section ka gap ek hi jagah se — pehle har section apna
   alag pt-100/pb-70 laga raha tha, isi se rhythm bigad rahi thi. */

:root {
    --pd-sec-y: 66px;
    --pd-head-gap: 34px;
    --pd-radius: 16px;
}

.pd-sec {
    padding-top: var(--pd-sec-y);
    padding-bottom: var(--pd-sec-y);
}

.pd-sec-t {
    padding-top: var(--pd-sec-y);
}

.pd-sec-b {
    padding-bottom: var(--pd-sec-y);
}

.pd-bg-soft {
    background: var(--vkl-bg-bg-2);
}

.pd-bg-tint {
    background: var(--vkl-bg-bg-1);
}

.pd-bg-dark {
    background: var(--vkl-text-text-black);
}

/* --- section heading block --- */
.pd-head {
    margin-bottom: var(--pd-head-gap);
}

.pd-head-center {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pd-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: var(--pd-head-gap);
}

.pd-head-split-mob {
    margin-top: 34px;
    text-align: center;
}

/* jis column me sirf heading hai, wahan neeche ka gap nahi chahiye */
.pd-head-stick {
    margin-bottom: 0;
}

.pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 7px 16px 7px 12px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s14);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.4em;
    letter-spacing: 0.02em;
}

.pd-eyebrow-dark {
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
}

.pd-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
}

.pd-h2 {
    margin: 0;
    color: var(--vkl-text-text-black);
    font-family: var(--vkl-ff-heading, inherit);
    font-size: 44px;
    line-height: 1.18em;
    letter-spacing: -0.01em;
}

.pd-h2-light {
    color: var(--vkl-text-text-white);
}

.pd-lead {
    margin: 18px 0 0;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.65em;
    max-width: 560px;
}

.pd-head-center .pd-lead {
    margin-left: auto;
    margin-right: auto;
}

.pd-head-stick .pd-btn {
    margin-top: 30px;
}


/* ---------- 07.1 Buttons ---------- */

.pd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    transition: 0.3s;
}

.pd-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -10px;
    border-radius: 50%;
    background: rgba(2, 48, 71, 0.1);
    font-size: 14px;
    transition: 0.3s;
}

/* solid navy — primary */
.pd-btn-solid {
    background: var(--vkl-text-text-black);
    border-color: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-btn-solid:hover {
    background: var(--vkl-text-text-2);
    border-color: var(--vkl-text-text-2);
    color: var(--vkl-text-text-white);
    transform: translateY(-2px);
}

/* light pill — dark background par primary */
.pd-btn-light {
    background: var(--vkl-text-text-white);
    border-color: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
}

.pd-btn-light:hover {
    background: var(--vkl-text-text-1);
    border-color: var(--vkl-text-text-1);
    color: var(--vkl-text-text-black);
    transform: translateY(-2px);
}

.pd-btn-light .pd-btn-ico {
    background: var(--vkl-bg-bg-1);
}

/* outline — dark background par secondary */
.pd-btn-ghost {
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--vkl-text-text-white);
}

.pd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--vkl-text-text-white);
}

.pd-btn-ghost .pd-btn-ico {
    background: rgba(255, 255, 255, 0.16);
}

/* outline — light background par secondary */
.pd-btn-outline {
    border-color: var(--vkl-border-border-2);
    color: var(--vkl-text-text-black);
}

.pd-btn-outline:hover {
    background: var(--vkl-text-text-black);
    border-color: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-btn-outline .pd-btn-ico {
    background: var(--vkl-bg-bg-1);
}

.pd-btn-outline:hover .pd-btn-ico {
    background: rgba(255, 255, 255, 0.16);
}

/* tick badge — About aur Conditions dono me */
.pd-tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    font-size: 11px;
    transition: 0.3s;
}

.pd-tick-sm {
    width: 22px;
    height: 22px;
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
    font-size: 10px;
}


/* ---------- 07.2 Hero slider ---------- */

.pd-hero {
    position: relative;
    overflow: hidden;
    background: var(--vkl-text-text-black);
}

.pd-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
}

/* pehli slide document flow me rehti hai taaki section ki height mile */
.pd-slide:first-of-type {
    position: relative;
}

.pd-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.pd-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transform: scale(1.06);
    transition: transform 7s linear;
}

.pd-slide.is-active .pd-slide-img {
    transform: scale(1);
}

/* navy veil — photo ke upar text padhne layak rahe */
.pd-slide-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 48, 71, 0.96) 0%, rgba(2, 48, 71, 0.9) 38%, rgba(2, 48, 71, 0.5) 72%, rgba(2, 48, 71, 0.34) 100%),
        linear-gradient(180deg, rgba(2, 28, 41, 0.55) 0%, rgba(2, 28, 41, 0) 34%);
}

.pd-slide .container {
    position: relative;
    z-index: 1;
}

.pd-slide-inner {
    max-width: 660px;
    padding: 128px 0 132px;
}

.pd-slide-title {
    margin: 0;
    color: var(--vkl-text-text-white);
    font-size: 56px;
    line-height: 1.12em;
    letter-spacing: -0.015em;
}

.pd-slide-text {
    margin: 20px 0 0;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.65em;
}

.pd-slide-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

/* --- arrows / dots --- */
.pd-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: rgba(2, 48, 71, 0.4);
    color: var(--vkl-text-text-white);
    font-size: 16px;
    transition: 0.3s;
}

.pd-slider-arrow:hover {
    background: var(--vkl-text-text-white);
    border-color: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
}

.pd-slider-prev {
    left: 26px;
}

.pd-slider-next {
    right: 26px;
}

.pd-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.pd-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.42);
    transition: 0.3s;
}

.pd-slider-dot.is-active {
    width: 28px;
    background: var(--vkl-text-text-white);
}


/* ---------- 07.3 Trust strip ---------- */

.pd-trust {
    position: relative;
    z-index: 2;
    margin-top: -58px;
}

.pd-trust-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--vkl-text-text-white);
    border-radius: var(--pd-radius);
    box-shadow: 0 20px 54px rgba(2, 48, 71, 0.13);
    overflow: hidden;
}

.pd-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 30px 26px;
    border-right: 1px solid var(--vkl-border-border-3);
}

.pd-trust-item:last-child {
    border-right: 0;
}

.pd-trust-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--vkl-bg-bg-2);
}

.pd-trust-txt h3 {
    margin: 2px 0 6px;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.3em;
}

.pd-trust-txt p {
    margin: 0;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s14);
    line-height: 1.55em;
}


/* ---------- 07.4 About ---------- */

.pd-about-media {
    position: relative;
    padding: 0 56px 60px 0;
}

.pd-about-media-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--pd-radius);
    display: block;
}

.pd-about-media-sub {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    padding: 8px;
    border-radius: 18px;
    background: var(--vkl-text-text-white);
    box-shadow: 0 16px 40px rgba(2, 48, 71, 0.15);
}

.pd-about-media-sub img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.pd-about-badge {
    position: absolute;
    left: 22px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    box-shadow: 0 14px 34px rgba(2, 48, 71, 0.24);
}

.pd-about-badge-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;
}

.pd-about-badge strong {
    display: block;
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.35em;
}

.pd-about-badge em {
    display: block;
    font-size: var(--vkl-font-size-font-s12);
    font-style: normal;
    line-height: 1.35em;
    opacity: 0.7;
}

.pd-about-content {
    padding-left: 14px;
}

.pd-about-points {
    display: grid;
    gap: 20px;
    margin-top: 34px;
}

.pd-about-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pd-about-point h3 {
    margin: 0 0 4px;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.3em;
}

.pd-about-point p {
    margin: 0;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.55em;
}

.pd-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
    margin-top: 36px;
}

.pd-call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vkl-text-text-black);
}

.pd-call-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
    font-size: 16px;
    transition: 0.3s;
}

.pd-call:hover .pd-call-ico {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-call em {
    display: block;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s14);
    font-style: normal;
    line-height: 1.4em;
}

.pd-call strong {
    display: block;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.4em;
}


/* ---------- 07.5 Services ---------- */

.pd-svc {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-white);
    overflow: hidden;
    transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out,
        border-color 0.35s ease-in-out;
}

.pd-svc:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 48px rgba(2, 48, 71, 0.15);
}

.pd-svc-media {
    position: relative;
    aspect-ratio: 14 / 10;
    overflow: hidden;
}

.pd-svc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease-in-out;
}

.pd-svc:hover .pd-svc-media img {
    transform: scale(1.06);
}

.pd-svc-ico {
    position: absolute;
    left: 24px;
    top: -29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: 16px;
    background: var(--vkl-text-text-white);
    box-shadow: 0 12px 26px rgba(2, 48, 71, 0.18);
    transition: 0.35s;
}

.pd-svc-ico img {
    width: 30px;
    height: 30px;
}

.pd-svc:hover .pd-svc-ico {
    background: var(--vkl-text-text-black);
}

.pd-svc:hover .pd-svc-ico img {
    filter: brightness(0) invert(1);
}

.pd-svc-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 44px 24px 24px;
}

.pd-svc-title {
    margin: 0 0 10px;
    font-size: var(--vkl-font-size-font-s20);
    line-height: 1.35em;
}

.pd-svc-title a {
    color: var(--vkl-text-text-black);
    transition: 0.3s;
}

.pd-svc:hover .pd-svc-title a {
    color: var(--vkl-text-text-2);
}

/* exactly 2 lines — chhote-bade description se card ki height na bigde */
.pd-svc-desc {
    margin: 0 0 20px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;
}

.pd-svc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--vkl-border-border-3);
}

.pd-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--vkl-border-border-2);
    background: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s15, 15px);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1;
    transition: 0.28s;
}

/* sirf icon wale do — square, taaki "Read More" hi primary lage */
.pd-act-ico {
    width: 46px;
    flex: 0 0 46px;
    padding: 0;
}

.pd-act-ico .pd-i {
    font-size: 18px;
}

.pd-act-ico:hover {
    border-color: var(--vkl-text-text-black);
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-act-wa:hover {
    border-color: #1EB855;
    background: #1EB855;
    color: #fff;
}

/* primary — baaki jagah le leta hai, phone par bhi poora chaudai */
.pd-act-main {
    flex: 1 1 auto;
    min-width: 128px;
    padding: 0 20px;
    border-color: var(--vkl-text-text-black);
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-act-main .pd-i {
    font-size: 15px;
    transition: transform 0.3s ease-in-out;
}

.pd-act-main:hover {
    border-color: var(--vkl-text-text-2);
    background: var(--vkl-text-text-2);
    color: var(--vkl-text-text-white);
}

.pd-act-main:hover .pd-i {
    transform: translateX(4px);
}

/* ---------- 07.5b Services note strip ---------- */

.pd-svc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px 40px;
    margin-top: 34px;
    padding: 36px 44px;
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-black);
}

.pd-svc-note h3 {
    margin: 0 0 8px;
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s24);
    line-height: 1.3em;
}

.pd-svc-note p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.65em;
}

.pd-svc-note-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.pd-svc-note-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    white-space: nowrap;
    transition: 0.3s;
}

.pd-svc-note-call:hover {
    color: var(--vkl-text-text-1);
}


/* ---------- 07.5c Founder ---------- */

/* Photo portrait hai; plate uske neeche baithti hai isliye card ko
   fixed aspect chahiye, warna column ki height photo par nachti hai. */
.pd-founder-photo {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(150deg, var(--vkl-text-text-black) 0%, var(--vkl-text-text-2) 100%);
    overflow: hidden;
    aspect-ratio: 5 / 6;
    box-shadow: 0 20px 50px rgba(2, 48, 71, 0.18);
}

.pd-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-founder-plate {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    /* solid safed — pehle 0.94 alpha tha, aur marble wali deewar par
       plate ka aadha hissa gayab lagta tha */
    background: var(--vkl-text-text-white);
    box-shadow: 0 6px 20px rgba(2, 48, 71, 0.18);
}

.pd-founder-plate strong {
    display: block;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.35em;
}

.pd-founder-plate em {
    display: block;
    margin-top: 2px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s14);
    font-style: normal;
    line-height: 1.4em;
}

.pd-founder-body {
    padding-left: 30px;
}

.pd-founder-body .pd-head {
    margin-bottom: 22px;
}

.pd-founder-qual {
    margin: 10px 0 0;
    color: var(--vkl-text-text-2);
    font-size: var(--vkl-font-size-font-s18);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.4em;
}

.pd-founder-p {
    margin: 0 0 16px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.75em;
}

.pd-founder-p strong {
    color: var(--vkl-text-text-black);
    font-weight: var(--vkl-weight-semibold);
}

.pd-founder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 26px;
}

.pd-tag {
    padding: 8px 15px;
    border: 1px solid var(--vkl-border-border-2);
    border-radius: 30px;
    background: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s14);
    font-weight: var(--vkl-weight-medium);
    line-height: 1.3em;
}

.pd-founder-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.pd-fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--vkl-text-text-white);
}

.pd-fact-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    font-size: 11px;
}

.pd-fact strong {
    display: block;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.35em;
}

.pd-fact em {
    display: block;
    margin-top: 2px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s14);
    font-style: normal;
    line-height: 1.45em;
}

.pd-founder-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- 07.6 Why choose us ---------- */

/* Column ki poori height le — warna list lambi hone par tasveer ke
   neeche khaali safed patti reh jaati thi. */
.pd-why-media {
    height: 100%;
    min-height: 420px;
}

.pd-why-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pd-radius);
    display: block;
    box-shadow: 0 18px 44px rgba(2, 48, 71, 0.13);
}

/* 5/7 split: tasveer portrait hai (theme me isse chaudi HD photo
   nahi thi), aur list ko waise bhi zyada jagah chahiye. */
.pd-why-list li {
    padding: 20px 22px;
}

.pd-why-content {
    padding-left: 30px;
}

.pd-why-list {
    counter-reset: pdwhy;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.pd-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: 14px;
    background: var(--vkl-text-text-white);
    transition: 0.3s;
}

.pd-why-list li:hover {
    border-color: transparent;
    box-shadow: 0 16px 38px rgba(2, 48, 71, 0.12);
    transform: translateX(4px);
}

.pd-why-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    transition: 0.3s;
}

.pd-why-list li:hover .pd-why-num {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}

.pd-why-list h3 {
    margin: 0 0 5px;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.35em;
}

.pd-why-list p {
    margin: 0;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.6em;
}


/* ---------- 07.7 Conditions ---------- */

.pd-cond-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pd-cond-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: 10px;
    background: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-medium);
    line-height: 1.4em;
    transition: 0.3s;
}

.pd-cond-list li:hover {
    border-color: var(--vkl-text-text-2);
    transform: translateX(3px);
}

.pd-cond-list li:hover .pd-tick-sm {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
}


/* ---------- 07.8 How we work ---------- */

/* Steps 2x2 hone ke baad dono column lagbhag barabar hain; tasveer
   phir bhi column ki height le leti hai taaki neeche navy patti na bache. */
.pd-work-media {
    height: 100%;
    min-height: 420px;
}

.pd-work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pd-radius);
    display: block;
}

.pd-work-content {
    padding-left: 24px;
}

/* 2x2 me har card ki line 4-5 chhote tukdon me toot rahi thi. Ek
   column me text theek padhai deta hai; column ki lambai tasveer se
   milane ke liye row 5/7 par hai (tasveer portrait). */
.pd-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.pd-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.pd-step:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.pd-step-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.pd-step-ico img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.pd-step h3 {
    margin: 0 0 5px;
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.35em;
}

.pd-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.6em;
}


/* ---------- 07.9 Blog ---------- */

.pd-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-white);
    overflow: hidden;
    transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out,
        border-color 0.35s ease-in-out;
}

.pd-post:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 48px rgba(2, 48, 71, 0.15);
}

.pd-post-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.pd-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease-in-out;
}

.pd-post:hover .pd-post-media img {
    transform: scale(1.06);
}

.pd-post-cat {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 6px 14px;
    border-radius: 30px;
    background: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s12);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.4em;
}

.pd-post-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px;
}

.pd-post-title {
    margin: 0 0 10px;
    font-size: var(--vkl-font-size-font-s20);
    line-height: 1.4em;
}

.pd-post-title a {
    color: var(--vkl-text-text-black);
    transition: 0.3s;
}

.pd-post:hover .pd-post-title a {
    color: var(--vkl-text-text-2);
}

.pd-post-x {
    margin: 0 0 20px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.6em;
}

.pd-post-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    transition: 0.3s;
}

.pd-post-link .pd-i {
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
}

.pd-post:hover .pd-post-link {
    color: var(--vkl-text-text-2);
}

.pd-post:hover .pd-post-link .pd-i {
    transform: translateX(4px);
}


/* ---------- 07.10 FAQ ---------- */

.pd-faq .vl-accordion-item {
    margin-bottom: 14px;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: 14px;
    background: var(--vkl-text-text-white);
    overflow: hidden;
    transition: 0.3s;
}

.pd-faq .vl-accordion-item:last-child {
    margin-bottom: 0;
}

.pd-faq .vl-accordion-button {
    position: relative;
    width: 100%;
    padding: 21px 64px 21px 24px;
    border: 0;
    background: transparent;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s18);
    /*font-weight: var(--vkl-weight-semibold);*/
    font-weight:500;
    line-height: 1.45em;
    text-align: left;
    transition: 0.3s;
}

.pd-faq .vl-accordion-button .vl-faqarrow {
    position: absolute;
    right: 20px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
    font-size: 13px;
    transition: 0.3s;
}

.pd-faq .vl-accordion-button:not(.collapsed) .vl-faqarrow {
    background: var(--vkl-text-text-black);
    color: var(--vkl-text-text-white);
    transform: rotate(180deg);
}

.pd-faq .vl-accordion-body {
    padding: 0 24px 22px;
}

.pd-faq .vl-accordion-body p {
    margin: 0;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.65em;
}


/* ---------- 07.11 Booking CTA ---------- */

.pd-cta-box {
    padding: 58px 56px;
    border-radius: 20px;
    background: linear-gradient(103deg, var(--vkl-text-text-black) 0%, var(--vkl-text-text-2) 100%);
}

.pd-cta-box .pd-h2 {
    max-width: 620px;
}

.pd-cta-text {
    max-width: 580px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.65em;
}

.pd-cta-actions {
    display: grid;
    gap: 12px;
}

.pd-cta-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--vkl-text-text-white);
    transition: 0.3s;
}

.pd-cta-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--vkl-text-text-white);
    transform: translateX(4px);
}

.pd-cta-btn-primary {
    background: var(--vkl-text-text-white);
    border-color: var(--vkl-text-text-white);
    color: var(--vkl-text-text-black);
}

.pd-cta-btn-primary:hover {
    background: var(--vkl-text-text-1);
    border-color: var(--vkl-text-text-1);
    color: var(--vkl-text-text-black);
}

.pd-cta-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 15px;
}

.pd-cta-btn-primary .pd-cta-btn-ico {
    background: var(--vkl-bg-bg-1);
    color: var(--vkl-text-text-black);
}

.pd-cta-btn-ico-wa {
    background: #25D366;
    color: #fff;
}

.pd-cta-btn em {
    display: block;
    font-size: var(--vkl-font-size-font-s14);
    font-style: normal;
    line-height: 1.4em;
    opacity: 0.72;
}

.pd-cta-btn strong {
    display: block;
    font-size: var(--vkl-font-size-font-s18);
    line-height: 1.4em;
}


/* ---------- 07.5d Recognition ---------- */

/* Award photos alag-alag aspect ki hain (portrait + landscape mila-jula).
   Grid tabhi seedha rehta hai jab tasveer ko ek hi ratio par crop kiya
   jaaye — isliye object-fit, na ki natural height. */
.pd-award {
    height: 100%;
    margin: 0;
    padding: 10px 10px 0;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-white);
    transition: 0.3s;
}

.pd-award:hover {
    border-color: var(--vkl-border-border-2);
    box-shadow: 0 14px 34px rgba(2, 48, 71, 0.1);
    transform: translateY(-4px);
}

.pd-award img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 11px;
    display: block;
}

.pd-award figcaption {
    padding: 14px 8px 16px;
}

.pd-award figcaption strong {
    display: block;
    color: var(--vkl-text-text-black);
    font-size: var(--vkl-font-size-font-s16);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.4em;
}

.pd-award figcaption em {
    display: block;
    margin-top: 4px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s14);
    font-style: normal;
    line-height: 1.5em;
}

.pd-press {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    overflow: hidden;
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-black);
}

/* Clipping ko poora dikhana hai (headline + dono photo), isliye
   contain — cover isme se aadha article kaat deta tha. */
.pd-press-clip {
    flex: 0 0 46%;
    padding: 16px;
    background: var(--vkl-bg-bg-2);
}

.pd-press-clip img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: 8px;
    display: block;
}

.pd-press-body {
    align-self: center;
    padding: 30px 36px;
}

.pd-press-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 13px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s14);
    font-weight: var(--vkl-weight-semibold);
    line-height: 1.4em;
}

.pd-press-body h3 {
    margin: 0 0 10px;
    color: var(--vkl-text-text-white);
    font-size: var(--vkl-font-size-font-s20);
    line-height: 1.45em;
}

.pd-press-body p {
    margin: 0;
    color: var(--vkl-text-text-6);
    font-size: var(--vkl-font-size-font-s16);
    line-height: 1.65em;
}


@media (max-width: 991px) {
    .pd-press {
        flex-direction: column;
    }

    .pd-press-clip {
        flex: 0 0 auto;
    }

    .pd-press-clip img {
        max-height: 260px;
    }

    .pd-press-body {
        padding: 24px 26px 28px;
    }

    .pd-why-media,
    .pd-work-media {
        min-height: 0;
    }

    .pd-why-media img,
    .pd-work-media img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}


/* ---------- 07.12 Responsive ---------- */

@media (max-width: 1399px) {
    :root {
        --pd-sec-y: 60px;
        --pd-head-gap: 32px;
    }

    .pd-h2 {
        font-size: 38px;
    }

    .pd-slide-title {
        font-size: 46px;
    }

    .pd-slide-inner {
        padding: 108px 0 116px;
    }

    .pd-cta-box {
        padding: 46px 40px;
    }
}

@media (max-width: 1199px) {
    :root {
        --pd-sec-y: 54px;
    }

    .pd-h2 {
        font-size: 34px;
    }

    .pd-slide-title {
        font-size: 40px;
    }

    /* dono columns full width — andar ka padding hata do */
    .pd-about-content,
    .pd-why-content,
    .pd-work-content {
        padding-left: 0;
    }

    .pd-about-media {
        max-width: 620px;
        padding: 0 46px 50px 0;
    }

    .pd-head-stick {
        margin-bottom: 6px;
    }

    /* 4 tiles ki jagah 2x2 */
    .pd-trust-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-trust-item:nth-child(2n) {
        border-right: 0;
    }

    .pd-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--vkl-border-border-3);
    }
}

@media (max-width: 991px) {
    :root {
        --pd-sec-y: 48px;
        --pd-head-gap: 28px;
    }

    .pd-slide-inner {
        padding: 92px 0 104px;
    }

    .pd-slide-title {
        font-size: 34px;
    }

    .pd-slider-arrow {
        display: none;
    }

    .pd-head-split {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    :root {
        --pd-sec-y: 42px;
        --pd-head-gap: 24px;
        --pd-radius: 14px;
    }

    .pd-h2 {
        font-size: 28px;
    }

    .pd-slide-title {
        font-size: 28px;
    }

    .pd-slide-text,
    .pd-lead,
    .pd-cta-text {
        font-size: var(--vkl-font-size-font-s16);
    }

    .pd-slide-inner {
        padding: 76px 0 92px;
    }

    .pd-slide-btns .pd-btn {
        width: 100%;
        justify-content: center;
    }

    .pd-slider-dots {
        bottom: 26px;
    }

    .pd-trust {
        margin-top: -38px;
    }

    /* mobile par ek hi column */
    .pd-trust-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-trust-item {
        padding: 22px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--vkl-border-border-3);
    }

    .pd-trust-item:last-child {
        border-bottom: 0;
    }

    .pd-about-media {
        padding: 0;
    }

    .pd-about-media-sub {
        position: static;
        width: auto;
        margin-top: 14px;
        padding: 0;
        box-shadow: none;
    }

    .pd-about-badge {
        left: 14px;
        bottom: 14px;
        padding: 11px 16px;
    }

    .pd-cond-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-svc-body {
        padding: 40px 20px 20px;
    }

    .pd-act-main {
        min-width: 0;
    }

    .pd-why-list li {
        padding: 18px 18px;
        gap: 14px;
    }

    .pd-faq .vl-accordion-button {
        padding: 18px 56px 18px 18px;
        font-size: var(--vkl-font-size-font-s16);
    }

    .pd-faq .vl-accordion-body {
        padding: 0 18px 18px;
    }

    .pd-cta-box {
        padding: 34px 22px;
    }
}

@media (max-width: 575px) {
    .pd-about-cta {
        gap: 18px;
    }

    .pd-cta-btn {
        padding: 12px 16px;
    }

    .pd-svc-cta-btns .pd-btn {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 1199px) {
    .pd-founder-body {
        padding-left: 0;
    }

    .pd-founder-photo {
        max-width: 420px;
        aspect-ratio: 4 / 4.4;
    }
}

@media (max-width: 767px) {

    .pd-svc-note {
        padding: 28px 22px;
    }

    .pd-svc-note-btns {
        width: 100%;
    }

    .pd-svc-note-btns .pd-btn {
        width: 100%;
        justify-content: center;
    }

    .pd-founder-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-founder-cta .pd-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   08. Reveal fail-open
   ------------------------------------------------------------
   Heading GSAP se reveal hote hain aur shuru me opacity 0 par
   hote hain. GSAP na aaye — ya user ne motion band kiya ho — to
   content chhupa nahi rehna chahiye.
   ============================================================ */

html.no-gsap .text-effect,
html.no-gsap .text-anime-style-1,
html.no-gsap .text-anime-style-2,
html.no-gsap [data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

html.no-gsap .text-effect *,
html.no-gsap .text-anime-style-1 *,
html.no-gsap .text-anime-style-2 * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

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

    .text-effect,
    .text-anime-style-1,
    .text-anime-style-2,
    .text-effect *,
    .text-anime-style-1 *,
    .text-anime-style-2 *,
    [data-aos] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
   09. Icons
   ------------------------------------------------------------
   FontAwesome Pro (635 KB CSS + ~1 MB font) ki jagah ab
   assets/img/new-img/icons.php ka inline sprite hai. `.pd-i`
   1em ka hai, isliye theme ke purane font-size rules jaise the
   waise hi kaam karte hain.
   ============================================================ */

.pd-i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: 0 0 auto;
    fill: none;
    overflow: visible;
}

/* scroll-to-top ka teer bhi FontAwesome ke \f062 par tha */
.progress-wrap::after,
.progress-wrap::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033E5B' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4V3.6'/%3E%3Cpath d='m5.4 10.2 6.6-6.6 6.6 6.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 17px 17px;
}

/* Mobile menu ka toggle button main.js se banta hai aur usme
   `<i class="fas fa-chevron-right">` hota hai — FontAwesome hatne ke
   baad wo khaali reh gaya. Vendor JS chhedne ke bajaye button ko
   khud chevron de diya (active par 90deg ghoomta hai, jaise pehle). */
.vl-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023047' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13px 13px;
    transition: 0.3s;
}

.vl-offcanvas-menu ul li.active > .vl-menu-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}

/* khaali <i> jagah na ghere */
.vl-menu-close i {
    display: none;
}


        .about-banner {
    position: relative;
    isolation: isolate;
}

.about-banner-overlay {
    position: absolute;
    inset: 0;
    background:rgb(3 54 80 / 76%);
    z-index: -1;
}

.about-banner .container {
    position: relative;
    z-index: 2;
}

.vl-form-wrap-inner select{
border: 1px solid #CFD6DA;
    border-radius: 8px;
    color: var(--vkl-text-text-3);
    font-size: var(--vkl-font-size-font-s18);
    line-height: var(--vkl-specing-height18);
    font-weight: var(--vkl-weight-medium);
    background: transparent;
    height: 54px;
    width: 100%;
    padding: 10px;
}

   /* ================================
   Blog Breadcrumb Navigation
================================ */

.bh-breadcrumb-section {
    width: 100%;
    padding: 18px 0;
    background: #f7f8fa;
}

.bh-breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: left;
}

.bh-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-breadcrumb-item {
    display: flex;
    align-items: center;
}

.bh-breadcrumb-link,
.bh-breadcrumb-active span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.bh-breadcrumb-link {
    color: #555;
    transition: all 0.3s ease;
}

.bh-breadcrumb-link:hover {
    color: #000;
}

.bh-breadcrumb-active span {
    color: #111;
    font-weight: 600;
}

.bh-breadcrumb-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    color: #999;
    font-size: 12px;
}

/* Mobile */
@media (max-width: 575px) {

    .bh-breadcrumb-section {
        padding: 15px 0;
    }

    .bh-breadcrumb-link,
    .bh-breadcrumb-active span {
        font-size: 14px;
    }

    .bh-breadcrumb-separator {
        margin: 0 9px;
    }
}




.bh-related-blog-item {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
}

.bh-related-blog-item:last-child {
    border-bottom: 0;
}

.bh-related-blog-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #222;
}

/* Blog Image */
.bh-related-blog-img {
    width: 65px;
    height: 55px;
    flex: 0 0 65px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: all 0.3s ease;
}

/* Blog Title */
.bh-related-blog-link .blog-title {
    display: block;
    font-size: 15px;
    line-height: 1.45;
    /*font-weight: 600;*/
    color: #222;
    transition: color 0.3s ease;
}

/* Hover */
.bh-related-blog-link:hover .blog-title {
    color: #a02d2b;
}

.bh-related-blog-link:hover .bh-related-blog-img {
    transform: scale(1.05);
}

/* Mobile */
@media (max-width: 575px) {

    .bh-related-blog-img {
        width: 58px;
        height: 50px;
        flex-basis: 58px;
    }

    .bh-related-blog-link .blog-title {
        font-size: 14px;
    }
}
/* =====================================================================
   Gallery
   ---------------------------------------------------------------------
   Moved here from an inline <style> block in gallery.php. The original
   block opened with a bare `background: #fef9fd;` and no selector, so
   the browser discarded that declaration and everything up to the first
   closing brace. The intended rule is restored below.
   ================================================================== */

.awards-section {
  background: #fef9fd;
  padding: 50px 0;
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.glass-card:hover { transform: translateY(-8px); }

.glass-image {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.glass-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.5s ease;
}
.glass-card:hover img { transform: scale(1.05); }

.glass-content { padding: .75rem 1rem; }
.glass-content h2 { font-size: 15px; margin: 0; }

/* Shine sweep on hover */
.shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: 0.5s;
  pointer-events: none;
}
.glass-card:hover .shine { left: 100%; }

/* --- lightbox ------------------------------------------------------ */

.custom-popup-overlay-award {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.custom-popup-box-award {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}
.custom-popup-box-award img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.custom-popup-close-award {
  position: absolute;
  top: -14px;
  right: -17px;
  background: var(--vkl-bg-bg-3, #0b3b5c);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.custom-popup-nav-award {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #fff;
  background: var(--vkl-bg-bg-3, #0b3b5c);
  cursor: pointer;
  z-index: 10000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
}
.custom-popup-prev-award { left: 10px; }
.custom-popup-next-award { right: 10px; }

#popupCaptionAward {
  color: #fff;
  margin-top: 15px;
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .custom-popup-nav-award { width: 40px; height: 40px; font-size: 20px; }
}

/* --- service category headings ---------------------------------------
   Only rendered when the admin has actually created categories; a site
   with none keeps the single flat grid. */
.pd-svc-group { margin: 2.6rem 0 1.2rem; }
.pd-svc-group:first-of-type { margin-top: 0; }
.pd-svc-group-title {
  font-size: 1.35rem; font-weight: 700; margin: 0;
  padding-bottom: .6rem; border-bottom: 2px solid rgba(11, 59, 92, .12);
}
.pd-svc-group-desc { margin: .6rem 0 0; opacity: .78; font-size: .95rem; }

/* =====================================================================
   Doctors / team - listing cards and the profile page
   ---------------------------------------------------------------------
   Same shape and hover as .pd-svc so the two card grids read as one
   family; only the portrait ratio differs, because a headshot wants to
   be taller than a service photo.
   ================================================================== */

.pd-doc {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-white);
    overflow: hidden;
    transition: transform .35s ease-in-out, box-shadow .35s ease-in-out,
        border-color .35s ease-in-out;
}

.pd-doc:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2, 48, 71, .12);
    border-color: var(--vkl-theme-primary, #023047);
}

.pd-doc-media {
    display: block;
    position: relative;
    /* 60% of the height these cards started at: the grid reads as a row of
       people rather than a column of posters, and three cards fit the
       screen without scrolling. */
    aspect-ratio: 4 / 2.64;
    background: var(--vkl-bg-bg-2, #f2f6f8);
    overflow: hidden;
}

.pd-doc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease-in-out;
}

.pd-doc:hover .pd-doc-media img { transform: scale(1.04); }

/* Shown when no photo has been uploaded yet, so the grid never collapses
   into ragged cards while an image is still being sourced. */
.pd-doc-initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 4rem;
    font-weight: 700;
    color: var(--vkl-theme-primary, #023047);
    opacity: .25;
}

.pd-doc-body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }

.pd-doc-name { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .3rem; }
.pd-doc-name a { color: var(--vkl-theme-primary, #023047); }
.pd-doc-name a:hover { color: var(--vkl-theme-secondary, #f37101); }

.pd-doc-role {
    margin: 0 0 .4rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--vkl-theme-secondary, #f37101);
}

.pd-doc-qual { margin: 0 0 1rem; font-size: .85rem; line-height: 1.55; opacity: .75; }

.pd-doc-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--vkl-theme-primary, #023047);
}
.pd-doc-link:hover { color: var(--vkl-theme-secondary, #f37101); gap: .7rem; }
.pd-doc-link i { transition: transform .25s ease; }

/* --- profile page ---------------------------------------------------- */

.pd-doc-aside-photo {
    border-radius: var(--pd-radius);
    overflow: hidden;
    aspect-ratio: 4 / 4.4;
    background: var(--vkl-bg-bg-2, #f2f6f8);
}
.pd-doc-aside-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.pd-doc-aside-role { margin: .35rem 0 .2rem; font-weight: 600; color: var(--vkl-theme-secondary, #f37101); }
.pd-doc-aside-qual { margin: 0 0 .75rem; font-size: .85rem; line-height: 1.55; opacity: .75; }
.pd-doc-aside-bio  { margin: 0 0 1rem; font-size: .93rem; line-height: 1.7; }

.pd-doc-aside-contact { list-style: none; margin: 0 0 1rem; padding: 0; }
.pd-doc-aside-contact li { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; font-size: .93rem; }
.pd-doc-aside-contact i { color: var(--vkl-theme-secondary, #f37101); width: 16px; text-align: center; }

.pd-doc-aside-social { list-style: none; display: flex; gap: .5rem; margin: 0 0 1.1rem; padding: 0; }
.pd-doc-aside-social a {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--vkl-border-border-3);
    color: var(--vkl-theme-primary, #023047);
}
.pd-doc-aside-social a:hover {
    background: var(--vkl-theme-primary, #023047);
    border-color: var(--vkl-theme-primary, #023047);
    color: #fff;
}

.pd-doc-aside-cta { display: flex; justify-content: center; width: 100%; margin-bottom: .6rem; }
.pd-doc-aside-cta:last-child { margin-bottom: 0; }

.pd-doc-back { margin-top: 2rem; }

@media (max-width: 575px) {
    .pd-doc-media { aspect-ratio: 4 / 2.4; }
    .pd-doc-body  { padding: 1.1rem 1.1rem 1.25rem; }
}

/* ====================================================================
   VIDEOS
   --------------------------------------------------------------------
   The card is a still image with a play button until it is clicked;
   assets/js/pd-video.js then swaps the poster for the real player. The
   shell keeps a fixed 16:9 box so that swap does not move the page.
   ================================================================== */

.pd-video {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vkl-border-border-3);
    border-radius: var(--pd-radius);
    background: var(--vkl-text-text-white);
    overflow: hidden;
    transition: transform .35s ease-in-out, box-shadow .35s ease-in-out,
        border-color .35s ease-in-out;
}

.pd-video:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2, 48, 71, .12);
    border-color: var(--vkl-theme-primary, #023047);
}

/* Reserved before the poster loads and reused by the player, so nothing
   below the card shifts when someone presses play. */
.pd-video-shell {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b1d29;
    overflow: hidden;
}

.pd-video-shell iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pd-video-open {
    display: block;
    position: absolute;
    inset: 0;
}

.pd-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-in-out;
}

/* Vimeo publishes no thumbnail, and a cover image is optional, so the
   card has to look deliberate with no image at all. */
.pd-video-blank {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #023047 0%, #04486a 100%);
}

.pd-video:hover .pd-video-poster { transform: scale(1.04); }

.pd-video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.pd-video-play svg {
    width: 62px;
    height: 62px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
    transition: transform .3s ease-in-out;
}

.pd-video-play-disc {
    fill: rgba(255, 255, 255, .92);
    transition: fill .3s ease-in-out;
}

.pd-video-play-arrow { fill: var(--vkl-theme-primary, #023047); }

.pd-video-open:hover .pd-video-play svg,
.pd-video-open:focus-visible .pd-video-play svg { transform: scale(1.08); }

.pd-video-open:hover .pd-video-play-disc { fill: var(--vkl-theme-secondary, #f37101); }
.pd-video-open:hover .pd-video-play-arrow { fill: #fff; }

.pd-video-open:focus-visible { outline: 3px solid var(--vkl-theme-secondary, #f37101); outline-offset: -3px; }

.pd-video-body { padding: 1.15rem 1.25rem 1.35rem; }

.pd-video-title {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
    color: var(--vkl-theme-primary, #023047);
}

.pd-video-x { margin: .45rem 0 0; font-size: .93rem; line-height: 1.7; }

.pd-video-intro { margin: -.5rem 0 1.75rem; max-width: 46rem; }

.pd-video-more { margin-top: 1.75rem; text-align: center; }

@media (max-width: 575px) {
    .pd-video-play svg { width: 52px; height: 52px; }
    .pd-video-body { padding: 1rem 1.05rem 1.15rem; }
}

/* --------------------------------------------------------------------
   Main menu spacing.
   --------------------------------------------------------------------
   Videos made eight top-level items, one more than the menu column
   could hold: "Contact Us" dropped onto a second row and pushed the
   header out of shape.

   Only the gap changes on a wide screen. Between 1200 and 1400 the
   column is narrower still (665px, not 770), so there the type comes
   down a point as well - measured, not guessed: at 18px the row does
   not fit however tight the gap is.
   ------------------------------------------------------------------ */

@media (min-width: 1200px) {
    .vl-main-menu ul > li { margin: 0 6px; }
    .vl-main-menu ul > li > a { font-size: 17px; }
}

@media (min-width: 1400px) {
    .vl-main-menu ul > li { margin: 0 12px; }
    .vl-main-menu ul > li > a { font-size: var(--vkl-font-size-font-s18); }
}

/* --------------------------------------------------------------------
   Listing page intros.
   --------------------------------------------------------------------
   The blog, doctors and videos pages each have a page record under
   Pages. Whatever is typed into its editor appears here, above the
   cards - so a record you can type into is never one whose text goes
   nowhere.
   ------------------------------------------------------------------ */

.pd-listing-intro {
    max-width: 48rem;
    margin: 0 0 2.25rem;
}

.pd-listing-intro > :last-child { margin-bottom: 0; }

.pd-album-intro { max-width: 48rem; margin: 0 0 1.75rem; }

/* The trust strip ships without a heading; this is only used when one
   is typed into Admin > Page sections. */
.pd-trust-head { margin-bottom: 2rem; text-align: center; }
.pd-trust-head .pd-eyebrow { justify-content: center; }
.pd-trust-head .pd-lead { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* Only used when the footer section's eyebrow field is filled in. */
.vl-footer-eyebrow {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}