﻿
/* ==========================================
   PROPERTY BIG BOOK - RESPONSIVE FOOTER
========================================== */

.pbb-footer {
    position: relative;
    background: linear-gradient(135deg, #071a38 0%, #0b2a52 100%);
    padding: 55px 0 0;
    overflow: hidden;
    color: #ffffff;
}

/* Brand */

.pbb-footer-brand {
    display: inline-block;
    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.7px;
    text-decoration: none;
    margin-bottom: 14px;
}

    .pbb-footer-brand span {
        color: #00a8ff;
    }

    .pbb-footer-brand:hover {
        color: #ffffff;
    }

.pbb-footer-description {
    max-width: 360px;
    color: #b8c8df;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Headings */

.pbb-footer-heading {
    position: relative;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 22px;
    padding-bottom: 12px;
}

    .pbb-footer-heading::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
        height: 3px;
        border-radius: 5px;
        background: #00a8ff;
    }

/* Links */

.pbb-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pbb-footer-links li {
        margin-bottom: 13px;
    }

    .pbb-footer-links a {
        display: inline-block;
        color: #b8c8df;
        font-size: 14px;
        text-decoration: none;
        transition: all .25s ease;
    }

        .pbb-footer-links a:hover,
        .pbb-footer-links a.active {
            color: #00bfff;
            transform: translateX(4px);
        }

/* Bottom Section */

.pbb-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.13);
    padding: 19px 0;
    margin-top: 15px;
}

    .pbb-footer-bottom p {
        color: #aebed3;
        font-size: 13px;
    }

.pbb-footer-tagline {
    display: inline-block;
    color: #00bfff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    transition: all .3s ease;
}

    .pbb-footer-tagline:hover {
        color: #ffffff;
        text-decoration: underline;
        transform: translateY(-2px);
        cursor: pointer;
    }

/* Tablet */

@media (max-width: 991.98px) {

    .pbb-footer {
        padding-top: 45px;
    }

    .pbb-footer-description {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .pbb-footer {
        padding-top: 35px;
    }

    .pbb-footer-brand {
        font-size: 24px;
    }

    .pbb-footer-heading {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .pbb-footer-links li {
        margin-bottom: 11px;
    }

    .pbb-footer-links a {
        font-size: 13px;
    }

    .pbb-footer-description {
        font-size: 13px;
        padding: 0 10px;
    }

    .pbb-footer-bottom {
        margin-top: 10px;
        padding: 16px 0;
    }

        .pbb-footer-bottom p,
        .pbb-footer-tagline {
            font-size: 12px;
        }
}

/*About  us UI Start Here*/


.footer-belief-eyebrow {
    color: #ffffff;
    font-size: .75rem;
    font-weight: 300;
    letter-spacing: .25em;
}

.belief-section {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 4rem;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

/* eyebrow */
.belief-eyebrow {
    color: #0b84f3;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .25em;
}

/* heading */
.belief-heading {
    color: #0b2a6b;
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.belief-accent {
    color: #0b84f3;
}

/* divider */
.belief-divider {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: #0b84f3;
}

/* circles */
.belief-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* solid inner circle */
.belief-solid {
    width: 280px;
    height: 280px;
    bottom: -140px;
    background: linear-gradient(180deg, #7cc0fa 0%, #cfe8ff 100%);
}
/* soft middle circle */
.belief-soft {
    width: 440px;
    height: 440px;
    bottom: -210px;
    background: rgba(186, 222, 255, .35);
}
/* thin outer ring */
.belief-ring {
    width: 620px;
    height: 620px;
    bottom: -290px;
    border: 1px solid rgba(120, 180, 240, .30);
}

/* left / right placement (half of each circle sits off-screen) */
.belief-solid.left {
    left: -140px;
}

.belief-soft.left {
    left: -220px;
}

.belief-ring.left {
    left: -310px;
}

.belief-solid.right {
    right: -140px;
}

.belief-soft.right {
    right: -220px;
}

.belief-ring.right {
    right: -310px;
}

/* smaller circles on phones so they don't crowd the text */
@media (max-width: 767.98px) {
    .belief-solid {
        width: 160px;
        height: 160px;
        bottom: -80px;
    }

    .belief-soft {
        width: 260px;
        height: 260px;
        bottom: -130px;
    }

    .belief-ring {
        width: 380px;
        height: 380px;
        bottom: -190px;
    }

    .belief-solid.left {
        left: -80px;
    }

    .belief-solid.right {
        right: -80px;
    }

    .belief-soft.left {
        left: -130px;
    }

    .belief-soft.right {
        right: -130px;
    }

    .belief-ring.left {
        left: -190px;
    }

    .belief-ring.right {
        right: -190px;
    }
}


/* shared light-blue band */
.about-band {
    background: #eaf5ff;
    padding: 3rem 0;
}

.about-sub {
    color: #0b2a6b;
    font-size: .95rem;
}


/* ---------- Meet the Team ---------- */

.team-section {
    background: linear-gradient(135deg, #eaf5ff 0%, #f7fbff 55%, #eaf5ff 100%);
    padding: 4rem 0 4.5rem;
    overflow: hidden;
}

.team-header {
    margin-bottom: 2rem;
}

    .team-header .belief-heading {
        max-width: 1000px;
    }

/* Smaller card grid: each card is capped at 230px wide */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 230px));
    justify-content: start; /* use "center" if you want the cards centered */
    gap: 1.25rem;
}

/* Employee card */
.team-card {
    position: relative;
    height: 290px; /* was 410px */
    overflow: hidden;
    isolation: isolate;
    border-radius: 10px;
    background: #dce8f5;
    box-shadow: 0 6px 18px rgba(11, 42, 107, 0.09);
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Black and white image */
.team-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%);
    transform: scale(1.001);
    transition: filter 0.65s ease, transform 0.7s ease;
}

/* Navy overlay at the bottom */
.team-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1rem; /* was 1.5rem */
    color: #fff;
    background: linear-gradient(to top, rgba(7, 35, 94, 0.98) 0%, rgba(7, 35, 94, 0.82) 23%, rgba(7, 35, 94, 0.15) 58%, transparent 75%);
    transition: background 0.4s ease;
}

/* Blue accent line */
.team-accent {
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: #0b84f3;
    margin-bottom: 0.6rem;
    transition: width 0.35s ease, background 0.35s ease;
}

/* Name */
.team-overlay h3 {
    color: #fff;
    font-size: 1.05rem; /* was 1.3rem */
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.3rem;
}

/* Designation */
.team-overlay p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.82rem; /* was 0.95rem */
    line-height: 1.4;
    margin: 0;
}

/* Hover interaction */
.team-card:hover,
.team-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(11, 42, 107, 0.18);
}

    .team-card:hover .team-photo,
    .team-card:focus-within .team-photo {
        filter: grayscale(0%);
        transform: scale(1.06);
    }

    .team-card:hover .team-accent,
    .team-card:focus-within .team-accent {
        width: 50px;
    }

    .team-card:hover .team-overlay,
    .team-card:focus-within .team-overlay {
        background: linear-gradient(to top, rgba(0, 63, 160, 0.98) 0%, rgba(0, 91, 205, 0.82) 28%, rgba(7, 42, 107, 0.12) 65%, transparent 78%);
    }

/* Tablet */
@media (max-width: 991.98px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 230px));
        justify-content: center;
        gap: 1.1rem;
    }

    .team-card {
        height: 280px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .team-section {
        padding: 2.5rem 0;
    }

    .team-header {
        margin-bottom: 1.5rem;
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 small cards per row */
        gap: 0.9rem;
    }

    .team-card {
        height: 230px;
    }

    .team-overlay {
        padding: 0.8rem;
    }

        .team-overlay h3 {
            font-size: 0.95rem;
        }

        .team-overlay p {
            font-size: 0.75rem;
        }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .team-card,
    .team-photo,
    .team-overlay,
    .team-accent {
        transition: none;
    }
}

/* ---------- Our vision ---------- */
.vision-section {
    --u: min(calc(100vw / 380), 1.6px); /* artwork scale (phones/tablets) */
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%);
    padding: 3.5rem 0 0;
}

/* ----- text ----- */
.vision-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vision-title {
    font-size: clamp(1.9rem, 3vw + 1rem, 3.2rem);
    font-weight: 800;
    line-height: 1.12;
}

.vision-section .belief-divider {
    width: 56px;
    height: 3px;
}

.vision-text {
    color: #0b2a6b;
    font-size: clamp(.92rem, .88rem + .25vw, 1.05rem);
    line-height: 1.65;
    max-width: 34rem;
}

/* ----- artwork stage: 360 x 310 units, flush with the right edge ----- */
.vision-art {
    position: relative;
    width: calc(360 * var(--u));
    height: calc(310 * var(--u));
    margin: 2.5rem 0 0 auto;
    overflow: hidden; /* crops circles + arc at the section edge */
}

.vision-circle {
    position: absolute;
    border-radius: 50%;
}

/* big pale circle */
.vision-soft {
    width: calc(600 * var(--u));
    height: calc(600 * var(--u));
    left: calc(92 * var(--u));
    top: calc(-80 * var(--u));
    background: linear-gradient(160deg, rgba(228, 242, 255, .8) 0%, rgba(196, 226, 255, .55) 100%);
}

/* strong blue circle, bottom-right */
.vision-solid {
    width: calc(504 * var(--u));
    height: calc(504 * var(--u));
    left: calc(140 * var(--u));
    top: calc(113 * var(--u));
    background: linear-gradient(200deg, #b9dcff 0%, #6db6f8 100%);
}

/* the arc */
.vision-ring {
    position: absolute;
    left: calc(13 * var(--u));
    top: calc(44 * var(--u));
    width: calc(352 * var(--u));
    height: calc(352 * var(--u));
}

    .vision-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid #3b9cf5;
        border-radius: 50%;
        clip-path: inset(0 44% 0 0); /* show left side + a little past the top dot */
    }

/* dots + labels on the ring at angle --a */
.vision-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--a)) translateX(calc(176 * var(--u))) rotate(calc(-1 * var(--a)));
}

    .vision-node i {
        position: absolute;
        width: max(8px, calc(8 * var(--u)));
        height: max(8px, calc(8 * var(--u)));
        border-radius: 50%;
        background: #0b84f3;
        transform: translate(-50%, -50%);
    }

    .vision-node span {
        position: absolute;
        left: calc(8 * var(--u) + 4px);
        top: -1.1em;
        white-space: nowrap;
        color: #0b2a6b;
        font-size: clamp(.7rem, calc(8 * var(--u)), .95rem);
        line-height: 1.3;
    }

/* ----- desktop: text left, artwork pinned right ----- */
@media (min-width: 992px) {
    .vision-section {
        --u: min(.11vw, 2.4px);
        display: flex;
        align-items: center;
        min-height: calc(310 * var(--u));
        padding: 3rem 0;
    }

    .vision-container {
        position: relative;
        z-index: 2;
    }

    .vision-art {
        position: absolute;
        right: 0;
        top: 50%;
        margin: 0;
        transform: translateY(-50%);
    }
}

/* ---------- Guiding principles ---------- */
.principle {
    padding: 0 1.5rem;
}


.principle-num {
    color: #0b84f3;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
}

.principle-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #cfe8ff;
    color: #0b84f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.principle-title {
    color: #0b2a6b;
    font-weight: 700;
    margin-bottom: .25rem;
}

.principle-text {
    color: #0b2a6b;
    font-size: .85rem;
    line-height: 1.5;
}
/*Abous  us UI End Here*/

/*contact us UI start Here*/

/* ===== Contact form section ===== */
.pbb-contact {
    background: #f5f9ff;
}

.pbb-contact-card {
    border: 1px solid #e6eefb;
}


.pbb-contact-title {
    color: #0b2a6f;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.15;
}

.pbb-line {
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: #0a7cff;
}

.pbb-label {
    color: #0b2a6f;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.pbb-input {
    background: #f5f9ff;
    border: 1px solid #dbe7fb;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .85rem;
}

    .pbb-input::placeholder {
        color: #8fa3c4;
    }

    .pbb-input:focus {
        background: #fff;
        border-color: #0a7cff;
        box-shadow: 0 0 0 .2rem rgba(10, 124, 255, .15);
    }

textarea.pbb-input {
    resize: vertical;
    min-height: 130px;
}

.pbb-send-btn {
    border-radius: 10px;
    font-weight: 600;
    background: #0a7cff;
    border-color: #0a7cff;
}

    .pbb-send-btn:hover {
        background: #0866d6;
        border-color: #0866d6;
    }

.pbb-icon-circle {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #dcecff;
    color: #0a7cff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

/* vertical divider between the two columns (desktop only) */
@media (min-width: 992px) {
    .pbb-contact-right {
        border-left: 1px solid #e6eefb;
    }
}

/* let the text column shrink inside the flex row */
.pbb-contact-info {
    min-width: 0;
    flex: 1 1 auto;
}

/* allow long emails/URLs to wrap instead of overflowing */
.pbb-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* keep the card itself from ever leaking sideways */
.pbb-contact-card {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .pbb-contact-card {
        padding: 1.25rem !important; /* overrides p-4 */
    }

    .pbb-icon-circle {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .pbb-contact-info a,
    .pbb-contact-info span {
        font-size: .9rem;
    }
}

/* dark mode (Falcon) */
[data-bs-theme="dark"] .pbb-contact {
    background: #0b1220;
}

[data-bs-theme="dark"] .pbb-contact-card {
    background: #0f1b33 !important;
    border-color: #1f2f52;
}

[data-bs-theme="dark"] .pbb-contact-title,
[data-bs-theme="dark"] .pbb-label {
    color: #fff;
}

[data-bs-theme="dark"] .pbb-input {
    background: #0b1220;
    border-color: #1f2f52;
    color: #fff;
}

/* =====================================================================
   DARK MODE - FOOTER + ABOUT US + CONTACT US
   Keep at the END of the file (after the typography standard).
   Rhythm (About): hero #0b1220 > principles #0f182a > vision #0b1220
                   > team #0f182a > CTA banner > footer
   ===================================================================== */

/* ---------- FOOTER ---------- */
[data-bs-theme="dark"] .pbb-footer {
    background: linear-gradient(135deg, #050e20 0%, #08203f 100%);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .pbb-footer-bottom {
    border-top-color: rgba(255, 255, 255, .10);
}

/* ---------- ABOUT: hero ("Our Belief") ---------- */
[data-bs-theme="dark"] .belief-section {
    background: linear-gradient(180deg, #0b1220 0%, #0f182a 100%);
}

[data-bs-theme="dark"] .belief-solid {
    background: linear-gradient(180deg, rgba(77, 163, 255, .38) 0%, rgba(77, 163, 255, .10) 100%);
}

[data-bs-theme="dark"] .belief-soft {
    background: rgba(77, 163, 255, .10);
}

[data-bs-theme="dark"] .belief-ring {
    border-color: rgba(125, 184, 255, .28);
}

[data-bs-theme="dark"] .belief-divider {
    background: #4da3ff;
}

/* text (old classes; harmless if you've moved to pbb-h1 / pbb-eyebrow) */
[data-bs-theme="dark"] .belief-eyebrow {
    color: #7db8ff;
}

[data-bs-theme="dark"] .belief-heading {
    color: #fff;
}

[data-bs-theme="dark"] .belief-accent {
    color: #7db8ff;
}

[data-bs-theme="dark"] .about-sub {
    color: #a9b6cf;
}

/* ---------- ABOUT: guiding principles ---------- */
[data-bs-theme="dark"] .about-band {
    background: #0f182a;
}

[data-bs-theme="dark"] .principle-num {
    color: #7db8ff;
}

[data-bs-theme="dark"] .principle-icon {
    background: #1b2a47;
    color: #7db8ff;
}

[data-bs-theme="dark"] .principle-title {
    color: #fff;
}

[data-bs-theme="dark"] .principle-text {
    color: #a9b6cf;
}

/* ---------- ABOUT: vision ---------- */
[data-bs-theme="dark"] .vision-section {
    background: linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}

[data-bs-theme="dark"] .vision-soft {
    background: linear-gradient(160deg, rgba(77, 163, 255, .16) 0%, rgba(77, 163, 255, .06) 100%);
}

[data-bs-theme="dark"] .vision-solid {
    background: linear-gradient(200deg, #123a6e 0%, #0a4aa0 100%);
}

[data-bs-theme="dark"] .vision-ring::before {
    border-color: #4da3ff;
}

[data-bs-theme="dark"] .vision-node i {
    background: #4da3ff;
    box-shadow: 0 0 0 4px rgba(77, 163, 255, .25);
}

[data-bs-theme="dark"] .vision-node span {
    color: #dbe8ff;
}

[data-bs-theme="dark"] .vision-text {
    color: #a9b6cf;
}

/* ---------- ABOUT: team ---------- */
[data-bs-theme="dark"] .team-section {
    background: #0f182a;
}

[data-bs-theme="dark"] .team-card {
    background: #141c2e;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

    [data-bs-theme="dark"] .team-card:hover,
    [data-bs-theme="dark"] .team-card:focus-within {
        box-shadow: 0 16px 30px rgba(0, 0, 0, .6);
        border-color: rgba(125, 184, 255, .30);
    }

[data-bs-theme="dark"] .team-accent {
    background: #4da3ff;
}

/* ---------- CONTACT: section + card ---------- */
[data-bs-theme="dark"] .pbb-contact {
    background: #0b1220;
}

[data-bs-theme="dark"] .pbb-contact-card {
    background: #141c2e !important; /* beats Bootstrap's .bg-white */
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
}

@media (min-width: 992px) {
    [data-bs-theme="dark"] .pbb-contact-right {
        border-left-color: rgba(255, 255, 255, .10);
    }
}

[data-bs-theme="dark"] .pbb-line {
    background: #4da3ff;
}

[data-bs-theme="dark"] .pbb-contact-title {
    color: #fff;
}

    /* the "Help?" / "Details." words use Falcon's text-primary */
    [data-bs-theme="dark"] .pbb-contact-title .text-primary,
    [data-bs-theme="dark"] .pbb-contact a.text-primary {
        color: #7db8ff !important;
    }

/* ---------- CONTACT: form ---------- */
[data-bs-theme="dark"] .pbb-label {
    color: #cfd8ea;
}

[data-bs-theme="dark"] .form-control.pbb-input,
[data-bs-theme="dark"] .form-select.pbb-input {
    background-color: #0f182a;
    border-color: rgba(255, 255, 255, .14);
    color: #e6edf7;
    color-scheme: dark; /* dark native select popup / scrollbars */
}

[data-bs-theme="dark"] .pbb-input::placeholder {
    color: #7f8fae;
    opacity: 1;
}

[data-bs-theme="dark"] .form-control.pbb-input:focus,
[data-bs-theme="dark"] .form-select.pbb-input:focus {
    background-color: #0f182a;
    border-color: #4da3ff;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(77, 163, 255, .22);
}

/* "Select an option" placeholder state */
[data-bs-theme="dark"] .form-select.pbb-input:invalid {
    color: #7f8fae;
}

[data-bs-theme="dark"] .pbb-input option {
    background: #141c2e;
    color: #fff;
}

/* browser autofill would turn the fields white/yellow */
[data-bs-theme="dark"] .pbb-input:-webkit-autofill {
    -webkit-text-fill-color: #e6edf7;
    box-shadow: 0 0 0 1000px #0f182a inset;
    caret-color: #fff;
}

[data-bs-theme="dark"] .pbb-send-btn {
    box-shadow: 0 8px 22px rgba(10, 132, 230, .3);
}

/* ---------- CONTACT: details column ---------- */
[data-bs-theme="dark"] .pbb-icon-circle {
    background: #1b2a47;
    color: #7db8ff;
}


/* =====================================================================
   TYPOGRAPHY STANDARD - FOOTER + ABOUT US + CONTACT US
   Keep at the END of the file (after the typography standard block).
   ===================================================================== */

/* one divider for every page (replaces .belief-divider and .pbb-line) */
.pbb-divider {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0a5fc4 0%, #0a9be0 100%);
}

[data-bs-theme="dark"] .pbb-divider {
    background: linear-gradient(90deg, #4da3ff 0%, #38c6ff 100%);
}

/* ---------- hero (About + Contact) ---------- */
.belief-section .pbb-lead {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- guiding principles ---------- */
.principle .pbb-h4 {
    margin-bottom: .25rem;
}

/* ---------- vision ---------- */
.vision-copy .pbb-text {
    max-width: 34rem;
}

/* ---------- team ---------- */
.team-header .pbb-h2 {
    max-width: 1000px;
}

/* card overlay sits on a photo (always white text) - sizes only:
   name = card-heading size, designation = small-text size */
.team-overlay h3 {
    font-family: var(--pbb-font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 .25rem;
}

.team-overlay p {
    font-family: var(--pbb-font);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* ---------- contact form ---------- */
.pbb-label {
    color: var(--pbb-c-heading);
    font-family: var(--pbb-font);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.pbb-input {
    font-family: var(--pbb-font);
    font-size: .875rem;
}

.pbb-contact-info a.text-primary {
    font-size: .95rem;
    font-weight: 600;
}

/* ---------- CTA banner paragraph (already in the standard block; repeated for clarity) ---------- */
.pbb-cta .pbb-text {
    max-width: 640px;
}

/* ---------- FOOTER (always dark: sizes + weights only) ---------- */
.pbb-footer {
    font-family: var(--pbb-font);
}

.pbb-footer-heading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.pbb-footer-description,
.pbb-footer-links a,
.pbb-footer-bottom p,
.pbb-footer-tagline {
    font-size: .875rem; /* same 14px on every screen size */
}

.pbb-footer-description {
    font-weight: 400;
    line-height: 1.7;
}

.pbb-footer-links a {
    font-weight: 400;
    line-height: 1.5;
}

.pbb-footer-tagline {
    font-weight: 600;
}


/*faq start*/
/* =====================================================================
   FAQ PAGE  (.pbb-faq)  - light + dark in one place
   Keep at the END of the file.
   ===================================================================== */
.pbb-faq {
    --pbb-faq-card: #ffffff;
    --pbb-faq-border: #dbe8f7;
    --pbb-faq-shadow: 0 6px 24px rgba(30, 80, 160, .08);
    --pbb-faq-head-bg: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%);
    --pbb-faq-open-bg: #f3f8ff;
    --pbb-faq-open-border: #0a84e6;
    --pbb-faq-chip: #e6f0ff;
    --pbb-faq-chip-c: #0a5fc4;
    --pbb-faq-link: #0a5fc4;
}

[data-bs-theme="dark"] .pbb-faq {
    --pbb-faq-card: #141c2e;
    --pbb-faq-border: rgba(255, 255, 255, .08);
    --pbb-faq-shadow: none;
    --pbb-faq-head-bg: linear-gradient(135deg, #141c2e 0%, #0f182a 100%);
    --pbb-faq-open-bg: rgba(10, 132, 230, .12);
    --pbb-faq-open-border: rgba(125, 184, 255, .45);
    --pbb-faq-chip: #1b2a47;
    --pbb-faq-chip-c: #7db8ff;
    --pbb-faq-link: #7db8ff;
}

.pbb-faq .min-w-0 {
    min-width: 0;
}

/* ---------- header ---------- */
.pbb-faq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--pbb-faq-head-bg);
    border: 1px solid var(--pbb-faq-border);
    border-radius: 1.1rem;
    box-shadow: var(--pbb-faq-shadow);
}

.pbb-faq-head-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 320px;
}

.pbb-faq-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pbb-faq-chip);
    color: var(--pbb-faq-chip-c);
    font-size: 1.25rem;
}

.pbb-faq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- filters ---------- */
.pbb-faq-filters {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    background: var(--pbb-faq-card);
    border: 1px solid var(--pbb-faq-border);
    border-radius: 1rem;
    box-shadow: var(--pbb-faq-shadow);
}

    .pbb-faq-filters .pbb-label {
        display: block;
    }

/* ---------- list ---------- */
#divFaqQuestPartialView1 {
    transition: opacity .2s ease;
}

    #divFaqQuestPartialView1.pbb-faq-loading {
        opacity: .55;
        pointer-events: none;
    }

.pbb-faq-list {
    --bs-accordion-border-width: 0;
}

    .pbb-faq-list > .pbb-faq-item {
        margin-bottom: .75rem;
        background: var(--pbb-faq-card);
        border: 1px solid var(--pbb-faq-border);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--pbb-faq-shadow);
        transition: border-color .2s ease, box-shadow .2s ease;
    }

        .pbb-faq-list > .pbb-faq-item:has(.accordion-button:not(.collapsed)) {
            border-color: var(--pbb-faq-open-border);
        }

@media (hover: hover) {
    .pbb-faq-list > .pbb-faq-item:hover {
        border-color: var(--pbb-faq-open-border);
    }
}

.pbb-faq-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: 1rem 1.25rem;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left;
}

    .pbb-faq-btn::after {
        display: none; /* hide Bootstrap's built-in arrow */
    }

    .pbb-faq-btn:not(.collapsed) {
        background: var(--pbb-faq-open-bg);
        color: inherit;
        box-shadow: none;
    }

    .pbb-faq-btn:focus-visible {
        outline: 3px solid rgba(10, 132, 230, .45);
        outline-offset: -3px;
    }

.pbb-faq-caret {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pbb-faq-chip);
    color: var(--pbb-faq-chip-c);
    font-size: .7rem;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.pbb-faq-btn:not(.collapsed) .pbb-faq-caret {
    transform: rotate(90deg);
    background: #0a84e6;
    color: #fff;
}

.pbb-faq-q {
    flex: 1 1 220px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pbb-faq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 0 0 auto;
}

/* ---------- answer ---------- */
.pbb-faq-body {
    padding: 1rem 1.25rem 1.25rem calc(1.25rem + 28px + .75rem); /* aligns with the question text */
    border-top: 1px solid var(--pbb-faq-border);
}

.pbb-faq-answer-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.pbb-faq-item-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.faq-answer {
    min-width: 0;
    overflow-wrap: anywhere;
}

    .faq-answer > :last-child {
        margin-bottom: 0;
    }

    .faq-answer p {
        margin-bottom: .75rem;
    }

    .faq-answer ul, .faq-answer ol {
        padding-left: 1.25rem;
        margin-bottom: .75rem;
    }

    .faq-answer img {
        max-width: 100%;
        height: auto;
        border-radius: .5rem;
    }

    .faq-answer pre {
        max-width: 100%;
        overflow-x: auto;
    }

    .faq-answer table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .faq-answer a {
        color: var(--pbb-faq-link);
    }

/* answers are stored HTML: stop old inline colours/backgrounds ruining dark mode */
[data-bs-theme="dark"] .faq-answer :where(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, font, blockquote) {
    color: inherit !important;
    background-color: transparent !important;
}

/* ---------- empty state ---------- */
.pbb-faq-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    background: var(--pbb-faq-card);
    border: 1px dashed var(--pbb-faq-border);
    border-radius: 1rem;
}

.pbb-faq-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pbb-faq-chip);
    color: var(--pbb-faq-chip-c);
    font-size: 1.25rem;
}

/* ---------- tablets / phones ---------- */
@media (max-width: 767.98px) {
    .pbb-faq-head {
        padding: 1rem 1.1rem;
    }

    .pbb-faq-filters {
        padding: .9rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .pbb-faq-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }

    .pbb-faq-actions {
        width: 100%;
    }

        .pbb-faq-actions .btn {
            flex: 1 1 0;
        }

    .pbb-faq-btn {
        padding: .9rem 1rem;
    }

    /* badges drop under the question, aligned with the text */
    .pbb-faq-tags {
        flex-basis: 100%;
        padding-left: calc(28px + .75rem);
    }

    .pbb-faq-body {
        padding: .9rem 1rem 1.1rem;
    }

    /* edit / delete move below the answer */
    .pbb-faq-answer-row {
        flex-direction: column;
        gap: .75rem;
    }

    .pbb-faq-item-actions {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pbb-faq-caret,
    #divFaqQuestPartialView1,
    .pbb-faq-list > .pbb-faq-item {
        transition: none;
    }
}