/* =============================================================================
   EAGLE — UNIVERSAL RESPONSIVE SYSTEM
   Covers: eagle-csp.css, eagle-theme.css, eagle-waves.css, sentinel.css, style.css
   Range : 320px (mobile) → 3840px (4K UHD)
   Strategy: clamp() for fluid scaling + breakpoint overrides for precision
   ============================================================================= */

/* =============================================================================
   1. ROOT — FLUID FONT SCALE (the master lever)
   ============================================================================= */
html {
    font-size: clamp(12px, 1.05vw, 20px) !important;
    scroll-behavior: smooth;
}

/* =============================================================================
   2. TYPOGRAPHY — all text-* Tailwind proxies + headings + body
   ============================================================================= */
h1, .h1 {
    font-size: clamp(1.6rem, 3.5vw, 5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-size: clamp(1.35rem, 2.8vw, 4rem) !important;
    line-height: 1.18 !important;
}

h3, .h3 {
    font-size: clamp(1.15rem, 2.2vw, 3rem) !important;
    line-height: 1.25 !important;
}

h4, .h4 {
    font-size: clamp(1rem, 1.7vw, 2.4rem) !important;
    line-height: 1.3 !important;
}

h5, .h5 {
    font-size: clamp(0.9rem, 1.3vw, 1.8rem) !important;
    line-height: 1.35 !important;
}

h6, .h6 {
    font-size: clamp(0.82rem, 1.1vw, 1.4rem) !important;
    line-height: 1.4 !important;
}

p, .lead {
    font-size: clamp(0.82rem, 1.0vw, 1.25rem) !important;
    line-height: 1.7 !important;
}

small, .small {
    font-size: clamp(0.68rem, 0.85vw, 1rem) !important;
}

/* Eagle-specific hero titles */
.eagle-hero-title {
    font-size: clamp(2rem, 5.5vw, 5.5rem) !important;
    line-height: 0.95 !important;
}

.eagle-hero-subtitle {
    font-size: clamp(0.9rem, 1.2vw, 1.4rem) !important;
    line-height: 1.7 !important;
}

.eagle-page-banner-title,
.eagle-page-header-title {
    font-size: clamp(1.4rem, 3.5vw, 3.2rem) !important;
    line-height: 1.15 !important;
}

.eagle-page-banner-subtitle,
.eagle-page-header-subtitle {
    font-size: clamp(0.85rem, 1.1vw, 1.25rem) !important;
}

.eagle-breadcrumb-title {
    font-size: clamp(1.2rem, 3vw, 2.6rem) !important;
}

.eagle-header-title {
    font-size: clamp(0.9rem, 1.3vw, 1.5rem) !important;
}

/* Tailwind text-* proxy classes — fluid */
.text-xs    { font-size: clamp(0.65rem, 0.75vw, 0.9rem) !important; }
.text-sm    { font-size: clamp(0.75rem, 0.88vw, 1.05rem) !important; }
.text-base  { font-size: clamp(0.85rem, 1.0vw, 1.2rem) !important; }
.text-lg    { font-size: clamp(0.95rem, 1.15vw, 1.4rem) !important; }
.text-xl    { font-size: clamp(1.05rem, 1.3vw, 1.6rem) !important; }
.text-2xl   { font-size: clamp(1.2rem, 1.6vw, 2rem) !important; }
.text-3xl   { font-size: clamp(1.4rem, 2vw, 2.6rem) !important; }
.text-4xl   { font-size: clamp(1.6rem, 2.5vw, 3.2rem) !important; }
.text-5xl   { font-size: clamp(1.9rem, 3.2vw, 4.2rem) !important; }
.text-6xl   { font-size: clamp(2.2rem, 4vw, 5.2rem) !important; }
.text-2xs,
.text-\[10px\] { font-size: clamp(0.58rem, 0.7vw, 0.82rem) !important; }
.text-\[9px\]  { font-size: clamp(0.52rem, 0.65vw, 0.78rem) !important; }

/* Eagle fixed-size text utilities — make fluid */
.eagle-topbar-gov-text,
.eagle-topbar-text-muted,
.eagle-topbar-action-link { font-size: clamp(8px, 0.7vw, 12px) !important; }

.eagle-admin-badge-sm,
.eagle-admin-text-xs       { font-size: clamp(8px, 0.65vw, 11px) !important; }
.eagle-admin-text-sm,
.eagle-admin-text-12,
.eagle-text-12             { font-size: clamp(10px, 0.85vw, 14px) !important; }
.eagle-text-10             { font-size: clamp(8px, 0.7vw, 12px) !important; }
.eagle-text-18             { font-size: clamp(14px, 1.2vw, 22px) !important; }
.eagle-text-20             { font-size: clamp(15px, 1.4vw, 24px) !important; }
.eagle-text-28             { font-size: clamp(18px, 1.8vw, 32px) !important; }

/* Material Symbols */
.material-symbols-outlined {
    font-size: clamp(16px, 1.3vw, 28px) !important;
}

/* =============================================================================
   3. CONTAINER — fluid max-width
   ============================================================================= */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: clamp(540px, 92vw, 2600px) !important;
    padding-left: clamp(12px, 2vw, 60px) !important;
    padding-right: clamp(12px, 2vw, 60px) !important;
}

.container-fluid {
    padding-left: clamp(12px, 2vw, 60px) !important;
    padding-right: clamp(12px, 2vw, 60px) !important;
}

.max-w-screen-2xl {
    max-width: clamp(900px, 90vw, 2200px) !important;
}

/* =============================================================================
   4. GRID — rows, gutters
   ============================================================================= */
.row {
    --bs-gutter-x: clamp(0.5rem, 1.8vw, 2.5rem) !important;
    --bs-gutter-y: clamp(0.5rem, 1.2vw, 2rem) !important;
}

/* =============================================================================
   5. SPACING — padding & margin utilities (fluid)
   ============================================================================= */

/* Padding */
.p-1  { padding: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.p-2  { padding: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.p-3  { padding: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.p-4  { padding: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.p-5  { padding: clamp(1rem, 1.8vw, 3rem) !important; }
.p-6  { padding: clamp(1.2rem, 2vw, 3.5rem) !important; }
.p-8  { padding: clamp(1.5rem, 2.5vw, 4.5rem) !important; }
.p-10 { padding: clamp(1.8rem, 3vw, 5.5rem) !important; }
.p-12 { padding: clamp(2rem, 3.5vw, 6.5rem) !important; }

.px-6  { padding-left: clamp(1.2rem, 2vw, 3.5rem) !important; padding-right: clamp(1.2rem, 2vw, 3.5rem) !important; }
.px-8  { padding-left: clamp(1.5rem, 2.5vw, 4.5rem) !important; padding-right: clamp(1.5rem, 2.5vw, 4.5rem) !important; }
.py-6  { padding-top: clamp(1.2rem, 2vw, 3.5rem) !important; padding-bottom: clamp(1.2rem, 2vw, 3.5rem) !important; }
.py-8  { padding-top: clamp(1.5rem, 2.5vw, 4.5rem) !important; padding-bottom: clamp(1.5rem, 2.5vw, 4.5rem) !important; }
.py-16 { padding-top: clamp(2.5rem, 4vw, 8rem) !important; padding-bottom: clamp(2.5rem, 4vw, 8rem) !important; }

.pt-6  { padding-top: clamp(1.2rem, 2vw, 3.5rem) !important; }
.pt-8  { padding-top: clamp(1.5rem, 2.5vw, 4.5rem) !important; }
.pt-10 { padding-top: clamp(1.8rem, 3vw, 5.5rem) !important; }
.pt-12 { padding-top: clamp(2rem, 3.5vw, 6.5rem) !important; }
.pb-8  { padding-bottom: clamp(1.5rem, 2.5vw, 4.5rem) !important; }
.pb-10 { padding-bottom: clamp(1.8rem, 3vw, 5.5rem) !important; }

/* BS spacing */
.pt-1 { padding-top: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.pt-2 { padding-top: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pt-3 { padding-top: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.pt-4 { padding-top: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.pt-5 { padding-top: clamp(1rem, 1.8vw, 3rem) !important; }
.pb-1 { padding-bottom: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.pb-2 { padding-bottom: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pb-3 { padding-bottom: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.pb-4 { padding-bottom: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.pb-5 { padding-bottom: clamp(1rem, 1.8vw, 3rem) !important; }
.ps-1 { padding-left: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.ps-2 { padding-left: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.ps-3 { padding-left: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.ps-4 { padding-left: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.ps-5 { padding-left: clamp(1rem, 1.8vw, 3rem) !important; }
.pe-1 { padding-right: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.pe-2 { padding-right: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.pe-3 { padding-right: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.pe-4 { padding-right: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.pe-5 { padding-right: clamp(1rem, 1.8vw, 3rem) !important; }

/* Margin */
.m-1 { margin: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.m-2 { margin: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.m-3 { margin: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.m-4 { margin: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.m-5 { margin: clamp(1rem, 1.8vw, 3rem) !important; }
.m-6 { margin: clamp(1.2rem, 2vw, 3.5rem) !important; }
.m-8 { margin: clamp(1.5rem, 2.5vw, 4.5rem) !important; }

.mt-1 { margin-top: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.mt-2 { margin-top: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.mt-3 { margin-top: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.mt-4 { margin-top: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.mt-5 { margin-top: clamp(1rem, 1.8vw, 3rem) !important; }
.mt-6 { margin-top: clamp(1.2rem, 2vw, 3.5rem) !important; }
.mb-1 { margin-bottom: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.mb-2 { margin-bottom: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.mb-3 { margin-bottom: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.mb-4 { margin-bottom: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.mb-5 { margin-bottom: clamp(1rem, 1.8vw, 3rem) !important; }
.mb-6 { margin-bottom: clamp(1.2rem, 2vw, 3.5rem) !important; }
.mb-16 { margin-bottom: clamp(2rem, 3.5vw, 7rem) !important; }
.ms-1 { margin-left: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.ms-2 { margin-left: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.ms-3 { margin-left: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.ms-4 { margin-left: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.ms-5 { margin-left: clamp(1rem, 1.8vw, 3rem) !important; }
.me-1 { margin-right: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.me-2 { margin-right: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.me-3 { margin-right: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.me-4 { margin-right: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.me-5 { margin-right: clamp(1rem, 1.8vw, 3rem) !important; }

/* Gap utilities */
.gap-1 { gap: clamp(0.15rem, 0.3vw, 0.4rem) !important; }
.gap-2 { gap: clamp(0.3rem, 0.6vw, 0.8rem) !important; }
.gap-3 { gap: clamp(0.5rem, 0.9vw, 1.2rem) !important; }
.gap-4 { gap: clamp(0.7rem, 1.2vw, 1.8rem) !important; }
.gap-5 { gap: clamp(1rem, 1.8vw, 3rem) !important; }
.gap-6 { gap: clamp(1.2rem, 2vw, 3.5rem) !important; }
.gap-8 { gap: clamp(1.5rem, 2.5vw, 4.5rem) !important; }

/* Section padding large utility */
.py-24 {
    padding-top: clamp(3rem, 6vw, 12rem) !important;
    padding-bottom: clamp(3rem, 6vw, 12rem) !important;
}

/* =============================================================================
   6. NAVBAR / TOPBAR
   ============================================================================= */
.navbar {
    padding: clamp(0.35rem, 0.7vw, 1.2rem) clamp(0.75rem, 2vw, 3rem) !important;
}

.navbar-brand {
    font-size: clamp(0.9rem, 1.3vw, 1.8rem) !important;
}

.navbar-brand img,
.eagle-header-logo-img {
    height: clamp(28px, 3vw, 64px) !important;
    width: auto !important;
}

.nav-link,
.eagle-nav-link,
.eagle-tier2-link {
    font-size: clamp(0.72rem, 0.9vw, 1.1rem) !important;
    padding: clamp(0.2rem, 0.4vw, 0.6rem) clamp(0.4rem, 0.8vw, 1.2rem) !important;
}

.eagle-header-nav {
    min-height: clamp(2.5rem, 4vw, 5rem) !important;
}

.eagle-topbar-wrapper {
    padding: 0 clamp(0.75rem, 2vw, 3rem) !important;
    height: clamp(28px, 2.4vw, 52px) !important;
    /* height: clamp(28px, 3vw, 52px) !important; */
}

/* =============================================================================
   7. BUTTONS
   ============================================================================= */
.btn {
    font-size: clamp(0.72rem, 0.95vw, 1.1rem) !important;
    padding: clamp(0.3rem, 0.55vw, 0.85rem) clamp(0.6rem, 1.4vw, 2rem) !important;
    border-radius: clamp(4px, 0.5vw, 10px) !important;
}

.btn-sm {
    font-size: clamp(0.62rem, 0.78vw, 0.95rem) !important;
    padding: clamp(0.18rem, 0.35vw, 0.55rem) clamp(0.4rem, 0.9vw, 1.2rem) !important;
}

.btn-lg {
    font-size: clamp(0.88rem, 1.2vw, 1.5rem) !important;
    padding: clamp(0.5rem, 0.9vw, 1.2rem) clamp(1rem, 2vw, 3rem) !important;
}

.eagle-hero-btn-report,
.eagle-hero-btn-helpline {
    font-size: clamp(0.78rem, 1vw, 1.15rem) !important;
    padding: clamp(0.6rem, 1vw, 1.2rem) clamp(1rem, 2vw, 2.5rem) !important;
    border-radius: clamp(6px, 0.6vw, 14px) !important;
}

.eagle-helpline-btn {
    font-size: clamp(0.72rem, 1vw, 1.2rem) !important;
}

/* =============================================================================
   8. CARDS
   ============================================================================= */
.card {
    border-radius: clamp(6px, 0.8vw, 20px) !important;
}

.card-body {
    padding: clamp(0.8rem, 1.4vw, 2.8rem) !important;
}

.card-title {
    font-size: clamp(0.88rem, 1.2vw, 1.7rem) !important;
}

.card-text {
    font-size: clamp(0.75rem, 0.95vw, 1.15rem) !important;
}

.card-header,
.card-footer {
    padding: clamp(0.5rem, 0.9vw, 1.5rem) clamp(0.8rem, 1.4vw, 2.5rem) !important;
    font-size: clamp(0.78rem, 0.95vw, 1.15rem) !important;
}

/* Eagle hero radar card */
.eagle-hero-radar-card {
    padding: clamp(1rem, 2vw, 3.5rem) !important;
    border-radius: clamp(10px, 1.2vw, 28px) !important;
}

/* Eagle quick tiles */
.eagle-quick-tile-link {
    padding: clamp(1rem, 2.5vw, 4rem) !important;
}

.eagle-quick-tile-title {
    font-size: clamp(1rem, 1.5vw, 2rem) !important;
}

.eagle-quick-tile-text {
    font-size: clamp(0.78rem, 0.95vw, 1.15rem) !important;
}

.eagle-quick-tile-icon-report,
.eagle-quick-tile-icon-helpline,
.eagle-quick-tile-icon-law {
    font-size: clamp(1.5rem, 2.5vw, 4.5rem) !important;
}

/* =============================================================================
   9. FORMS
   ============================================================================= */
.form-control,
.form-select {
    font-size: clamp(0.78rem, 0.95vw, 1.15rem) !important;
    padding: clamp(0.3rem, 0.55vw, 0.9rem) clamp(0.5rem, 0.9vw, 1.2rem) !important;
    border-radius: clamp(4px, 0.5vw, 10px) !important;
}

.form-label {
    font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important;
    margin-bottom: clamp(0.18rem, 0.35vw, 0.6rem) !important;
}

.input-group-text {
    font-size: clamp(0.75rem, 0.95vw, 1.1rem) !important;
    padding: clamp(0.3rem, 0.55vw, 0.9rem) clamp(0.5rem, 0.9vw, 1.2rem) !important;
}

/* =============================================================================
   10. TABLE
   ============================================================================= */
.table {
    font-size: clamp(0.7rem, 0.9vw, 1.1rem) !important;
}

.table th,
.table td {
    padding: clamp(0.3rem, 0.65vw, 1.2rem) clamp(0.4rem, 0.8vw, 1.5rem) !important;
}

.eagle-audit-table tbody td {
    padding: clamp(8px, 1vw, 24px) clamp(10px, 1.2vw, 28px) !important;
}

/* =============================================================================
   11. MODAL
   ============================================================================= */
.modal-dialog {
    max-width: clamp(300px, 50vw, 1000px) !important;
}

.modal-content {
    border-radius: clamp(6px, 0.8vw, 20px) !important;
}

.modal-header,
.modal-footer {
    padding: clamp(0.6rem, 1vw, 1.8rem) clamp(0.8rem, 1.5vw, 2.5rem) !important;
}

.modal-body {
    padding: clamp(0.8rem, 1.4vw, 2.8rem) !important;
}

.modal-title {
    font-size: clamp(0.9rem, 1.2vw, 1.8rem) !important;
}

/* =============================================================================
   12. BADGE / ALERT / LIST GROUP / PAGINATION / BREADCRUMB
   ============================================================================= */
.badge {
    font-size: clamp(0.58rem, 0.75vw, 0.95rem) !important;
    padding: clamp(0.18rem, 0.35vw, 0.6rem) clamp(0.3rem, 0.6vw, 0.9rem) !important;
}

.alert {
    font-size: clamp(0.75rem, 0.95vw, 1.1rem) !important;
    padding: clamp(0.5rem, 0.9vw, 1.5rem) clamp(0.75rem, 1.4vw, 2rem) !important;
    border-radius: clamp(4px, 0.6vw, 12px) !important;
}

.list-group-item {
    font-size: clamp(0.75rem, 0.95vw, 1.1rem) !important;
    padding: clamp(0.4rem, 0.75vw, 1.2rem) clamp(0.6rem, 1.1vw, 2rem) !important;
}

.page-link {
    font-size: clamp(0.7rem, 0.9vw, 1.1rem) !important;
    padding: clamp(0.2rem, 0.45vw, 0.8rem) clamp(0.4rem, 0.8vw, 1.2rem) !important;
}

.breadcrumb { font-size: clamp(0.68rem, 0.85vw, 1.05rem) !important; }

.eagle-breadcrumb-list { font-size: clamp(0.65rem, 0.82vw, 1rem) !important; }

/* =============================================================================
   13. DROPDOWN
   ============================================================================= */
.dropdown-menu {
    font-size: clamp(0.75rem, 0.92vw, 1.1rem) !important;
    border-radius: clamp(4px, 0.6vw, 14px) !important;
    min-width: clamp(120px, 12vw, 280px) !important;
}

.dropdown-item {
    font-size: clamp(0.75rem, 0.92vw, 1.1rem) !important;
    padding: clamp(0.3rem, 0.5vw, 0.8rem) clamp(0.75rem, 1.4vw, 2rem) !important;
}

/* =============================================================================
   14. TABS / ACCORDION
   ============================================================================= */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    font-size: clamp(0.75rem, 0.92vw, 1.15rem) !important;
    padding: clamp(0.3rem, 0.55vw, 0.9rem) clamp(0.6rem, 1.1vw, 1.8rem) !important;
}

.accordion-button {
    font-size: clamp(0.8rem, 1.05vw, 1.3rem) !important;
    padding: clamp(0.5rem, 0.9vw, 1.5rem) clamp(0.75rem, 1.4vw, 2rem) !important;
}

.accordion-body {
    font-size: clamp(0.75rem, 0.95vw, 1.15rem) !important;
    padding: clamp(0.5rem, 0.9vw, 1.5rem) clamp(0.75rem, 1.4vw, 2rem) !important;
}

/* =============================================================================
   15. IMAGES
   ============================================================================= */
img { max-width: 100%; height: auto; }

.eagle-header-logo-img {
    height: clamp(28px, 3vw, 60px) !important;
}

.eagle-hero-radar-emblem {
    max-height: clamp(160px, 20vw, 340px) !important;
}

#heroCarousel {
    height: clamp(220px, 35vw, 700px) !important;
}

/* =============================================================================
   16. CHATBOT WIDGET
   ============================================================================= */
.eagle-chatbot-widget {
    width: clamp(44px, 5vw, 80px) !important;
    height: clamp(44px, 5vw, 80px) !important;
    bottom: clamp(14px, 2vw, 36px) !important;
    right: clamp(14px, 2vw, 36px) !important;
}

.eagle-chatbot-btn {
    width: clamp(44px, 5vw, 80px) !important;
    height: clamp(44px, 5vw, 80px) !important;
    border-radius: clamp(10px, 1vw, 20px) !important;
}

/* =============================================================================
   17. FOOTER
   ============================================================================= */
.eagle-footer-main {
    font-size: clamp(0.78rem, 0.95vw, 1.15rem) !important;
}

.eagle-footer-helpline-card {
    padding: clamp(10px, 1.5vw, 28px) !important;
    border-radius: clamp(6px, 0.8vw, 18px) !important;
}

/* =============================================================================
   18. PAGE BANNER / HEADER
   ============================================================================= */
.eagle-page-banner,
.eagle-page-header {
    padding: clamp(1.5rem, 4vw, 6rem) 0 clamp(1rem, 3vw, 4rem) !important;
}

.eagle-breadcrumb-wrapper {
    padding: clamp(1rem, 2.5vw, 3.5rem) 0 clamp(0.8rem, 2vw, 3rem) !important;
}

.eagle-alert-strip,
.eagle-alert-strip-static {
    padding: clamp(0.3rem, 0.6vw, 0.8rem) clamp(1rem, 3vw, 4rem) !important;
    font-size: clamp(0.62rem, 0.8vw, 0.95rem) !important;
}

/* =============================================================================
   19. HERO SECTION
   ============================================================================= */
.eagle-hero-section {
    min-height: clamp(400px, 55vw, 900px) !important;
}

.eagle-hero-row {
    padding-bottom: clamp(2rem, 5vw, 8rem) !important;
}

.eagle-hero-badge {
    font-size: clamp(7px, 0.7vw, 11px) !important;
    padding: clamp(0.25rem, 0.5vw, 0.6rem) clamp(0.6rem, 1.2vw, 1.4rem) !important;
}

/* =============================================================================
   20. WAVE DIVIDER
   ============================================================================= */
.wave-divider {
    height: clamp(1.5rem, 3.5vw, 5rem) !important;
}

/* =============================================================================
   21. SECTION GENERAL
   ============================================================================= */
/* section {
    padding-top: clamp(2rem, 5vw, 10rem) !important;
    padding-bottom: clamp(2rem, 5vw, 10rem) !important;
} */

/* =============================================================================
   22. BREAKPOINT OVERRIDES — precise per viewport range
   ============================================================================= */

/* ── Mobile: 320px – 575px ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    html { font-size: 13px !important; }

    .container { padding-left: 14px !important; padding-right: 14px !important; }

    h1, .h1 { font-size: 1.65rem !important; }
    h2, .h2 { font-size: 1.4rem !important; }
    h3, .h3 { font-size: 1.2rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }
    p        { font-size: 0.875rem !important; }

    .eagle-hero-title    { font-size: 2rem !important; }
    .eagle-hero-subtitle { font-size: 0.9rem !important; }
    .eagle-hero-section  { min-height: 380px !important; }
    #heroCarousel        { height: 220px !important; }

    .eagle-topbar-wrapper {
        height: auto !important;
        padding: 9px 14px !important;
        /* padding: 5px 14px !important; */
        flex-wrap: wrap;
        gap: 4px 0;
    }

    .eagle-quick-tile-link { padding: 1.25rem !important; }
    .eagle-quick-tile-title { font-size: 1.1rem !important; }

    .wave-divider { height: 1.5rem !important; }
    .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .mb-16 { margin-bottom: 2rem !important; }
    .text-5xl { font-size: 1.85rem !important; }

    /* section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } */

    .eagle-chatbot-widget,
    .eagle-chatbot-btn {
        width: 46px !important;
        height: 46px !important;
        bottom: 14px !important;
        right: 14px !important;
    }

    .modal-dialog { max-width: 95vw !important; }
    .btn { font-size: 0.8rem !important; }
}

/* ── Tablet: 576px – 991px ─────────────────────────────────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
    html { font-size: 14px !important; }

    .container { max-width: 96vw !important; }

    h1, .h1 { font-size: 2rem !important; }
    h2, .h2 { font-size: 1.7rem !important; }
    h3, .h3 { font-size: 1.4rem !important; }
    p        { font-size: 0.9rem !important; }

    .eagle-hero-title    { font-size: 2.8rem !important; }
    .eagle-hero-section  { min-height: 480px !important; }
    #heroCarousel        { height: 320px !important; }

    .wave-divider { height: 2rem !important; }
    .py-24 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

    /* section { padding-top: 4rem !important; padding-bottom: 4rem !important; } */
}

/* ── Laptop: 992px – 1399px ────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1399px) {
    html { font-size: 15px !important; }
    .container { max-width: 1200px !important; }
    #heroCarousel { height: 420px !important; }
}

/* ── Full HD: 1400px – 1919px ──────────────────────────────────── */
@media (min-width: 1400px) and (max-width: 1919px) {
    html { font-size: 16px !important; }
    .container { max-width: 1440px !important; }
    #heroCarousel { height: 480px !important; }
}

/* ── 2K: 1920px – 2559px ───────────────────────────────────────── */
@media (min-width: 1920px) and (max-width: 2559px) {
    html { font-size: 17.5px !important; }

    .container { max-width: 1860px !important; }

    h1, .h1 { font-size: 3.5rem !important; }
    h2, .h2 { font-size: 2.8rem !important; }
    h3, .h3 { font-size: 2.2rem !important; }
    h4, .h4 { font-size: 1.8rem !important; }
    p        { font-size: 1.1rem !important; }

    .eagle-hero-title    { font-size: 4.5rem !important; }
    .eagle-hero-subtitle { font-size: 1.2rem !important; }
    .eagle-hero-section  { min-height: 760px !important; }
    #heroCarousel        { height: 560px !important; }

    .eagle-page-banner-title,
    .eagle-page-header-title { font-size: 2.8rem !important; }

    .nav-link, .eagle-tier2-link { font-size: 1rem !important; }
    .navbar-brand               { font-size: 1.5rem !important; }
    .eagle-header-logo-img      { height: 50px !important; }

    .btn    { font-size: 1rem !important; padding: 0.65rem 1.8rem !important; }
    .btn-sm { font-size: 0.85rem !important; }
    .btn-lg { font-size: 1.2rem !important; }

    .card-body   { padding: 2rem !important; }
    .card-title  { font-size: 1.4rem !important; }
    .form-control,
    .form-select { font-size: 1.05rem !important; }
    .table       { font-size: 1rem !important; }

    .eagle-quick-tile-title  { font-size: 1.6rem !important; }
    .eagle-quick-tile-link   { padding: 2.5rem !important; }

    .wave-divider  { height: 4rem !important; }
    /* section        { padding-top: 7rem !important; padding-bottom: 7rem !important; } */
    .py-24         { padding-top: 9rem !important; padding-bottom: 9rem !important; }

    .eagle-chatbot-widget,
    .eagle-chatbot-btn { width: 68px !important; height: 68px !important; }

    .modal-dialog { max-width: 640px !important; }
}

/* ── QHD: 2560px – 3839px ──────────────────────────────────────── */
@media (min-width: 2560px) and (max-width: 3839px) {
    html { font-size: 20px !important; }

    .container { max-width: 2300px !important; }

    h1, .h1 { font-size: 4.5rem !important; }
    h2, .h2 { font-size: 3.5rem !important; }
    h3, .h3 { font-size: 2.8rem !important; }
    h4, .h4 { font-size: 2.2rem !important; }
    h5, .h5 { font-size: 1.7rem !important; }
    p        { font-size: 1.3rem !important; line-height: 1.8 !important; }

    .eagle-hero-title    { font-size: 6rem !important; }
    .eagle-hero-subtitle { font-size: 1.4rem !important; }
    .eagle-hero-section  { min-height: 900px !important; }
    #heroCarousel        { height: 680px !important; }

    .eagle-page-banner-title,
    .eagle-page-header-title { font-size: 3.5rem !important; }

    .nav-link, .eagle-tier2-link { font-size: 1.15rem !important; }
    .navbar-brand               { font-size: 1.8rem !important; }
    .eagle-header-logo-img      { height: 60px !important; }
    .eagle-header-nav           { min-height: 5rem !important; }

    .btn    { font-size: 1.15rem !important; padding: 0.8rem 2.2rem !important; }
    .btn-sm { font-size: 0.95rem !important; }
    .btn-lg { font-size: 1.4rem !important; padding: 1.1rem 3rem !important; }

    .card-body   { padding: 2.8rem !important; }
    .card-title  { font-size: 1.7rem !important; }
    .card-text   { font-size: 1.2rem !important; }
    .form-control,
    .form-select { font-size: 1.2rem !important; padding: 0.8rem 1.2rem !important; }
    .form-label  { font-size: 1.1rem !important; }
    .table       { font-size: 1.15rem !important; }
    .table th,
    .table td    { padding: 1rem 1.4rem !important; }

    .dropdown-menu    { font-size: 1.1rem !important; min-width: 240px !important; }
    .dropdown-item    { font-size: 1.1rem !important; }
    .badge            { font-size: 0.9rem !important; }
    .alert            { font-size: 1.1rem !important; }
    .page-link        { font-size: 1rem !important; }
    .breadcrumb       { font-size: 1rem !important; }
    .list-group-item  { font-size: 1.1rem !important; }
    .accordion-button { font-size: 1.3rem !important; }
    .accordion-body   { font-size: 1.1rem !important; }

    .eagle-quick-tile-title { font-size: 2rem !important; }
    .eagle-quick-tile-text  { font-size: 1.1rem !important; }
    .eagle-quick-tile-link  { padding: 3rem !important; }

    .wave-divider  { height: 5rem !important; }
    /* section        { padding-top: 9rem !importa/nt; padding-bottom: 9rem !important; } */
    .py-24         { padding-top: 11rem !important; padding-bottom: 11rem !important; }

    .eagle-chatbot-widget,
    .eagle-chatbot-btn { width: 80px !important; height: 80px !important; }

    .modal-dialog    { max-width: 860px !important; }
    .modal-title     { font-size: 1.8rem !important; }

    .material-symbols-outlined { font-size: 28px !important; }

    .eagle-topbar-wrapper {
        height: clamp(42px, 3.5vw, 60px) !important;
        padding: 0 3rem !important;
    }

    .row {
        --bs-gutter-x: 2.5rem !important;
        --bs-gutter-y: 2rem !important;
    }
}

/* ── 4K: 3840px + ──────────────────────────────────────────────── */
@media (min-width: 3840px) {
    html { font-size: 24px !important; }

    .container { max-width: 3200px !important; }

    h1, .h1 { font-size: 5.5rem !important; }
    h2, .h2 { font-size: 4.2rem !important; }
    h3, .h3 { font-size: 3.3rem !important; }
    h4, .h4 { font-size: 2.6rem !important; }
    h5, .h5 { font-size: 2rem !important; }
    h6, .h6 { font-size: 1.6rem !important; }
    p        { font-size: 1.5rem !important; line-height: 1.9 !important; }
    .lead    { font-size: 2rem !important; }

    .eagle-hero-title    { font-size: 7.5rem !important; }
    .eagle-hero-subtitle { font-size: 1.6rem !important; }
    .eagle-hero-section  { min-height: 1100px !important; }
    #heroCarousel        { height: 800px !important; }

    .eagle-page-banner-title,
    .eagle-page-header-title { font-size: 4.5rem !important; }
    .eagle-page-banner-subtitle,
    .eagle-page-header-subtitle { font-size: 1.5rem !important; }
    .eagle-breadcrumb-title { font-size: 3.5rem !important; }

    .nav-link, .eagle-tier2-link { font-size: 1.3rem !important; }
    .navbar-brand               { font-size: 2.2rem !important; }
    .eagle-header-logo-img      { height: 76px !important; }
    .eagle-header-nav           { min-height: 6rem !important; }

    .eagle-topbar-wrapper {
        height: 64px !important;
        padding: 0 4rem !important;
    }
    .eagle-topbar-gov-text,
    .eagle-topbar-text-muted { font-size: 13px !important; }

    .btn    { font-size: 1.3rem !important; padding: 1rem 2.8rem !important; }
    .btn-sm { font-size: 1.05rem !important; }
    .btn-lg { font-size: 1.6rem !important; padding: 1.3rem 3.8rem !important; }

    .eagle-hero-btn-report,
    .eagle-hero-btn-helpline {
        font-size: 1.2rem !important;
        padding: 1.2rem 2.8rem !important;
    }

    .card-body   { padding: 3.5rem !important; }
    .card-title  { font-size: 2rem !important; }
    .card-text   { font-size: 1.4rem !important; }
    .card-header,
    .card-footer { padding: 1.5rem 3rem !important; font-size: 1.3rem !important; }

    .form-control,
    .form-select { font-size: 1.4rem !important; padding: 1rem 1.4rem !important; }
    .form-label  { font-size: 1.3rem !important; }
    .input-group-text { font-size: 1.3rem !important; }

    .table       { font-size: 1.3rem !important; }
    .table th,
    .table td    { padding: 1.3rem 1.8rem !important; }

    .eagle-audit-table tbody td { padding: 1.5rem 2rem !important; }

    .modal-dialog    { max-width: 1100px !important; }
    .modal-header,
    .modal-footer    { padding: 1.5rem 2.5rem !important; }
    .modal-body      { padding: 2.5rem !important; }
    .modal-title     { font-size: 2.2rem !important; }

    .dropdown-menu   { font-size: 1.3rem !important; min-width: 300px !important; border-radius: 16px !important; }
    .dropdown-item   { font-size: 1.3rem !important; padding: 0.8rem 2rem !important; }

    .badge           { font-size: 1rem !important; padding: 0.5rem 1rem !important; }
    .alert           { font-size: 1.3rem !important; padding: 1.2rem 2rem !important; }
    .page-link       { font-size: 1.2rem !important; padding: 0.8rem 1.4rem !important; }
    .breadcrumb      { font-size: 1.15rem !important; }
    .list-group-item { font-size: 1.25rem !important; padding: 1.2rem 2rem !important; }

    .nav-tabs .nav-link,
    .nav-pills .nav-link { font-size: 1.3rem !important; padding: 0.8rem 2rem !important; }
    .accordion-button    { font-size: 1.5rem !important; padding: 1.3rem 2rem !important; }
    .accordion-body      { font-size: 1.3rem !important; }

    .eagle-quick-tile-title { font-size: 2.4rem !important; }
    .eagle-quick-tile-text  { font-size: 1.3rem !important; }
    .eagle-quick-tile-link  { padding: 4rem !important; }
    .eagle-quick-tile-icon-report,
    .eagle-quick-tile-icon-helpline,
    .eagle-quick-tile-icon-law { font-size: 5rem !important; }

    .wave-divider { height: 6rem !important; }

    /* section { padding-top: 12rem !important; padding-bottom: 12rem !important; } */
    .py-24  { padding-top: 14rem !important; padding-bottom: 14rem !important; }
    .mb-16  { margin-bottom: 8rem !important; }

    .eagle-chatbot-widget,
    .eagle-chatbot-btn {
        width: 96px !important;
        height: 96px !important;
        bottom: 36px !important;
        right: 36px !important;
        border-radius: 24px !important;
    }

    .eagle-footer-helpline-card { padding: 2.5rem !important; }

    .material-symbols-outlined { font-size: 36px !important; }

    .row {
        --bs-gutter-x: 3rem !important;
        --bs-gutter-y: 2.5rem !important;
    }

    .eagle-social-ig-posts-container { max-height: 1200px !important; }
}