/* ==========================================================================
   ENOSIS LEARNING - CENTRAL SINGLE SOURCE OF TRUTH (2026)
   File: css/site-theme.css?v=20260929_v1
   ========================================================================== */

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

/* ── 1. DESIGN TOKENS (STRICT SOLID COLORS - NO GRADIENTS) ── */
:root {
    --hero-bg:           #EDF4FC; /* Clean, elegant, soft ice blue hero background */
    --hero-border:       #D0E2F5; /* Crisp, subtle refined border (not overwhelming) */
    --brand-blue:        #1E88E5; /* Top line, badge icons, primary links */
    --brand-blue-strong: #1976D2; /* Label pill background */
    --brand-blue-dark:   #1565C0; /* Highlight word */
    --navy:              #0F2A47; /* Headings, badge text */
    --text-soft:         #33506E; /* Intro text */
    --muted:             #4A6483; /* Breadcrumb */
    --accent-orange:     #F57C00; /* CTA button only */
    --accent-yellow:     #FFD54F; /* Light accent */
    --bg:                #F5F8FC; /* Page background */
    --card:              #FFFFFF; /* White card */
    --border:            #E3EAF3; /* Standard border */
    --text:              #1F2937; /* High contrast body text */
    --tint-blue:         #EAF3FD; /* 40px icon box background */
    --pill-blue:         #1976D2; /* Label pill fallback */
}

/* ── 2. GLOBAL RESET & BASE TYPOGRAPHY ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body, button, input, select, textarea, p, a, span, label, table, th, td, li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .poppins-title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--navy) !important;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-top: 0;
}

/* ── FOOTER HEADING OVERRIDE: Ensure footer column headings stay visible on dark bg ── */
footer h5,
footer h4,
footer h3,
footer h2,
footer h1,
.footer h5,
.footer h4,
.footer h3,
.footer h2,
.footer h1 {
    color: #0ea5e9 !important; /* Cyan-blue — visible on dark navy footer background */
    font-family: 'Poppins', sans-serif !important;
}

h1 { font-size: 32px !important; line-height: 40px !important; }
h2 { font-size: 24px !important; line-height: 32px !important; }
h3 { font-size: 18px !important; line-height: 26px !important; }
h4 { font-size: 16px !important; line-height: 24px !important; }

@media (max-width: 768px) {
    h1 { font-size: 26px !important; line-height: 34px !important; }
    h2 { font-size: 20px !important; line-height: 28px !important; }
    h3 { font-size: 16px !important; line-height: 24px !important; }
}

/* ── 3. GLOBAL ICON & SAFETY NET ── */
.icon, svg.icon, i.icon {
    width: 1.25em !important;
    height: 1.25em !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.content img.icon, .card svg, .tile svg {
    max-width: 24px !important;
    max-height: 24px !important;
}

i.fa, i.fa-solid, i.fa-regular, i.fa-brands {
    display: inline-block;
    vertical-align: middle;
}

/* ── 4. ICE BLUE HERO BANNER COMPONENT (THIN, COMPACT, PREMIUM STRIP) ── */
.page-hero,
.enosis-hero-band {
    background-color: var(--hero-bg) !important;
    background: linear-gradient(180deg, #F0F6FE 0%, #E8F2FC 100%) !important;
    border: 1px solid var(--hero-border) !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px -2px rgba(15, 42, 71, 0.05) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.page-hero:hover,
.enosis-hero-band:hover {
    box-shadow: 0 4px 14px -2px rgba(15, 42, 71, 0.08) !important;
    border-color: #B9D5F5 !important;
}

/* Remove any legacy pseudo-element circles or strips */
.page-hero::before,
.page-hero::after,
.enosis-hero-band::before,
.enosis-hero-band::after {
    display: none !important;
    content: none !important;
}

.page-hero .hero-container,
.enosis-hero-band .hero-container,
.enosis-hero-band > .container,
.enosis-hero-band > .container-fluid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 18px 24px !important;
    box-sizing: border-box !important;
}

/* If inner elements are direct children without .hero-container wrapper */
.enosis-hero-band:not(:has(.hero-container)) {
    padding: 18px 24px !important;
    max-width: 100% !important;
}

/* 1. Breadcrumb */
.page-hero .hero-breadcrumb,
.enosis-hero-breadcrumb {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}

.page-hero .hero-breadcrumb a,
.enosis-hero-breadcrumb a {
    color: var(--muted) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.page-hero .hero-breadcrumb a:hover,
.enosis-hero-breadcrumb a:hover {
    color: var(--brand-blue) !important;
}

.page-hero .hero-breadcrumb .separator,
.enosis-hero-breadcrumb .separator {
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 4px !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.page-hero .hero-breadcrumb .separator i,
.page-hero .hero-breadcrumb .separator svg,
.enosis-hero-breadcrumb .separator i,
.enosis-hero-breadcrumb .separator svg {
    font-size: 8px !important;
    width: 8px !important;
    height: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 2. Label Pill */
.page-hero .hero-label-pill,
.enosis-welcome-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background-color: var(--brand-blue-strong) !important;
    background-image: none !important;
    border: none !important;
    height: 24px !important;
    padding: 0 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 8px !important;
    line-height: 24px !important;
    box-shadow: none !important;
}

.page-hero .hero-label-pill i,
.page-hero .hero-label-pill svg,
.enosis-welcome-label i,
.enosis-welcome-label svg {
    font-size: 11px !important;
    color: #FFFFFF !important;
    width: 12px !important;
    height: 12px !important;
}

/* 3. H1 Heading */
.page-hero .hero-h1,
.enosis-hero-h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 23px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 4px 0 8px 0 !important;
    letter-spacing: -0.2px !important;
}

.page-hero .hero-h1 .hero-highlight,
.page-hero .hero-h1 span.hero-highlight,
.enosis-hero-h1 .hero-highlight,
.enosis-hero-h1 span.hero-highlight {
    color: var(--brand-blue-dark) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* 4. Intro Paragraph */
.page-hero .hero-intro,
.enosis-hero-intro {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--text-soft) !important;
    max-width: 860px !important;
    margin: 0 0 10px 0 !important;
}

/* 5. Badge Pills */
.page-hero .hero-badges,
.enosis-hero-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.page-hero .hero-badge-pill,
.enosis-hero-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--navy) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--hero-border) !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px rgba(15, 42, 71, 0.03) !important;
    transition: border-color 0.2s ease !important;
    white-space: nowrap !important;
}

.page-hero .hero-badge-pill:hover,
.enosis-hero-badge-pill:hover {
    border-color: #B0D0F5 !important;
    background: #FFFFFF !important;
    color: var(--navy) !important;
}

.page-hero .hero-badge-pill i,
.page-hero .hero-badge-pill svg,
.enosis-hero-badge-pill i,
.enosis-hero-badge-pill svg {
    color: var(--brand-blue) !important;
    font-size: 12px !important;
    width: 14px !important;
    height: 14px !important;
    text-align: center;
}

/* ── 4b. ARTICLE HERO STRIP ── */
.blog-article-wrapper {
    margin: 14px auto 28px !important;
    padding: 0 12px !important;
}

.blog-hero-card {
    background: #ffffff !important;
    border: 1px solid #D0E2F5 !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 42, 71, 0.04) !important;
}

.blog-badge {
    background: #1E88E5 !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 14px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.blog-hero-card h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0F2A47 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
}

.blog-meta-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 12px !important;
    color: #64748b !important;
    flex-wrap: wrap !important;
}

.blog-meta-bar span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.blog-meta-bar i {
    font-size: 11px !important;
    width: 13px !important;
}

/* Safety net: only constrain actual img elements inside hero (not FA icons) */
.page-hero img,
.enosis-hero-band img {
    max-width: 40px !important;
    max-height: 40px !important;
}

/* Ensure label pill icon stays white and visible */
.page-hero .hero-label-pill i,
.page-hero .hero-label-pill svg {
    color: #FFFFFF !important;
    font-size: 14px !important;
}

/* Ensure badge pill icons stay blue and visible */
.page-hero .hero-badge-pill i,
.page-hero .hero-badge-pill svg,
.enosis-hero-badge-pill i,
.enosis-hero-badge-pill svg {
    color: var(--brand-blue) !important;
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .page-hero .hero-container,
    .enosis-hero-band .hero-container,
    .enosis-hero-band:not(:has(.hero-container)) {
        padding: 24px 16px !important;
    }
    .page-hero .hero-h1,
    .enosis-hero-h1 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    .page-hero .hero-intro,
    .enosis-hero-intro {
        font-size: 14.5px !important;
    }
}


/* ── 5. ACCORDION COMPONENT & ICON RULES ── */
.panel-group {
    margin-bottom: 24px !important;
}

.panel-group .panel,
.enosis-accordion-item {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(15, 42, 71, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.panel-group .panel:hover,
.enosis-accordion-item:hover {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.08) !important;
}

/* Normal state: accordion panel heading - white card */
/* NOTE: Only targets accordion headings, not static KB/content panels */
.panel-group .panel-heading,
#accordion .panel-heading,
.enosis-accordion-header {
    background: var(--card) !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    user-select: none !important;
    transition: background-color 0.2s !important;
}

/* Static content panel headings (KB, non-accordion) keep their inline bg color */
/* These use inline style="background:#EAF3FD" and should NOT be overridden */

.panel-group .panel-heading:hover,
#accordion .panel-heading:hover,
.enosis-accordion-header:hover {
    background-color: var(--bg) !important;
    transform: none !important;
}

/* ACCORDION TITLE MUST ALWAYS BE DARK NAVY IN NORMAL STATE (Fixes White-on-White Hover Bug) */
.panel-title,
.panel-title a,
.enosis-course-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--navy) !important; /* CRITICAL: Must be dark in normal state */
    margin: 0 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    /* NOTE: do NOT add display:flex/width:100% here — panel-heading controls layout */
}

.panel-title a:hover,
.panel-title a:focus {
    color: var(--brand-blue) !important;
    text-decoration: none !important;
}

/* Course Icon Box: EXACTLY 40px x 40px, radius 10px, soft blue #EAF3FD, 22px icon */
.enosis-icon-box {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 10px !important;
    background: var(--tint-blue) !important;
    border: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-blue) !important;
    flex-shrink: 0 !important;
}

.enosis-icon-box i,
.enosis-icon-box svg {
    font-size: 22px !important; /* Exactly 22px */
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    color: var(--brand-blue) !important;
}

/* Accordion Chevron: EXACTLY 28px circle, 18px icon, rotates 180deg */
.accordion-chevron,
.enosis-chevron,
.toggle-icon,
.panel-heading .toggle-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    border-radius: 50% !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transition: transform 0.22s ease, background 0.2s, color 0.2s !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
}

.accordion-chevron i,
.enosis-chevron i,
.toggle-icon i {
    width: 18px !important;
    height: 18px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Rotate when open */
.panel-heading:not(.collapsed) .toggle-icon,
.panel-heading:not(.collapsed) .accordion-chevron,
.enosis-accordion-header:not(.collapsed) .enosis-chevron,
.enosis-accordion-header[aria-expanded="true"] .enosis-chevron {
    transform: rotate(180deg) !important;
    background: var(--tint-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-blue) !important;
}

.panel-body,
.enosis-accordion-body {
    padding: 16px 20px !important;
    background: var(--card) !important;
    border-top: 1px solid var(--border) !important;
    font-size: 14px !important;
    color: var(--text) !important;
    line-height: 1.6 !important;
}
/* ── 5b. NUCLEAR SPECIFICITY ACCORDION FIX (Overrides any conflicting rule) ── */
/* Nuclear accordion overrides - SCOPED to #accordion and .panel-group only */
html body #accordion .panel.panel-default,
html body .panel-group .panel.panel-default,
html body .panel-group .panel-default {
    background: #FFFFFF !important;
    border: 1px solid #E3EAF3 !important;
    border-radius: 10px !important;
}

/* Accordion panel headings: white card (only inside accordion/panel-group) */
html body #accordion .panel-default > .panel-heading,
html body .panel-group .panel-default > .panel-heading {
    background: #FFFFFF !important;
    color: #0F2A47 !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

html body #accordion .panel-default > .panel-heading .panel-title,
html body #accordion .panel-title,
html body .panel-group .panel-title,
html body .panel-group .panel-title a {
    color: #0F2A47 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body #accordion .panel-default > .panel-heading .panel-title a:hover,
html body .panel-group .panel-title a:hover {
    color: #1652F0 !important;
}

/* IQ Page: Panel-info panels keep blue header */
html body .panel.panel-info > .panel-heading {
    background: #1652F0 !important;
    color: #FFFFFF !important;
}

html body .panel.panel-info > .panel-heading .panel-title,
html body .panel.panel-info > .panel-heading .quesheader {
    color: #FFFFFF !important;
}

/* KnowledgeBase & static panel headers: tint-blue #EAF3FD with inline style — allow inline */
/* These use inline style="background:#EAF3FD" which gets overridden by site-theme.css */
/* Fix: the general .panel-heading rule must NOT force white on non-accordion panels */


/* ── 6. TABLE & GRIDVIEW STYLING (CRITICAL CONTRAST FIX) ── */
.table, .panel-body table, .grid {
    width: 100% !important;
    background: var(--card) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.table th, .panel-body table th, .grid th, .gradient-header {
    background: var(--tint-blue) !important;
    color: var(--navy) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.table td, .panel-body table td, .grid td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 13.5px !important;
    color: var(--text) !important;
    vertical-align: middle !important;
}

.table tr:last-child td, .panel-body table tr:last-child td, .grid tr:last-child td {
    border-bottom: none !important;
}

.table tr:hover td, .panel-body table tr:hover td, .grid tr:hover td {
    background: var(--bg) !important;
}

/* All links in tables MUST be Brand Blue in normal state - NEVER washed out orange */
.table a, .panel-body a, .panel-body table a, .grid a,
a[style*="#F39224"], a[style*="#f39224"] {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.table a:hover, .panel-body a:hover, .panel-body table a:hover, .grid a:hover {
    color: var(--navy) !important;
    text-decoration: underline !important;
}

/* Download / Select Buttons in GridView */
.btn-accordion,
input.btn-accordion,
a.btn-accordion,
.dwld-btn {
    background: var(--brand-blue) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease !important;
}

.btn-accordion:hover,
input.btn-accordion:hover,
a.btn-accordion:hover,
.dwld-btn:hover {
    background: var(--navy) !important;
    color: #FFFFFF !important;
}

/* ── 7. UNIFORM SIDEBAR: ENQUIRY FORM & INTERVIEW Q&A ── */
.frm,
.enquiry-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 42, 71, 0.04) !important;
    margin-bottom: 20px !important;
}

.IQ,
.interview-qa-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 42, 71, 0.04) !important;
    margin-bottom: 20px !important;
    height: auto !important;
}

/* Form Heading: Solid Brand Blue - NO GRADIENT */
.form-heading {
    background: var(--brand-blue) !important;
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin: -16px -16px 16px -16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.form-heading i {
    font-size: 16px !important;
    color: #FFFFFF !important;
}

.form-group {
    margin-bottom: 12px !important;
}

.form-group label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.form-group label i {
    color: var(--brand-blue) !important;
    margin-right: 4px !important;
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: var(--text) !important;
    background: var(--card) !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}

.form-control:focus {
    border-color: var(--brand-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.18) !important;
}

/* SUBMIT ENQUIRY BUTTON: ACCENT ORANGE ONLY (#F57C00) */
.btn-submit-custom,
input.btn-submit-custom,
button.btn-submit-custom,
.btn-cta-orange {
    width: 100% !important;
    height: 44px !important;
    background: var(--accent-orange) !important;
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.btn-submit-custom:hover,
input.btn-submit-custom:hover,
button.btn-submit-custom:hover,
.btn-cta-orange:hover {
    background: #E65100 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3) !important;
    color: #FFFFFF !important;
}

/* Interview Q&A Tiles (18-20px Icons, 12-13px Text) */
.myul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.myul li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: unset !important;
    max-width: unset !important;
}

.myul li a {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.myul li a i {
    color: var(--brand-blue) !important;
    font-size: 16px !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.myul li a:hover {
    background: var(--bg) !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-blue) !important;
    transform: translateY(-1px) !important;
}

/* ── 8. DESKTOP SINGLE-LINE NAVBAR (NO WRAPPING) ── */
@media (min-width: 992px) {
    .navbar .container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
        max-width: 100% !important;
    }
    .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    .navbar-nav > li {
        float: none !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .navbar-default .navbar-nav > li > a {
        color: #1e293b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.15px !important;
        padding: 12px 5px !important;
        white-space: nowrap !important;
        transition: color 0.15s ease, background-color 0.15s ease !important;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover {
        color: var(--brand-blue) !important;
        background-color: var(--tint-blue) !important;
        box-shadow: inset 0 -2px 0 var(--brand-blue) !important;
    }
}
@media (min-width: 1100px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 11.5px !important;
        padding: 12px 7px !important;
    }
}
@media (min-width: 1200px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 12px !important;
        padding: 12px 9px !important;
        letter-spacing: 0.25px !important;
    }
}
@media (min-width: 1400px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 12.5px !important;
        padding: 13px 12px !important;
    }
}

/* ── 9. RESPONSIVE CONTAINER & TAP TARGETS ── */
.container-fluid {
    padding: 16px 12px 36px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important; /* Prevents auto-zoom on mobile */
    }
    .btn-submit-custom,
    button,
    .myul li a {
        min-height: 44px !important; /* Minimum tap target */
    }
}

/* ── 10. RETIRE LEGACY HEADING ── */
.training-program {
    display: none !important;
}

/* ── 11. CONTACT PAGE STYLING ── */
.office-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.info-box {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    box-shadow: 0 1px 4px rgba(15, 42, 71, 0.03) !important;
}
.info-box .icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    background: var(--tint-blue) !important;
    border: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-blue) !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.info-box h5 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 6px 0 !important;
}
.info-box p, .info-box a {
    font-size: 14px !important;
    color: var(--text) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.info-box a:hover {
    color: var(--brand-blue) !important;
}

/* ── 12. CORPORATE CLIENTS GRID ── */
.clients-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 18px !important;
    margin-top: 16px !important;
}
.client-box {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 18px 14px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(15, 42, 71, 0.04) !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.client-box:hover {
    transform: translateY(-3px) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 8px 18px rgba(30, 136, 229, 0.12) !important;
}
.client-pic {
    width: 130px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}
.client-pic img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: grayscale(15%) !important;
    transition: filter 0.2s ease, transform 0.2s ease !important;
}
.client-box:hover .client-pic img {
    filter: grayscale(0%) !important;
    transform: scale(1.04) !important;
}
.client-name {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--navy) !important;
    margin-top: 4px !important;
}

/* ── 13. ARTICLE & CONTENT PAGES ── */
.article-reader-container {
    max-width: 800px !important;
    margin: 0 auto 36px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 2px 10px rgba(15, 42, 71, 0.03) !important;
}
.article-reader-container h2 {
    font-size: 22px !important;
    color: var(--navy) !important;
    margin: 28px 0 12px !important;
    border-bottom: 2px solid var(--tint-blue) !important;
    padding-bottom: 8px !important;
}
.article-reader-container h3 {
    font-size: 17px !important;
    color: var(--navy) !important;
    margin: 20px 0 10px !important;
}
.article-reader-container p,
.article-reader-container li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--text) !important;
}
.article-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 20px 0 !important;
}
.article-reader-container img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* ── 14. KNOWLEDGE BASE & CONTENT CARDS (CLEAN WHITE THEME) ── */
.kb-card,
.container-fluid > .panel.panel-default {
    background: #FFFFFF !important;
    border: 1px solid #E3EAF3 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(15, 42, 71, 0.04) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.container-fluid > .panel.panel-default > .panel-heading,
.kb-card > .kb-card-header,
.kb-card > .panel-heading {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E3EAF3 !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.container-fluid > .panel.panel-default > .panel-heading .panel-title,
.kb-card-title {
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F2A47 !important;
    display: inline-block !important;
}

.container-fluid > .panel.panel-default > .panel-body,
.kb-card > .panel-body,
.kb-card-body {
    padding: 18px 24px !important;
    background: #FFFFFF !important;
}

.container-fluid > .panel.panel-default > .panel-body p,
.kb-card-body p {
    margin: 0 0 10px 0 !important;
    line-height: 1.7 !important;
    font-size: 14.5px !important;
    color: #1F2937 !important;
}

.container-fluid > .panel.panel-default > .panel-body p a,
.kb-card-body p a {
    color: #1E88E5 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    word-break: break-all !important;
}

.container-fluid > .panel.panel-default > .panel-body p a:hover,
.kb-card-body p a:hover {
    color: #1565C0 !important;
    text-decoration: underline !important;
}

/* ── 15. ARTICLE CARD & BLOG ICON SIZING ── */
.article-card-box .fa-clock,
.article-card-box i.fa-regular.fa-clock,
.article-card-box span i,
.blog-meta-bar i,
.blog-meta-bar svg {
    font-size: 11px !important;
    width: 12px !important;
    height: 12px !important;
    line-height: 11px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.blog-content-body h2 i {
    font-size: 17px !important;
    vertical-align: middle !important;
}