/* =============================================
   BXHorizon Theme - Premium Dark AI/Business
   CMS-Native Manageable Theme
   ============================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap');

/* CSS Variables */
:root {
    --bx-bg: #050505;
    --bx-surface: #0f0f11;
    --bx-surface-light: #1a1a1c;
    --bx-text-primary: #ffffff;
    --bx-text-secondary: #a1a1aa;
    --bx-border: #27272a;
    --bx-font-heading: 'Syne', sans-serif;
    --bx-font-body: 'Inter', sans-serif;
    --bx-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Motion. The easing is the same curve --bx-transition already uses,
       exposed on its own so animations can borrow it without inheriting
       the 0.4s duration. The glows are tinted off #1a1a24, the blue-grey
       the hero's radial already resolves to, so the drifting aurora
       reads as depth in the existing palette rather than a new colour. */
    --bx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --bx-glow-1: rgba(88, 96, 148, 0.22);
    --bx-glow-2: rgba(126, 112, 168, 0.16);
    --bx-glow-3: rgba(64, 92, 132, 0.18);
}

/* ====== Base overrides for CMS body ====== */
body.bxhorizon {
    background-color: var(--bx-bg) !important;
    color: var(--bx-text-primary);
    font-family: var(--bx-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.bxhorizon ::selection {
    background-color: var(--bx-text-primary);
    color: var(--bx-bg);
}

/* ====== Typography ====== */
body.bxhorizon h1,
body.bxhorizon h2,
body.bxhorizon h3,
body.bxhorizon h4,
body.bxhorizon h5,
body.bxhorizon h6 {
    font-family: var(--bx-font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bx-text-primary);
}

body.bxhorizon p {
    color: var(--bx-text-secondary);
}

body.bxhorizon a {
    color: var(--bx-text-primary);
    transition: var(--bx-transition);
}

body.bxhorizon a:hover {
    color: var(--bx-text-secondary);
    text-decoration: none;
}

.bx-text-gradient {
    background: linear-gradient(180deg, #FFFFFF 0%, #71717A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====== Header / Navbar ====== */
body.bxhorizon .bx-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 1.5rem 0;
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bx-border);
    transition: var(--bx-transition);
}

body.bxhorizon .bx-header.scrolled {
    padding: 1rem 0;
    background: rgba(5, 5, 5, 0.95);
}

body.bxhorizon .bx-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.bxhorizon .bx-header .logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

body.bxhorizon .bx-header .navbar-nav {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

body.bxhorizon .bx-header .navbar-nav li a {
    color: var(--bx-text-secondary) !important;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--bx-transition);
    padding: 0;
    background: none;
}

body.bxhorizon .bx-header .navbar-nav li a:hover,
body.bxhorizon .bx-header .navbar-nav li a.active {
    color: var(--bx-text-primary) !important;
}

body.bxhorizon .bx-header .navbar-toggler {
    border: 1px solid var(--bx-border);
    color: var(--bx-text-primary);
    padding: 0.5rem 0.75rem;
}

body.bxhorizon .bx-header .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.bxhorizon .bx-header .navbar-collapse {
    background: transparent;
}

body.bxhorizon .bx-header .bx-btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: var(--bx-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bx-bg);
    background-color: var(--bx-text-primary);
    text-decoration: none;
    border: 1px solid var(--bx-text-primary);
    transition: var(--bx-transition);
}

body.bxhorizon .bx-header .bx-btn-header:hover {
    background-color: transparent;
    color: var(--bx-text-primary);
}

/* ====== Buttons ====== */
body.bxhorizon .bx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-family: var(--bx-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bx-bg);
    background-color: var(--bx-text-primary);
    text-decoration: none;
    border: 1px solid var(--bx-text-primary);
    cursor: pointer;
    transition: var(--bx-transition);
    border-radius: 0;
}

body.bxhorizon .bx-btn:hover {
    background-color: transparent;
    color: var(--bx-text-primary);
}

body.bxhorizon .bx-btn-outline {
    background-color: transparent;
    color: var(--bx-text-primary);
}

body.bxhorizon .bx-btn-outline:hover {
    background-color: var(--bx-text-primary);
    color: var(--bx-bg);
}

/* ====== Hero Section ====== */
body.bxhorizon .bx-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    background: radial-gradient(circle at 50% 0%, #1a1a24 0%, var(--bx-bg) 70%);
    position: relative;
    overflow: hidden;
}

body.bxhorizon .bx-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(var(--bx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--bx-border) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.2;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

body.bxhorizon .bx-hero .container {
    position: relative;
    z-index: 1;
}

body.bxhorizon .bx-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

body.bxhorizon .bx-hero h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    margin-bottom: 1.5rem;
}

body.bxhorizon .bx-hero p {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--bx-text-secondary);
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== Philosophy / Blockquote Section ====== */
body.bxhorizon .bx-philosophy {
    background-color: var(--bx-bg);
    text-align: center;
    padding: 8rem 0;
}

body.bxhorizon .bx-philosophy blockquote,
body.bxhorizon .bx-philosophy .bx-blockquote {
    font-family: var(--bx-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.3;
    max-width: 1000px;
    margin: 0 auto 2rem;
    color: var(--bx-text-primary);
    border: none;
    padding: 0;
}

body.bxhorizon .bx-philosophy-text {
    color: var(--bx-text-secondary);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ====== Cards / Structures Section ====== */
body.bxhorizon .bx-structures {
    background-color: var(--bx-surface);
    border-top: 1px solid var(--bx-border);
    border-bottom: 1px solid var(--bx-border);
    padding: 8rem 0;
}

body.bxhorizon .bx-section-header {
    margin-bottom: 4rem;
}

body.bxhorizon .bx-section-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
}

body.bxhorizon .bx-section-header p {
    color: var(--bx-text-secondary);
}

body.bxhorizon .bx-card {
    background: var(--bx-bg);
    border: 1px solid var(--bx-border);
    padding: 3rem 2rem;
    transition: var(--bx-transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

body.bxhorizon .bx-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    opacity: 0;
    transition: var(--bx-transition);
    pointer-events: none;
}

body.bxhorizon .bx-card:hover {
    border-color: #52525b;
    transform: translateY(-5px);
}

body.bxhorizon .bx-card:hover::after {
    opacity: 1;
}

body.bxhorizon .bx-card-number {
    font-family: var(--bx-font-heading);
    font-size: 0.875rem;
    color: var(--bx-text-secondary);
    margin-bottom: 2rem;
    display: block;
}

body.bxhorizon .bx-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

body.bxhorizon .bx-card p {
    color: var(--bx-text-secondary);
    font-size: 0.95rem;
}

/* ====== Differentiation Section ====== */
body.bxhorizon .bx-differentiation {
    padding: 10rem 0;
}

body.bxhorizon .bx-diff-text h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    margin-bottom: 2rem;
}

body.bxhorizon .bx-diff-text p {
    color: var(--bx-text-secondary);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

body.bxhorizon .bx-diff-visual {
    position: relative;
    height: 500px;
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.bxhorizon .bx-diff-visual::before,
body.bxhorizon .bx-diff-visual::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
}

body.bxhorizon .bx-diff-visual::before {
    width: 300px;
    height: 300px;
    animation: bxPulse 4s infinite alternate;
}

body.bxhorizon .bx-diff-visual::after {
    width: 500px;
    height: 500px;
    animation: bxPulse 4s infinite alternate-reverse;
}

@keyframes bxPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 1; }
}

/* ====== Marquee Section ====== */
body.bxhorizon .bx-marquee {
    padding: 4rem 0;
    background: var(--bx-text-primary);
    color: var(--bx-bg);
    overflow: hidden;
    white-space: nowrap;
}

body.bxhorizon .bx-marquee-content {
    display: inline-block;
    animation: bxMarquee 20s linear infinite;
    font-family: var(--bx-font-heading);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bx-bg);
}

body.bxhorizon .bx-marquee-content span {
    margin: 0 2rem;
}

@keyframes bxMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ====== Contact / CTA Section ====== */
body.bxhorizon .bx-contact {
    background-color: var(--bx-surface);
    border-top: 1px solid var(--bx-border);
    padding: 8rem 0;
    /* Fixed header would cover the heading when jumping to #contato */
    scroll-margin-top: 100px;
}

/* Invisible alias anchors (e.g. #diagnostico) */
body.bxhorizon .bx-anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
    height: 0;
}

body.bxhorizon .bx-contact-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

body.bxhorizon .bx-contact h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
    text-align: center;
}

body.bxhorizon .bx-contact > .container > p {
    text-align: center;
    color: var(--bx-text-secondary);
    margin-bottom: 3rem;
}

body.bxhorizon .bx-form-group {
    margin-bottom: 2rem;
    position: relative;
}

body.bxhorizon .bx-form-group input,
body.bxhorizon .bx-form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bx-border);
    padding: 1rem 0;
    color: var(--bx-text-primary);
    font-family: var(--bx-font-body);
    font-size: 1rem;
    transition: var(--bx-transition);
    border-radius: 0;
}

body.bxhorizon .bx-form-group input:focus,
body.bxhorizon .bx-form-group textarea:focus {
    outline: none;
    border-bottom-color: var(--bx-text-primary);
    box-shadow: none;
}

body.bxhorizon .bx-form-group label {
    position: absolute;
    top: 1rem;
    left: 0;
    color: var(--bx-text-secondary);
    pointer-events: none;
    transition: var(--bx-transition);
    font-size: 1rem;
}

body.bxhorizon .bx-form-group input:focus ~ label,
body.bxhorizon .bx-form-group input:not(:placeholder-shown) ~ label,
body.bxhorizon .bx-form-group textarea:focus ~ label,
body.bxhorizon .bx-form-group textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    font-size: 0.75rem;
    color: var(--bx-text-primary);
}

body.bxhorizon .bx-submit-btn {
    width: 100%;
    margin-top: 1rem;
}

/* ====== Footer ====== */
body.bxhorizon .bx-footer {
    border-top: 1px solid var(--bx-border);
    background: var(--bx-bg);
    position: relative;
}

/* Footer Main: Logo + Widgets Grid */
body.bxhorizon .bx-footer-main {
    padding: 4rem 0 3rem;
}

body.bxhorizon .bx-footer-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: start;
}

/* Footer Brand (left column) */
body.bxhorizon .bx-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.bxhorizon .bx-footer-logo {
    display: inline-block;
    text-decoration: none;
}

body.bxhorizon .bx-footer-logo-img,
body.bxhorizon .bx-footer-logo img {
    height: 36px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    display: block;
}

body.bxhorizon .bx-footer-tagline {
    color: var(--bx-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}

/* Footer Nav Area (right columns - CMS widgets) */
body.bxhorizon .bx-footer-nav-area {
    display: flex;
    justify-content: flex-end;
}

body.bxhorizon .bx-footer-nav-area .row {
    width: 100%;
}

body.bxhorizon .bx-footer-nav-area .footer-widget,
body.bxhorizon .bx-footer-nav-area .widget {
    margin-bottom: 0 !important;
}

body.bxhorizon .bx-footer-nav-area .mb-24 {
    margin-bottom: 0 !important;
}

body.bxhorizon .bx-footer-nav-area .footerTittle,
body.bxhorizon .bx-footer-nav-area .footer-tittle h4,
body.bxhorizon .bx-footer-nav-area h4 {
    font-family: var(--bx-font-heading) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--bx-text-primary) !important;
    margin-bottom: 1.25rem !important;
}

/* Footer links styling (covers all CMS widget link patterns) */
body.bxhorizon .bx-footer-nav-area .listing,
body.bxhorizon .bx-footer-nav-area ul.menu-items,
body.bxhorizon .bx-footer-nav-area ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The nav widget is a horizontal row at every width — right-aligned
   against the brand column on desktop, centred under it once the grid
   collapses. Breakpoint blocks further down only tune spacing and
   touch targets; the layout itself is declared once, here. */
body.bxhorizon .bx-footer-nav-area .listing,
body.bxhorizon .bx-footer-nav-area ul.menu-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end;
    column-gap: 2rem;
    row-gap: 0.25rem;
}

/* A parent item flows its children into the same row instead of
   opening a nested stack under it. */
body.bxhorizon .bx-footer-nav-area .listing > li,
body.bxhorizon .bx-footer-nav-area ul.menu-items > li,
body.bxhorizon .bx-footer-nav-area .listing .sub-menu,
body.bxhorizon .bx-footer-nav-area .listing .sub-menu > li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 2rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.bxhorizon .bx-footer-nav-area .listing li a,
body.bxhorizon .bx-footer-nav-area ul.menu-items li a,
body.bxhorizon .bx-footer-nav-area li a,
body.bxhorizon .bx-footer-nav-area .singleLinks,
body.bxhorizon .bx-footer-nav-area .menuArrow {
    color: var(--bx-text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    transition: var(--bx-transition) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    white-space: normal;
}

/* No translateX on hover any more: it was paired with a vertical list,
   and sliding a link sideways inside a horizontal row reads as the row
   shifting. Colour alone carries the state. */
body.bxhorizon .bx-footer-nav-area .listing li a:hover,
body.bxhorizon .bx-footer-nav-area ul.menu-items li a:hover,
body.bxhorizon .bx-footer-nav-area li a:hover,
body.bxhorizon .bx-footer-nav-area .singleLinks:hover,
body.bxhorizon .bx-footer-nav-area .menuArrow:hover {
    color: var(--bx-text-primary) !important;
    transform: none;
}

body.bxhorizon .bx-footer-nav-area .current-menu-item > a {
    color: var(--bx-text-primary) !important;
}

/* One widget per line, full width. The CMS ships .col-xxl-2 (16.6%) on
   the nav widget, and that narrow column is what forced the links into
   a vertical stack. Giving each widget the full line — rather than
   letting the columns size to their content — keeps the result the same
   at every breakpoint and for any number of widgets, so the mobile
   block below only has to re-point the alignment, not re-lay it out. */
body.bxhorizon .bx-footer-nav-area .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* Second and later widgets need air between the rows. */
body.bxhorizon .bx-footer-nav-area .row > [class*="col-"] + [class*="col-"] {
    margin-top: 1.25rem;
}

body.bxhorizon .bx-footer-nav-area .footer-tittle,
body.bxhorizon .bx-footer-nav-area .footer-widget {
    text-align: right;
}

/* Footer social links in widgets */
body.bxhorizon .bx-footer-nav-area .footer-social a {
    color: var(--bx-text-secondary) !important;
    font-size: 1rem !important;
    margin-right: 0.75rem;
    transition: var(--bx-transition);
}

body.bxhorizon .bx-footer-nav-area .footer-social a:hover {
    color: var(--bx-text-primary) !important;
}

/* Footer widget logo (About Us widget) */
body.bxhorizon .bx-footer-nav-area .footer-logo img {
    height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-bottom: 0.5rem;
}

body.bxhorizon .bx-footer-nav-area .footer-pera p {
    color: var(--bx-text-secondary) !important;
    font-size: 0.85rem !important;
    line-height: 1.6;
}

/* ====== Footer Bottom Bar ====== */
body.bxhorizon .bx-footer-bottom {
    border-top: 1px solid var(--bx-border);
    padding: 1.5rem 0;
}

body.bxhorizon .bx-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Copyright text — #52525b on #050505 is ~3.4:1, under the 4.5:1 minimum,
   and 12px was too small to read comfortably. */
body.bxhorizon .bx-footer-copy p {
    color: var(--bx-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.01em;
}

/* Powered By */
body.bxhorizon .bx-powered-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.bxhorizon .bx-powered-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none !important;
    transition: var(--bx-transition);
}

body.bxhorizon .bx-powered-badge:hover {
    text-decoration: none !important;
    opacity: 1;
}

body.bxhorizon .bx-powered-badge span {
    color: #8b8b93;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Height stays capped (the source files are large and would blow up the
   footer without it) — just raised to a legible size. */
body.bxhorizon .bx-powered-badge img {
    height: 20px !important;
    max-height: 20px !important;
    width: auto !important;
    max-width: 92px !important;
    object-fit: contain !important;
    opacity: 0.75;
    transition: var(--bx-transition);
    display: block !important;
}

body.bxhorizon .bx-powered-badge:hover img {
    opacity: 1;
}

body.bxhorizon .bx-powered-pipe {
    color: #3f3f46;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}

/* ====== Breadcrumb ====== */
body.bxhorizon .bx-breadcrumb-section {
    background: var(--bx-surface);
    padding: 8rem 0 4rem;
    margin-top: 80px;
    border-bottom: 1px solid var(--bx-border);
    position: relative;
}

body.bxhorizon .bx-breadcrumb-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(var(--bx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--bx-border) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    pointer-events: none;
}

body.bxhorizon .bx-breadcrumb-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

body.bxhorizon .bx-breadcrumb-section .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

body.bxhorizon .bx-breadcrumb-section .breadcrumb-item {
    color: var(--bx-text-secondary);
    font-size: 0.875rem;
}

body.bxhorizon .bx-breadcrumb-section .breadcrumb-item a {
    color: var(--bx-text-secondary);
}

body.bxhorizon .bx-breadcrumb-section .breadcrumb-item a:hover {
    color: var(--bx-text-primary);
}

body.bxhorizon .bx-breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bx-text-secondary);
}

/* ====== Success Overlay ====== */
body.bxhorizon .bx-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.bxhorizon .bx-success-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.bxhorizon .bx-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--bx-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: var(--bx-text-primary);
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
}

body.bxhorizon .bx-success-overlay.active .bx-success-icon {
    transform: scale(1);
}

body.bxhorizon .bx-success-overlay h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.4s;
}

body.bxhorizon .bx-success-overlay p {
    color: var(--bx-text-secondary);
    text-align: center;
    max-width: 400px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.5s;
}

body.bxhorizon .bx-success-overlay.active h3,
body.bxhorizon .bx-success-overlay.active p {
    transform: translateY(0);
    opacity: 1;
}

body.bxhorizon .bx-close-success {
    margin-top: 2rem;
    cursor: pointer;
    color: var(--bx-text-secondary);
    text-decoration: underline;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.5s ease 0.6s;
}

body.bxhorizon .bx-success-overlay.active .bx-close-success {
    opacity: 1;
}

/* ====== Scroll Animations ====== */
body.bxhorizon .bx-animate-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.bxhorizon .bx-animate-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================================
   MOTION — the home page's sense of life
   ---------------------------------------------------------------------
   The home was static in three different ways, and each needs a
   different answer:

     ambient  — nothing moved while the visitor stood still. The hero
                now drifts (aurora + grid) and the differentiation
                visual runs as a live system rather than two rings.
     reveal   — every block faded in as one lump. Blocks now stagger
                their own children, so a heading lands before its
                paragraph and the eye is led down the page.
     response — hover did almost nothing. Cards track the cursor,
                buttons lift, the marquee yields when pointed at.

   All of it is transform/opacity only (compositor-friendly), and all of
   it is switched off under prefers-reduced-motion at the end of the
   block.
   ===================================================================== */

/* ---------- Hero: ambient aurora ----------
   Three heavily blurred blobs drifting on long, mutually prime periods
   so the loop never visibly repeats. Sits under .bx-hero .container
   (z-index 1) and above the grid. */
body.bxhorizon .bx-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Clips the drifting blobs itself. Letting them bleed past this box
       and relying on .bx-hero to clip them looks identical but grows the
       document's scrollable width, which body's overflow-x: hidden then
       has to paper over — and does not, reliably, on iOS Safari. */
    overflow: hidden;
}

body.bxhorizon .bx-hero-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

body.bxhorizon .bx-hero-aurora span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    top: 6%;
    left: 8%;
    background: var(--bx-glow-1);
    animation: bxDrift1 26s ease-in-out infinite alternate;
}

body.bxhorizon .bx-hero-aurora span:nth-child(2) {
    width: 38vw;
    height: 38vw;
    top: 18%;
    right: 6%;
    background: var(--bx-glow-2);
    animation: bxDrift2 31s ease-in-out infinite alternate;
}

body.bxhorizon .bx-hero-aurora span:nth-child(3) {
    width: 30vw;
    height: 30vw;
    bottom: 4%;
    left: 38%;
    background: var(--bx-glow-3);
    animation: bxDrift3 37s ease-in-out infinite alternate;
}

@keyframes bxDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(12vw, 6vh, 0) scale(1.18); }
}

@keyframes bxDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.1); }
    100% { transform: translate3d(-10vw, 9vh, 0) scale(0.9); }
}

@keyframes bxDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(0.95); }
    100% { transform: translate3d(6vw, -7vh, 0) scale(1.25); }
}

/* ---------- Hero: the grid drifts ----------
   Translating the whole layer is compositor-only, where animating
   background-position would repaint every frame. The layer is inset
   past the viewport edges and travels exactly one 50px cell, so the
   loop is seamless and the edges never come into view. */
body.bxhorizon .bx-hero::before {
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    will-change: transform;
    animation: bxGridDrift 32s linear infinite;
}

@keyframes bxGridDrift {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(50px, 50px, 0); }
}

/* ---------- Hero: headline lands word by word ----------
   JS wraps each word of the h1. The gradient lives on the h1 and is
   clipped to its text, so the words carry no colour of their own —
   only opacity, offset and blur. */
body.bxhorizon .bx-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.42em, 0);
    filter: blur(10px);
    transition:
        opacity 0.85s var(--bx-ease-out),
        transform 0.85s var(--bx-ease-out),
        filter 0.85s var(--bx-ease-out);
    transition-delay: calc(var(--bx-i, 0) * 42ms);
}

body.bxhorizon .is-visible .bx-word,
body.bxhorizon .bx-word.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------- Reveal: blocks stagger their own children ----------
   JS tags the containers listed in bxhorizon-main.js and numbers their
   children through --bx-i. The container itself stops fading (the
   children carry the reveal now) so the two don't compound into a
   muddy double fade. */
body.bxhorizon .bx-animate-up.bx-stagger {
    opacity: 1;
    transform: none;
}

body.bxhorizon .bx-stagger > * {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 0.85s var(--bx-ease-out),
        transform 0.85s var(--bx-ease-out);
    transition-delay: calc(var(--bx-i, 0) * 90ms);
}

body.bxhorizon .bx-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

/* The hero headline is split into words and runs its own ~420ms cascade,
   so the paragraph and the CTA are held back to start after it rather
   than landing while the headline is still assembling. */
body.bxhorizon .bx-hero-content.bx-stagger > * {
    transition-delay: calc(380ms + var(--bx-i, 0) * 140ms);
}

/* The split headline animates per word, so its own block-level reveal
   would fight the word timing. */
body.bxhorizon .bx-stagger > .bx-split {
    opacity: 1;
    transform: none;
    transition: none;
}

/* The two halves of the differentiation section come in from their own
   sides rather than both rising — it reads as the split it is. Only
   above 992px, where .col-lg-6 actually puts them side by side; stacked
   on a phone there are no sides to come from, and the pre-reveal offset
   would push the right column past the viewport and hand the page a
   horizontal scroll until the section was revealed.

   The section clips regardless: between 992px and ~1176px the container
   is already flush with the viewport, so the offset has nowhere to go. */
body.bxhorizon .bx-differentiation {
    overflow: hidden;
}

@media (min-width: 992px) {
    body.bxhorizon .bx-differentiation .bx-diff-text.bx-stagger > * {
        transform: translate3d(-28px, 0, 0);
    }

    body.bxhorizon .bx-differentiation .bx-diff-visual {
        transform: translate3d(36px, 0, 0) scale(0.97);
    }

    body.bxhorizon .bx-differentiation .bx-diff-visual.is-visible {
        transform: none;
    }
}

/* ---------- Response: cards track the cursor ----------
   --bx-mx / --bx-my are written by JS on pointermove. The fallback
   values keep the gradient sane before the first move and on touch,
   where the spotlight simply never turns on. */
body.bxhorizon .bx-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        320px circle at var(--bx-mx, 50%) var(--bx-my, 0%),
        rgba(255, 255, 255, 0.08),
        transparent 62%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

body.bxhorizon .bx-card:hover::before {
    opacity: 1;
}

/* Keep the card's own content above both overlay layers. */
body.bxhorizon .bx-card > * {
    position: relative;
    z-index: 1;
}

body.bxhorizon .bx-card:hover {
    border-color: #6b6b76;
    transform: translate3d(0, -6px, 0);
}

/* The index number is the one bit of chrome on a card — let it react. */
body.bxhorizon .bx-card-number {
    transition: var(--bx-transition);
}

body.bxhorizon .bx-card:hover .bx-card-number {
    color: var(--bx-text-primary);
    letter-spacing: 0.08em;
}

/* ---------- Response: buttons ---------- */
body.bxhorizon .bx-btn:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 32px -12px rgba(255, 255, 255, 0.35);
}

body.bxhorizon .bx-btn:active {
    transform: translate3d(0, 0, 0);
    box-shadow: none;
}

body.bxhorizon .bx-header .bx-btn-header:hover {
    transform: translate3d(0, -2px, 0);
}

/* ---------- Response: the marquee yields when pointed at ---------- */
body.bxhorizon .bx-marquee-content {
    will-change: transform;
}

body.bxhorizon .bx-marquee:hover .bx-marquee-content {
    animation-play-state: paused;
}

/* ---------- Differentiation visual: a system, not two rings ----------
   The existing ::before/::after rings keep pulsing; on top of them a
   conic sweep rotates like a radar and two dots orbit the centre at
   different radii and speeds, so the panel reads as something running
   rather than a decorative box. */
body.bxhorizon .bx-diff-visual {
    transition:
        opacity 0.85s var(--bx-ease-out),
        transform 0.85s var(--bx-ease-out);
}

body.bxhorizon .bx-diff-sweep {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.05) 32deg,
        transparent 72deg);
    animation: bxSpin 14s linear infinite;
    will-change: transform;
    pointer-events: none;
}

body.bxhorizon .bx-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.07);
    animation: bxSpin 18s linear infinite;
    will-change: transform;
    pointer-events: none;
}

body.bxhorizon .bx-orbit i {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--bx-text-primary);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.5);
}

body.bxhorizon .bx-orbit-1 {
    width: 300px;
    height: 300px;
}

body.bxhorizon .bx-orbit-2 {
    width: 420px;
    height: 420px;
    animation-duration: 27s;
    animation-direction: reverse;
}

body.bxhorizon .bx-orbit-2 i {
    width: 4px;
    height: 4px;
    margin-left: -2px;
    top: -2px;
    opacity: 0.7;
}

body.bxhorizon .bx-diff-core {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bx-text-primary);
    box-shadow: 0 0 24px 4px rgba(255, 255, 255, 0.35);
    animation: bxCorePulse 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bxSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* The visual drops to 300px tall on tablets and phones, where rings and
   orbits drawn at desktop size would be cropped into unreadable arcs. */
@media (max-width: 991px) {
    body.bxhorizon .bx-diff-visual::before {
        width: 170px;
        height: 170px;
    }

    body.bxhorizon .bx-diff-visual::after {
        width: 260px;
        height: 260px;
    }

    body.bxhorizon .bx-diff-sweep {
        width: 280px;
        height: 280px;
    }

    body.bxhorizon .bx-orbit-1 {
        width: 160px;
        height: 160px;
    }

    body.bxhorizon .bx-orbit-2 {
        width: 240px;
        height: 240px;
    }
}

/* A 90px blur reads as a soft glow across a desktop hero; on a 390px
   screen the same radius washes the blobs out into flat haze. */
@media (max-width: 768px) {
    body.bxhorizon .bx-hero-aurora span {
        filter: blur(56px);
    }
}

@keyframes bxCorePulse {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.5); opacity: 1; }
}

/* ---------- Scroll progress ----------
   Sits on the header's bottom border. Scaled rather than resized, so
   the browser never lays out during a scroll. */
body.bxhorizon .bx-scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #52525b, var(--bx-text-primary));
    will-change: transform;
    pointer-events: none;
}

/* ---------- Reduced motion ----------
   Everything above is decoration. Under this setting the page keeps its
   final state and drops the movement entirely — including the reveals,
   which must land visible rather than never firing. */
@media (prefers-reduced-motion: reduce) {
    body.bxhorizon .bx-hero-aurora span,
    body.bxhorizon .bx-hero::before,
    body.bxhorizon .bx-marquee-content,
    body.bxhorizon .bx-diff-sweep,
    body.bxhorizon .bx-orbit,
    body.bxhorizon .bx-diff-core,
    body.bxhorizon .bx-diff-visual::before,
    body.bxhorizon .bx-diff-visual::after {
        animation: none !important;
    }

    body.bxhorizon .bx-animate-up,
    body.bxhorizon .bx-stagger > *,
    body.bxhorizon .bx-word,
    body.bxhorizon .bx-diff-visual {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    body.bxhorizon .bx-card:hover,
    body.bxhorizon .bx-btn:hover,
    body.bxhorizon .bx-header .bx-btn-header:hover {
        transform: none;
    }

    body.bxhorizon .bx-scroll-progress {
        display: none;
    }
}

/* ====== Section general spacing ====== */
body.bxhorizon .bx-section {
    padding: 8rem 0;
    position: relative;
}

/* ====== CMS Page Builder Overrides ====== */
body.bxhorizon .section-bg-1 {
    background-color: var(--bx-surface) !important;
}

body.bxhorizon .padding-top-100 {
    padding-top: 100px;
}

body.bxhorizon .padding-bottom-70 {
    padding-bottom: 70px;
}

/* Hide CMS default cursors and progress on bxhorizon */
body.bxhorizon .mouseCursor {
    display: none;
}

body.bxhorizon .progressParent {
    display: none;
}

/* ====== Navbar Layout (mobile-first) ====== */
body.bxhorizon .bx-header .nav-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.bxhorizon .bx-header .responsive-mobile-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

body.bxhorizon .bx-header .responsive-mobile-menu .logo-wrapper {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

body.bxhorizon .bx-header .responsive-mobile-menu .logo-wrapper .logo img {
    max-height: 36px;
    width: auto;
}

/* Desktop: hide hamburger, inline the menu and CTA */
@media (min-width: 992px) {
    body.bxhorizon .bx-header .responsive-mobile-menu {
        width: auto;
    }
    body.bxhorizon .bx-header .responsive-mobile-menu .navbar-toggler {
        display: none;
    }
    body.bxhorizon .bx-header .navbar-collapse {
        flex: 1;
        justify-content: center;
    }
}

/* ====== Mobile Menu Overrides ====== */
@media (max-width: 991px) {
    body.bxhorizon .bx-header .navbar-collapse {
        background: var(--bx-bg);
        padding: 1.5rem;
        border-top: 1px solid var(--bx-border);
        border-bottom: 1px solid var(--bx-border);
        margin-top: 1rem;
        width: 100%;
    }

    body.bxhorizon .bx-header .navbar-nav {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    body.bxhorizon .bx-header .navbar-nav li {
        width: 100%;
    }

    body.bxhorizon .bx-header .navbar-nav li a {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
    }

    body.bxhorizon .bx-header .bx-btn-header {
        display: none;
    }

    body.bxhorizon .bx-diff-visual {
        height: 300px;
    }

    /* Show the CTA inside the collapsed menu on mobile */
    body.bxhorizon .bx-header .navbar-right-content.show-nav-content {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body.bxhorizon .bx-section {
        padding: 5rem 0;
    }

    body.bxhorizon .bx-hero {
        padding-top: 80px;
    }

    body.bxhorizon .bx-differentiation {
        padding: 5rem 0;
    }

    /* The footer was ~64px/48px of padding around a 5-row link stack —
       most of a phone viewport spent on chrome. */
    body.bxhorizon .bx-footer-main {
        padding: 2.75rem 0 2rem;
    }

    body.bxhorizon .bx-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.bxhorizon .bx-footer-brand {
        align-items: center;
        text-align: center;
        gap: 0.875rem;
    }

    body.bxhorizon .bx-footer-tagline {
        max-width: 34ch;
    }

    body.bxhorizon .bx-footer-nav-area {
        justify-content: center;
    }

    body.bxhorizon .bx-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

/* =====================================================================
   MOBILE FOOTER NAV — centred row, touch-sized targets
   ---------------------------------------------------------------------
   The row layout itself is declared with the base footer rules; this
   block only re-points it once .bx-footer-grid collapses to a single
   column: right-aligned becomes centred, and the desktop column-gap
   gives way to padding on the links themselves so every target clears
   44px (Apple HIG / WCAG 2.5.5) and the space between two labels is
   still part of a link rather than dead footer background.

   The markup is the CMS widget's, not the theme's:

     .col-*  >  .widget  >  .footer-widget  >  .footer-tittle
             >  h4.footerTittle  +  ul.listing > li > a.menuArrow

   which is also why these resets need !important — the rules they
   override are themselves !important.
   ===================================================================== */
@media (max-width: 768px) {
    body.bxhorizon .bx-footer-nav-area .footer-tittle,
    body.bxhorizon .bx-footer-nav-area .footer-widget {
        text-align: center;
    }

    /* Heading is a label for the row now, not a column header. */
    body.bxhorizon .bx-footer-nav-area .footerTittle,
    body.bxhorizon .bx-footer-nav-area .footer-tittle h4,
    body.bxhorizon .bx-footer-nav-area h4 {
        font-size: 0.6875rem !important;
        letter-spacing: 0.14em !important;
        color: var(--bx-text-secondary) !important;
        margin-bottom: 0.625rem !important;
    }

    /* Drop an empty heading rather than leave its margin behind. */
    body.bxhorizon .bx-footer-nav-area .footerTittle:empty {
        display: none !important;
    }

    /* row-gap stays 0 because the links' own 44px min-height already
       spaces wrapped lines. */
    body.bxhorizon .bx-footer-nav-area .listing,
    body.bxhorizon .bx-footer-nav-area ul.menu-items,
    body.bxhorizon .bx-footer-nav-area .listing > li,
    body.bxhorizon .bx-footer-nav-area .listing .sub-menu,
    body.bxhorizon .bx-footer-nav-area .listing .sub-menu > li {
        justify-content: center !important;
        column-gap: 0.25rem;
        row-gap: 0;
    }

    body.bxhorizon .bx-footer-nav-area .listing li a,
    body.bxhorizon .bx-footer-nav-area ul.menu-items li a,
    body.bxhorizon .bx-footer-nav-area li a,
    body.bxhorizon .bx-footer-nav-area .menuArrow {
        min-height: 44px;
        padding: 0 0.6875rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.2;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    body.bxhorizon .bx-footer-nav-area .listing li a:active,
    body.bxhorizon .bx-footer-nav-area li a:active,
    body.bxhorizon .bx-footer-nav-area .menuArrow:active {
        color: var(--bx-text-primary) !important;
        opacity: 0.7;
    }

    /* Social icons sit in the same widget area and are already inline —
       just centre them and give them the same target size. */
    body.bxhorizon .bx-footer-nav-area .footer-social {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    body.bxhorizon .bx-footer-nav-area .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-right: 0 !important;
    }
}

/* Narrow phones (360px Androids, iPhone SE 2/3). Dropping the column-gap
   and leaning on the links' own padding keeps a five-item menu on one
   row down to 360px, and leaves the tap targets flush against each
   other instead of separated by dead footer background. */
@media (max-width: 400px) {
    body.bxhorizon .bx-footer-nav-area .listing,
    body.bxhorizon .bx-footer-nav-area ul.menu-items,
    body.bxhorizon .bx-footer-nav-area .listing > li,
    body.bxhorizon .bx-footer-nav-area .listing .sub-menu,
    body.bxhorizon .bx-footer-nav-area .listing .sub-menu > li {
        column-gap: 0;
    }

    body.bxhorizon .bx-footer-nav-area .listing li a,
    body.bxhorizon .bx-footer-nav-area ul.menu-items li a,
    body.bxhorizon .bx-footer-nav-area li a,
    body.bxhorizon .bx-footer-nav-area .menuArrow {
        padding: 0 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* iPhone SE (1st gen) and other 320px screens. One more step down so the
   row still fits rather than wrapping a single orphan label onto its own
   line; the 44px target height is deliberately left alone. */
@media (max-width: 359px) {
    body.bxhorizon .bx-footer-nav-area .listing li a,
    body.bxhorizon .bx-footer-nav-area ul.menu-items li a,
    body.bxhorizon .bx-footer-nav-area li a,
    body.bxhorizon .bx-footer-nav-area .menuArrow {
        padding: 0 0.375rem !important;
        font-size: 0.8125rem !important;
    }
}

/* =====================================================================
   INNER PAGES (Blog, Service, Knowledgebase...) — CMS core templates
   ---------------------------------------------------------------------
   These pages come from the CMS/module blades, not from the theme, so
   they ship generic classes (singleBlog-*, searchBox-wrapper, widget,
   cartTop, selectTag, itemReview...) styled for LIGHT themes. On the
   BXHorizon dark background that meant dark-on-dark text (invisible)
   and no spacing rules (everything glued together). Everything below
   re-skins those classes for the dark surface.
   ===================================================================== */

/* ---------- Section rhythm ---------- */
body.bxhorizon .section-padding {
    padding: 100px 0;
}

body.bxhorizon .blogDetails,
body.bxhorizon .servicesArea,
body.bxhorizon .blog-content-area {
    background-color: var(--bx-bg);
}

body.bxhorizon .blogDetails .row > [class*="col-"] {
    margin-bottom: 8px;
}

/* ---------- Readable defaults for CMS markup ---------- */
body.bxhorizon .blogDetails li,
body.bxhorizon .blogDetails span,
body.bxhorizon .blogDetails strong,
body.bxhorizon .blogDetails label,
body.bxhorizon .widget li,
body.bxhorizon .widget span,
body.bxhorizon .widget p {
    color: var(--bx-text-secondary);
}

body.bxhorizon .tittle,
body.bxhorizon .small-tittle,
body.bxhorizon .itemsTittle,
body.bxhorizon .footerTittle,
body.bxhorizon .footer-tittle .tittle {
    color: var(--bx-text-primary);
}

body.bxhorizon .pera {
    color: var(--bx-text-secondary);
    line-height: 1.7;
}

/* ---------- Article body (raw HTML from the editor) ---------- */
body.bxhorizon .singleBlog-details + *,
body.bxhorizon .blogDetails .col-xxl-8 > p,
body.bxhorizon .blogDetails .col-xxl-8 > ul,
body.bxhorizon .blogDetails .col-xxl-8 > ol,
body.bxhorizon .blogDetails .col-xxl-8 > blockquote,
body.bxhorizon .blogDetails .col-xxl-8 > h1,
body.bxhorizon .blogDetails .col-xxl-8 > h2,
body.bxhorizon .blogDetails .col-xxl-8 > h3,
body.bxhorizon .blogDetails .col-xxl-8 > h4 {
    color: var(--bx-text-secondary);
}

body.bxhorizon .blogDetails .col-xxl-8 > h1,
body.bxhorizon .blogDetails .col-xxl-8 > h2,
body.bxhorizon .blogDetails .col-xxl-8 > h3,
body.bxhorizon .blogDetails .col-xxl-8 > h4 {
    color: var(--bx-text-primary);
    margin: 2.5rem 0 1rem;
}

body.bxhorizon .blogDetails .col-xxl-8 > h2 { font-size: 1.75rem; }
body.bxhorizon .blogDetails .col-xxl-8 > h3 { font-size: 1.375rem; }

body.bxhorizon .blogDetails .col-xxl-8 > p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

body.bxhorizon .blogDetails .col-xxl-8 ul,
body.bxhorizon .blogDetails .col-xxl-8 ol {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

body.bxhorizon .blogDetails .col-xxl-8 > ul li,
body.bxhorizon .blogDetails .col-xxl-8 > ol li {
    margin-bottom: 0.6rem;
    line-height: 1.7;
    list-style: inherit;
}

body.bxhorizon .blogDetails .col-xxl-8 blockquote {
    border-left: 2px solid var(--bx-text-primary);
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--bx-text-primary);
}

body.bxhorizon .blogDetails img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Featured image on the single post. donation-main-style.css gives
   `.imgEffect img` a resting transform: scale(1.02) which crops the
   edges of banner artwork — reset it here. */
body.bxhorizon .capImg,
body.bxhorizon .imgEffect {
    overflow: hidden;
    border-radius: 6px;
}

body.bxhorizon .capImg img,
body.bxhorizon .imgEffect img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    /* reset both variants — the other themes declare -webkit-transform too */
    -webkit-transform: none;
    transform: none;
    object-fit: contain;
}

body.bxhorizon .capImg img {
    margin-bottom: 2rem;
}

/* ---------- Post meta row (date / category / views / comments) ---------- */
body.bxhorizon .singleBlog-details .blogCaption .cartTop,
body.bxhorizon .blogCaption .cartTop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 0 0 1.25rem;
    margin: 0 0 1.75rem;
    border-bottom: 1px solid var(--bx-border);
    list-style: none;
}

body.bxhorizon .cartTop .listItmes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--bx-text-secondary);
}

body.bxhorizon .cartTop .listItmes a,
body.bxhorizon .cartTop .listItmes .icon {
    color: var(--bx-text-secondary);
}

body.bxhorizon .cartTop .listItmes a:hover {
    color: var(--bx-text-primary);
}

/* ---------- Tags ---------- */
body.bxhorizon .tagArea .selectTag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body.bxhorizon .tagArea .selectTag .listItem {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--bx-border);
    border-radius: 100px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--bx-text-secondary);
    background: var(--bx-surface);
    transition: var(--bx-transition);
}

body.bxhorizon .tagArea .selectTag a:hover .listItem {
    border-color: var(--bx-text-primary);
    color: var(--bx-text-primary);
}

/* ---------- Social share ---------- */
body.bxhorizon .footer-social ul,
body.bxhorizon .footer-social .social {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body.bxhorizon .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bx-border);
    border-radius: 50%;
    color: var(--bx-text-secondary);
    background: var(--bx-surface);
    transition: var(--bx-transition);
}

body.bxhorizon .footer-social a:hover {
    border-color: var(--bx-text-primary);
    color: var(--bx-text-primary);
}

/* ---------- Sidebar widgets ---------- */
body.bxhorizon .widget-area-wrapper .widget,
body.bxhorizon .searchBox-wrapper-sidebar,
body.bxhorizon .searchByTopic,
body.bxhorizon .popularServices-global {
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    border-radius: 8px;
    padding: 28px 24px;
    margin-bottom: 24px;
}

/* Scoped to the inner-page sidebars on purpose: the footer nav widget
   also renders .footerTittle inside a .widget, and an unscoped rule
   underlined the footer headings with a full-width divider. */
body.bxhorizon .widget-area-wrapper .widget .tittle,
body.bxhorizon .searchByTopic .tittle,
body.bxhorizon .popularServices-global .tittle,
body.bxhorizon .widget-area-wrapper .widget .footerTittle {
    font-family: var(--bx-font-heading);
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--bx-border);
    color: var(--bx-text-primary);
}

/* Search box */
body.bxhorizon .search-form,
body.bxhorizon .search-box {
    position: relative;
}

body.bxhorizon .search-box input,
body.bxhorizon .searchBox-wrapper input,
body.bxhorizon .keyup-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    background: var(--bx-bg);
    border: 1px solid var(--bx-border);
    border-radius: 4px;
    color: var(--bx-text-primary);
    font-family: var(--bx-font-body);
    font-size: 0.875rem;
    transition: var(--bx-transition);
}

body.bxhorizon .search-box input::placeholder,
body.bxhorizon .searchBox-wrapper input::placeholder {
    color: var(--bx-text-secondary);
    opacity: 0.7;
}

body.bxhorizon .search-box input:focus,
body.bxhorizon .searchBox-wrapper input:focus {
    outline: none;
    border-color: var(--bx-text-primary);
}

body.bxhorizon .search-box button,
body.bxhorizon .search-form button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--bx-text-secondary);
    padding: 8px 10px;
    cursor: pointer;
    transition: var(--bx-transition);
}

body.bxhorizon .search-box button:hover,
body.bxhorizon .search-form button:hover {
    color: var(--bx-text-primary);
}

/* Category list */
body.bxhorizon .category_item_in_sidebar,
body.bxhorizon .searchByTopic ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

body.bxhorizon .category_item_in_sidebar li,
body.bxhorizon .searchByTopic ul li {
    list-style: none;
    margin: 0;
    border-bottom: 1px solid var(--bx-border);
}

body.bxhorizon .category_item_in_sidebar li:last-child,
body.bxhorizon .searchByTopic ul li:last-child {
    border-bottom: 0;
}

body.bxhorizon .category_item_in_sidebar li a,
body.bxhorizon .searchByTopic ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 0.9375rem;
    color: var(--bx-text-secondary);
    transition: var(--bx-transition);
}

body.bxhorizon .category_item_in_sidebar li a:hover,
body.bxhorizon .searchByTopic ul li a:hover {
    color: var(--bx-text-primary);
    padding-left: 6px;
}

/* Popular posts */
body.bxhorizon .popularServices-global .itemsImg,
body.bxhorizon .popularServices-global .itemsImg img {
    border-radius: 4px;
    overflow: hidden;
}

body.bxhorizon .popularServices-global .itemsCaption {
    padding-left: 14px;
}

body.bxhorizon .popularServices-global .itemsTittle,
body.bxhorizon .popularServices-global .small-tittle {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--bx-text-primary);
}

body.bxhorizon .popularServices-global .itemsTittle:hover,
body.bxhorizon .popularServices-global .small-tittle:hover {
    opacity: 0.75;
}

body.bxhorizon .popularServices-global > div,
body.bxhorizon .popularServices-global .d-flex {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bx-border);
}

body.bxhorizon .popularServices-global > div:last-child,
body.bxhorizon .popularServices-global .d-flex:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* ---------- Comments + login form ---------- */
body.bxhorizon .itemReview,
body.bxhorizon .login-form,
body.bxhorizon .account-form {
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    border-radius: 8px;
    padding: 32px;
    margin-top: 2.5rem;
}

body.bxhorizon .comment-container,
body.bxhorizon .reply-container {
    background: var(--bx-surface-light) !important;
    border: 1px solid var(--bx-border);
    border-radius: 6px;
    padding: 20px !important;
    color: var(--bx-text-secondary);
}

body.bxhorizon .comment-container p,
body.bxhorizon .reply-container p {
    color: var(--bx-text-secondary);
    margin-bottom: 0;
}

/* ---------- Generic form controls on inner pages ---------- */
body.bxhorizon .blogDetails .form-control,
body.bxhorizon .blogDetails input[type="text"],
body.bxhorizon .blogDetails input[type="email"],
body.bxhorizon .blogDetails input[type="password"],
body.bxhorizon .blogDetails textarea,
body.bxhorizon .input-form input,
body.bxhorizon .input-form textarea {
    width: 100%;
    background: var(--bx-bg);
    border: 1px solid var(--bx-border);
    border-radius: 4px;
    color: var(--bx-text-primary);
    padding: 12px 16px;
    font-family: var(--bx-font-body);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    transition: var(--bx-transition);
}

body.bxhorizon .blogDetails .form-control:focus,
body.bxhorizon .input-form input:focus,
body.bxhorizon .input-form textarea:focus {
    outline: none;
    box-shadow: none;
    background: var(--bx-bg);
    color: var(--bx-text-primary);
    border-color: var(--bx-text-primary);
}

body.bxhorizon .blogDetails .form-control::placeholder,
body.bxhorizon .input-form input::placeholder,
body.bxhorizon .input-form textarea::placeholder {
    color: var(--bx-text-secondary);
    opacity: 0.7;
}

body.bxhorizon .blogDetails label,
body.bxhorizon .checkWrap,
body.bxhorizon .custom-control-label {
    color: var(--bx-text-secondary);
    font-size: 0.875rem;
}

/* ---------- Sidebar: "Custom Form" widget (Form Builder) ----------
   Lets an inner-page sidebar reuse the very same Form Builder form as the
   home page's contact section, instead of the fixed "Query Submit" widget.
   Two details of that widget's markup need covering: it titles itself with
   h3.title (the other sidebar widgets use .tittle), and FormBuilderCustom
   renders the submit button without .bx-btn. */
body.bxhorizon .attorney-contact-form-wrap > .title {
    font-family: var(--bx-font-heading);
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--bx-border);
    color: var(--bx-text-primary);
}

body.bxhorizon .attorney-contact-form .form-group {
    margin-bottom: 0;
}

body.bxhorizon .attorney-contact-form label {
    display: block;
    color: var(--bx-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

body.bxhorizon .attorney-contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

body.bxhorizon .attorney-contact-form .custom_submit_form_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
    font-family: var(--bx-font-body);
    font-weight: 500;
    letter-spacing: 0.05em;
    /* Six other tenant themes ship ".submit-btn { ... !important }" for color,
       padding, font-size and text-transform, and every theme stylesheet is
       served on every tenant page. Without !important here the label renders
       white on white at the wrong size. */
    padding: 1rem 2rem !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    color: var(--bx-bg) !important;
    background-color: var(--bx-text-primary);
    border: 1px solid var(--bx-text-primary);
    border-radius: 0;
    cursor: pointer;
    transition: var(--bx-transition);
}

body.bxhorizon .attorney-contact-form .custom_submit_form_button:hover {
    background-color: transparent;
    color: var(--bx-text-primary) !important;
}

body.bxhorizon .rmber-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0.5rem 0 1.5rem;
}

body.bxhorizon .rmber-area a {
    color: var(--bx-text-secondary);
    font-size: 0.875rem;
}

body.bxhorizon .rmber-area a:hover {
    color: var(--bx-text-primary);
}

/* Buttons coming from CMS templates */
body.bxhorizon .cmn-btn1,
body.bxhorizon .blogDetails button[type="submit"],
body.bxhorizon #submitComment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--bx-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bx-bg);
    background-color: var(--bx-text-primary);
    border: 1px solid var(--bx-text-primary);
    border-radius: 0;
    cursor: pointer;
    transition: var(--bx-transition);
}

body.bxhorizon .cmn-btn1:hover,
body.bxhorizon .blogDetails button[type="submit"]:hover,
body.bxhorizon #submitComment:hover {
    background-color: transparent;
    color: var(--bx-text-primary);
}

/* ---------- Related posts cards ---------- */
body.bxhorizon .section-tittle .tittle {
    font-size: 1.75rem;
    margin-bottom: 0;
}

body.bxhorizon .singleBlog-global {
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    margin-bottom: 0;
    transition: var(--bx-transition);
}

body.bxhorizon .singleBlog-global:hover {
    border-color: #3f3f46;
    transform: translateY(-4px);
}

body.bxhorizon .singleBlog-global .blog-img {
    position: relative;
    overflow: hidden;
}

/* The CMS ships donation-main-style.css on every tenant page, and it
   applies an "overlay1" effect to blog thumbs:
       width: calc(100% + 60px);
       transform: translate3d(-20px, 0, 0) scale(1.1);
   with the hover state resetting it to scale(1). That left every card
   image shifted left and zoomed in (cutting the artwork/text) until the
   user hovered it. We neutralise the resting transform and keep only a
   subtle zoom on hover. */
body.bxhorizon .singleBlog-global .blog-img {
    /* Letterbox blends into the artwork: these covers are dark-framed */
    background-color: #000;
}

body.bxhorizon .singleBlog-global .blog-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Cover art is produced at ~2:1 (e.g. 1440x717) with its own inner
       margin. object-fit: contain guarantees we never eat that margin —
       with a matching 2/1 box there is virtually no letterbox, and any
       off-ratio upload is framed instead of cropped. */
    aspect-ratio: 2 / 1;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    /* The other themes' stylesheets set BOTH -webkit-transform and
       transform; reset both or WebKit keeps the -20px offset. */
    -webkit-transform: none;
    transform: none;
    transition: opacity 0.4s ease;
}

/* No zoom on hover: scaling a text-heavy cover clips its edges against
   the overflow:hidden wrapper. A soft dim reads better. */
body.bxhorizon .singleBlog-global:hover .blog-img img {
    -webkit-transform: none;
    transform: none;
    opacity: 0.85;
}

body.bxhorizon .singleBlog-global .img-text {
    position: absolute;
    left: 12px;
    bottom: 12px;
}

body.bxhorizon .singleBlog-global .img-text .content {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bx-bg);
    border: 1px solid var(--bx-border);
    border-radius: 100px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bx-text-primary);
}

body.bxhorizon .singleBlog-global .blogCaption {
    padding: 22px;
}

body.bxhorizon .singleBlog-global .blogCaption .cartTop {
    gap: 6px 16px;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

body.bxhorizon .singleBlog-global .blogCaption .cartTop .listItmes {
    font-size: 0.75rem;
}

body.bxhorizon .singleBlog-global .blogCaption h3 {
    margin-bottom: 10px;
}

body.bxhorizon .singleBlog-global .blogCaption .tittle {
    font-size: 1.0625rem;
    line-height: 1.4;
}

body.bxhorizon .singleBlog-global .blogCaption .pera {
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Inner-page responsive ---------- */
@media (max-width: 991px) {
    body.bxhorizon .section-padding {
        padding: 64px 0;
    }

    body.bxhorizon .blogDetails .row > [class*="col-"] {
        margin-bottom: 20px;
    }

    body.bxhorizon .itemReview,
    body.bxhorizon .login-form,
    body.bxhorizon .account-form {
        padding: 24px 20px;
    }

    body.bxhorizon .widget-area-wrapper .widget,
    body.bxhorizon .searchBox-wrapper-sidebar,
    body.bxhorizon .searchByTopic,
    body.bxhorizon .popularServices-global {
        padding: 22px 18px;
    }

    body.bxhorizon .footer-social.float-md-end {
        float: none !important;
    }
}

/* =====================================================================
   MOBILE — get the actual content into the first fold
   ---------------------------------------------------------------------
   Two things were pushing the page's real content below the fold on
   phones: an oversized breadcrumb hero, and the CMS blades that place
   the sidebar column BEFORE the content column in the DOM (so search /
   recent items / query form stacked above the posts and services).
   ===================================================================== */

/* Content first, sidebar after. Every module sidebar renders inside
   .widget-area-wrapper, so one rule covers blog, service,
   knowledgebase, etc. Default order is 0, so pushing the sidebar to 2
   is enough — no need to touch the content column. */
@media (max-width: 991px) {
    body.bxhorizon .row > [class*="col-"]:has(> .widget-area-wrapper) {
        order: 2;
    }
}

@media (max-width: 767px) {
    body.bxhorizon .bx-breadcrumb-section {
        /* was 8rem 0 4rem — ~340px of chrome before any content */
        padding: 2.5rem 0 1.75rem;
        margin-top: 72px;
    }

    body.bxhorizon .bx-breadcrumb-section h1 {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }

    body.bxhorizon .bx-breadcrumb-section .breadcrumb {
        font-size: 0.8125rem;
        margin-bottom: 0;
    }

    /* Tighten the gap between the breadcrumb and the first card */
    body.bxhorizon .section-padding {
        padding: 40px 0 56px;
    }

    body.bxhorizon .blogDetails .row > [class*="col-"] {
        margin-bottom: 12px;
    }
}