/* ==========================================================================
   BSRDCL OFFICIAL GOVERNMENT PORTAL — COMPREHENSIVE MOBILE RESPONSIVE ENGINE
   Optimized for: iPhone, Android, Foldables, Tablets (320px to 1024px)
   Standards: GIGW 3.0, W3C Mobile Web Best Practices, WCAG 2.1 AA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL MOBILE RESETS & VIEWPORT SAFETY
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(245, 130, 32, 0.15);
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. TABLET BREAKPOINTS (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --container-max: 960px;
  }

  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Header adjustments */
  .brand-wrapper {
    gap: 0.75rem;
  }

  .brand-right {
    gap: 0.5rem;
  }

  .partner-badge-img {
    height: 38px;
  }

  /* Grid Reductions */
  .overview-hub-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .overview-card {
    padding-right: 0;
  }

  .dignitaries-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  .footer-contact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem;
  }

  .page-layout-grid {
    grid-template-columns: 240px 1fr !important;
    gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. MOBILE LANDSCAPE & PHONES (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --container-max: 100%;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Section Spacings */
  .overview-hub-section,
  .dignitaries-section,
  .verticals-section,
  .projects-showcase-section,
  .stats-counter-section,
  .important-links-section,
  .quick-action-circles-section,
  .gallery-section,
  .page-content-section {
    padding: 2.25rem 0 !important;
  }

  .section-header {
    margin-bottom: 1.75rem !important;
  }

  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  .section-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .section-tag {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.7rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* ------------------ A. TOP UTILITY BAR MOBILE ------------------ */
  .top-utility-bar {
    padding: 0.3rem 0 !important;
    width: 100% !important;
    background: #f1f5f9 !important;
    border-bottom: 1px solid #cbd5e1 !important;
  }

  .top-utility-bar .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .utility-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #0b2545 !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .utility-flag {
    width: 16px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }

  .utility-tagline,
  .utility-divider {
    display: none !important;
  }

  .utility-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex: 0 0 auto !important;
  }

  .accessibility-tools {
    border-radius: 4px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }

  .acc-btn {
    padding: 0.15rem 0.32rem !important;
    font-size: 0.65rem !important;
  }

  .theme-toggle-btn {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.68rem !important;
    border-radius: 4px !important;
  }

  .theme-btn-label {
    display: none !important;
  }

  .bhashini-trigger-btn {
    width: 28px !important;
    height: 25px !important;
    border-radius: 4px !important;
  }

  .bhashini-icon-chars {
    width: 16px !important;
    height: 16px !important;
  }

  .bhashini-icon-chars .char-devanagari {
    font-size: 0.7rem !important;
  }

  .bhashini-icon-chars .char-latin {
    font-size: 0.58rem !important;
  }

  /* ------------------ B. BRAND HEADER MOBILE ------------------ */
  .main-brand-header {
    padding: 0.5rem 0 0.65rem !important;
    width: 100% !important;
  }

  .brand-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bsrdc-main-logo {
    height: 42px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .bsrdc-emblem-img {
    height: 42px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .brand-text-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .brand-hi {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--primary-navy) !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .brand-en {
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    margin: 0.1rem 0 0 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .brand-sub {
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: var(--accent-green) !important;
    margin: 0.1rem 0 0 0 !important;
    word-break: break-word !important;
  }

  .brand-right {
    display: none !important;
  }

  .header-center-search {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .search-input-wrapper {
    width: 100% !important;
    padding: 0.15rem 0.35rem 0.15rem 0.85rem !important;
    border-radius: 24px !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
  }

  .search-input-wrapper input {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.4rem !important;
  }

  .search-submit-btn {
    width: 32px !important;
    height: 32px !important;
    background: var(--primary-blue) !important;
    color: #ffffff !important;
  }

  /* ------------------ C. NAVBAR & HAMBURGER BAR ------------------ */
  .main-navbar {
    padding: 0 !important;
    background: linear-gradient(135deg, #07172c 0%, #0b2545 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
  }

  .navbar-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.35rem 0.75rem !important;
    width: 100% !important;
  }

  .nav-menu-list {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 4px !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
  }

  .mobile-nav-toggle-text {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }

  .mobile-nav-quick-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .mobile-nav-quick-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.32rem 0.65rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: rgba(245, 130, 32, 0.9) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }

  .mobile-nav-quick-action.quick-action-portal {
    background: rgba(2, 132, 199, 0.9) !important;
  }

  /* ------------------ D. HERO SLIDER MOBILE (PRESERVED ORIGINAL) ------------------ */


  /* ------------------ E. TICKER BAR MOBILE ------------------ */
  .ticker-bar {
    padding: 0.35rem 0 !important;
  }

  .ticker-wrapper {
    gap: 0.5rem !important;
  }

  .ticker-label {
    padding: 0.15rem 0.45rem !important;
    font-size: 0.68rem !important;
  }

  .ticker-content {
    font-size: 0.78rem !important;
  }

  .ticker-item {
    margin-right: 1.5rem !important;
  }

  /* ------------------ F. OVERVIEW & NOTIFICATIONS HUB MOBILE ------------------ */
  .overview-card h2 {
    font-size: 1.35rem !important;
    margin-bottom: 0.85rem !important;
    text-align: left !important;
  }

  .overview-lead {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1rem !important;
  }

  .overview-features-list {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
  }

  .overview-item-box {
    padding: 0.75rem 0.85rem !important;
  }

  .overview-item-title {
    font-size: 0.85rem !important;
  }

  .overview-item-desc {
    font-size: 0.76rem !important;
  }

  .notifications-tab-card {
    border-radius: var(--radius-md) !important;
    margin-top: 0.5rem !important;
  }

  .notif-header {
    padding: 0.85rem 1rem !important;
  }

  .notif-title {
    font-size: 0.95rem !important;
  }

  .notif-tabs-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
  }

  .notif-tab-btn {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
  }

  .notif-tab-panel {
    padding: 0.75rem !important;
    max-height: 340px !important;
  }

  .notif-list-item {
    padding: 0.65rem !important;
  }

  .notif-item-title {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  /* ------------------ G. DIGNITARIES / LEADERSHIP MOBILE ------------------ */
  .dignitaries-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    max-width: 100% !important;
  }

  .dignitary-card {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .dignitary-img-box {
    height: 160px !important;
  }

  .dignitary-info {
    padding: 0.75rem 0.5rem !important;
  }

  .dignitary-name {
    font-size: 0.85rem !important;
    margin-bottom: 0.15rem !important;
  }

  .dignitary-role {
    font-size: 0.72rem !important;
    margin-bottom: 0.15rem !important;
  }

  .dignitary-dept {
    font-size: 0.66rem !important;
  }

  /* ------------------ H. STATISTICS COUNTER MOBILE ------------------ */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .stat-box {
    padding: 0.85rem 0.5rem !important;
    border-radius: 8px !important;
  }

  .stat-number-wrapper {
    font-size: 1.6rem !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-number-wrapper span[style*="font-size: 2rem"] {
    font-size: 1.2rem !important;
  }

  .stat-suffix {
    font-size: 1.1rem !important;
  }

  .stat-label {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  /* ------------------ I. PROJECTS SHOWCASE MOBILE ------------------ */
  .projects-filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }

  .projects-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .filter-btn {
    padding: 0.35rem 0.8rem !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
  }

  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }

  .project-card {
    border-radius: 10px !important;
  }

  .project-img-box {
    height: 190px !important;
  }

  .project-body {
    padding: 1rem !important;
  }

  .project-title {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .project-desc {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  .project-stats-grid {
    gap: 0.5rem !important;
    margin: 0.75rem 0 !important;
  }

  .project-stat-label {
    font-size: 0.7rem !important;
  }

  .project-stat-val {
    font-size: 0.85rem !important;
  }

  /* ------------------ J. QUICK ACTION CIRCLES MOBILE ------------------ */
  .circles-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.85rem !important;
    justify-content: center !important;
  }

  .circle-action-item {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: 150px !important;
  }

  .circle-graphic-ring {
    width: 105px !important;
    height: 105px !important;
    padding: 0.5rem !important;
    margin: 0 auto !important;
  }

  .circle-icon {
    font-size: 1.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  .circle-text {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  .circle-subtext {
    font-size: 0.68rem !important;
  }

  /* ------------------ K. PHOTO GALLERY MOBILE ------------------ */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .gallery-item {
    height: 200px !important;
    border-radius: 8px !important;
  }

  .gallery-caption {
    font-size: 0.82rem !important;
    padding: 0.6rem !important;
  }

  /* ------------------ L. SUBPAGE & TABLES MOBILE ------------------ */
  .page-banner-header {
    padding: 1.25rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-banner-title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .page-breadcrumbs {
    font-size: 0.74rem !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }

  .page-content-section {
    padding: 1.25rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 100% !important;
    gap: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .page-layout-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar-menu-card {
    position: static !important;
    margin: 0 0 1.25rem 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sidebar-menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #0b2545 !important;
    color: #ffffff !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #f58220 !important;
  }

  .sidebar-menu-header::after {
    content: '↔ Scroll for more';
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #93c5fd !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  .sidebar-menu-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.6rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0.75rem 0.85rem 0.65rem 0.85rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  .sidebar-menu-list::-webkit-scrollbar {
    display: block !important;
    height: 4px !important;
  }

  .sidebar-menu-list::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
    margin: 0 0.85rem !important;
  }

  .sidebar-menu-list::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 4px !important;
  }

  .sidebar-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.48rem 1.05rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0b2545 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  .sidebar-menu-link span {
    display: inline !important;
    margin-left: 0.35rem !important;
  }

  .sidebar-menu-link:hover {
    background: #f1f5f9 !important;
    color: #0b2545 !important;
    border-color: #94a3b8 !important;
  }

  .sidebar-menu-link.active {
    background: #0b2545 !important;
    color: #ffffff !important;
    border-color: #0b2545 !important;
    box-shadow: 0 2px 6px rgba(11, 37, 69, 0.3) !important;
  }

  .sidebar-menu-link.active span {
    color: #ffffff !important;
  }

  .content-card-box {
    padding: 1.35rem 1rem !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-break: break-word !important;
  }

  .content-card-box h2 {
    font-size: 1.28rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.85rem !important;
  }

  .content-card-box h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-top: 1.1rem !important;
    margin-bottom: 0.65rem !important;
  }

  .content-card-box h4 {
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .content-card-box p,
  .content-card-box li,
  .content-card-box div {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content-card-box p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0.85rem !important;
  }

  /* Force multi-column grids inside content cards to stack in 1 column on mobile */
  .content-card-box [style*="grid-template-columns"],
  .content-card-box div[style*="display: grid"],
  .content-card-box div[style*="display:grid"],
  .content-grid-2,
  .content-grid-3,
  .directors-card-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content-card-box [style*="grid-template-columns"] > *,
  .content-card-box div[style*="display: grid"] > *,
  .content-card-box div[style*="display:grid"] > *,
  .content-grid-2 > *,
  .content-grid-3 > *,
  .directors-card-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .officials-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .doc-search-input,
  .doc-search-bar input {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Hide any floating status badges on mobile */
  #bsrdcDbStatusBadge,
  .db-status-badge,
  .floating-db-badge {
    display: none !important;
  }

  /* Responsive Data Tables */
  .gov-table-wrapper {
    margin: 1rem 0 !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gov-table {
    font-size: 0.8rem !important;
    min-width: 550px !important;
    width: 100% !important;
  }

  .gov-table th {
    background: #0b2545 !important;
    color: #ffffff !important;
    padding: 0.65rem 0.85rem !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
  }

  .gov-table td {
    padding: 0.65rem 0.85rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
  }

  /* Responsive Pagination */
  .gov-pagination-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding-top: 1rem !important;
    text-align: center !important;
  }

  .pagination-info {
    font-size: 0.8rem !important;
  }

  .pagination-right-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    align-items: center !important;
  }

  .pagination-page-size {
    font-size: 0.8rem !important;
  }

  .pagination-controls {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  .pagination-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 0.45rem !important;
    font-size: 0.8rem !important;
  }

  .contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 0.85rem !important;
    padding: 0.6rem 0.75rem !important;
  }

  /* ------------------ M. INSTITUTIONAL FOOTER MOBILE ------------------ */
  .footer-contact-bar {
    padding: 1.5rem 0 !important;
  }

  .footer-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .contact-tile {
    padding: 0.85rem 1rem !important;
    gap: 0.75rem !important;
    border-radius: 6px !important;
  }

  .contact-tile-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .contact-tile-content h4 {
    font-size: 0.78rem !important;
    margin-bottom: 0.15rem !important;
  }

  .contact-tile-content p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .footer-main-content {
    padding: 2.25rem 0 1.5rem 0 !important;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .footer-col h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.35rem !important;
  }

  .footer-org-text {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }

  .footer-links-list {
    gap: 0.45rem !important;
  }

  .footer-links-list li a {
    font-size: 0.8rem !important;
  }

  .footer-compliance-card {
    padding: 0.85rem !important;
  }

  .compliance-text {
    font-size: 0.74rem !important;
  }

  .visitor-counter-box {
    padding: 0.4rem 0.65rem !important;
  }

  .visitor-label {
    font-size: 0.7rem !important;
  }

  .visitor-count {
    font-size: 0.85rem !important;
  }

  .footer-bottom-bar {
    padding: 1rem 0 !important;
  }

  .footer-bottom-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  .footer-policy-nav {
    justify-content: center !important;
    gap: 0.75rem !important;
  }

  .footer-policy-nav a {
    font-size: 0.74rem !important;
  }

  .copyright-text {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }
}

/* --------------------------------------------------------------------------
   4. ULTRA-SMALL PHONES (max-width: 400px - iPhone SE, Galaxy A, etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .bsrdc-main-logo,
  .bsrdc-emblem-img {
    height: 38px !important;
  }

  .brand-hi {
    font-size: 0.75rem !important;
  }

  .brand-en {
    font-size: 0.7rem !important;
  }

  .brand-sub {
    font-size: 0.6rem !important;
  }

  .dignitaries-grid {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  .dignitary-img-box {
    height: 200px !important;
  }

  .circle-action-item {
    flex: 0 0 calc(50% - 0.4rem) !important;
  }

  .circle-graphic-ring {
    width: 95px !important;
    height: 95px !important;
  }

  .circle-text {
    font-size: 0.74rem !important;
  }

  .stat-number-wrapper {
    font-size: 1.4rem !important;
  }
}