/* ==========================================================================
   COMMON — CSS for design sections shared across pages.
   Page-specific styling lives in that page's own file:
     home  -> css/home/home.css + css/home/home-responsive.css
     about -> css/about/about.css
   Sections below keep the order they had when they were separate files.
   Breakpoints: 19200 / 1399 / 1199 / 991 / 767 / 576px (max-width).
   ========================================================================== */


/* ======================================================================
   Header (desktop bar, dropdowns, mobile drawer styling)  [from common/site-header.css]
   ====================================================================== */
/* ==========================================================================
   COMMON — site header and navigation (desktop bar, mobile bar, dropdowns).
   Shared by all pages; contains no page-specific rules.
   ========================================================================== */

/* ==========================================================================
   Section 0 — Header / navigation (premium)
   ========================================================================== */

.header-area,
.header-area-all {
    font-family: var(--ax-font-sans);
}

/* Top-level menu links */
/* Animated underline instead of a hard colour flip */
/* Dropdown panels intentionally left to the theme: the menu is built and
   toggled outside the stylesheets here, and overriding it broke the flyouts. */

/* --- Mobile drawer ------------------------------------------------------ */
.mobile-sidebar {
    background: var(--ax-navy-900) !important;
    border-right: 1px solid color-mix(in srgb, var(--ax-white) 8%, transparent);
}
.mobile-nav li a {
    font-family: var(--ax-font-sans) !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, var(--ax-white) 86%, transparent) !important;
    border-radius: var(--ax-r-sm);
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}
.mobile-nav li a:hover { background: color-mix(in srgb, var(--ax-white) 7%, transparent) !important; color: var(--ax-white) !important; }
.menu-close, .mobile-menu-button { transition: transform var(--ax-dur-sm) var(--ax-ease); }
.menu-close:hover, .mobile-menu-button:hover { transform: scale(1.08); }

/* ==========================================================================
   Header — fixed from first paint, premium surface
   `.header-height` is the spacer that reserves room for the fixed bar; it was
   painting a visible grey block. It must be transparent and match the bar.
   ========================================================================== */

.header-area.header-area-all {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: color-mix(in srgb, var(--ax-white) 86%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    box-shadow: none;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease),
                background var(--ax-dur-md) var(--ax-ease);
}
/* Elevation appears only once the page has moved */
.header-area.header-area-all.ax-scrolled {
    background: color-mix(in srgb, var(--ax-white) 95%, transparent) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ax-navy-900) 10%, transparent), 0 6px 20px color-mix(in srgb, var(--ax-navy-900) 6%, transparent);
}

.header-height {
    background: transparent !important;
    background-color: transparent !important;
    height: 93px !important;
}

/* --- Menu links --------------------------------------------------------- */
/* Underline sweep */
/* Dropdown caret: lighter, animates on hover */
/* Logo breathing room */
.home1-site-logo img { max-height: 54px; width: auto; }

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
}

/* ==========================================================================
   Header menu — correct structure
   `.main-menu-ex` is a DIV wrapping a UL, so links are
   `.main-menu-ex > ul > li > a` (not `.main-menu-ex > li > a`).
   `li.dropdown-menu-parrent` is the PARENT ITEM; its flyout is its child UL.
   ========================================================================== */

.header-area-all .main-menu-ex > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-area-all .main-menu-ex > ul > li { position: relative; margin: 0 13px; }

.header-area-all .main-menu-ex > ul > li > a {
    position: relative;
    display: inline-block;
    font-family: var(--ax-font-sans) !important;
    font-size: .94rem !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    padding: 8px 0 !important;
    transition: color var(--ax-dur-sm) var(--ax-ease);
}
/* Underline sweep */
.header-area-all .main-menu-ex > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: var(--ax-grad-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--ax-dur-md) var(--ax-ease);
}
.header-area-all .main-menu-ex > ul > li:hover > a::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- At rest (over the hero): white ------------------------------------ */
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a i,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a span {
    color: var(--ax-white) !important;
}
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-cyan-300) !important;
}

/* --- Scrolled: navy on white ------------------------------------------- */
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a span {
    color: var(--ax-navy-900) !important;
}
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-blue-600) !important;
}

/* Caret rotates on open */
.header-area-all .main-menu-ex > ul > li > a i { transition: transform var(--ax-dur-sm) var(--ax-ease); }
.header-area-all .main-menu-ex > ul > li:hover > a i { transform: rotate(180deg); }

/* Flyout panel = the child UL of the parent item. Colours only — position,
   display and visibility stay with the theme so the menu keeps working. */
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a {
    font-family: var(--ax-font-sans) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--ax-ink) !important;
}
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a:hover {
    color: var(--ax-blue-600) !important;
}

/* ==========================================================================
   Header — solid white at all times (transparent treatment reverted)
   ========================================================================== */

.header-height {
    height: 93px !important;
    background: transparent !important;   /* spacer only; was painting grey */
}


.header-area.header-area-all {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--ax-white) !important;
    background-color: var(--ax-white) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    transition: box-shadow var(--ax-dur-md) var(--ax-ease);
}
/* Elevation once the page moves; background stays white throughout */
.header-area.header-area-all.ax-scrolled {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ax-navy-900) 10%, transparent), 0 6px 20px color-mix(in srgb, var(--ax-navy-900) 6%, transparent);
}

/* Logo always full colour */
.header-area.header-area-all .home1-site-logo img { filter: none !important; }

/* Links navy in both states */
.header-area-all .main-menu-ex > ul > li > a,
.header-area-all .main-menu-ex > ul > li > a i,
.header-area-all .main-menu-ex > ul > li > a span,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li > a i {
    color: var(--ax-navy-900) !important;
}
.header-area-all .main-menu-ex > ul > li:hover > a,
.header-area-all .main-menu-ex > ul > li:hover > a i,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a,
.header-area-all:not(.ax-scrolled) .main-menu-ex > ul > li:hover > a i,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a,
.header-area-all.ax-scrolled .main-menu-ex > ul > li:hover > a i {
    color: var(--ax-blue-600) !important;
}

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
}

/* ==========================================================================
   Header — height consistency + nav typography
   The bar measured 75px while its spacer reserved 93px, leaving an 18px
   white strip above the hero. Both are now driven by one token.
   ========================================================================== */

.header-area.header-area-all > * { width: 100%; }
.header-area.header-area-all .header-elements { min-height: auto; }

/* Spacer matches the bar exactly — no gap, no overlap */
.header-height { height: var(--ax-header-h) !important; }

/* Hero sits flush beneath it */

/* --- Nav typography ----------------------------------------------------- */
.header-area-all .main-menu-ex > ul { gap: 4px; }
.header-area-all .main-menu-ex > ul > li { margin: 0 !important; }

.header-area-all .main-menu-ex > ul > li > a {
    font-family: var(--ax-font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;       /* 700 read heavy at nav size */
    letter-spacing: 0 !important;      /* negative tracking hurt legibility */
    line-height: 1.2 !important;
    padding: 10px 15px !important;
    border-radius: 8px;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
/* Subtle hover surface, with the underline inset to match the padding */
.header-area-all .main-menu-ex > ul > li > a:hover { background: color-mix(in srgb, var(--ax-blue-600) 6%, transparent); }
.header-area-all .main-menu-ex > ul > li > a::before {
    left: 15px;
    right: 15px;
    width: auto;
    bottom: 4px;
}

.header-area-all .main-menu-ex > ul > li > a i {
    font-size: 11px !important;
    margin-left: 5px;
    opacity: .6;
}

/* Logo scaled to the new bar height */
.header-area.header-area-all .home1-site-logo img {
    max-height: 48px !important;
    width: auto !important;
}

@media (max-width: 991px) {
    .header-height { height: 0 !important; }
}

/* ==========================================================================
   Header + footer type, aligned to the PiPO HRIS system
   Reference (pipohris.co.ke): Plus Jakarta Sans throughout; nav ~15px / 560;
   footer column labels 10.9px / 500 / .15em uppercase; footer links 15.6px /
   400 / 1.65 at 66% white. Accurex keeps its own navy+cyan palette.
   ========================================================================== */

/* --- Header nav --------------------------------------------------------- */
.header-area-all .main-menu-ex > ul > li > a {
    font-family: var(--ax-font-display) !important;   /* Plus Jakarta Sans */
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a {
    font-family: var(--ax-font-display) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   Header height — authoritative
   Theme conflicts this overrides:
     header .header-height { height: 82px; background:#fff !important }
     .header-area { padding: 10px 0 }
     .header-area-all.sticky { animation: fade-in-down 1s;
                               box-shadow: 0 -16px 26px rgba(0,0,0,.5) }
   Selectors below match or exceed the theme's specificity.
   ========================================================================== */

.header-area.header-area-all.ax-scrolled {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ax-navy-900) 8%, transparent), 0 6px 20px color-mix(in srgb, var(--ax-navy-900) 5%, transparent) !important;
}
.header-area.header-area-all > .container,
.header-area.header-area-all > div { width: 100%; }
.header-area.header-area-all .header-elements {
    min-height: auto !important;
    padding: 0 !important;
}

/* Spacer: matches the bar exactly, and transparent (theme forced #fff) */
header .header-height,
.header-height {
    height: var(--ax-header-h) !important;
    min-height: var(--ax-header-h) !important;
    background: transparent !important;
    background-color: transparent !important;
}


@media (max-width: 991px) {
    header .header-height,
    .header-height { height: 0 !important; min-height: 0 !important; }
}

/* ==========================================================================
   Dropdown menus — sleek
   Only colour, type and spacing are touched. Positioning, display,
   visibility and transform stay with the theme so the flyouts keep working.
   ========================================================================== */

/* Panel surface */
.header-area-all .main-menu-ex > ul > li > ul {
    background: var(--ax-white) !important;
    border: 1px solid color-mix(in srgb, var(--ax-navy-900) 8%, transparent) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--ax-navy-900) 13%, transparent),
                0 2px 6px color-mix(in srgb, var(--ax-navy-900) 6%, transparent) !important;
    padding: 8px !important;
    min-width: 268px;
}

/* Items */
.header-area-all .main-menu-ex > ul > li > ul > li {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.header-area-all .main-menu-ex > ul > li > ul > li > a {
    display: block !important;
    font-family: var(--ax-font-display) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    color: var(--ax-ink) !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    padding: 9px 14px !important;
    margin: 1px 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    text-transform: none !important;
    transition: background-color var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease);
}

/* Hover / focus / active: soft tint, never a solid cyan slab */
.header-area-all .main-menu-ex > ul > li > ul > li > a:hover,
.header-area-all .main-menu-ex > ul > li > ul > li > a:focus,
.header-area-all .main-menu-ex > ul > li > ul > li.active > a,
.header-area-all .main-menu-ex > ul > li > ul > li:first-child > a:hover {
    background: color-mix(in srgb, var(--ax-blue-600) 7%, transparent) !important;
    background-image: none !important;
    background-color: color-mix(in srgb, var(--ax-blue-600) 7%, transparent) !important;
    color: var(--ax-blue-600) !important;
}

/* Kill any inherited solid fill on the item itself */
.header-area-all .main-menu-ex > ul > li > ul > li:hover,
.header-area-all .main-menu-ex > ul > li > ul > li:first-child,
.header-area-all .main-menu-ex > ul > li > ul > li.active {
    background: transparent !important;
    background-image: none !important;
}

/* Nested third level, if any */
.header-area-all .main-menu-ex > ul > li > ul > li > ul {
    background: var(--ax-white) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--ax-navy-900) 13%, transparent) !important;
    padding: 8px !important;
}

/* Header keeps one hairline only, for separation from white content */
.header-area.header-area-all { border-bottom: 1px solid color-mix(in srgb, var(--ax-navy-900) 6%, transparent) !important; }


/* ======================================================================
   Footer  [from common/site-footer.css]
   ====================================================================== */
/* ==========================================================================
   FOOTER — the one footer stylesheet (shared by every page).
   Scoped to `footer.ax-foot`; the specificity beats the generic
   `footer a / footer h3` rules that other site CSS applies with !important.

   Reference-matching priorities (in order)
     1. Structure: logo + about + social | Company | Services | newsletter,
        then a hairline and the copyright / legal row.
     2. Colour: flat deep navy, white copy, cyan underline, teal Subscribe.
     3. Type: uppercase 600 headings, 400 body, 1.7 line-height; fluid sizes
        that land on the reference sizes at ~2000px.
     4. Proportions: columns 475 : 316 : 482 : 570 at the reference width.

   Breakpoints
     above 1199px   4 columns (reference)
     1199px         brand full width, Company | Services, newsletter full width
      991px         wider side padding (clears the Contact Now tab)
      767px         tighter type, bottom row stacks
      576px         single column
   ========================================================================== */

footer.ax-foot {
    padding: clamp(44px, 3.6vw, 72px) 0 0 !important;
    background: #0b1238 !important;
    background-image: none !important;
    color: #fff;
    font-family: var(--ax-font-display);
}
footer.ax-foot::before, footer.ax-foot::after { display: none !important; }

footer.ax-foot .ax-foot__inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-inline: clamp(20px, 4.1vw, 82px);
}

/* ---- Grid ------------------------------------------------------------- */
footer.ax-foot .ax-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 4.75fr) minmax(0, 3.16fr) minmax(0, 4.82fr) minmax(0, 5.7fr);
    column-gap: 0;
    align-items: start;
    padding-bottom: clamp(36px, 3.2vw, 64px);
}
footer.ax-foot .ax-foot__brand { padding-right: clamp(24px, 4vw, 80px); }
footer.ax-foot .ax-foot__col--news { padding-left: clamp(0px, 1vw, 20px); }

/* ---- Brand ------------------------------------------------------------ */
footer.ax-foot .ax-foot__logo {
    display: block;
    width: clamp(150px, 13.2vw, 264px);
    height: auto;
    margin-top: clamp(0px, .2vw, 4px);
    filter: brightness(0) invert(1);     /* only the dark logo exists; render it white on navy */
}
footer.ax-foot .ax-foot__about {
    margin: clamp(18px, 1.6vw, 32px) 0 clamp(20px, 1.9vw, 38px) !important;
    max-width: 21em;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(16px, 1.1vw, 22px) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #fff !important;
}
footer.ax-foot .ax-foot__social { display: flex; flex-wrap: wrap; gap: clamp(10px, .85vw, 17px); margin: 0; padding: 0; list-style: none; }
footer.ax-foot .ax-foot__social li { margin: 0 !important; }
footer.ax-foot .ax-foot__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(40px, 2.9vw, 58px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    font-size: clamp(16px, 1.2vw, 24px) !important;
    line-height: 1 !important;
    color: #fff !important;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
footer.ax-foot .ax-foot__social a i { display: block; font-size: inherit; line-height: 1; }
footer.ax-foot .ax-foot__social a:hover,
footer.ax-foot .ax-foot__social a:focus-visible { background: #05b7e0; border-color: #05b7e0; color: #0b1238 !important; }

/* ---- Column headings + links ------------------------------------------ */
footer.ax-foot .ax-foot__title {
    position: relative;
    margin: 0 0 clamp(26px, 2.5vw, 50px) !important;
    padding-bottom: clamp(12px, 1.1vw, 22px);
    font-family: var(--ax-font-display) !important;
    font-size: clamp(14px, 1.2vw, 24px) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    color: #fff !important;
}
footer.ax-foot .ax-foot__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: clamp(34px, 2.35vw, 47px);
    height: clamp(3px, .22vw, 4px);
    border-radius: 2px;
    background: #05b7e0;
}
footer.ax-foot .ax-foot__links { list-style: none; margin: 0; padding: 0; }
footer.ax-foot .ax-foot__links li { margin: 0 0 clamp(12px, 1.17vw, 23px) !important; }
footer.ax-foot .ax-foot__links a {
    font-family: var(--ax-font-display) !important;
    font-size: clamp(15px, 1.1vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #fff !important;
    text-decoration: none;
    transition: color .2s ease;
}
footer.ax-foot .ax-foot__links a:hover,
footer.ax-foot .ax-foot__links a:focus-visible { color: #05b7e0 !important; }

/* ---- Newsletter -------------------------------------------------------- */
footer.ax-foot .ax-foot__text {
    margin: 0 0 clamp(22px, 2vw, 40px) !important;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(15px, 1.1vw, 22px) !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: #fff !important;
}
footer.ax-foot .ax-foot__form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(52px, 4vw, 80px);
    padding-left: clamp(16px, 1.5vw, 30px);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
footer.ax-foot .ax-foot__mail { flex: none; font-size: clamp(18px, 1.3vw, 26px); color: #0b1238; margin-right: clamp(10px, 1vw, 20px); }
footer.ax-foot .ax-foot__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--ax-font-display);
    font-size: clamp(14px, 1.05vw, 21px);
    color: #0b1238;
}
footer.ax-foot .ax-foot__form input::placeholder { color: #6b7280; opacity: 1; }
footer.ax-foot .ax-foot__form:focus-within { box-shadow: 0 0 0 3px rgba(5, 183, 224, .55); }
footer.ax-foot .ax-foot__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    height: calc(100% - 12px);
    margin-right: 6px;
    padding: 0 clamp(16px, 1.5vw, 30px);
    border: 0;
    border-radius: 999px;
    background: #0897ae;
    font-family: var(--ax-font-display);
    font-size: clamp(13px, .9vw, 18px);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}
footer.ax-foot .ax-foot__btn:hover { background: #07829a; }
footer.ax-foot .ax-foot__btn i { font-size: .95em; }

/* ---- Bottom bar -------------------------------------------------------- */
footer.ax-foot .ax-foot__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: clamp(22px, 2.1vw, 42px) 0 clamp(24px, 2.2vw, 44px);
    border-top: 1px solid rgba(255, 255, 255, .22);
    /* room for the fixed back-to-top button, which sits at the right of this row */
    padding-right: max(0px, calc(88px - clamp(20px, 4.1vw, 82px)));   /* just enough to stay left of the fixed back-to-top button */
}
footer.ax-foot .ax-foot__copy {
    margin: 0 !important;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(13px, 1.05vw, 21px) !important;
    color: #fff !important;
}
footer.ax-foot .ax-foot__legal-links { margin-left: auto !important; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
footer.ax-foot .ax-foot__legal-links li { margin: 0 !important; }
footer.ax-foot .ax-foot__legal-links li + li { margin-left: clamp(14px, 1.2vw, 24px) !important; padding-left: clamp(14px, 1.2vw, 24px); border-left: 1px solid #05b7e0; }
footer.ax-foot .ax-foot__legal-links a {
    font-family: var(--ax-font-display) !important;
    font-size: clamp(13px, 1.05vw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-decoration: none;
}
footer.ax-foot .ax-foot__legal-links a:hover,
footer.ax-foot .ax-foot__legal-links a:focus-visible { color: #05b7e0 !important; }

/* ---- Tablet / small laptop: 768-1199px --------------------------------- */
@media screen and (max-width: 1199px) {
    footer.ax-foot .ax-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; column-gap: 40px; }
    footer.ax-foot .ax-foot__brand,
    footer.ax-foot .ax-foot__col--news { grid-column: 1 / -1; padding: 0; }
    footer.ax-foot .ax-foot__col--news { max-width: 640px; }
    footer.ax-foot .ax-foot__about { max-width: 34em; font-size: 17px !important; }
    footer.ax-foot .ax-foot__logo { width: 190px; }
    footer.ax-foot .ax-foot__title { font-size: 16px !important; margin-bottom: 26px !important; }
    footer.ax-foot .ax-foot__links li { margin-bottom: 14px !important; }
    footer.ax-foot .ax-foot__links a,
    footer.ax-foot .ax-foot__text { font-size: 16px !important; }
    footer.ax-foot .ax-foot__social a { width: 44px; font-size: 18px !important; }
    footer.ax-foot .ax-foot__form { height: 58px; }
    footer.ax-foot .ax-foot__copy,
    footer.ax-foot .ax-foot__legal-links a { font-size: 14px !important; }
}
@media screen and (max-width: 991px) {
    footer.ax-foot .ax-foot__inner { padding-inline: 46px; }     /* clears the Contact Now tab */
}

/* ---- Mobile ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
    footer.ax-foot { padding-top: 40px !important; }
    footer.ax-foot .ax-foot__grid { row-gap: 34px; column-gap: 24px; }
    footer.ax-foot .ax-foot__bar { flex-direction: column; align-items: flex-start; padding-right: 0; }
    footer.ax-foot .ax-foot__legal-links { flex-wrap: nowrap; margin-left: 0 !important; }   /* both links stay on one row, left of the back-to-top button */
}
@media screen and (max-width: 576px) {
    footer.ax-foot .ax-foot__inner { padding-left: 15px; padding-right: 15px; }
    footer.ax-foot .ax-foot__grid { grid-template-columns: minmax(0, 1fr); }
    footer.ax-foot .ax-foot__btn { padding-inline: 16px; }
}

/* Back-to-top button: smaller (global fixed element) */
.progress-wrap { width: 44px !important; height: 44px !important; right: 24px !important; bottom: 24px !important; }
.progress-wrap::before, .progress-wrap::after { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 15px !important; }

/* Bullet before each Company / Services link */
footer.ax-foot .ax-foot__links a {
    position: relative;
    display: inline-block;
    padding-left: 1.5em;
}
footer.ax-foot .ax-foot__links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: .4em;
    height: .4em;
    border-radius: 50%;
    background: #0ab6ea;
    box-shadow: 0 0 0 .22em rgba(110, 215, 255, .38);   /* soft halo ring */
}


/* ======================================================================
   Shared page sections (hero, FAQ, CTA, cards...) used by more than one of
   Services / Trainings / Offshoring / Contact  [from human-resource-consulting/hrc.css]
   ====================================================================== */
.hrc {
    background: var(--ax-white);
}

.hrc-eyebrow--dark {
    color: var(--ax-cyan-300); background: color-mix(in srgb, var(--ax-white) 8%, transparent);
}

.hrc .importance-human-resource .title h2,
.hrc .benefits-outsourcing-block > .container > h3,
.hrc .service-box-outsourcing .h-title h3 {
    max-width: 22ch;
    margin: 0 auto 14px !important;
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-display) !important;
    font-weight: 800 !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
    color: var(--ax-navy-900) !important;
}

.hrc .benefits-outsourcing-block > .container > h3 span {
    display: inline;
    background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.hrc .importance-human-resource .title > p,
.hrc .benefits-outsourcing-block > .container > p {
    max-width: 62ch; margin: 0 auto !important;
    font-family: var(--ax-font-sans) !important;
    font-size: 1.05rem !important; line-height: 1.7 !important;
    color: var(--ax-ink-soft) !important;
}

.hrc-btn, .hrc-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ax-font-sans);
    font-size: 15px; font-weight: 800; letter-spacing: .01em;
    border: 0; cursor: pointer; text-decoration: none;
    transition: box-shadow var(--ax-dur-md) var(--ax-ease), transform var(--ax-dur-sm) var(--ax-ease),
    background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}

.hrc-btn {
    margin-top: 10px; padding: 16px 32px; border-radius: 100px;
    background: var(--ax-grad-accent); color: var(--ax-white) !important;
    box-shadow: var(--ax-e2);
}

.hrc-btn:hover {
    box-shadow: var(--ax-e3);
}

.hrc-btn:active {
    transform: scale(.985);
}

.hrc-btn i {
    font-size: 14px; transition: transform var(--ax-dur-md) var(--ax-ease);
}

.hrc-btn:hover i {
    transform: translateX(4px);
}

.hrc .sub-services-tab-block {
    padding: 72px 0 64px !important; background: linear-gradient(180deg, var(--ax-white) 0%, var(--ax-paper) 100%) !important;
}

.hrc .sub-services-tab-block .tab-button {
    padding: 30px 24px 26px;
    border-radius: 26px;
    background: var(--ax-white);
    border: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent),
    0 18px 44px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
}

.hrc .sub-services-tab-block .nav-tabs {
    display: flex; flex-direction: column; gap: 12px;
    border: 0; margin: 0; padding: 0;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link {
    display: flex; align-items: center; gap: 16px;
    width: 100%; margin: 0 !important;
    padding: 14px 18px !important;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent) !important;
    border-radius: 16px !important;
    background: var(--ax-white) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ax-navy-900) 4%, transparent);
    transition: background var(--ax-dur-sm) var(--ax-ease), border-color var(--ax-dur-sm) var(--ax-ease),
    box-shadow var(--ax-dur-sm) var(--ax-ease), transform var(--ax-dur-sm) var(--ax-ease);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link::before,
.hrc .sub-services-tab-block .nav-tabs .nav-link::after {
    display: none !important; content: none !important;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link h5 {
    flex: 1 1 auto;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    font-family: var(--ax-font-display) !important;
    font-size: .98rem !important; font-weight: 700 !important;
    line-height: 1.35 !important; letter-spacing: -.01em !important;
    color: var(--ax-navy-900) !important;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link h5::before,
.hrc .sub-services-tab-block .nav-tabs .nav-link h5::after {
    display: none !important; content: none !important;
}

.hrc-tabicon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: color-mix(in srgb, var(--ax-navy-900) 6%, var(--ax-white));
    color: var(--ax-ink-soft);
    font-size: 1.15rem;
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}

.hrc-tabchev {
    flex: 0 0 auto; font-size: .8rem; color: var(--ax-ink-soft); transition: transform var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link:not(:first-child):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ax-navy-900) 8%, transparent);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link:not(:first-child):hover .hrc-tabchev {
    transform: translateX(3px);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link.active:not(:first-child) {
    background: color-mix(in srgb, var(--ax-cyan-100) 78%, var(--ax-white)) !important;
    border-color: color-mix(in srgb, var(--ax-cyan-500) 30%, transparent) !important;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link.active .hrc-tabicon {
    background: color-mix(in srgb, var(--ax-cyan-500) 22%, var(--ax-white));
    color: var(--ax-cyan-600);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link.active .hrc-tabchev {
    color: var(--ax-cyan-600);
}

.hrc .sub-services-tab-block .nav-tabs .nav-link:first-child {
    display: block;
    padding: 0 0 12px !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    transform: none !important;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link:first-child h5 {
    font-size: var(--ax-t-sub) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important; letter-spacing: -.03em !important;
}

.hrc .sub-services-tab-block .nav-tabs .nav-link:first-child h5::after {
    display: block !important; content: "" !important;
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important;
    width: 58px; height: 3px; margin-top: 18px; border-radius: 3px;
    background: var(--ax-cyan-600) !important;
}

.hrc .sub-services-tab-block .tab-text-bd {
    padding-left: 14px;
}

.hrc .sub-services-tab-block .short-banner img {
    width: 100%; height: auto; display: block; border-radius: 0;
}

.hrc .sub-services-tab-block .tab-content .item-text {
    padding-top: 26px;
}

.hrc .sub-services-tab-block .tab-content h1,
.hrc .sub-services-tab-block .tab-content h2,
.hrc .sub-services-tab-block .tab-content h3 {
    margin: 0 0 22px !important;
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-sub) !important; font-weight: 800 !important;
    line-height: 1.14 !important; letter-spacing: -.03em !important;
    color: var(--ax-navy-900) !important;
}

.hrc .sub-services-tab-block .tab-content h1,
.hrc .sub-services-tab-block .tab-content h2 {
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important; letter-spacing: -.035em !important;
}

.hrc .sub-services-tab-block .tab-content h1::after,
.hrc .sub-services-tab-block .tab-content h2::after,
.hrc .sub-services-tab-block .tab-content h3::after {
    content: ""; display: block;
    width: 58px; height: 3px; margin-top: 16px; border-radius: 3px;
    background: var(--ax-cyan-600);
}

.hrc .sub-services-tab-block .tab-content h4,
.hrc .sub-services-tab-block .tab-content .item-text > span {
    margin: 0 0 12px !important;
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem !important; font-weight: 800 !important;
    letter-spacing: .02em !important;
    color: var(--ax-cyan-600) !important;
}

.hrc .sub-services-tab-block .tab-content p {
    margin: 0 !important;
    font-family: var(--ax-font-sans) !important;
    font-size: 1.02rem !important; line-height: 1.7 !important;
    color: var(--ax-ink-soft) !important;
}

.hrc .sub-services-tab-block .tab-content .item-text > span {
    display: block; font-style: normal;
}

.hrc-imp__line {
    display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block {
    padding: 84px 0 92px !important;
    text-align: center;
    background: var(--ax-benefits-bg) !important;
}

.hrc .benefits-outsourcing-block .row {
    margin-top: 44px; row-gap: 22px; text-align: left;
}

.hrc .benefits-outsourcing-block .col-item {
    display: flex; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben {
    --accent: var(--ax-blue-500);
    position: relative; overflow: hidden;
    display: flex; gap: 22px; align-items: flex-start;
    width: 100%; padding: 26px 28px 28px 26px !important; margin: 0 !important;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ax-white) 0%, color-mix(in srgb, var(--accent) 4%, var(--ax-white)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent) !important;
    border-left: 4px solid var(--accent) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent),
    0 14px 34px color-mix(in srgb, var(--accent) 8%, transparent) !important;
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}

.hrc .benefits-outsourcing-block .item.hrc-ben:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--ax-navy-900) 5%, transparent),
    0 22px 46px color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--blue {
    --accent: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--teal {
    --accent: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--purple {
    --accent: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--orange {
    --accent: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--green {
    --accent: var(--ax-cyan-600);
}

.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--pink {
    --accent: var(--ax-blue-500);
}

.hrc .benefits-outsourcing-block .item.hrc-ben::before {
    content: ""; position: absolute; left: -90px; bottom: -125px; width: 260px; height: 260px;
    border-radius: 50%; pointer-events: none;
    background: color-mix(in srgb, var(--ax-cyan-500) 4.5%, transparent);
}

.hrc .benefits-outsourcing-block .item.hrc-ben::after {
    content: ""; position: absolute; left: -52px; bottom: -82px; width: 170px; height: 170px;
    border-radius: 50%; pointer-events: none;
    background: color-mix(in srgb, var(--ax-cyan-500) 3.5%, transparent);
}

.hrc-ben__num {
    position: absolute; top: 22px; right: 24px; z-index: 1;
    padding: 6px 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--ax-white));
    font-family: var(--ax-font-sans); font-size: 14px; font-weight: 800; letter-spacing: .04em;
    color: var(--accent);
}

.hrc .benefits-outsourcing-block .box-icon {
    position: relative !important; z-index: 1;
    left: auto !important; top: auto !important; padding: 0 !important; margin: 0 !important;
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 76px; height: 76px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 13%, var(--ax-white)) !important;
    box-shadow: none !important;
    color: var(--accent); font-size: 1.9rem;
}

.hrc .benefits-outsourcing-block .text {
    position: relative; z-index: 1; flex: 1 1 auto; margin: 0 !important; padding: 0 70px 0 0 !important; width: auto !important;
}

.hrc .benefits-outsourcing-block .text h4 {
    margin: 0 0 8px !important;
    font-family: var(--ax-font-display) !important;
    font-size: var(--ax-t-card) !important; font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -.024em !important; color: var(--ax-navy-900) !important;
}

.hrc-ben__bar {
    display: block; width: 44px; height: 3px; margin: 0 0 14px; border-radius: 3px; background: var(--accent);
}

.hrc .benefits-outsourcing-block .text p {
    margin: 0 !important;
    font-family: var(--ax-font-sans) !important;
    font-size: var(--ax-t-small) !important; line-height: 1.7 !important;
    color: var(--ax-ink-soft) !important;
}

.hrc .service-footer-block {
    padding: 64px 0 !important; background: var(--ax-white) !important;
}

.hrc .service-footer-block > .container {
    padding: 0 15px;
}

.hrc-cta__visual--plain {
    aspect-ratio: auto; padding: 0;
}

.hrc-cta__photo--plain {
    position: static; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 44px color-mix(in srgb, var(--ax-navy-900) 12%, transparent);
}

.hrc .benefits-outsourcing-block .box-icon img {
    width: 40px; height: 40px; object-fit: contain;
}

.hrc .hrc-note {
    padding: 0 0 72px; background: var(--ax-white); text-align: center;
}

.hrc .hrc-note p {
    max-width: 70ch; margin: 0 auto !important; font-family: var(--ax-font-sans); font-size: 1.05rem; line-height: 1.7; color: var(--ax-ink-soft);
}

.hrc-panel__title {
    margin: 0 0 18px !important; font-family: var(--ax-font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ax-navy-900); text-align: center;
}

@media screen and (max-width: 991px) {
  .hrc .sub-services-tab-block {
      padding: 52px 0 44px !important;
  }
  .hrc .sub-services-tab-block .tab-text-bd {
      padding-left: 0; margin-top: 28px;
  }
  .hrc .sub-services-tab-block .tab-button {
      padding: 24px 18px 20px;
  }
  .hrc .benefits-outsourcing-block {
      padding: 60px 0 64px !important;
  }
}

@media screen and (max-width: 576px) {
  .hrc .benefits-outsourcing-block .item.hrc-ben {
      flex-direction: column; padding: 22px !important;
  }
  .hrc .benefits-outsourcing-block .text {
      padding-right: 0 !important;
  }
  .hrc-ben__num {
      top: 18px; right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hrc * {
      transition-duration: .01ms !important;
  }
}

.hrc-hero {
    position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; background: linear-gradient(100deg, var(--ax-white) 0%, var(--ax-white) 38%, var(--ax-blue-100) 100%);
}

.hrc-hero__photo {
    position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
}

.hrc-hero__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block;
}

.hrc-hero__photo::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ax-white) 0%, color-mix(in srgb, var(--ax-white) 0%, transparent) 45%);
}

.hrc-hero .container {
    position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px;
}

.hrc-hero__text {
    max-width: 560px;
}

.hrc-hero h1, .hrc-hero .hrc-hero__title {
    margin: 0 0 14px !important; font-family: var(--ax-font-display) !important; font-size: clamp(2.4rem, 5vw, 3.6rem) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.035em !important; color: var(--ax-navy-900) !important;
}

.hrc-hero h1 span, .hrc-hero .hrc-hero__title span {
    display: block; background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.hrc-hero__text > p {
    max-width: 46ch; margin: 0 0 22px !important; font-size: 1rem; line-height: 1.7; color: var(--ax-ink-soft);
}

.hrc-hero__trust {
    display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 0; padding: 0; list-style: none;
}

.hrc-hero__trust li {
    display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; color: var(--ax-ink-soft);
}

.hrc-hero__trust li i {
    color: var(--ax-cyan-600); font-size: 1.15rem;
}

.hrc-hero__trust strong {
    display: block; color: var(--ax-navy-900); font-size: 13px;
}

@media screen and (max-width: 991px) {
  .hrc-hero {
      min-height: 0;
  }
  .hrc-hero__photo {
      width: 100%; opacity: .18;
  }
  .hrc-hero__photo::after {
      display: none;
  }
}

.hrc--overview .sub-services-tab-block .tab-button {
    background: var(--ax-white);
}

.hrc--overview .sub-services-tab-block .nav-tabs .nav-link:first-child {
    display: flex !important; align-items: center; gap: 14px;
    margin-bottom: 14px; padding: 18px 20px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--ax-navy-900), var(--ax-navy-700)) !important;
    pointer-events: none;
}

.hrc--overview .sub-services-tab-block .nav-tabs .nav-link:first-child h5 {
    color: var(--ax-white) !important; font-size: 1.15rem !important;
}

.hrc--overview .sub-services-tab-block .nav-tabs .nav-link:first-child h5::after {
    display: none !important;
}

.hrc-tabtitle-icon {
    display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--ax-white) 12%, transparent); color: var(--ax-cyan-300); font-size: 1.1rem;
}

.hrc .benefits-outsourcing-block .text {
    padding-right: 0 !important;
}

.hrc .benefits-outsourcing-block .text h4 {
    padding-right: 64px !important;
}

.hrc .benefits-outsourcing-block .text p {
    text-align: left !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 22px; row-gap: 0;
    align-items: start;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .text {
    display: contents !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .box-icon {
    grid-column: 1; grid-row: 1 / span 2;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .text h4 {
    grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; padding-right: 64px !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .hrc-ben__bar {
    grid-column: 2; grid-row: 2; align-self: start; margin: 12px 0 0 !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .text p {
    grid-column: 1 / -1; grid-row: 3; margin: 18px 0 0 !important; padding: 0 !important; width: auto !important;
}

@media screen and (max-width: 576px) {
  .hrc .benefits-outsourcing-block .item.hrc-ben {
      grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px;
  }
}

.hrc .benefits-outsourcing-block .item.hrc-ben .text h4 {
    align-self: end !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .hrc-ben__bar {
    align-self: start !important; margin-top: 8px !important;
}

.hrc .benefits-outsourcing-block .item.hrc-ben .text h4 {
    padding-bottom: 0 !important; margin-bottom: 0 !important; line-height: 1.25 !important;
}

.hrc-hero {
    min-height: 520px; background: linear-gradient(100deg, var(--ax-paper) 0%, var(--ax-blue-100) 45%, var(--ax-blue-100) 100%);
}

.hrc-hero__photo {
    width: 56%; display: flex; align-items: flex-end;
}

.hrc-hero__photo img {
    width: 100%; height: auto; max-height: 100%; object-fit: cover; object-position: left bottom;
}

.hrc-hero__photo::after {
    background: linear-gradient(90deg, var(--ax-paper) 0%, color-mix(in srgb, var(--ax-paper) 0%, transparent) 28%), linear-gradient(0deg, var(--ax-paper) 0%, rgba(244,248,252,0) 14%);
}

.hrc-hero h1, .hrc-hero .hrc-hero__title {
    color: var(--ax-navy-900) !important;
}

.hrc-hero h1 span, .hrc-hero .hrc-hero__title span {
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-blue-500)); -webkit-background-clip: text; background-clip: text;
}

.hrc-hero .hrc-btn {
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-blue-500)); border-radius: 14px; box-shadow: 0 10px 24px color-mix(in srgb, var(--ax-blue-600) 28%, transparent);
}

.hrc-hero__trust {
    gap: 0; margin-top: 34px;
}

.hrc-hero__trust li {
    gap: 10px; padding: 0 22px; border-left: 1px solid color-mix(in srgb, var(--ax-navy-900) 14%, transparent);
}

.hrc-hero__trust li:first-child {
    padding-left: 0; border-left: 0;
}

.hrc-hero__ico {
    display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--ax-white); box-shadow: 0 4px 12px color-mix(in srgb, var(--ax-navy-900) 10%, transparent);
}

.hrc-hero__ico i {
    color: var(--ax-cyan-600); font-size: .95rem;
}

.hrc-hero__trust li:nth-child(2) .hrc-hero__ico i {
    color: var(--ax-blue-500);
}

@media screen and (max-width: 991px) {
  .hrc-hero__photo {
      width: 100%; opacity: .2;
  }
  .hrc-hero__photo::after {
      display: none;
  }
  .hrc-hero__trust li {
      padding: 0 14px;
  }
}

.hrc-hero__photo {
    width: 60%; display: block;
}

.hrc-hero__photo img {
    width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 30% center;
}

.hrc-hero__photo::after {
    background: linear-gradient(90deg, var(--ax-paper) 0%, color-mix(in srgb, var(--ax-paper) 85%, transparent) 12%, color-mix(in srgb, var(--ax-paper) 0%, transparent) 38%);
}

.hrc-hero {
    min-height: 400px;
}

.hrc-hero .container {
    padding-top: 40px; padding-bottom: 40px;
}

.hrc-hero__text > p {
    margin-bottom: 20px !important;
}

.hrc-hero {
    background: linear-gradient(90deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 40%, var(--ax-navy-700) 100%);
}

.hrc-hero__photo {
    width: 60%;
}

.hrc-hero__photo img {
    filter: saturate(1.05) contrast(1.02);
}

.hrc-hero__photo::after {
    display: block;
    background:
    linear-gradient(90deg, var(--ax-navy-800) 0%, color-mix(in srgb, var(--ax-navy-800) 82%, transparent) 14%, color-mix(in srgb, var(--ax-navy-800) 35%, transparent) 38%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--ax-navy-900) 45%, transparent) 0%, transparent 25%);
}

.hrc-hero h1, .hrc-hero .hrc-hero__title {
    color: var(--ax-white) !important;
}

.hrc-hero h1 span, .hrc-hero .hrc-hero__title span {
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-cyan-400) 55%, var(--ax-cyan-500)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.hrc-hero__text > p {
    color: color-mix(in srgb, var(--ax-white) 82%, transparent);
}

.hrc-hero .hrc-btn {
    background: var(--ax-grad-accent); box-shadow: 0 10px 26px color-mix(in srgb, var(--ax-cyan-500) 35%, transparent);
}

@media screen and (max-width: 991px) {
  .hrc-hero__photo {
      opacity: .25;
  }
  .hrc-hero__photo::after {
      display: none;
  }
}

.hrc .benefits-outsourcing-block .item.hrc-ben,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--blue,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--teal,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--purple,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--orange,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--green,
.hrc .benefits-outsourcing-block .item.hrc-ben.hrc-ben--pink {
    --accent: var(--ax-blue-500);
}

.hrc .hrc-approach__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 28px; border-radius: 22px; background: var(--ax-white); border: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent), 0 14px 36px color-mix(in srgb, var(--ax-navy-900) 6%, transparent);
}

.hrc .hrc-approach__img img {
    display: block; width: 100%; height: auto; border-radius: 16px;
}

.hrc .hrc-approach__text h3 {
    margin: 0 0 18px !important; font-family: var(--ax-font-display) !important; font-size: var(--ax-t-display) !important; font-weight: 800 !important; line-height: var(--ax-lh-tight) !important; letter-spacing: -.035em !important; color: var(--ax-navy-900) !important;
}

.hrc .hrc-approach__text h3::after {
    content: ""; display: block; width: 58px; height: 3px; margin-top: 16px; border-radius: 3px; background: var(--ax-cyan-600);
}

.hrc .hrc-approach__text p {
    margin: 0 !important; font-family: var(--ax-font-sans) !important; font-size: 1.02rem !important; line-height: 1.7 !important; color: var(--ax-ink-soft) !important;
}

@media screen and (max-width: 991px) {
  .hrc .hrc-approach__grid {
      grid-template-columns: 1fr; gap: 26px; padding: 20px;
  }
}

.hrc-hero h1 span, .hrc-hero .hrc-hero__title span {
    display: inline-block; padding-bottom: .14em; margin-bottom: -.14em; line-height: 1.15;
}

.hrc-hero--page {
    min-height: 340px;
}

.hrc-hero--page .hrc-hero__text {
    max-width: 520px;
}

.hrc-hero__crumb {
    display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: color-mix(in srgb, var(--ax-white) 78%, transparent); font-size: .95rem;
}

.hrc-hero__crumb a, .hrc-hero__crumb p, .hrc-hero__crumb span {
    margin: 0; color: inherit !important; font-size: inherit;
}

.hrc-hero__crumb a:hover {
    color: var(--ax-cyan-300) !important;
}

.hrc-hero--page h1, .hrc-hero--page .hrc-hero__title {
    margin-bottom: 24px !important;
}

.hrc-hero--page .hrc-hero__text > .hrc-btn {
    margin-top: 0;
}

.hrc--tabs-click .sub-services-tab-block .nav-tabs .nav-link:first-child {
    pointer-events: auto; cursor: pointer;
}

.hrc--tabs-click .sub-services-tab-block .nav-tabs .nav-link:first-child:not(.active) {
    opacity: .92;
}

.hrc--tabs-click .sub-services-tab-block .tab-content h1,
.hrc--tabs-click .sub-services-tab-block .tab-content h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.35rem) !important; line-height: 1.18 !important;
}

.hrc--tabs-click .sub-services-tab-block .tab-content h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important; margin: 26px 0 14px !important;
}

.hrc--tabs-click .sub-services-tab-block .tab-content .item-text p + p {
    margin-top: 14px !important;
}

.hrc-adv {
    padding: 84px 0 92px;
    background: radial-gradient(700px 340px at 88% -8%, var(--ax-blue-100) 0%, transparent 58%), var(--ax-paper);
}

.hrc-adv h2 {
    max-width: 22ch; margin: 0 auto 52px !important; padding: 0 !important; text-align: center;
    font-family: var(--ax-font-display) !important; font-size: var(--ax-t-display) !important; font-weight: 800 !important;
    line-height: var(--ax-lh-tight) !important; letter-spacing: -.035em !important; color: var(--ax-navy-900) !important;
}

.hrc-adv h2 span {
    background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.hrc-adv .row {
    row-gap: 24px;
}

.hrc-adv__col {
    display: flex;
}

.hrc-adv__card {
    display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 20px;
    background: var(--ax-white); border: 1px solid color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent), 0 16px 38px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    transition: transform var(--ax-dur-sm) var(--ax-ease), box-shadow var(--ax-dur-sm) var(--ax-ease);
}

.hrc-adv__card:hover {
    transform: translateY(-5px); box-shadow: 0 2px 4px color-mix(in srgb, var(--ax-navy-900) 6%, transparent), 0 26px 52px color-mix(in srgb, var(--ax-navy-900) 13%, transparent);
}

.hrc-adv__photo {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
}

.hrc-adv__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ax-ease);
}

.hrc-adv__card:hover .hrc-adv__photo img {
    transform: scale(1.05);
}

.hrc-adv__photo::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ax-navy-900) 38%, transparent));
}

.hrc-adv__ico {
    position: absolute; z-index: 1; left: 18px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: var(--ax-white); color: var(--ax-blue-500); font-size: 1.1rem; box-shadow: 0 8px 18px color-mix(in srgb, var(--ax-navy-900) 22%, transparent);
}

.hrc-adv__body {
    position: relative; flex: 1 1 auto; padding: 22px 24px 28px;
}

.hrc-adv__num {
    position: absolute; top: 18px; right: 20px; padding: 3px 10px; border-radius: 999px; background: var(--ax-blue-100); font-family: var(--ax-font-display); font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ax-blue-500);
}

.hrc-adv .hrc-adv__body h5 {
    margin: 0 0 12px !important; padding: 0 44px 0 0 !important; font-family: var(--ax-font-display) !important; font-size: 1.12rem !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; color: var(--ax-navy-900) !important; text-align: left;
}

.hrc-adv__bar {
    display: block; width: 44px; height: 3px; margin: 0 0 14px; border-radius: 3px; background: var(--ax-cyan-600);
}

.hrc-adv .hrc-adv__body p {
    margin: 0 !important; font-family: var(--ax-font-sans) !important; font-size: .95rem !important; line-height: 1.7 !important; color: var(--ax-ink-soft) !important; text-align: left !important;
}

.hrc-adv__note {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 52px; padding: 30px 36px;
    border-radius: 20px; border-left: 4px solid var(--ax-cyan-600); background: var(--ax-white);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 4%, transparent), 0 16px 38px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
}

.hrc-adv__note-text {
    flex: 1 1 auto;
}

.hrc-adv .hrc-adv__note p {
    margin: 0 0 10px !important; font-family: var(--ax-font-sans) !important; font-size: 1rem !important; line-height: 1.7 !important; color: var(--ax-ink-soft) !important; text-align: left !important;
}

.hrc-adv .hrc-adv__note p:last-child {
    margin-bottom: 0 !important; color: var(--ax-navy-900) !important; font-weight: 600;
}

.hrc-adv__cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-blue-600)); color: var(--ax-white); font-family: var(--ax-font-display); font-weight: 700;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--ax-blue-600) 28%, transparent); transition: transform var(--ax-dur-sm) var(--ax-ease);
}

.hrc-adv__cta:hover {
    transform: translateY(-2px); color: var(--ax-white);
}

@media screen and (max-width: 991px) {
  .hrc-adv {
      padding: 56px 0 64px;
  }
  .hrc-adv__note {
      flex-direction: column; align-items: flex-start; padding: 24px 22px;
  }
}

.hrc-exp {
    padding: 84px 0 96px; background: var(--ax-white);
}

.hrc-exp h2 {
    margin: 0 0 48px !important; padding: 0 !important; text-align: center;
    font-family: var(--ax-font-display) !important; font-size: var(--ax-t-display) !important; font-weight: 800 !important;
    line-height: var(--ax-lh-tight) !important; letter-spacing: -.035em !important; color: var(--ax-navy-900) !important;
}

.hrc-exp h2 span {
    background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.hrc-exp .row {
    row-gap: 24px;
}

.hrc-exp__bar {
    display: block; width: 44px; height: 3px; margin: 0 0 14px; border-radius: 3px; background: var(--ax-cyan-600);
}

@media screen and (max-width: 767px) {
  .hrc-exp {
      padding: 56px 0 64px;
  }
}

.hrc-adv__photo {
    aspect-ratio: auto; background: var(--ax-paper);
}

.hrc-adv__photo img {
    height: auto; aspect-ratio: auto; object-fit: contain;
}

.hrc-adv .hrc-adv__intro {
    max-width: 820px; margin: -26px auto 46px !important; text-align: center !important; font-family: var(--ax-font-sans) !important; font-size: 1.05rem !important; line-height: 1.75 !important; color: var(--ax-ink-soft) !important;
}

.hrc-rows {
    padding: 84px 0 24px; background: var(--ax-white);
}

.hrc-rows--last {
    padding: 72px 0 92px; background: var(--ax-white);
}

.hrc-rows h3 {
    margin: 0 0 56px !important; padding: 0 !important; text-align: center;
    font-family: var(--ax-font-display) !important; font-size: var(--ax-t-display) !important; font-weight: 800 !important;
    line-height: var(--ax-lh-tight) !important; letter-spacing: -.035em !important; color: var(--ax-navy-900) !important;
}

.hrc-rows h3 span {
    background: linear-gradient(100deg, var(--ax-blue-500), var(--ax-cyan-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.hrc-row {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin: 0 0 64px;
}

.hrc-row--rev {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.hrc-row--rev .hrc-row__fig {
    order: 2;
}

.hrc-row--rev .hrc-row__card {
    order: 1;
}

.hrc-row__fig {
    margin: 0; text-align: center;
}

.hrc-row__fig img {
    display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border-radius: 22px; box-shadow: 0 22px 48px color-mix(in srgb, var(--ax-navy-900) 16%, transparent);
}

.hrc-row__card {
    padding: 38px 42px 36px; border-radius: 24px; border-left: 5px solid var(--ax-cyan-600);
    background: linear-gradient(135deg, var(--ax-white) 0%, var(--ax-paper) 100%);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 5%, transparent), 0 22px 54px color-mix(in srgb, var(--ax-navy-900) 9%, transparent);
}

.hrc-rows .hrc-row__card h4 {
    margin: 0 0 14px !important; padding: 0 !important; font-family: var(--ax-font-display) !important; font-size: clamp(1.35rem, 2vw, 1.7rem) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.02em !important; color: var(--ax-navy-900) !important; text-align: left;
}

.hrc-rows .hrc-row__card p {
    margin: 0 !important; font-family: var(--ax-font-sans) !important; font-size: 1.04rem !important; line-height: 1.75 !important; color: var(--ax-ink-soft) !important; text-align: left !important;
}

@media screen and (max-width: 991px) {
  .hrc-rows, .hrc-rows--last {
      padding: 52px 0 20px;
  }
  .hrc-row, .hrc-row--rev {
      grid-template-columns: 1fr; gap: 26px; margin-bottom: 48px;
  }
  .hrc-row--rev .hrc-row__fig, .hrc-row--rev .hrc-row__card {
      order: 0;
  }
  .hrc-row__card {
      padding: 26px 24px;
  }
  .hrc-adv .hrc-adv__intro {
      margin-top: -18px !important;
  }
}

.hrc-row__fig img {
    border-radius: 0; box-shadow: none;
}

.hrc-row__tag {
    display: block; margin: 0 0 14px; font-family: var(--ax-font-display); font-size: .98rem; font-weight: 700; line-height: 1.4; color: var(--ax-blue-500);
}

.hrc-rows .hrc-row__card p + p {
    margin-top: 14px !important;
}

.hrc-row__cta {
    margin-top: 24px;
}

.hrc-row__card, .hrc-adv__card, .hrc .hrc-ben {
    transition: transform var(--ax-dur-sm) var(--ax-ease), box-shadow var(--ax-dur-sm) var(--ax-ease);
}

.hrc-row__card:hover {
    transform: translateY(-3px); box-shadow: 0 2px 4px color-mix(in srgb, var(--ax-navy-900) 6%, transparent), 0 30px 64px color-mix(in srgb, var(--ax-navy-900) 14%, transparent);
}

.hrc-rows h3::after {
    content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--ax-cyan-500), var(--ax-blue-500));
}

.hrc-rows {
    background: linear-gradient(180deg, var(--ax-white) 0%, var(--ax-paper) 100%);
}

.hrc-rows--last {
    background: var(--ax-white);
}


/* ======================================================================
   Global image + responsive fixes, responsive header  [from image-fit.css]
   ====================================================================== */
/* ==========================================================================
   Image fitting: show whole photos instead of cropping them.
   Loaded on every page after the page CSS (see layouts/app.blade.php).
   ========================================================================== */

/* Service pages: "Importance" cards (human-resource-consulting, recruitment, team-building, ...) */
.hrc-imp__photo { height: auto !important; overflow: hidden; }
.hrc-imp__photo img { height: auto !important; aspect-ratio: auto; object-fit: contain !important; object-position: center !important; }

/* Training detail: cover photo under the sidebar */
.hrc--training-detail .sub-services-tab-block .short-banner img { height: auto !important; max-height: none !important; object-fit: contain !important; }

/* Contact page photo */
.contact-page-all .contact-img { height: auto !important; }
.contact-page-all .contact-img img { height: auto !important; object-fit: contain !important; }

/* Home: "why us" image */
.ax-work__figure img { max-height: none !important; height: auto !important; object-fit: contain !important; }

/* Blog thumbnails: match the photo's own 16:10 shape so nothing is trimmed */
.blog2-box-img img { height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; }
.item-blog .figure { height: auto !important; }
.item-blog .figure img { width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; }

/* Events listing: thumbnails were squeezed into a 130px strip (30-50% cut). Use a 3:2 frame and show the whole image. */
.event-category-section .category-bd .category-item-bd .itrm-row .col-item a .figure { height: auto !important; aspect-ratio: 3 / 2; background: var(--ax-paper, #f6f9fd); }
.event-category-section .category-bd .category-item-bd .itrm-row .col-item a .figure img { height: 100% !important; object-fit: contain !important; }


/* ======================================================================
   Responsive fixes (all pages)  [from responsive-fixes.css]
   ====================================================================== */
/* ==========================================================================
   Responsive fixes (all pages). Loaded last, after image-fit.css.
   Breakpoints: <=991px tablet/mobile, <=767px mobile, <=575px small phones.
   ========================================================================== */

/* Media must never exceed its container */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
iframe { max-width: 100%; }
.table-responsive, table { max-width: 100%; }

/* Long words / URLs / e-mails must wrap instead of overflowing */
h1, h2, h3, h4, h5, h6, p, li, a, span { overflow-wrap: break-word; }

/* Tablet & mobile: show only the mobile header.
   premium-home.css forces `.header-area.header-area-all { display:flex }` at every width,
   which stacked the desktop menu under the mobile header on the home and events pages. */
@media (max-width: 991px) {
    .header-area.header-area-all { display: none !important; }
}

/* Pagination wraps instead of running off-screen */
.pagination, .theme-pagination ul, .page-numbers { flex-wrap: wrap; justify-content: center; gap: 4px; }
.pagination .page-link { min-width: 38px; text-align: center; }

/* Comfortable tap targets and readable text on touch devices */
@media (max-width: 767px) {
    body { -webkit-text-size-adjust: 100%; }
    a, button, .nav-link, .btn { -webkit-tap-highlight-color: transparent; }
    h1 { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; line-height: 1.12 !important; }
    .hrc-btn, .hrc-adv__cta, .hrc-band__cta, .button-h-2 { min-height: 48px; }
    iframe[src*="google.com/maps"] { min-height: 280px; }
}
@media (max-width: 575px) {
    .hrc-adv, .hrc-rows, .hrc-band, .hrc-exp, .hrc-appr, .hrc-contact, .hrc-faq { padding-left: 0; padding-right: 0; }
    .hrc-btn, .hrc-adv__cta, .hrc-band__cta { width: 100%; justify-content: center; }
    .hrc-adv__note { padding: 20px 16px; }
    .hrc-steps summary { padding: 16px 18px; font-size: 1rem; }
}

/* Events: category filter chips must wrap inside the viewport */
.event-category-section .category-bd .category-top-btn-item li { max-width: calc(100% - 12px); }
.event-category-section .category-bd .category-top-btn-item li a { max-width: 100%; }
.event-category-section .category-bd .category-top-btn-item li a p { min-width: 0; overflow-wrap: anywhere; }

/* Enquire pages: the row sits outside a .container, so Bootstrap's -12px gutters pushed it off-screen */
.areyou-company > .row { margin-left: 0; margin-right: 0; }
@media (max-width: 991px) {
    .areyou-company .col-lg-6 .item-row[style] { margin: 16px !important; }
}
@media (max-width: 575px) {
    .areyou-company .col-lg-6 .item-row[style] { margin: 12px 0 !important; border-radius: 20px !important; }
}

/* ==========================================================================
   Header — responsive (tablet / mobile / small laptop)
   Desktop bar: never wraps, scales down 992-1399px. <=991px: desktop bar is
   hidden (ID selector beats global.css `.sticky { display:flex !important }`)
   and only the mobile bar + drawer are used.
   ========================================================================== */

.header-area-all .header-elements { flex-wrap: nowrap; }
.header-area-all .site-logo { flex-shrink: 0; }
.header-area-all .main-menu-ex { min-width: 0; }
.header-area-all .main-menu-ex > ul { flex-wrap: nowrap; }
.header-area-all .main-menu-ex > ul > li > a { white-space: nowrap; }
.header-area-all .main-menu-ex > ul > li > a i { margin-left: 4px; }
.header-area-all .main-menu-ex > ul > li > ul { width: min(300px, calc(100vw - 32px)); }
.header-area-all .main-menu-ex > ul > li:focus-within > ul,
.header-area-all .main-menu-ex > ul > li.is-open > ul { visibility: visible; opacity: 1; top: 50px; transform: translateY(0); z-index: 99; }
.header-area-all .main-menu-ex > ul > li.is-open > a i { transform: rotate(180deg); }
.header-area-all .main-menu-ex a:focus-visible,
.mobile-nav a:focus-visible,
.mobile-nav-icon:focus-visible,
.menu-close:focus-visible,
.site-logo a:focus-visible,
.mobile-logo a:focus-visible { outline: 2px solid var(--ax-blue-600, #1e6fd9); outline-offset: 2px; }

@media screen and (max-width: 1399px) {
    .header-area-all .main-menu-ex > ul > li > a { padding: 10px 11px !important; }
}
@media screen and (max-width: 1199px) {
    .header-area-all .main-menu-ex > ul { gap: 0; }
    .header-area-all .main-menu-ex > ul > li > a { font-size: 14px !important; padding: 10px 8px !important; }
    .header-area-all .main-menu-ex > ul > li > a::before { left: 8px; right: 8px; }
    .header-area-all .main-menu-ex > ul > li > a i { margin-left: 3px; }
    .header-area.header-area-all .home1-site-logo img { max-height: 42px !important; }
}

/* Guard: Bootstrap swaps headers at 991.98px, so the desktop bar is hidden to
   that exact width (global.css forces it to display:flex !important). */
@media screen and (max-width: 991.98px) {
    #header.header-area.header-area-all,
    #header.header-area.header-area-all.sticky,
    #header.header-area.header-area-all.sticky2,
    #header.header-area.header-area-all.ax-scrolled { display: none !important; }
}
@media screen and (max-width: 991px) {

    .mobile-header { padding: 12px 0; }
    .mobile-header .container-fluid { padding-left: 16px; padding-right: 16px; }
    .mobile-logo a { display: block; width: 100px; }
    .mobile-logo img { display: block; width: 100%; height: auto; }
    .mobile-nav-icon, .menu-close { background: transparent; padding: 0; font-family: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-nav-icon { flex-shrink: 0; }
    .menu-close { border: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; right: 12px; top: 12px; }
    .mobile-sidebar { height: 100vh; height: 100dvh; max-width: 100%; overflow-x: hidden; overscroll-behavior: contain; padding-left: max(30px, env(safe-area-inset-left)); padding-right: max(30px, env(safe-area-inset-right)); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
    .mobile-sidebar.mobile-menu-active { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mobile-nav li > a { min-height: 44px; display: flex; align-items: center; padding-right: 36px; overflow-wrap: anywhere; }
    span.submenu-button { height: 44px; cursor: pointer; }
    body.mobile-menu-open { overflow: hidden; }
}
@media screen and (max-width: 576px) {
    .mobile-sidebar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) {
    .header-area-all .main-menu-ex > ul > li > ul, .mobile-sidebar { transition: none; }
}

/* Header: content stays inside the Bootstrap container at every width, and the
   bar is always a solid white surface (the scrolled state used to be 95% white,
   letting the hero text show through). */
.header-area.header-area-all > .container { width: 100%; margin-left: auto; margin-right: auto; }
.header-area.header-area-all,
.header-area.header-area-all.sticky,
.header-area.header-area-all.ax-scrolled,
.header-area.header-area-all.sticky.ax-scrolled {
    background: #fff !important;
    background-color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Header dropdown: hovered / focused item text is white on the highlight */
.header-area-all .main-menu-ex > ul > li > ul > li > a:hover,
.header-area-all .main-menu-ex > ul > li > ul > li > a:focus,
.header-area-all .main-menu-ex > ul > li > ul > li > a:focus-visible,
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li > a:hover,
.header-area-all .main-menu-ex > ul > li > ul > li:first-child > a:hover,
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent > ul > li:first-child > a:hover {
    color: #fff !important;
}


/* ======================================================================
   Testimonials (reels rail)  [from common/testimonial.css]
   ====================================================================== */
.ax-reels-section {
    padding: 96px 0;
    background:
        radial-gradient(700px 360px at 12% 0%, var(--ax-cyan-100) 0%, transparent 62%),
        var(--ax-paper);
    font-family: var(--ax-font-sans);
}

.ax-reels-section .hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.026em;
    color: var(--ax-navy-900);
}

.ax-reels-section .hadding2-w .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-600), var(--ax-navy-600));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ax-reels { position: relative; }

.ax-reels__rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 4px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ax-reels__rail::-webkit-scrollbar { display: none; }

.ax-reel {
    flex: 0 0 clamp(260px, 25%, 310px);
    scroll-snap-align: center;
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e2);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}

.ax-reel:hover { transform: translateY(-6px); box-shadow: var(--ax-e4); }

.ax-reel:focus-visible { outline: 3px solid var(--ax-cyan-500); outline-offset: 3px; }

.ax-reel__media {
    position: relative;
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 24px;
    color: var(--ax-white);
    isolation: isolate;
}

.ax-reel__media[data-variant="0"] { background: linear-gradient(160deg, var(--ax-navy-700) 0%, var(--ax-navy-900) 72%); }

.ax-reel__media[data-variant="1"] { background: linear-gradient(160deg, var(--clr-teal-57) 0%, var(--clr-blue-89) 74%); }

.ax-reel__media[data-variant="2"] { background: linear-gradient(160deg, var(--ax-navy-600) 0%, var(--clr-blue-96) 76%); }

.ax-reel__media[data-variant="3"] { background: linear-gradient(160deg, var(--clr-cyan-8) 0%, var(--clr-blue-98) 72%); }

.ax-reel__media::before {
    content: "";
    position: absolute;
    top: -22%; right: -26%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, color-mix(in srgb, var(--ax-cyan-500) 30%, transparent) 0%, transparent 68%);
    z-index: -1;
}

.ax-reel__tag {
    position: absolute;
    top: 20px; left: 24px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ax-navy-900);
    background: var(--ax-cyan-400);
    border-radius: 100px;
    padding: 6px 13px;
}

.ax-reel__mark {
    position: absolute;
    top: 42px; right: 22px;
    font-family: var(--ax-font-display);
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--ax-white) 12%, transparent);
    z-index: -1;
}

.ax-reel__quote {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    color: color-mix(in srgb, var(--ax-white) 93%, transparent);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ax-reel__meta { border-top: 1px solid color-mix(in srgb, var(--ax-white) 18%, transparent); padding-top: 16px; }

.ax-reel__stars { color: var(--ax-cyan-400); font-size: .76rem; letter-spacing: 2px; margin-bottom: 10px; }

.ax-reel__author { display: flex; align-items: center; gap: 11px; }

.ax-reel__avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600));
    color: var(--ax-navy-900);
    font-family: var(--ax-font-display);
    font-weight: 800;
    font-size: .95rem;
}

.ax-reel__author h4 {
    font-family: var(--ax-font-sans) !important;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ax-white);
    margin: 0;
    line-height: 1.3;
}

.ax-reels__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--ax-white);
    color: var(--ax-navy-900);
    box-shadow: var(--ax-e3);
    cursor: pointer;
    transition: background var(--ax-dur-md) var(--ax-ease),
                color var(--ax-dur-md) var(--ax-ease),
                opacity var(--ax-dur-md) var(--ax-ease);
}

.ax-reels__nav:hover { background: var(--ax-cyan-500); }

.ax-reels__nav:disabled { opacity: .3; cursor: default; }

.ax-reels__nav--prev { left: -18px; }

.ax-reels__nav--next { right: -18px; }

.ax-reels__nav:focus-visible { outline: 3px solid var(--ax-cyan-500); outline-offset: 3px; }

.ax-reels__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.ax-reels__dot {
    width: 8px; height: 8px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: var(--ax-line);
    cursor: pointer;
    transition: all var(--ax-dur-md) var(--ax-ease);
}

.ax-reels__dot.is-active {
    width: 26px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--ax-cyan-500), var(--ax-cyan-600));
}

@media (max-width:991px) {
    .ax-reels-section { padding: 68px 0; }

    .ax-reels__nav { display: none; }

    .ax-reels__rail { padding-inline: 2px; }

    .ax-reel { flex-basis: 70%; display: flex; }

    /* A 9:16 ratio at this width made cards ~850px tall with a void above the copy.
       Let the copy set the height; cards in a row still match each other. */
    .ax-reel__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 380px; padding-top: 88px; }
    .ax-reel__quote { display: block; -webkit-line-clamp: unset; overflow: visible; }

}
@media (min-width:576px) and (max-width:991px) {
    .ax-reel { flex-basis: calc(50% - 10px); }
}

@media (max-width:575px) {
    .ax-reel { flex-basis: 84%; }

}

.ax-reels-section {
    font-family: var(--ax-font-sans) !important;
}

.ax-reels-section h3,
.ax-reels-section h4 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

.ax-reels-section { font-family: var(--ax-font-sans); }

.ax-reels-section { padding: var(--ax-sp-section) 0 !important; }

.ax-reels-section .hadding2-w h3 { font-size: var(--ax-t-display) !important; }

.ax-reels-section {                                                      /* P */
    background:
        radial-gradient(700px 340px at 90% 0%, var(--ax-cyan-100) 0%, transparent 60%),
        var(--ax-paper) !important;
}

.ax-reels-section .hadding2-w {
    text-align: center;
}

.ax-reels-section .hadding2-w h3 {
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 20ch;
}

.ax-reels-section .hadding2-w .after2 {
    background: var(--ax-grad-ink) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.ax-reel__avatar,
.ax-reels-section .hadding2-w .after2 {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.ax-reel__avatar {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--ax-navy-900) !important;
    color: var(--ax-navy-900) !important;
}

.ax-reels-section [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

.ax-reel {
    border: 0 !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--ax-navy-900) 7%, transparent) !important;
}


/* --------------------------------------------------------------------------
   Section header — self-contained so the section looks identical on any page,
   whether or not that page loads the home stylesheet.
   -------------------------------------------------------------------------- */
/* Heading -> cards: legacy padding (30px) + margin (46px) + a 40px spacer used to stack to ~124px. */
.ax-reels-section .hadding2-w { margin-bottom: 0; padding-bottom: 0; }
.ax-reels-section .space40 { height: 32px; }

.ax-reels-section .span {
    font-family: var(--ax-font-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--ax-blue-100) !important;
}


/* ======================================================================
   Inner-page banner  [from common/page-banner.css]
   ====================================================================== */
/* ==========================================================================
   Inner-page banner (.accurex-inner-banner) — shared by every inner page.
   Same photo, title and breadcrumb; refined overlay, type and breadcrumb.
   Loaded after the page CSS, so the selectors below match the depth of the
   older rules they replace.
   ========================================================================== */

.accurex-inner-banner:has(.text-bd) {
    position: relative;
    height: auto !important;
    min-height: clamp(240px, 21vw, 340px);
    overflow: hidden;
    isolation: isolate;
    background: #03122c;
}
.accurex-inner-banner:has(.text-bd) .figure { position: absolute; inset: 0; height: 100%; }
.accurex-inner-banner .figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Navy overlay: strongest behind the text on the left, lets the photo breathe on the right */
/* Only banners built with the title + breadcrumb block (.text-bd); the events
   search banner (.bd) keeps its own treatment. */
.accurex-inner-banner .inner-text-bd:has(.text-bd) {
    position: relative;
    height: auto;
    min-height: inherit;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(3, 18, 44, .94) 0%, rgba(3, 18, 44, .82) 42%, rgba(3, 18, 44, .42) 100%),
        linear-gradient(0deg, rgba(3, 18, 44, .55) 0%, transparent 45%) !important;
}
/* Thin brand line along the bottom edge */
.accurex-inner-banner:has(.text-bd)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, #00d9dc, #1e7fe6 60%, transparent);
}

.accurex-inner-banner .inner-text-bd:has(.text-bd) .container {
    height: auto;
    display: flex;
    align-items: center;
    padding-block: clamp(36px, 4vw, 64px);
}
.accurex-inner-banner .inner-text-bd .container .text-bd { width: 100%; }

/* Short accent bar above the title */
.accurex-inner-banner .inner-text-bd .container .text-bd::before {
    content: "";
    display: block;
    width: clamp(44px, 3.6vw, 60px);
    height: 4px;
    margin-bottom: clamp(14px, 1.4vw, 22px);
    border-radius: 4px;
    background: linear-gradient(90deg, #00d9dc, #1e9bff);
}

.accurex-inner-banner .inner-text-bd .container .text-bd h1 {
    max-width: 22em;
    margin: 0 0 clamp(14px, 1.4vw, 22px) !important;
    padding: 0 !important;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(1.75rem, 3.1vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.022em !important;
    text-wrap: balance;
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 10, 30, .35);
}

/* Breadcrumb as a soft pill */
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p a,
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p p,
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p span {
    margin: 0;
    padding: 0;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(13px, 1vw, 16px) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, .86) !important;
    text-decoration: none;
}
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p a:hover { color: #19e0e6 !important; }
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p span { font-size: .8em !important; opacity: .7; }
.accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p p { color: #19e0e6 !important; font-weight: 600 !important; }

@media screen and (max-width: 991px) {
    .accurex-inner-banner:has(.text-bd) { min-height: 300px; }
    /* the fixed mobile header (80px) overlays the top of the page */
    .accurex-inner-banner .inner-text-bd:has(.text-bd) .container { padding: 108px 15px 36px; }   /* side padding clears the Contact tab and social rail */
    .accurex-inner-banner .inner-text-bd:has(.text-bd) {
        background:
            linear-gradient(90deg, rgba(3, 18, 44, .94) 0%, rgba(3, 18, 44, .8) 100%),
            linear-gradient(0deg, rgba(3, 18, 44, .5) 0%, transparent 45%) !important;
    }
}
@media screen and (max-width: 576px) {
    .accurex-inner-banner:has(.text-bd) { min-height: 280px; }
    .accurex-inner-banner .inner-text-bd:has(.text-bd) .container { padding: 104px 15px 30px; }
    .accurex-inner-banner .inner-text-bd .container .text-bd h1 { font-size: 1.6rem !important; }
    .accurex-inner-banner .inner-text-bd .container .text-bd .page-hero-p { padding: 6px 14px; }
}


/* ======================================================================
   Newsletter band (.cta4)  [from common/newsletter.css]
   ====================================================================== */
/* ==========================================================================
   COMMON — newsletter sign-up band (.cta4), used on most inner pages.
   A rounded navy card with soft arcs, a heading with a cyan accent word, and
   a joined email field + Subscribe button. Colours come from colors.css.
   Loaded after the legacy page CSS (see layouts/app.blade.php) so it wins.
   ========================================================================== */

section.cta4, div.cta4 {
    padding: 16px 0 52px !important;      /* more room below, so the card's shadow isn't cut by the next section */
    background: var(--ax-white) !important;
}

.cta4 > .container {
    position: relative;
    overflow: hidden;
    padding: 46px 56px;
    border-radius: 34px;
    background:
        radial-gradient(520px 260px at 96% 0%, color-mix(in srgb, var(--ax-navy-600) 55%, transparent), transparent 70%),
        linear-gradient(110deg, var(--ax-navy-700) 0%, var(--ax-navy-800) 38%, var(--ax-navy-900) 100%);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--ax-navy-900) 22%, transparent);
}
/* decorative arcs */
.cta4 > .container::before,
.cta4 > .container::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta4 > .container::before {            /* left arc */
    left: -120px; bottom: -150px; width: 330px; height: 330px;
    border: 46px solid color-mix(in srgb, var(--ax-cyan-600) 22%, transparent);
}
.cta4 > .container::after {             /* right arc */
    right: -90px; top: -110px; width: 280px; height: 280px;
    border: 34px solid color-mix(in srgb, var(--ax-blue-400) 16%, transparent);
}
.cta4 > .container > .row { position: relative; z-index: 1; }

/* Heading */
.cta4 [class*="hadding"] h1,
.cta4 [class*="hadding"] h2,
.cta4 [class*="hadding"] h3 {
    margin: 0;
    font-family: var(--ax-font-display) !important;
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
    color: var(--ax-white) !important;
}
.cta4 [class*="hadding"] span {
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-blue-400));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Form: white field with envelope, joined to the button */
.cta4 .cta4-wrap {
    position: relative;
    display: flex; align-items: stretch;
    margin: 0 !important;
    height: 68px;
    background: var(--ax-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ax-navy-900) 30%, transparent);
}
.cta4 .cta4-wrap::before {
    content: "\f003";                       /* envelope-o (FontAwesome 4) */
    font-family: FontAwesome;
    position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
    font-size: 20px; line-height: 1;
    color: var(--ax-ink-soft);
}
.cta4 .cta4-wrap input {
    flex: 1 1 auto; width: auto !important; min-width: 0;
    padding: 0 20px 0 62px !important;
    border: 0; outline: 0;
    background: transparent !important;
    font-family: var(--ax-font-sans) !important;
    font-size: 1.02rem !important;
    color: var(--ax-ink) !important;
}
.cta4 .cta4-wrap input::placeholder { color: var(--ax-ink-soft); opacity: 1; }
.cta4 .subsribe-btn4 {
    position: static !important;
    flex: 0 0 auto;
    padding: 0 !important;
}
.cta4 .subsribe-btn4 button {
    height: 100%;
    padding: 0 38px;
    border: 0;
    border-radius: 0 20px 20px 0;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-blue-500)) !important;
    font-family: var(--ax-font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--ax-white) !important;
    cursor: pointer;
    transition: filter var(--ax-dur-sm) var(--ax-ease);
}
.cta4 .subsribe-btn4 button:hover { filter: brightness(1.08); }

@media (max-width: 991px) {
    .cta4 > .container { padding: 36px 30px; border-radius: 26px; }
    .cta4 .cta4-wrap { margin-top: 22px !important; }
}
@media (max-width: 575px) {
    .cta4 > .container { padding: 28px 20px; }
    .cta4 .cta4-wrap { height: 60px; }
    .cta4 .subsribe-btn4 button { padding: 0 20px; font-size: .95rem !important; }
    .cta4 .cta4-wrap input { padding-left: 52px !important; }
    .cta4 .cta4-wrap::before { left: 18px; }
}

/* The neighbouring sections bring their own 90px+ padding; pull it in so the band
   sits ~64px from the content above and below. */
.cta4 + .ax-reels-section { padding-top: 48px !important; margin-top: 0 !important; }

/* Hover: the legacy .button4-header sweeps a pale panel across the button (::after),
   recolours its text dark and lifts it 5px, which washed the label out against the
   gradient. Keep the gradient and white label; only brighten slightly. */
.cta4 .subsribe-btn4 button::after,
.cta4 .subsribe-btn4 button:hover::after { display: none !important; content: none !important; }
.cta4 .subsribe-btn4 button:hover,
.cta4 .subsribe-btn4 button:focus-visible {
    color: var(--ax-white) !important;
    transform: none !important;
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-blue-500)) !important;
    filter: brightness(1.08);
}
.cta4 .subsribe-btn4 button { transition: filter var(--ax-dur-sm) var(--ax-ease); box-shadow: none; }


/* ======================================================================
   FAQ block  [from common/faq.css]
   ====================================================================== */
/* FAQ block (.faqblock_home), shared by every page that uses layouts/app.blade.php. Same design as the home page FAQ (extracted from premium-home.css). */
.faqblock_home{ padding: var(--ax-sp-section) 0 !important; background: var(--ax-paper); }
.faqblock_home .title{ text-align: center; margin-bottom: var(--ax-sp-head); }
.faqblock_home .title h3{
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: var(--ax-lh-tight) !important;
    letter-spacing: -.028em !important;
    color: var(--ax-navy-900) !important;
    margin: 0 !important;
}
.faqblock_home .bd_block .accordion{
    max-width: 860px;
    margin-inline: auto;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-r-lg);
    overflow: hidden;
    box-shadow: var(--ax-e1);
}
.faqblock_home .accordion-item.accordion_row{
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ax-line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.faqblock_home .accordion-item.accordion_row:last-child{ border-bottom: 0 !important; }
.faqblock_home .accordion-button{
    font-family: var(--ax-font-sans) !important;
    font-size: 1.03rem !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    color: var(--ax-navy-900) !important;
    background: transparent !important;
    padding: 22px 28px !important;
    gap: 18px;
    box-shadow: none !important;
    border: 0 !important;
    cursor: pointer;
    transition: background var(--ax-dur-sm) var(--ax-ease), color var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-button:hover{ background: var(--ax-paper) !important; }
.faqblock_home .accordion-button:not(.collapsed){ color: var(--ax-cyan-600) !important; }
.faqblock_home .accordion-button::after{
    background-image: none !important;
    content: "\002B";
    font-family: var(--ax-font-sans) !important;
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1;
    display: grid; place-items: center;
    width: 30px !important; height: 30px !important;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ax-cyan-100) !important;
    color: var(--ax-navy-700) !important;
    transform: none !important;
    transition: background var(--ax-dur-sm) var(--ax-ease),
                color var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-button:not(.collapsed)::after{
    content: "\2212";
    background: linear-gradient(135deg, var(--ax-cyan-500), var(--ax-cyan-600)) !important;
    color: var(--ax-navy-900) !important;
}
.faqblock_home .accordion-body{
    padding: 0 28px 24px !important;
    font-size: var(--ax-t-small) !important;
    line-height: 1.8 !important;
    color: var(--ax-ink-soft) !important;
}
.faqblock_home{ background: var(--ax-white) !important; }
.faqblock_home .title{
    text-align: center;
}
.faqblock_home .title h3{
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 20ch;
}
@media (max-width: 767px) {
.faqblock_home .title h3{ max-width: 100%; }
}
.faqblock_home{ padding: 68px 0 !important; }
.faqblock_home .title{ margin-bottom: 32px !important; }
.faqblock_home .bd_block .accordion{
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.faqblock_home .accordion-item.accordion_row{
    background: var(--ax-white) !important;
    border: 1px solid var(--ax-line) !important;
    border-radius: var(--ax-r-sm) !important;
    margin-bottom: 10px !important;
    height: fit-content;
    overflow: hidden;
    transition: border-color var(--ax-dur-sm) var(--ax-ease),
                box-shadow var(--ax-dur-sm) var(--ax-ease);
}
.faqblock_home .accordion-item.accordion_row:hover{ border-color: color-mix(in srgb, var(--ax-cyan-500) 40%, transparent) !important; }
.faqblock_home .accordion-button{
    font-size: .95rem !important;
    font-weight: 700 !important;
    padding: 15px 18px !important;
    gap: 12px;
    line-height: 1.4 !important;
}
.faqblock_home .accordion-button::after{
    width: 22px !important; height: 22px !important;
    font-size: 1.1rem;
}
.faqblock_home .accordion-body{
    padding: 0 18px 16px !important;
    font-size: .89rem !important;
    line-height: 1.65 !important;
}
@media (max-width: 991px) {
.faqblock_home .bd_block .accordion{ grid-template-columns: 1fr; }
.faqblock_home{ padding: 52px 0 !important; }
}
.faqblock_home .bd_block .accordion{
    display: block;
    max-width: 820px;
    margin-inline: auto;
    column-gap: 0;
}
.faqblock_home .accordion-item.accordion_row{ margin-bottom: 8px !important; }
.faqblock_home .title h3{
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
}
.ax-faq__filters{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 820px;
    margin: 0 auto 28px;
}
.ax-faq__chip{
    font-family: var(--ax-font-sans);
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ax-ink-soft);
    background: transparent;
    border: 1px solid var(--ax-line);
    border-radius: 100px;
    padding: 9px 18px;
    cursor: pointer;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.ax-faq__chip:hover{ color: var(--ax-navy-900); border-color: var(--ax-blue-400); }
.ax-faq__chip.is-active{
    color: var(--ax-white);
    background: var(--ax-grad-accent);
    border-color: transparent;
}
.ax-faq__chip:focus-visible{ outline: 2px solid var(--ax-blue-500); outline-offset: 3px; }
.faqblock_home .accordion-item.accordion_row[hidden]{ display: none !important; }
.faqblock_home .accordion-button::after{
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
    background: transparent !important;
    border: 0 !important;
    border-right: 1.8px solid var(--ax-ink-soft) !important;
    border-bottom: 1.8px solid var(--ax-ink-soft) !important;
    border-radius: 1px !important;
    transform: rotate(45deg) translate(-2px, -2px) !important;
    transition: transform var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease);
}
.faqblock_home .accordion-button:not(.collapsed)::after{
    transform: rotate(225deg) translate(-2px, -2px) !important;
    border-right-color: var(--ax-blue-500) !important;
    border-bottom-color: var(--ax-blue-500) !important;
}
.faqblock_home .accordion-item.accordion_row{
    border-radius: var(--ax-r-sm) !important;
    margin-bottom: 8px !important;
}
.faqblock_home .accordion-button{
    align-items: center;
    padding: 16px 20px !important;
}
.faqblock_home .accordion-button:not(.collapsed){ color: var(--ax-blue-600) !important; }
.faqblock_home .accordion-body{ padding: 0 20px 18px !important; }
.faqblock_home [data-aos]{
    opacity: 1 !important;
    transform: none !important;
}
.faqblock_home .accordion-item.accordion_row{
    border: 0 !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ax-navy-900) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--ax-navy-900) 7%, transparent) !important;
}
.faqblock_home .accordion-item.accordion_row{
    box-shadow: none !important;
    background: var(--ax-white) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
}
.faqblock_home .accordion-item.accordion_row:hover{ background: var(--ax-paper) !important; }
.ax-faq__chip{
    border: 0 !important;
    box-shadow: none !important;
    background: var(--ax-blue-100) !important;
}
.ax-faq__chip.is-active{ background-image: var(--ax-grad-accent) !important; }

/* open row: keep the chevron plain (the earlier gradient fill turned it into a solid diamond) */
.faqblock_home .accordion-button:not(.collapsed)::after{ background: transparent !important; }

/* tighter rows: the header's own padding doubled up with the button's; hover changes nothing */
.faqblock_home .accordion-header{ padding: 0 !important; }
.faqblock_home .accordion-button{ padding: 14px 20px !important; }
.faqblock_home .accordion-button:hover,
.faqblock_home .accordion-button:focus{ background: transparent !important; box-shadow: none !important; }
.faqblock_home .accordion-item.accordion_row:hover{ background: inherit !important; box-shadow: none !important; }
.faqblock_home .accordion-item.accordion_row:hover .accordion-header{ background-color: rgb(232, 236, 243) !important; }


/* ======================================================================
   Eyebrow / industries  [from common/industries.css]
   ====================================================================== */
/* "Industries We Serve" dark section (.ax-ind), shared by pages that use layouts/app.blade.php. Extracted from premium-home.css. */
.ax-caps__eyebrow{
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ax-navy-700);
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: 100px;
    padding: 8px 18px;
    margin-bottom: 20px;
    box-shadow: var(--ax-e1);
}
.ax-caps__eyebrow::before{
    content: ""; width: 14px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ax-cyan-400), var(--ax-cyan-600));
}
.ax-caps__eyebrow{
    font-family: var(--ax-font-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
}
.ax-svc__head .ax-caps__eyebrow,
.ax-work__head .ax-caps__eyebrow{ display: inline-flex; }
.ax-caps__eyebrow::before{ background: var(--ax-grad-accent); }
.ax-ind{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--ax-sp-section) 0;
    background: var(--ax-navy-900);
    font-family: var(--ax-font-sans);
}
.ax-ind__bg{
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(760px 380px at 85% -8%, color-mix(in srgb, var(--ax-blue-500) 26%, transparent) 0%, transparent 62%),
        radial-gradient(620px 320px at 8% 100%, color-mix(in srgb, var(--ax-cyan-500) 16%, transparent) 0%, transparent 60%);
}
.ax-ind__head{ max-width: 760px; margin: 0 auto var(--ax-sp-head); text-align: center; }
.ax-caps__eyebrow--dark{
    background: color-mix(in srgb, var(--ax-white) 7%, transparent) !important;
    border-color: color-mix(in srgb, var(--ax-white) 16%, transparent) !important;
    color: var(--ax-cyan-300) !important;
    box-shadow: none !important;
}
.ax-ind__title{
    font-family: var(--ax-font-display) !important;
    font-weight: 800 !important;
    font-size: var(--ax-t-display) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    color: var(--ax-white) !important;
    margin: 0 auto 16px !important;
    max-width: 20ch;
}
.ax-ind__title .after2{
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-blue-400)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ax-ind__intro{
    font-size: 1.02rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--ax-white) 70%, transparent);
    margin: 0 auto;
    max-width: 58ch;
}
.ax-ind__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ax-gap);
}
.ax-ind__card{
    background: color-mix(in srgb, var(--ax-white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 12%, transparent);
    border-radius: var(--ax-r-md);
    padding: 28px 24px 26px;
    transition: background var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease),
                transform var(--ax-dur-md) var(--ax-ease);
}
.ax-ind__card:hover{
    background: color-mix(in srgb, var(--ax-white) 9%, transparent);
    border-color: color-mix(in srgb, var(--ax-cyan-500) 42%, transparent);
    transform: translateY(-5px);
}
.ax-ind__icon{
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ax-cyan-500) 14%, transparent);
    color: var(--ax-cyan-300);
    font-size: 1.02rem;
    margin-bottom: 18px;
    transition: background var(--ax-dur-md) var(--ax-ease), color var(--ax-dur-md) var(--ax-ease);
}
.ax-ind__card:hover .ax-ind__icon{
    background: var(--ax-grad-accent);
    color: var(--ax-white);
}
.ax-ind__name{
    font-family: var(--ax-font-display) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.26 !important;
    letter-spacing: -.02em !important;
    color: var(--ax-white) !important;
    margin: 0 0 9px !important;
}
.ax-ind__text{
    font-size: .89rem !important;
    line-height: 1.62 !important;
    color: color-mix(in srgb, var(--ax-white) 64%, transparent) !important;
    margin: 0 !important;
}
@media (max-width: 1199px) {
.ax-ind__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.ax-ind__grid{ grid-template-columns: 1fr; }
}
.ax-ind [data-aos]{
    opacity: 1 !important;
    transform: none !important;
}
.ax-clients__head .ax-caps__eyebrow{ margin-bottom: 18px; }
.ax-caps__eyebrow{
    border: 0 !important;
    box-shadow: none !important;
    background: var(--ax-blue-100) !important;
}
.ax-caps__eyebrow--dark{ background: color-mix(in srgb, var(--ax-white) 8%, transparent) !important; }


/* ==========================================================================
   Testimonials — rail bleeds to the screen edges on tablet / mobile
   ========================================================================== */
@media screen and (max-width: 991px) {
    .ax-reels-section .ax-reels__rail { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: calc(50vw - 50%); }
}
@media screen and (max-width: 576px) {
    .ax-reels-section .ax-reel { flex-basis: 86%; }
}

/* ==========================================================================
   Floating widgets (social rail, Contact Now tab) — must not cover copy on phones
   ========================================================================== */
@media screen and (max-width: 576px) {
    .quick_enquiry { display: none; }
    .enq-wrap { transform: scale(.7); transform-origin: left center; }
}

/* ==========================================================================
   Newsletter band (.cta4) — tablet and mobile layout
   <=991px: heading on top, one white pill below holding the field and a
            fully rounded Subscribe button.
   <=576px: field and button stack, each a full-width pill.
   ========================================================================== */
@media screen and (max-width: 991px) {
    .cta4 .container { padding: 32px 28px !important; max-width: calc(100% - 96px); }   /* clears the Contact tab and social rail */
    .cta4 .hadding4-w { margin: 0 0 22px; }
    .cta4 .hadding4-w h3 { margin: 0 !important; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.1rem) !important; line-height: 1.15 !important; }
    .cta4 .cta4-wrap {
        position: relative; display: flex !important; flex-direction: row !important; align-items: center;
        height: 62px !important; margin: 0 !important; padding: 6px !important;
        background: #fff; border-radius: 999px; overflow: hidden; box-shadow: 0 10px 28px rgba(3, 18, 44, .3);
    }
    .cta4 .cta4-wrap::before { top: 50% !important; left: 24px; transform: translateY(-50%); }
    .cta4 .cta4-wrap input {
        flex: 1 1 auto; width: auto !important; min-width: 0; height: 100%;
        padding: 0 12px 0 54px !important; border: 0; outline: 0; background: transparent;
        font-size: 1rem; text-overflow: ellipsis;
    }
    .cta4 .cta4-wrap .subsribe-btn4 { position: static !important; flex: none; height: 100%; margin: 0; padding: 0 !important; }
    .cta4 .cta4-wrap .button4-header {
        height: 100%; padding: 0 30px; border: 0; border-radius: 999px;
        font-size: 1rem; font-weight: 700; white-space: nowrap;
    }
}
@media screen and (max-width: 576px) {
    .cta4 .container { margin-inline: 15px; width: auto; max-width: none; padding: 28px 20px !important; border-radius: 22px; }
    .cta4 .hadding4-w h3 { font-size: 1.6rem !important; }
    .cta4 .cta4-wrap {
        flex-direction: column !important; align-items: stretch; gap: 12px;
        height: auto !important; padding: 0 !important; background: transparent; overflow: visible; border-radius: 0; box-shadow: none;
    }
    .cta4 .cta4-wrap::before { top: 27px !important; left: 22px; }
    .cta4 .cta4-wrap input { flex: none; height: 54px; padding: 0 20px 0 54px !important; border-radius: 999px; background: #fff !important; box-shadow: 0 8px 22px rgba(3, 18, 44, .28); }
    .cta4 .cta4-wrap .subsribe-btn4 { height: auto; }
    .cta4 .cta4-wrap .button4-header { width: 100%; height: 54px; padding: 0 20px; }
}

/* ==========================================================================
   Page container — side padding on tablet and mobile (all pages)
   ========================================================================== */
@media screen and (max-width: 991px) {
    html body .container {   /* `html` keeps this ahead of any per-page `body .container` rule */
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==========================================================================
   Footer newsletter — phones: field and Subscribe button stack as two pills
   ========================================================================== */
@media screen and (max-width: 576px) {
    footer.ax-foot .ax-foot__form {
        position: relative; flex-direction: column; align-items: stretch; gap: 12px;
        height: auto; padding: 0; background: transparent; border-radius: 0; overflow: visible;
    }
    footer.ax-foot .ax-foot__mail { position: absolute; left: 20px; top: 27px; margin: 0; transform: translateY(-50%); z-index: 1; font-size: 18px; }
    footer.ax-foot .ax-foot__form input {
        flex: none; width: 100%; height: 54px; padding: 0 20px 0 52px;
        border-radius: 999px; background: #fff; font-size: 1rem;
    }
    footer.ax-foot .ax-foot__btn { width: 100%; height: 54px; margin: 0; padding: 0 20px; justify-content: center; font-size: 1rem; }
}

/* ==========================================================================
   Service-page hero: photo covers the whole hero on tablet/mobile (no hard
   crop edge) and the hero button keeps a natural size.
   ========================================================================== */
@media screen and (max-width: 991px) {
    html .hrc-hero .hrc-hero__photo { width: 100%; left: 0; right: 0; opacity: .32; }
    html .hrc-hero .hrc-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
    html .hrc-hero .hrc-hero__text { max-width: 100%; }
    html .hrc-hero .hrc-btn { padding: 14px 26px; font-size: 14.5px; min-height: 0; width: auto; max-width: 100%; }
}
@media screen and (max-width: 576px) {
    html .hrc-hero .hrc-btn { padding: 12px 20px; font-size: 14px; width: auto; text-align: center; }
    html .hrc-hero--page { min-height: 300px; }
}

/* ==========================================================================
   Events search banner (.bd.events): photo fills the banner like every other
   inner-page banner; the search controls keep a compact, consistent size.
   ========================================================================== */
.accurex-inner-banner:has(.bd.events) { position: relative; overflow: hidden; isolation: isolate; background: #03122c; }
.accurex-inner-banner:has(.bd.events) .figure { display: block !important; position: absolute; inset: 0; height: 100%; z-index: 0; }
.accurex-inner-banner:has(.bd.events) .figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.accurex-inner-banner:has(.bd.events) .inner-text-bd { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(3,18,44,.78), rgba(3,18,44,.9)); }
.accurex-inner-banner .bd.events .btn-find { width: auto; min-width: 120px; min-height: 0; line-height: 1.2; }
.accurex-inner-banner .bd.events .bootstrap-select > .dropdown-toggle { min-height: 52px; height: auto; display: flex; align-items: center; }
@media screen and (max-width: 767px) {
    .accurex-inner-banner .bd.events .item-search { flex-direction: column; gap: 10px; }
    .accurex-inner-banner .bd.events .item-button { display: flex; justify-content: center; }
    .accurex-inner-banner .bd.events .btn-find { width: 100%; max-width: 220px; padding: 11px 24px !important; font-size: .9rem !important; }
    .accurex-inner-banner .bd.events .bootstrap-select > .dropdown-toggle { min-height: 48px; }
}

/* Banners on tablet/mobile: content starts at the left edge (15px gutter), text left-aligned */
@media screen and (max-width: 991px) {
    html body .hrc-hero > .container,
    html body .accurex-inner-banner .inner-text-bd > .container { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; }
    html .hrc-hero, html .hrc-hero__text, html .hrc-hero h1,
    html .accurex-inner-banner .inner-text-bd, html .accurex-inner-banner .text-bd, html .accurex-inner-banner h1,
    html .accurex-inner-banner .bd.events, html .accurex-inner-banner .bd.events h1 { text-align: left; }
    html .accurex-inner-banner .bd.events { margin-inline: 0; max-width: 100%; }
    html .accurex-inner-banner .bd.events .item-button { justify-content: flex-start; }
}

/* Benefit / process cards (.hrc-ben): clear gap between icon and title on tablet / mobile, and no mid-word breaks */
@media screen and (max-width: 991px) {
    html body .hrc .benefits-outsourcing-block .item.hrc-ben { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; }
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .box-icon { width: 64px; height: 64px; min-width: 0; margin: 0; }
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .text h4 { overflow-wrap: break-word; word-break: normal; hyphens: manual; font-size: clamp(1.05rem, 4.4vw, 1.3rem) !important; padding-right: 52px !important; min-width: 0; }
}
@media screen and (max-width: 576px) {
    html body .hrc .benefits-outsourcing-block .item.hrc-ben { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .box-icon { width: 56px; height: 56px; }
}

/* .hrc-ben header: icon and title block share one vertical centre line */
@media screen and (max-width: 991px) {
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .box-icon { align-self: center; }
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .text h4 { padding-top: 0 !important; padding-bottom: 0 !important; }
    html body .hrc .benefits-outsourcing-block .item.hrc-ben .hrc-ben__bar { margin-top: 8px !important; }
}

/* Banner on tablet / mobile: clear the fixed 80px header and keep balanced spacing on every page */
@media screen and (max-width: 991px) {
    html body .hrc-hero { padding-top: 80px; padding-bottom: 0; min-height: 340px; }
    html body .hrc-hero > .container { padding-top: 32px; padding-bottom: 36px; }
}
@media screen and (max-width: 576px) {
    html body .hrc-hero { padding-top: 80px; min-height: 320px; }
    html body .hrc-hero > .container { padding-top: 26px; padding-bottom: 30px; }
}

/* floating widgets always sit above page sections */
.enq-wrap, .quick_enquiry, .whatsapp, .progress-wrap { z-index: 1000; }