/* ============================================================================
   Bluecrest — About-Us fixes (loaded LAST, highest priority)
   Fixes: (1) huge empty gap on mobile, (2) invisible first-paragraph text.
   Scoped to .about-us so nothing else is affected.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) TEXT VISIBILITY
   The first paragraph (side_content) and the rich content render in muted /
   half-transparent colors from the legacy theme (rgba(0,18,25,.5)) or fail to
   inherit the design-system color. Force a readable dark color regardless of
   theme, wrapper, or whether the text is wrapped in <p> or not.
   --------------------------------------------------------------------------- */
.about-us .about-content,
.about-us .about-content .content,
.about-us .about-content .content *,
.about-us .frontend-editor-data,
.about-us .frontend-editor-data * {
    color: #44566c !important;
}

.about-us .about-content .section-title h4 { color: #1366f0 !important; }
.about-us .about-content .section-title h2,
.about-us .frontend-editor-data h1,
.about-us .frontend-editor-data h2,
.about-us .frontend-editor-data h3,
.about-us .frontend-editor-data h4,
.about-us .about-content strong,
.about-us .about-content b { color: #0b1f3a !important; }

.about-us .about-content .content {
    font-size: 16px;
    line-height: 1.75;
    opacity: 1 !important;
    visibility: visible !important;
}
.about-us .about-content .content p { margin-bottom: 14px; }

/* ---------------------------------------------------------------------------
   2) KILL THE BIG MOBILE GAP
   Causes: the legacy decorative circle (::before, 200px) + an oversized
   circular image (width:500px) + section padding that doesn't collapse on
   small screens. Neutralize all of them.
   --------------------------------------------------------------------------- */
.about-us .about-img::before { display: none !important; content: none !important; }

.about-us .about-img {
    margin-bottom: 24px !important;
    border-radius: 18px;
    overflow: hidden;
    line-height: 0;
}
.about-us .about-img img {
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 460px !important;
    object-fit: cover !important;
    display: block !important;
}
/* If the image is missing/empty, don't reserve a tall blank block. */
.about-us .about-img img[src=""],
.about-us .about-img img:not([src]),
.about-us .about-img:empty { display: none !important; }

/* Remove any forced min-height the legacy section might carry on mobile. */
.about-us,
.about-us.section-style,
.about-us .container,
.about-us .row { min-height: 0 !important; }

/* Tighten vertical rhythm so stacked columns don't leave a void. */
.about-us.section-style { padding-top: 0 !important; }
.about-us .row { align-items: center; row-gap: 8px; }
.about-us .col-xl-12.mt-4 { margin-top: 16px !important; }

@media (max-width: 991px) {
    .about-us .about-img { margin-bottom: 18px !important; }
    .about-us .col-xl-6,
    .about-us .col-xl-12 { width: 100%; max-width: 100%; flex: 0 0 100%; }
}

@media (max-width: 575px) {
    .about-us .about-img { margin-bottom: 14px !important; }
    .about-us .about-img img { max-height: 320px !important; }
    .about-us .col-xl-12.mt-4 { margin-top: 12px !important; }
}

/* ============================================================================
   SCROLLBAR FIX
   The legacy theme sets `::-webkit-scrollbar { width: 0 }` globally, which hides
   the page scrollbar on Chrome/Edge/Safari. We restore a SLIM scrollbar on the
   page only (html/body) and explicitly DO NOT apply the styled bar to inner
   containers like the nav drawer, which previously got a chunky doubled bar.
   ============================================================================ */

/* --- Page scrollbar: slim, page-level only (not inner containers) --- */
@media (min-width: 992px) {
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        background: #0ea5e9 !important;
        border-radius: 8px !important;
    }
    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        background: #0c8fce !important;
    }
    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: transparent !important;
    }
    html {
        scrollbar-width: thin !important;
        scrollbar-color: #0ea5e9 transparent !important;
    }
}

/* --- Nav drawer / side-nav: remove the chunky button, use a thin subtle bar.
   Targets the actual scroll containers shown in the menu so the doubled blue
   bar from the global rule no longer appears. --- */
.side-nav::-webkit-scrollbar,
.side-nav-inside::-webkit-scrollbar,
.side-nav-menu::-webkit-scrollbar,
.nv-collapse::-webkit-scrollbar,
.nv-menu::-webkit-scrollbar,
.nice-select .list::-webkit-scrollbar,
.drawer::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
.side-nav::-webkit-scrollbar-thumb,
.side-nav-inside::-webkit-scrollbar-thumb,
.side-nav-menu::-webkit-scrollbar-thumb,
.nv-collapse::-webkit-scrollbar-thumb,
.nv-menu::-webkit-scrollbar-thumb,
.nice-select .list::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb {
    background: rgba(120, 134, 155, 0.35) !important;
    border-radius: 4px !important;
    border: 0 !important;
}
.side-nav::-webkit-scrollbar-track,
.side-nav-inside::-webkit-scrollbar-track,
.side-nav-menu::-webkit-scrollbar-track,
.nv-collapse::-webkit-scrollbar-track,
.nv-menu::-webkit-scrollbar-track,
.nice-select .list::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track {
    background: transparent !important;
}
.side-nav,
.side-nav-inside,
.side-nav-menu,
.nv-collapse,
.nv-menu {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(120, 134, 155, 0.35) transparent !important;
}