/* ==========================================
   Tab Active State — Blue theme
   ========================================== */

/* Active tab pill: blue background + white text */
li[data-tab-target].active,
.tab.active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    transition: all 0.25s ease;
}

/* Non-active tab hover */
li[data-tab-target]:not(.active):hover,
.tab:not(.active):hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    transition: all 0.25s ease;
}

/* ==========================================
   Hero Section — Vertical Centering Fix
   All pages: .particial-bg hero content
   ========================================== */

/*
 * ROOT CAUSE:
 *   Every inner page hero uses: align-items-start + margin-top: calc(100vh / 2.5)
 *   — "start" pushes content to the top, the margin-top hack is inaccurate on
 *     different screen sizes and completely breaks on mobile/tablet.
 *
 * FIX:
 *   1. Override align-items-start → align-items-center on the flex wrapper
 *   2. Override the hacky margin-top to 0 on the h1 inside .particial-bg
 *   3. Ensure the section, inner wrappers and rows all stretch to full height
 *   4. Use min-height with dvh (dynamic viewport) for mobile — handles
 *      browser chrome (address bar) appearing/disappearing correctly
 */

/* ── Section wrapper: full dynamic viewport height ─────────────────────── */
.particial-bg {
    min-height: 100vh;           /* fallback for older browsers */
    min-height: 100dvh;          /* dynamic viewport — hides mobile address bar */
    display: flex !important;
    flex-direction: column;
}

/* ── All intermediate wrappers must stretch to fill height ──────────────── */
.particial-bg > div,
.particial-bg .particles_hero,
.particial-bg .h-100 {
    flex: 1 1 auto;
    height: 100% !important;
}

/* ── The container and row must also stretch ─────────────────────────────── */
.particial-bg .container.h-100 {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── The Bootstrap row (.home-sizing) — make it fill the space ─────────── */
.particial-bg .row.home-sizing,
.particial-bg .row.vh-100.home-sizing {
    min-height: 100%;
    display: flex;
    align-items: center !important;    /* vertical center row content */
}

/* ── The column inside the row ──────────────────────────────────────────── */
.particial-bg .col-lg-8,
.particial-bg .col-lg-8.h-100,
.particial-bg .col-lg-8.grow {
    display: flex;
    align-items: center !important;    /* column vertical center */
}

/* ── The REAL problematic flex div: override align-items-start ───────────
   All 12 inner pages use class="d-flex align-items-start justify-content-center h-100"
   We force it to center instead of start.
   ─────────────────────────────────────────────────────────────────────── */
.particial-bg .d-flex.align-items-start.justify-content-center.h-100 {
    align-items: center !important;
    width: 100%;
}

/* ── Remove the hacky margin-top: calc(100vh / 2.5) on all h1 tags ───────
   This was the old workaround — now centering is done properly with flexbox.
   ─────────────────────────────────────────────────────────────────────── */
.particial-bg h1[style*="margin-top"] {
    margin-top: 0 !important;
}

/* ── Mobile-first: smaller viewport adjustments ─────────────────────────── */
@media (max-width: 991px) {
    .particial-bg {
        padding-top: 90px;       /* clear the fixed navbar height */
        padding-bottom: 40px;
    }

    /* On mobile, text should start a bit lower so it's clear of navbar */
    .particial-bg .d-flex.align-items-start.justify-content-center.h-100,
    .particial-bg .d-flex.align-items-center.justify-content-center.h-100 {
        align-items: center !important;
        padding-top: 20px;
    }

    /* Home page hero row adjustments */
    .particial-bg .row.vh-100.home-sizing {
        min-height: auto;
        padding: 20px 0;
    }
}

@media (max-width: 575px) {
    .particial-bg {
        padding-top: 80px;
        padding-bottom: 30px;
    }
}