/* ===== CSS Reset (modern, low-specificity) ===== */
      :where(*, *::before, *::after) {
        box-sizing: border-box;
      }
      :where(html, body) {
        height: 100%;
      }
      :where(body) {
        margin: 0;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      :where(img, picture, svg, video, canvas) {
        max-width: 100%;
        display: block;
      }
      :where(input, button, textarea, select) {
        font: inherit;
      }
      :where(ul[role="list"], ol[role="list"]) {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      /* ===== Theme tokens ===== */
      :root {
        /* Official MOPR Government Color Palette - Final Polish Applied */
        --bg: #ffffff;
        --fg: #1a1a1a; /* Optimized contrast ratio: 11.89:1 (AAA compliant) */
        --muted: #4a5568; /* Enhanced contrast for better readability */
        --brand: #1e3a5f; /* Original dark blue/teal for navigation */
        --brand-active: #4a90a4; /* Active state - lighter blue */
        --brand-2: #3b82f6; /* Hover state - refined blue */
        --accent: #dc2626; /* Government red - contrast ratio: 5.25:1 (AA compliant) */
        --border: #e2e8f0; /* Refined border color for subtle definition */
        --surface: #f8fafc; /* Light surface for content sections */
        --surface-elevated: #f1f5f9; /* Elevated surface for better hierarchy */
        --danger: #b91c1c;

        /* Official Government Typography */
        --font-sans: Arial, "Noto Sans Devanagari", "Noto Sans", system-ui,
          -apple-system, sans-serif;
        --font-nav: Arial, "Noto Sans Devanagari", system-ui, -apple-system,
          sans-serif;
        --step--1: clamp(0.82rem, 0.79rem + 0.1vw, 0.9rem);
        --step-0: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
        --step-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem);
        --step-2: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
        --step-3: clamp(1.62rem, 1.3rem + 1.6vw, 2.25rem);
        --step-4: clamp(2rem, 1.6rem + 2.4vw, 3rem);

        /* Government Standard Layout - Refined for pixel-perfect accuracy */
        --maxw: 1200px;
        --pad-1: 0.5rem;
        --pad-2: 1rem;
        --pad-3: 1.5rem;
        --pad-4: 2rem;
        --radius: 4px; /* Government standard sharp corners */
        --radius-lg: 6px;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* Enhanced shadow for depth */
      }

      @media (prefers-color-scheme: dark) {
        :root {
          /* Government websites maintain light theme for consistency */
          --bg: #ffffff;
          --fg: #333333;
          --muted: #6b7280;
          --border: #e5e7eb;
          --surface: #f8fafc;
          --brand: #1e3a5f;
          --brand-active: #4a90a4;
          --brand-2: #3b82f6;
          --accent: #d32f2f;
          --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }

      @media (prefers-contrast: more) {
        :root {
          --border: currentColor;
        }
        a {
          text-decoration-thickness: 0.16em;
        }
      }

      @media (forced-colors: active) {
        :root {
          --shadow: none;
        }
      }

      body {
        font-family: var(--font-sans);
        background: var(--bg);
        color: var(--fg);
        line-height: 1.6; /* Government standard line height */
        font-feature-settings: "kern" 1, "liga" 1; /* Enhanced typography */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scroll-behavior: smooth; /* Smooth scrolling for better UX */
        overflow-x: hidden; /* Prevent horizontal scroll */
      }
      
      /* Enhanced focus management for better accessibility */
      *:focus-visible {
        outline: 2px solid var(--brand-2);
        outline-offset: 2px;
        border-radius: 4px;
      }
      
      /* Improved selection styling */
      ::selection {
        background: var(--brand-2);
        color: white;
        text-shadow: none;
      }
      
      ::-moz-selection {
        background: var(--brand-2);
        color: white;
        text-shadow: none;
      }

      .container {
        max-width: var(--maxw);
        margin-inline: auto;
        padding-inline: var(--pad-2);
        position: relative;
      }
      
      /* Premium loading state for better perceived performance */
      .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--brand-2), transparent);
        opacity: 0;
        animation: loadingShimmer 2s ease-in-out;
      }
      
      @keyframes loadingShimmer {
        0% { opacity: 0; transform: translateX(-100%); }
        50% { opacity: 1; transform: translateX(0); }
        100% { opacity: 0; transform: translateX(100%); }
      }
      .section {
        padding-block: clamp(
          3rem,
          2.5rem + 2vw,
          4rem
        ); /* Enhanced padding for premium government feel */
        transition: background-color 0.3s ease;
        position: relative;
      }
      
      /* ===== Alternating Section Backgrounds ===== */
      .section-white {
        background: var(--bg);
      }
      
      .section-light {
        background: var(--surface);
      }
      
      /* ===== Featured Section - Final Polish ===== */
      .section-featured {
        background: linear-gradient(135deg, var(--brand) 0%, #001a33 50%, var(--brand-active) 100%);
        color: white;
        padding-block: clamp(4rem, 3rem + 4vw, 5rem); /* Premium padding */
        margin: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        position: relative;
        overflow: hidden;
        border-top: 4px solid var(--brand-2);
        border-bottom: 4px solid var(--brand-2);
        box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
      }
      
      .section-featured::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.4;
        pointer-events: none;
      }
      
      .section-featured::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0.8;
      }
      
      .section-featured .container {
        max-width: var(--maxw);
        margin-inline: auto;
        padding-inline: var(--pad-2);
      }
      
      .section-featured header {
        text-align: center;
        margin-bottom: 3rem;
      }
      
      .section-featured header h2 {
        color: white;
        font-size: var(--step-4);
        margin-bottom: 2rem; /* Enhanced margin */
        font-weight: 700;
        text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Premium text shadow */
        position: relative;
        z-index: 1;
        letter-spacing: -0.02em;
      }
      
      .section-featured header h2::after {
        background: linear-gradient(90deg, transparent, white, transparent);
        opacity: 0.8;
      }
      
      .section-featured header p {
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--step-0);
        max-width: 600px;
        margin: 0 auto;
      }
      

      .section header h2 {
        font-size: var(--step-3);
        margin: 0 0 1.5rem; /* Enhanced margin for better visual hierarchy */
        font-family: var(--font-sans);
        color: var(--brand);
        font-weight: 700;
        line-height: 1.25; /* Optimized line height for government standard */
        letter-spacing: -0.02em; /* Refined letter spacing for premium feel */
        text-align: center;
        position: relative;
        padding-bottom: 1rem;
      }
      
      .section header h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, var(--brand), var(--accent));
        border-radius: 2px;
      }
      .section header p {
        color: var(--muted);
        font-size: var(--step-0);
        margin: 0 0 1rem;
        font-family: var(--font-sans);
      }

      /* ===== Skip link ===== */
      .skip {
        position: absolute;
        inset-inline-start: 0.5rem;
        inset-block-start: -100%;
        background: var(--brand);
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        z-index: 999;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
      }
      .skip:focus {
        inset-block-start: 0.5rem;
        outline: 3px solid white;
        outline-offset: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      }

      /* ===== Screen reader only content ===== */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* ===== Focus management ===== */
      .focus-trap {
        position: fixed;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      /* ===== Top utility bar ===== */
      .utility {
        background: var(--surface);
        border-block-end: 1px solid var(--border);
        font-size: var(--step--1);
        font-family: var(--font-sans);
      }
      .utility .inner {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
        padding-block: 0.35rem;
      }
      .util-left,
      .util-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
      }
      .badge {
        padding: 0.15rem 0.5rem;
        border-radius: 4px; /* Government standard border radius */
        background: var(--brand);
        color: #ffffff;
        font-weight: 600;
        font-family: var(--font-sans);
      }
      .a11y-group button {
        font-size: var(--step--1);
        padding: 0.25rem 0.5rem;
        border-radius: 4px; /* Government standard border radius */
        border: 1px solid var(--border);
        background: transparent;
        color: inherit;
        font-family: var(--font-sans);
        font-weight: 500;
      }
      .a11y-group button:focus-visible {
        outline: 2px solid var(--brand-2);
        outline-offset: 2px;
      }

      /* ===== Government Header ===== */
      .gov-header {
        background: #ffffff;
        border-bottom: 2px solid var(--border); /* Thicker border for better definition */
        padding: 1.25rem 0; /* Slightly increased padding */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
      }
      .gov-header-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 2rem;
      }

      /* Government Header Typography - Final Polish Applied */

      .gov-emblem {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
      }
      
      .emblem-img {
        width: 80px; /* Optimized size for perfect visual balance */
        height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15)); /* Premium shadow effect */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      }
      
      .emblem-img:hover,
      .emblem-img:focus {
        transform: scale(1.08); /* Slightly more prominent hover */
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
        outline: 2px solid var(--brand-2);
        outline-offset: 6px;
        border-radius: 6px;
      }

      .gov-title {
        text-align: center;
        padding: 0.5rem 0;
      }
      
      /* Final Polish - Premium Government Typography */
      .title-hindi {
        font-size: 1.75rem; /* Enhanced size for better prominence */
        font-weight: 700;
        color: var(--brand); /* Government navy for official feel */
        margin: 0 0 0.5rem 0;
        font-family: var(--font-sans);
        line-height: 1.2; /* Optimized for government standard */
        letter-spacing: -0.01em;
        text-shadow: 0 2px 4px rgba(0, 17, 34, 0.1); /* Refined shadow */
      }
      
      .title-english {
        font-size: 1.45rem; /* Enhanced proportions for better hierarchy */
        font-weight: 600;
        color: var(--brand-2); /* Complementary navy shade */
        margin: 0 0 0.4rem 0;
        font-family: var(--font-sans);
        line-height: 1.2;
        letter-spacing: -0.005em;
        text-shadow: 0 2px 4px rgba(0, 51, 102, 0.1);
      }
      
      .title-subtitle {
        font-size: 1rem;
        color: var(--muted); /* Consistent with theme */
        font-family: var(--font-sans);
        font-weight: 500;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 1px; /* Enhanced spacing for premium feel */
        opacity: 0.85;
        position: relative;
      }
      
      .title-subtitle::before {
        content: "";
        position: absolute;
        top: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
      }

      .gov-logos {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .logo-img {
        width: 60px; /* Enhanced size for better visual balance */
        height: 60px;
        object-fit: contain;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.05);
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .logo-img:hover,
      .logo-img:focus {
        transform: scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
        background: rgba(255, 255, 255, 0.2);
        outline: 2px solid var(--brand-2);
        outline-offset: 2px;
      }

      /* High-DPI display support */
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .emblem-img,
        .logo-img {
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
        }
      }

      /* Image loading error handling */
      .emblem-img,
      .logo-img {
        background-color: var(--surface);
        border: 1px solid var(--border);
      }

      .emblem-img::before,
      .logo-img::before {
        content: attr(alt);
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.7rem;
        color: var(--muted);
        text-align: center;
        opacity: 0;
        pointer-events: none;
      }

      .emblem-img[src=""],
      .logo-img[src=""],
      .emblem-img:not([src]),
      .logo-img:not([src]) {
        position: relative;
      }

      .emblem-img[src=""]::before,
      .logo-img[src=""]::before,
      .emblem-img:not([src])::before,
      .logo-img:not([src])::before {
        opacity: 1;
      }

      /* Print styles for logos */
      @media print {
        .gov-emblem,
        .gov-logos {
          -webkit-print-color-adjust: exact;
          color-adjust: exact;
        }
        .emblem-img,
        .logo-img {
          filter: none;
          background: none;
        }
      }

      /* Tablet responsive styles */
      @media (max-width: 1024px) {
        .gov-header-inner {
          gap: 1.5rem;
        }
        .emblem-img {
          width: 65px;
          height: 65px;
        }
        .logo-img {
          width: 50px;
          height: 50px;
        }
        .gov-logos {
          gap: 0.75rem;
        }
      }

      /* Mobile responsive styles - Final Polish */
      @media (max-width: 768px) {
        .gov-header-inner {
          grid-template-columns: 1fr;
          gap: 2rem; /* Enhanced gap for better spacing */
          text-align: center;
          padding: 1.5rem 0; /* Premium padding */
        }
        .gov-emblem,
        .gov-logos {
          justify-content: center;
        }
        .emblem-img {
          width: 70px; /* Optimized size for mobile */
          height: 70px;
        }
        .logo-img {
          width: 55px; /* Enhanced size for mobile */
          height: 55px;
        }
        .title-hindi {
          font-size: 1.5rem; /* Enhanced readability */
        }
        .title-english {
          font-size: 1.25rem; /* Enhanced readability */
        }
        .title-subtitle {
          font-size: 0.9rem;
        }
        .gov-logos {
          gap: 1rem; /* Enhanced gap */
          flex-wrap: wrap;
        }
      }

      /* Small mobile responsive styles - Final Polish */
      @media (max-width: 480px) {
        .gov-header {
          padding: 1rem 0; /* Enhanced padding */
        }
        .emblem-img {
          width: 60px; /* Maintained visibility */
          height: 60px;
        }
        .logo-img {
          width: 45px; /* Enhanced visibility */
          height: 45px;
        }
        .title-hindi {
          font-size: 1.25rem; /* Better readability */
        }
        .title-english {
          font-size: 1.1rem; /* Better readability */
        }
        .title-subtitle {
          font-size: 0.85rem;
          letter-spacing: 0.8px;
        }
        .gov-logos {
          gap: 0.75rem;
        }
      }

      /* ===== MOPR Navigation Bar - Final Polish ===== */
      .mopr-nav {
        background: linear-gradient(180deg, #0f1419 0%, #1a202c 100%); /* Much darker navy/black colors */
        border-bottom: 4px solid #3b82f6; /* Enhanced border thickness */
        position: relative;
        z-index: 1000;
        box-shadow: 0 6px 20px rgba(0, 17, 34, 0.4); /* Premium shadow effect */
        overflow: visible;
      }
      
      .mopr-nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent, var(--accent));
        opacity: 0.6;
      }

      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        min-height: 60px;
        overflow: visible; /* Allow dropdowns to extend outside */
        position: relative;
        max-width: var(--maxw); /* Navigation-specific max-width */
        margin: 0 auto; /* Center the navigation */
        padding-inline: var(--pad-2); /* Navigation-specific padding */
      }

      .nav-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        flex-wrap: nowrap;
        overflow: visible; /* Allow dropdowns to extend outside container */
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .nav-menu::-webkit-scrollbar {
        display: none;
      }

      .nav-item {
        position: relative;
      }

      .nav-link {
        display: block;
        padding: 1.15rem 1.25rem; /* Optimized padding for perfect spacing */
        color: #ffffff;
        text-decoration: none;
        font-family: var(--font-nav);
        font-weight: 600;
        font-size: 0.9rem; /* Refined font size for better readability */
        letter-spacing: 0.8px; /* Perfect letter spacing for government standard */
        text-transform: uppercase;
        border: none;
        background: none;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother transition */
        white-space: nowrap;
        position: relative;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Refined text shadow for clarity */
        border-bottom: 3px solid transparent; /* Invisible border for hover effect */
      }

      .nav-link:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
        border-radius: 4px;
      }

      .nav-link:hover,
      .nav-link:focus {
        background: var(--brand-active);
        outline: none;
        transform: translateY(-2px); /* Enhanced lift effect */
        box-shadow: 0 6px 12px rgba(0, 17, 34, 0.4);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 4px solid var(--accent); /* Enhanced accent border */
        color: #ffffff;
      }

      .nav-item.active .nav-link {
        background: var(--brand-2);
        font-weight: 700;
        border-left: 4px solid var(--accent);
        border-bottom: 4px solid var(--accent);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      }

      .dropdown-arrow {
        margin-left: 0.5rem;
        font-size: 0.7rem;
        transition: transform 0.2s ease;
      }

      .dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(180deg);
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #001122; /* Ultra dark dropdown background */
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Enhanced shadow for better layering */
        list-style: none;
        margin: 0;
        padding: 0.75rem 0;
        min-width: 220px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1001; /* Higher than navigation */
        backdrop-filter: blur(10px); /* Modern glass effect */
        -webkit-backdrop-filter: blur(10px);
      }

      .has-dropdown:hover .dropdown-menu,
      .has-dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown-menu li {
        margin: 0;
      }

      .dropdown-menu a {
        display: block;
        padding: 0.875rem 1.5rem;
        color: #ffffff;
        text-decoration: none;
        font-family: var(--font-nav);
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.3px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .dropdown-menu a:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
        border-radius: 4px;
      }

      .dropdown-menu a:hover,
      .dropdown-menu a:focus {
        background: #002244; /* Ultra dark hover background */
        outline: none;
        padding-left: 2rem;
        transition: all 0.2s ease;
        transform: translateX(4px);
      }

      /* Mobile hamburger menu */
      .mobile-menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 2.75rem;
        height: 2.75rem;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        margin-right: 1rem;
        transition: all 0.2s ease;
        border-radius: 6px;
        position: relative;
        /* Enhanced touch target size for mobile */
        min-width: 44px;
        min-height: 44px;
      }

      .mobile-menu-toggle:hover,
      .mobile-menu-toggle:focus {
        background: rgba(255, 255, 255, 0.15);
        outline: 2px solid rgba(255, 255, 255, 0.4);
        outline-offset: 2px;
        transform: scale(1.05);
      }

      /* Enhanced touch feedback */
      .mobile-menu-toggle:active {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(0.95);
      }

      .hamburger-line {
        width: 1.5rem;
        height: 2px;
        background: #ffffff;
        margin: 2px 0;
        transition: all 0.3s ease;
        border-radius: 1px;
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
      }

      .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
      }

      /* Touch device optimizations */
      .touch-device .nav-link {
        /* Larger touch targets for mobile */
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      .touch-device .mobile-menu-toggle {
        /* Enhanced touch feedback */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
        tap-highlight-color: rgba(255, 255, 255, 0.2);
      }

      /* Prevent text selection on touch devices for better UX */
      .touch-device .nav-link,
      .touch-device .mobile-menu-toggle {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      /* Mobile-specific performance optimizations */
      @media (max-width: 768px) {
        .mopr-nav {
          /* Hardware acceleration for smoother animations */
          transform: translateZ(0);
          -webkit-transform: translateZ(0);
        }

        .nav-menu {
          /* Optimize rendering performance */
          will-change: transform, opacity, max-height;
        }

        .mobile-menu-toggle {
          /* Optimize button performance */
          will-change: transform, background-color;
        }
      }

      /* Reduce motion for users who prefer it */
      @media (prefers-reduced-motion: reduce) {
        .nav-menu,
        .mobile-menu-toggle,
        .nav-link,
        .dropdown-menu {
          transition: none !important;
          animation: none !important;
        }

        .nav-menu.mobile-open {
          animation: none;
        }
      }

      /* Mobile responsive navigation */
      @media (max-width: 1200px) {
        .nav-link {
          padding: 0.875rem 0.9rem;
          font-size: 0.8rem;
        }
      }

      @media (max-width: 1024px) {
        .nav-link {
          padding: 0.75rem 0.8rem;
          font-size: 0.75rem;
        }

        .nav-inner {
          padding-right: 1rem;
        }
      }

<<<<<<< HEAD
@media (max-width: 900px) {
  /* mobile toggle visible */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0.6rem;
    cursor: pointer;
    z-index: 1201;
  }

  /* off-canvas panel */
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;                 /* slide in from right */
    height: 100vh;
    width: 86vw;
    max-width: 360px;
    background: #145a32;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1200;
    will-change: transform;
  }

  /* visible state */
  .nav-menu.open {
    transform: translateX(0);
  }

  /* ensure nav items fill width and are tap-friendly */
  .nav-item {
    width: 100%;
  }
  .nav-link {
    width: 100%;
    text-align: left;
    padding: 1rem 1.2rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
  }

  /* dropdowns become accordion on mobile */
  .dropdown-menu {
    display: none;
    position: static;
    background: #16643a;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    flex-direction: column;
  }
  .nav-item.open > .dropdown-menu {
    display: flex;
  }
  .dropdown-menu a {
    padding: 0.9rem 1.8rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }

  /* overlay behind panel */
  .mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1198;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-overlay.active {
    display: block;
  }

  /* prevent body scroll when open */
  body.mobile-menu-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
  }

  /* small visual tweaks */
  .dropdown-arrow {
    float: right;
    transform: rotate(0deg);
    transition: transform 0.22s;
  }
  .nav-item.open > .nav-link .dropdown-arrow {
    transform: rotate(180deg);
  }
}
/* ...existing code... */
=======
      @media (max-width: 768px) {
        .mobile-menu-toggle {
          display: flex;
        }

        .nav-menu {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: #001a33; /* Ultra dark mobile menu background */
          flex-direction: column;
          align-items: stretch;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          border-top: 2px solid rgba(255, 255, 255, 0.1);
          max-height: 0;
          overflow: hidden;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
          z-index: 1000;
          /* Enhanced mobile menu styling */
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .nav-menu.mobile-open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          max-height: 70vh; /* Reduced height to avoid unnecessary scrolling */
          overflow-y: auto;
          /* Smooth scrolling for mobile */
          -webkit-overflow-scrolling: touch;
          scroll-behavior: smooth;
        }

        .nav-item {
          width: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          /* Enhanced touch target */
          min-height: 48px;
        }

        .nav-item:last-child {
          border-bottom: none;
        }

        .nav-link {
          padding: 1.25rem 1.5rem;
          font-size: 0.95rem;
          width: 100%;
          text-align: left;
          /* Enhanced touch target */
          min-height: 48px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 0.2s ease;
          position: relative;
        }

        /* Enhanced touch feedback for mobile nav links */
        .nav-link:active {
          background: #002244;
          transform: scale(0.98);
        }

        .nav-link:focus {
          outline: 2px solid rgba(255, 255, 255, 0.8);
          outline-offset: -2px;
          background: var(--brand-2);
        }

        .dropdown-menu {
          position: static;
          opacity: 1;
          visibility: visible;
          transform: none;
          box-shadow: none;
          border: none;
          border-radius: 0;
          background: rgba(
            0,
            0,
            0,
            0.15
          ); /* Enhanced contrast for mobile dropdown */
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .has-dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
          max-height: 400px;
        }

        .dropdown-menu a {
          color: #ffffff;
          padding: 1rem 2.5rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          font-family: var(--font-nav);
          font-weight: 500;
          /* Enhanced touch target */
          min-height: 48px;
          display: flex;
          align-items: center;
          transition: all 0.2s ease;
          position: relative;
        }

        .dropdown-menu a:hover,
        .dropdown-menu a:focus {
          background: #002244; /* Ultra dark hover background */
          padding-left: 3rem;
          outline: 2px solid rgba(255, 255, 255, 0.6);
          outline-offset: -2px;
        }

        .dropdown-menu a:active {
          background: var(--brand-active);
          transform: scale(0.98);
        }

        .dropdown-menu li:last-child a {
          border-bottom: none;
        }

        /* Enhanced dropdown arrow animation for mobile */
        .dropdown-arrow {
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          font-size: 0.8rem;
        }

        /* Mobile menu scroll indicator */
        .nav-menu::-webkit-scrollbar {
          width: 4px;
        }

        .nav-menu::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.1);
        }

        .nav-menu::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 2px;
        }

        .nav-menu::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.5);
        }

        /* Mobile menu overlay for better focus management */
        .nav-menu.mobile-open::before {
          content: "";
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
          z-index: -1;
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
        }

        /* Enhanced mobile menu animation */
        .nav-menu.mobile-open {
          animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-20px);
            max-height: 0;
          }
          to {
            opacity: 1;
            transform: translateY(0);
            max-height: 85vh;
          }
        }
      }
>>>>>>> 524119758914b91205c1cfffb2786914a5eab9fd

      /* ===== Mann Ki Baat Image Slideshow ===== */
      .hero {
        margin: 0;
        padding: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
      }

      .mann-ki-baat-slideshow {
        position: relative;
        height: clamp(450px, 60vh, 600px);
        width: 100%;
        overflow: hidden;
        box-shadow: none;
        contain: layout style paint; /* CSS containment for optimal performance */
        will-change: transform; /* Optimize for animations */
      }

      .slideshow-container {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .slide.active {
        opacity: 1;
      }

      /* News ticker at bottom of hero section - Refined for pixel-perfect accuracy */
      .news-ticker-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(90deg, #001122 0%, #001a33 100%); /* Subtle gradient for depth */
        border-top: 3px solid #002244; /* Thicker, darker border */
        z-index: 3;
        overflow: hidden;
        height: 65px; /* Slightly taller for better proportion */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); /* Upward shadow for depth */
      }

      .news-ticker {
        display: flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        animation: scroll-left 30s linear infinite;
      }

      .news-ticker-label {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Enhanced red gradient */
        color: white;
        padding: 0.85rem 1.75rem; /* Better proportions */
        font-weight: 700;
        font-size: 0.95rem; /* Slightly larger for better visibility */
        text-transform: uppercase;
        letter-spacing: 1.2px; /* Increased spacing for government standard */
        margin-right: 2.5rem; /* More spacing */
        flex-shrink: 0;
        font-family: var(--font-sans);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Enhanced text shadow */
        border-radius: 0 4px 4px 0; /* Subtle right border radius */
      }

      .news-ticker-content {
        color: #ffffff;
        font-size: 0.95rem;
        font-weight: 500;
        padding-right: 3rem;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        font-family: var(--font-sans);
      }

      @keyframes scroll-left {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

      .news-ticker:hover {
        animation-play-state: paused;
      }

      /* Enhanced contrast and accessibility */
      @media (prefers-reduced-motion: reduce) {
        .news-ticker {
          animation: none;
        }

        .slide {
          transition: none;
        }

        .nav-arrow,
        .play-pause-btn {
          transition: none;
        }
      }

      /* High contrast mode support */
      @media (prefers-contrast: high) {
        .news-ticker-container {
          background: #001a33;
          border-top: 3px solid #003366;
        }
      }

      .news-ticker:focus-within {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
      }

      /* Navigation Controls */
      .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1.4rem;
        backdrop-filter: blur(15px);
        z-index: 4;
        /* Enhanced accessibility */
        min-width: 44px;
        min-height: 44px;
      }

      .nav-arrow:hover,
      .nav-arrow:focus {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-50%) scale(1.1);
        outline: 3px solid white;
        outline-offset: 4px;
      }

      .nav-arrow:focus-visible {
        outline: 3px solid white;
        outline-offset: 4px;
      }

      .nav-arrow.prev {
        left: 2rem;
      }

      .nav-arrow.next {
        right: 2rem;
      }

      .nav-arrow:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.1);
      }

      .nav-arrow:disabled:hover {
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.1);
      }

      /* Slide Indicators */
      .slide-indicators {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.8rem;
        z-index: 4;
      }

      .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: all 0.3s ease;
        /* Enhanced accessibility */
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .indicator::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
      }

      .indicator.active::before {
        background: var(--accent); /* Official red accent */
        border-color: var(--accent);
        transform: scale(1.2);
      }

      .indicator:hover::before,
      .indicator:focus::before {
        background: rgba(255, 255, 255, 0.7);
        transform: scale(1.1);
      }

      .indicator:focus {
        outline: 2px solid white;
        outline-offset: 4px;
      }

      .indicator[aria-selected="true"] {
        z-index: 1;
      }

      /* Play/Pause Button */
      .play-pause-btn {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: rgba(0, 0, 0, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
        backdrop-filter: blur(10px);
        z-index: 4;
        /* Enhanced accessibility */
        min-width: 44px;
        min-height: 44px;
      }

      .play-pause-btn:hover,
      .play-pause-btn:focus {
        background: rgba(0, 0, 0, 0.7);
        border-color: rgba(255, 255, 255, 0.6);
        outline: 3px solid white;
        outline-offset: 4px;
      }

      .play-pause-btn:focus-visible {
        outline: 3px solid white;
        outline-offset: 4px;
      }

      .play-pause-btn[aria-pressed="true"] {
        background: rgba(0, 0, 0, 0.8);
        border-color: var(--accent);
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .mann-ki-baat-slideshow {
          height: clamp(400px, 55vh, 500px);
        }

        .nav-arrow {
          width: 50px;
          height: 50px;
          font-size: 1.2rem;
        }

        .nav-arrow.prev {
          left: 1rem;
        }

        .nav-arrow.next {
          right: 1rem;
        }

        .play-pause-btn {
          width: 45px;
          height: 45px;
          top: 1.5rem;
          right: 1.5rem;
        }

        .slide-indicators {
          bottom: 4rem;
        }

        .indicator {
          width: 10px;
          height: 10px;
        }

        .news-ticker-container {
          height: 50px;
        }

        .news-ticker-label {
          padding: 0.5rem 1rem;
          font-size: 0.8rem;
          margin-right: 1rem;
        }

        .news-ticker-content {
          font-size: 0.85rem;
        }
      }

      /* ===== MOPR Content Layout ===== */
      .mopr-content-layout {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: 2fr 1fr;
        align-items: start;
        margin: 1rem 0 2rem 0;
      }

      /* Main Content Styles */
      .mopr-main-content {
        background: var(--bg);
        border: 1px solid #e2e8f0; /* Refined border color */
        border-radius: 8px; /* Slightly more rounded for modern government standard */
        padding: 4rem 3.5rem; /* Optimized padding for perfect content spacing */
        margin: 1.5rem 0; /* Better vertical rhythm */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); /* Enhanced shadow for depth */
        position: relative;
        transition: box-shadow 0.3s ease; /* Smooth shadow transition */
      }
      
      .mopr-main-content:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); /* Subtle hover effect */
      }
      
      .mopr-main-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
        border-radius: var(--radius) var(--radius) 0 0;
      }

      .mopr-content-header h2 {
        font-size: 2rem; /* Larger for better hierarchy */
        font-weight: 700;
        color: #1a1a1a; /* Darker for better contrast */
        margin: 0 0 2.5rem 0; /* Increased spacing */
        border-bottom: 4px solid var(--brand);
        padding-bottom: 1rem; /* Better proportion */
        font-family: var(--font-sans);
        line-height: 1.25; /* Tighter for headings */
        letter-spacing: -0.02em;
        position: relative;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle depth */
      }
      
      .mopr-content-header h2::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--accent);
      }

      .mopr-content-body p {
        font-size: 1.0625rem; /* Slightly larger for better readability */
        line-height: 1.7; /* Increased line height for better readability */
        color: var(--fg);
        margin-bottom: 1.5rem; /* Increased margin */
        text-align: justify;
        font-family: var(--font-sans);
        font-weight: 400;
      }

      .mopr-content-body h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand);
        margin: 2rem 0 1rem 0;
        font-family: var(--font-sans);
        line-height: 1.4;
      }

      .mopr-function-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .mopr-function-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border);
        position: relative;
        padding-left: 1.5rem;
        font-family: var(--font-sans);
        color: var(--fg);
      }

      .mopr-function-list li:before {
        content: "▶";
        position: absolute;
        left: 0;
        color: var(--brand);
        font-size: 0.8rem;
      }

      .mopr-function-list li:last-child {
        border-bottom: none;
      }

      /* Sidebar Styles */
      .mopr-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 1.5rem 0;
      }

      .mopr-sidebar-section {
        background: var(--bg);
        border: 1px solid #e2e8f0; /* Consistent with main content */
        border-radius: 8px; /* Matching main content radius */
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); /* Matching main content shadow */
        transition: box-shadow 0.3s ease;
      }
      
      .mopr-sidebar-section:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); /* Matching hover effect */
      }

      .mopr-sidebar-header {
        background: linear-gradient(135deg, #001122 0%, #002244 100%); /* Matching darker navy theme */
        padding: 1.25rem 1.5rem; /* Better proportions */
        border-bottom: 3px solid #002244; /* Thicker, darker border */
        position: relative;
      }
      
      .mopr-sidebar-header::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 40px;
        height: 3px;
        background: var(--accent); /* Red accent line */
      }

      .mopr-sidebar-header h2,
      .mopr-sidebar-header h3 {
        color: #ffffff;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: var(--font-sans);
        line-height: 1.4;
      }

      .mopr-news-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .mopr-news-item {
        border-bottom: 1px solid var(--border);
      }

      .mopr-news-item:last-child {
        border-bottom: none;
      }

      .mopr-news-link {
        display: block;
        padding: 1rem 1.25rem;
        text-decoration: none;
        transition: background-color 0.2s ease;
      }

      .mopr-news-link:hover {
        background: var(--surface);
      }

      .mopr-news-title {
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--fg);
        line-height: 1.4;
        margin-bottom: 0.5rem;
        font-family: var(--font-sans);
      }

      .mopr-news-date {
        font-size: 0.8rem;
        color: var(--muted);
        font-weight: 400;
        font-family: var(--font-sans);
      }

      .mopr-sidebar-footer {
        padding: 1rem 1.25rem;
        background: var(--surface);
        border-top: 1px solid var(--border);
      }

      .mopr-view-all-link {
        color: var(--brand);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        transition: color 0.2s ease;
        font-family: var(--font-sans);
      }

      .mopr-view-all-link:hover {
        color: var(--brand-2);
      }

      .mopr-quick-links {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .mopr-quick-links li {
        border-bottom: 1px solid var(--border);
      }

      .mopr-quick-links li:last-child {
        border-bottom: none;
      }

      .mopr-quick-link {
        display: block;
        padding: 0.875rem 1.25rem;
        color: var(--fg);
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        font-family: var(--font-sans);
      }

      .mopr-quick-link:hover {
        background: var(--surface);
        color: var(--brand);
        padding-left: 1.5rem;
      }

      /* ===== Document Items Styling ===== */
      .mopr-documents-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .mopr-document-item {
        border-bottom: 1px solid var(--border);
        transition: all 0.2s ease;
      }

      .mopr-document-item:last-child {
        border-bottom: none;
      }

      .mopr-document-item:hover {
        background: var(--surface);
        transform: translateX(2px);
      }

      .mopr-document-link {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
        border-radius: 6px;
        margin: 2px;
      }

      .mopr-document-link:hover {
        background: rgba(0, 17, 34, 0.02);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      .document-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface);
        border-radius: 8px;
        border: 1px solid var(--border);
      }

      .document-info {
        flex: 1;
        min-width: 0;
      }

      .mopr-document-title {
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--brand);
        line-height: 1.4;
        margin-bottom: 0.5rem;
        font-family: var(--font-sans);
        word-wrap: break-word;
        hyphens: auto;
      }

      .mopr-document-meta {
        display: block;
        font-size: 0.75rem;
        color: var(--muted);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: var(--font-sans);
      }

      .document-actions {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        opacity: 0.6;
        transition: opacity 0.2s ease;
      }

      .mopr-document-link:hover .document-actions {
        opacity: 1;
      }

      .view-icon {
        font-size: 1.25rem;
        color: var(--brand-2);
      }

      /* Responsive Design */
      @media (max-width: 980px) {
        .mopr-content-layout {
          grid-template-columns: 1fr;
          gap: 2.5rem; /* Increased gap */
          margin: 1rem 0 2rem 0; /* Adjusted margins */
        }

        .mopr-main-content {
          padding: 3rem 2.5rem; /* Maintained generous padding */
          margin: 1rem 0;
        }

        .mopr-content-header h2 {
          font-size: 1.625rem; /* Larger heading on tablets */
        }
      }

      @media (max-width: 640px) {
        .mopr-main-content {
          padding: 2.5rem 2rem; /* Maintained good padding on mobile */
          margin: 1rem 0;
        }

        .mopr-content-header h2 {
          font-size: 1.375rem; /* Larger heading on mobile */
        }

        .mopr-content-body p {
          font-size: 1rem; /* Maintained readable font size */
          line-height: 1.8; /* Increased line height for mobile */
        }
      }

      /* ===== Key Services grid - Final Polish ===== */
      .section-featured .grid {
        display: grid;
        gap: 2.5rem; /* Enhanced gap for premium spacing */
        grid-template-columns: repeat(4, 1fr);
        margin-top: 3.5rem; /* Enhanced top margin */
        position: relative;
        z-index: 1;
        padding: 0 1rem; /* Added padding for better edge spacing */
      }
      
      .section-featured .service {
        padding: 3rem 2.5rem; /* Premium padding for government standard */
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px; /* Enhanced border radius */
        background: rgba(255, 255, 255, 0.98); /* Premium opacity */
        display: grid;
        gap: 1.25rem; /* Enhanced gap */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        min-height: 200px; /* Enhanced minimum height */
        backdrop-filter: blur(20px); /* Premium blur effect */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); /* Premium shadow */
      }

      .service::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .service:hover,
      .service:focus {
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 16px 48px rgba(0, 17, 34, 0.25); /* Premium hover shadow */
        transform: translateY(-6px); /* Enhanced lift effect */
      }

      .service:hover::before,
      .service:focus::before {
        transform: scaleX(1);
      }

      .service h3 {
        margin: 0;
        font-size: var(--step-1);
        font-family: var(--font-sans);
        color: var(--brand);
        font-weight: 700;
        line-height: 1.25; /* Tighter line height */
        transition: color 0.2s ease;
        letter-spacing: -0.02em; /* Subtle letter spacing */
      }

      .service:hover h3,
      .service:focus h3 {
        color: var(--brand-2);
      }

      .service p {
        margin: 0;
        font-size: 0.9rem; /* Slightly larger */
        color: #4a5568; /* Better contrast */
        font-family: var(--font-sans);
        line-height: 1.6; /* Increased line height */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 400;
      }

      /* Service card icons (optional enhancement) */
      .service[aria-label*="RGSA"]::after {
        content: "🏛️";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="SVAMITVA"]::after {
        content: "🗺️";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="e-GramSwaraj"]::after {
        content: "💻";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="AuditOnline"]::after {
        content: "📊";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="Awards"]::after {
        content: "🏆";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="PESA"]::after {
        content: "⚖️";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="SDG"]::after {
        content: "🎯";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service[aria-label*="Training"]::after {
        content: "📚";
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        opacity: 0.3;
        transition: opacity 0.2s ease;
      }

      .service:hover::after,
      .service:focus::after {
        opacity: 0.6;
      }
      
      /* ===== Featured Section Service Cards Override ===== */
      .section-featured .service {
        background: rgba(0, 51, 102, 0.95);
        border: 2px solid rgba(0, 85, 170, 0.4);
        backdrop-filter: blur(10px);
        color: #ffffff;
      }
      
      .section-featured .service:hover,
      .section-featured .service:focus {
        background: rgba(0, 68, 136, 1);
        border-color: rgba(0, 119, 221, 0.7);
        box-shadow: 0 12px 30px rgba(0, 34, 68, 0.5);
        transform: translateY(-4px);
      }
      
      .section-featured .service h3 {
        color: #ffffff !important;
      }
      
      .section-featured .service p {
        color: rgba(255, 255, 255, 0.9) !important;
      }
      
      .section-featured .service::before {
        background: linear-gradient(90deg, var(--brand-2), var(--accent));
      }
      @media (max-width: 1100px) {
        .grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .section-featured .grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 800px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .section-featured .grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .section-featured header h2 {
          font-size: var(--step-3);
        }
      }
      @media (max-width: 520px) {
        .grid {
          grid-template-columns: 1fr;
        }
        .section-featured .grid {
          grid-template-columns: 1fr;
        }
        .section-featured header h2 {
          font-size: var(--step-2);
        }
        .section-featured header {
          margin-bottom: 2rem;
        }
      }


      
      .documents-header {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid var(--border);
      }
      
      .documents-header h2 {
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--fg);
        margin: 0 0 1rem 0;
        font-family: var(--font-sans);
      }
      
      .documents-header p {
        font-size: 1.125rem;
        color: var(--muted);
        margin: 0;
        font-family: var(--font-sans);
      }
      
      .documents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
      }
      
      .document-category {
        background: var(--surface);
        border-radius: 8px;
        padding: 1.5rem;
        border: 1px solid var(--border);
        transition: all 0.3s ease;
      }
      
      .document-category:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }
      
      .category-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand);
        margin: 0 0 1.5rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--brand);
        font-family: var(--font-sans);
      }
      
      .document-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .document-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        background: var(--bg);
        border-radius: 6px;
        border: 1px solid var(--border);
        transition: all 0.2s ease;
      }
      
      .document-item:hover {
        background: #f8fafc;
        border-color: var(--brand-2);
      }
      
      .document-info {
        flex: 1;
      }
      
      .document-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--fg);
        margin: 0 0 0.5rem 0;
        font-family: var(--font-sans);
        line-height: 1.4;
      }
      
      .document-description {
        font-size: 0.875rem;
        color: var(--muted);
        margin: 0 0 0.5rem 0;
        line-height: 1.5;
        font-family: var(--font-sans);
      }
      
      .document-meta {
        font-size: 0.75rem;
        color: var(--muted);
        font-weight: 500;
        font-family: var(--font-sans);
        opacity: 0.8;
      }
      
      .document-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
      }
      
      .btn-download,
      .btn-view {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
        font-family: var(--font-sans);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .btn-download {
        background: var(--brand);
        color: white;
        border: 1px solid var(--brand);
      }
      
      .btn-download:hover {
        background: var(--brand-2);
        border-color: var(--brand-2);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      .btn-view {
        background: transparent;
        color: var(--brand);
        border: 1px solid var(--brand);
      }
      
      .btn-view:hover {
        background: var(--brand);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      .btn-icon {
        font-size: 0.875rem;
      }
      
      /* Mobile responsive */
      @media (max-width: 768px) {
        .documents-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }
        
        .document-item {
          flex-direction: column;
          align-items: stretch;
          gap: 1rem;
        }
        
        .document-actions {
          justify-content: stretch;
        }
        
        .btn-download,
        .btn-view {
          flex: 1;
          justify-content: center;
          padding: 0.75rem;
        }
        
        .documents-header h2 {
          font-size: 1.75rem;
        }
      }
      
      @media (max-width: 480px) {
        .documents-section {
          margin-left: -1rem;
          margin-right: -1rem;
          border-radius: 0;
        }
        
        .document-category {
          padding: 1rem;
        }
      }

      /* ===== 3-Container Rotating Photo Gallery ===== */
      .photo-gallery-section {
        background: var(--surface);
        border-radius: 16px;
        padding: 3rem 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        position: relative;
        overflow: hidden;
      }
      
      .photo-gallery-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
      }
      
      .gallery-header {
        text-align: center;
        margin-bottom: 2.5rem;
      }
      
      .gallery-header h2 {
        font-size: var(--step-3);
        font-weight: 700;
        color: var(--brand);
        margin: 0 0 1rem 0;
        font-family: var(--font-sans);
        position: relative;
      }
      
      .gallery-header h2::after {
        content: "";
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, var(--brand), var(--accent));
        border-radius: 2px;
      }
      
      .gallery-header p {
        color: var(--muted);
        font-size: var(--step-0);
        margin: 0;
        font-family: var(--font-sans);
      }
      
      .gallery-container {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
      }
      
      /* 3-Container Rotating Gallery */
      .rotating-gallery-wrapper {
        position: relative;
        width: 100%;
        height: 350px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      }
      
      .rotating-track {
        display: flex;
        width: calc(100% * 5 / 3); /* 5 containers, show 3 at once */
        height: 100%;
        animation: slideshow 15s infinite;
        transition: transform 0.8s ease-in-out;
      }
      
      @keyframes slideshow {
        0% { transform: translateX(0); }
        20% { transform: translateX(0); }
        25% { transform: translateX(calc(-100% / 5)); }
        45% { transform: translateX(calc(-100% / 5)); }
        50% { transform: translateX(calc(-200% / 5)); }
        70% { transform: translateX(calc(-200% / 5)); }
        75% { transform: translateX(calc(-300% / 5)); }
        95% { transform: translateX(calc(-300% / 5)); }
        100% { transform: translateX(0); }
      }
      
      .photo-container {
        flex: 0 0 calc(100% / 3); /* Each container takes 1/3 of visible width */
        height: 100%;
        padding: 0 0.75rem;
        box-sizing: border-box;
      }
      
      .photo-card {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        cursor: pointer;
      }
      
      .photo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
      }
      
      .photo-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
      }
      
      .photo-card:hover img {
        transform: scale(1.05);
      }
      
      .card-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(
          transparent 0%,
          rgba(0, 0, 0, 0.4) 40%,
          rgba(0, 0, 0, 0.8) 100%
        );
        color: white;
        padding: 1.5rem;
        transform: translateY(100%);
        transition: transform 0.3s ease;
      }
      
      .photo-card:hover .card-overlay {
        transform: translateY(0);
      }
      
      .card-overlay h4 {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0 0 0.25rem 0;
        font-family: var(--font-sans);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }
      
      .card-overlay p {
        font-size: 0.875rem;
        margin: 0;
        opacity: 0.9;
        font-family: var(--font-sans);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
      
      /* Pause animation on hover */
      .rotating-gallery-wrapper:hover .rotating-track {
        animation-play-state: paused;
      }
      
      .gallery-footer {
        text-align: center;
        margin-top: 2rem;
      }
      
      .view-all-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        background: #004488;
        color: white;
        border: none;
        border-radius: 8px;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
      }
      
      .view-all-btn:hover,
      .view-all-btn:focus {
        background: var(--brand-2);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);
      }
      
      .view-all-btn:focus {
        outline: 3px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
      }
      
      .btn-arrow {
        transition: transform 0.3s ease;
      }
      
      .view-all-btn:hover .btn-arrow {
        transform: translateX(4px);
      }
      
      /* Mobile responsive */
      @media (max-width: 768px) {
        .photo-gallery-section {
          padding: 2rem 1.5rem;
          margin-left: -1rem;
          margin-right: -1rem;
          border-radius: 0;
        }
        
        .rotating-gallery-wrapper {
          height: 280px;
        }
        
        .gallery-header h2 {
          font-size: var(--step-2);
        }
        
        .photo-container {
          flex: 0 0 50%; /* Show 2 containers on mobile */
          padding: 0 0.5rem;
        }
        
        .rotating-track {
          width: calc(100% * 4); /* Adjust for mobile layout */
          animation: infiniteRotateMobile 15s linear infinite;
        }
        
        @keyframes infiniteRotateMobile {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(calc(-100% * 2 / 4)); /* Move by 2 containers */
          }
        }
        
        .card-overlay {
          padding: 1rem;
        }
        
        .card-overlay h4 {
          font-size: 1rem;
        }
        
        .card-overlay p {
          font-size: 0.8rem;
        }
      }
      
      @media (max-width: 480px) {
        .rotating-gallery-wrapper {
          height: 250px;
        }
        
        .gallery-header {
          margin-bottom: 1.5rem;
        }
        
        .photo-container {
          flex: 0 0 100%; /* Show 1 container on small mobile */
          padding: 0 0.25rem;
        }
        
        .rotating-track {
          animation: infiniteRotateSmall 12s linear infinite;
        }
        
        @keyframes infiniteRotateSmall {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(calc(-100% * 1 / 8)); /* Move by 1 container */
          }
        }
        
        .view-all-btn {
          padding: 0.75rem 1.25rem;
          font-size: 0.875rem;
        }
      }
      
      /* Accessibility enhancements */
      @media (prefers-reduced-motion: reduce) {
        .rotating-track {
          animation: none !important;
        }
        
        .photo-card,
        .card-overlay {
          transition: none;
        }
        
        .photo-card:hover {
          transform: none;
        }
        
        .photo-card:hover img {
          transform: none;
        }
      }
      
      /* High contrast mode */
      @media (prefers-contrast: high) {
        .photo-gallery-section {
          border: 2px solid var(--fg);
        }
        
        .photo-card {
          border: 2px solid var(--fg);
        }
      }

      /* ===== Important Links Section - 3 COLUMN HORIZONTAL LAYOUT ===== */
      .links-columns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        align-items: start;
      }
      
      .links-column {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
      }
      
      .links-column:hover {
        box-shadow: 0 4px 16px rgba(30, 58, 95, 0.12);
        transform: translateY(-2px);
      }
      
      .category-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--brand);
        margin: 0 0 1.25rem 0;
        font-family: var(--font-sans);
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--border);
      }
      
      .category-icon {
        font-size: 1.1rem;
      }
      
      .links-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      
      .link-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        text-decoration: none;
        color: var(--fg);
        font-family: var(--font-sans);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
      }
      
      .link-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--brand);
        transform: scaleX(0);
        transition: transform 0.2s ease;
      }
      
      .link-card:hover,
      .link-card:focus {
        background: var(--bg);
        border-color: var(--brand);
        box-shadow: 0 3px 8px rgba(30, 58, 95, 0.15);
        transform: translateY(-1px);
      }
      
      .link-card:hover::before,
      .link-card:focus::before {
        transform: scaleX(1);
      }
      
      .link-icon {
        font-size: 1.25rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand);
        border-radius: 6px;
        color: white;
        flex-shrink: 0;
        transition: all 0.2s ease;
      }
      
      .link-card:hover .link-icon {
        background: var(--brand-2);
        transform: scale(1.05);
      }
      
      .link-content {
        flex: 1;
        min-width: 0;
      }
      
      .link-content h4 {
        margin: 0 0 0.2rem 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--fg);
        font-family: var(--font-sans);
        line-height: 1.3;
        transition: color 0.2s ease;
      }
      
      .link-card:hover .link-content h4 {
        color: var(--brand);
      }
      
      .link-content p {
        margin: 0;
        font-size: 0.75rem;
        color: var(--muted);
        font-family: var(--font-sans);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .link-arrow {
        font-size: 0.875rem;
        color: var(--brand);
        opacity: 0;
        transform: translateX(-3px);
        transition: all 0.2s ease;
        flex-shrink: 0;
      }
      
      .link-card:hover .link-arrow,
      .link-card:focus .link-arrow {
        opacity: 1;
        transform: translateX(0);
      }
      
      /* Mobile responsive - Stack columns */
      @media (max-width: 1024px) {
        .links-columns {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }
        
        .links-column {
          padding: 1.25rem;
        }
        
        .links-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 0.75rem;
        }
      }
      
      @media (max-width: 768px) {
        .links-list {
          grid-template-columns: 1fr;
        }
        
        .link-card {
          padding: 1rem;
        }
        
        .link-content h4 {
          font-size: 0.9rem;
        }
        
        .link-content p {
          font-size: 0.8rem;
        }
      }

      /* ⚡ SUPERSONIC YOUTUBE VIDEO GALLERY STYLES ⚡ */
      .video-gallery {
        background: linear-gradient(135deg, var(--surface) 0%, #e2e8f0 100%);
        padding: 4rem 0;
        position: relative;
        overflow: hidden;
      }

      .video-gallery::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="video-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(30,58,95,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23video-grid)"/></svg>');
        opacity: 0.5;
        pointer-events: none;
      }

      .video-gallery .container {
        position: relative;
        z-index: 1;
      }

      .video-gallery header {
        text-align: center;
        margin-bottom: 3rem;
      }

      .video-gallery h2 {
        font-size: var(--step-4);
        color: var(--brand);
        margin-bottom: 1rem;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      .video-gallery h2::after {
        content: "";
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--brand));
        border-radius: 2px;
      }

      .video-gallery p {
        font-size: var(--step-0);
        color: var(--muted);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
      }

      .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
      }

      .video-card {
        background: white;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
        border: 2px solid transparent;
      }

      .video-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        border-color: var(--brand-2);
      }

      .video-card:focus {
        outline: 3px solid var(--brand-2);
        outline-offset: 2px;
        border-color: var(--brand);
      }

      .video-thumbnail {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        background: var(--surface);
      }

      .video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .video-card:hover .video-thumbnail img {
        transform: scale(1.05);
      }

      .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        background: rgba(220, 38, 38, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
      }

      .video-card:hover .play-overlay {
        background: var(--accent);
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
      }

      .video-info {
        padding: 1.5rem;
      }

      .video-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--fg);
        margin-bottom: 0.5rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .video-description {
        font-size: 0.9rem;
        color: var(--muted);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 1rem;
      }

      .video-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
      }

      .video-duration {
        background: #004488;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 500;
      }

      .video-date {
        font-size: 0.8rem;
        color: var(--muted);
      }

      /* ⚡ SUPERSONIC VIDEO MODAL ⚡ */
      .video-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      }

      .video-modal.active {
        opacity: 1;
        visibility: visible;
      }

      .video-modal-content {
        position: relative;
        width: 90%;
        max-width: 900px;
        aspect-ratio: 16/9;
        background: black;
        border-radius: var(--radius-lg);
        overflow: hidden;
        transform: scale(0.8);
        transition: transform 0.3s ease;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }

      .video-modal.active .video-modal-content {
        transform: scale(1);
      }

      .video-modal iframe {
        width: 100%;
        height: 100%;
        border: none;
      }

      .modal-close {
        position: absolute;
        top: -50px;
        right: 0;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .modal-close:hover,
      .modal-close:focus {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
      }

      /* Video error handling */
      .video-error {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        background: rgba(0, 0, 0, 0.8);
        padding: 2rem;
        border-radius: var(--radius-lg);
      }

      .video-error button {
        background: var(--accent);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        cursor: pointer;
        margin-top: 1rem;
      }

      /* Mobile responsive styles for video gallery */
      @media (max-width: 768px) {
        .video-gallery {
          padding: 3rem 0;
        }

        .video-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
          margin: 0 1rem;
        }

        .video-card {
          margin: 0;
        }

        .video-modal-content {
          width: 95%;
          margin: 0 1rem;
        }

        .modal-close {
          top: -40px;
          right: 10px;
        }

        .video-gallery h2 {
          font-size: var(--step-3);
        }
      }

      @media (max-width: 480px) {
        .video-thumbnail {
          height: 180px;
        }

        .play-overlay {
          width: 60px;
          height: 60px;
          font-size: 1.2rem;
        }

        .video-info {
          padding: 1rem;
        }
      }
        bottom: 1rem;
        right: 1rem;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 600;
      }
      
      .video-info {
        padding: 1.5rem;
      }
      
      .video-info h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--fg);
        margin: 0 0 0.5rem 0;
        font-family: var(--font-sans);
      }
      
      .video-info p {
        color: var(--muted);
        margin: 0 0 1rem 0;
        font-family: var(--font-sans);
        line-height: 1.6;
      }
      
      .video-meta {
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--muted);
      }
      
      /* Video Playlist */
      .video-playlist {
        background: var(--surface);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      }
      
      .playlist-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand);
        margin: 0 0 1.5rem 0;
        font-family: var(--font-sans);
      }
      
      .playlist-icon {
        font-size: 1.5rem;
      }
      
      .playlist-videos {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .video-item {
        display: flex;
        gap: 1rem;
        padding: 0.75rem;
        border-radius: 8px;
        transition: all 0.2s ease;
        cursor: pointer;
      }
      
      .video-item:hover {
        background: var(--bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      .video-thumb {
        position: relative;
        width: 120px;
        aspect-ratio: 16/9;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
      }
      
      .video-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .play-mini {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
      }
      
      .duration {
        position: absolute;
        bottom: 4px;
        right: 4px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 2px 4px;
        border-radius: 2px;
        font-size: 0.7rem;
      }
      
      .video-details {
        flex: 1;
        min-width: 0;
      }
      
      .video-details h4 {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--fg);
        margin: 0 0 0.25rem 0;
        font-family: var(--font-sans);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .video-details p {
        font-size: 0.8rem;
        color: var(--muted);
        margin: 0 0 0.25rem 0;
        font-family: var(--font-sans);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .video-details .video-date {
        font-size: 0.75rem;
        color: var(--muted);
      }
      
      .playlist-footer {
        margin-top: 1.5rem;
        text-align: center;
      }
      
      .view-all-videos-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 6px;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
      }
      
      .view-all-videos-btn:hover {
        background: #b71c1c;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
      }
      
      /* Mobile responsive */
      @media (max-width: 768px) {
        .video-gallery-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }
        
        .video-item {
          flex-direction: column;
          text-align: center;
        }
        
        .video-thumb {
          width: 100%;
          max-width: 200px;
          margin: 0 auto;
        }
      }
      
      /* ⚡ SUPERSONIC MODERN DARK FOOTER ⚡ */
      .modern-footer {
        background: #000000;
        color: #ffffff;
        margin-top: 4rem;
        font-family: var(--font-sans);
      }
      
      .footer-main {
        padding: 3rem 0 2rem;
        border-bottom: 2px solid #002244; /* Thicker, darker border matching theme */
      }
      
      .footer-columns {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .footer-column {
        display: flex;
        flex-direction: column;
      }
      
      .footer-heading {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 1.5rem 0;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.2;
      }
      
      .footer-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      
      .footer-list li {
        margin: 0;
      }
      
      .footer-list a {
        color: #cccccc;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.4;
        transition: color 0.2s ease;
        display: block;
        padding: 0.25rem 0;
      }
      
      .footer-list a:hover,
      .footer-list a:focus {
        color: #ffffff;
        outline: none;
      }
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--brand-2), #ffd700);
      }
      
      /* Footer Bottom Section */
      .footer-bottom {
        padding: 2rem 0;
        border-bottom: 2px solid #002244; /* Matching darker theme */
      }
      
      .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      /* Newsletter Section */
      .newsletter-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      
      .newsletter-label {
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 500;
        margin: 0;
      }
      
      .newsletter-form {
        display: flex;
        align-items: center;
        background: #001122;
        border: 1px solid #002244;
        border-radius: 4px;
        overflow: hidden;
        transition: border-color 0.2s ease;
      }
      
      .newsletter-form:focus-within {
        border-color: #666666;
      }
      
      .newsletter-input {
        background: transparent;
        border: none;
        color: #ffffff;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        width: 250px;
        outline: none;
      }
      
      .newsletter-input::placeholder {
        color: #888888;
      }
      
      .newsletter-button {
        background: transparent;
        border: none;
        color: #ffffff;
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.2s ease;
      }
      
      .newsletter-button:hover,
      .newsletter-button:focus {
        background: #004488;
        outline: none;
      }
      
      /* Region Section */
      .region-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      
      .region-label {
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 500;
        margin: 0;
      }
      
      .region-selector {
        position: relative;
        display: inline-block;
      }
      
      .region-select {
        background: #001122;
        border: 1px solid #002244;
        border-radius: 4px;
        color: #ffffff;
        padding: 0.75rem 2rem 0.75rem 1rem;
        font-size: 0.875rem;
        appearance: none;
        cursor: pointer;
        min-width: 150px;
        outline: none;
        transition: border-color 0.2s ease;
      }
      
      .region-select:focus {
        border-color: #666666;
      }
      
      .select-arrow {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #888888;
        pointer-events: none;
        font-size: 0.75rem;
      }
      
      /* Social Media Section */
      .social-section {
        display: flex;
        justify-content: flex-end;
      }
      
      .social-links {
        display: flex;
        gap: 1rem;
        align-items: center;
      }
      
      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid #002244;
        border-radius: 4px;
        color: #cccccc;
        text-decoration: none;
        transition: all 0.2s ease;
      }
      
      .social-link:hover,
      .social-link:focus {
        background: #003366;
        border-color: #0066cc;
        color: #ffffff;
        outline: none;
        transform: translateY(-1px);
      }
      
      .social-link svg {
        width: 18px;
        height: 18px;
      }
      
      /* Copyright Section */
      .footer-copyright {
        padding: 1.5rem 0;
        background: #0a0a0a;
      }
      
      .copyright-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        gap: 2rem;
      }
      
      .copyright-content p {
        color: #888888;
        font-size: 0.75rem;
        margin: 0;
        line-height: 1.4;
      }
      
      .footer-policies {
        display: flex;
        gap: 1.5rem;
        align-items: center;
      }
      
      .footer-policies a {
        color: #888888;
        text-decoration: none;
        font-size: 0.75rem;
        transition: color 0.2s ease;
      }
      
      .footer-policies a:hover,
      .footer-policies a:focus {
        color: #ffffff;
        outline: none;
      }
      

      

      

      
      /* ⚡ SUPERSONIC FOOTER BOTTOM ⚡ */
      .footer-bottom {
        background: linear-gradient(135deg, 
          rgba(0, 0, 0, 0.4) 0%, 
          rgba(15, 23, 42, 0.6) 50%, 
          rgba(0, 0, 0, 0.4) 100%);
        padding: 1.5rem 0;
        border-top: 2px solid rgba(255, 255, 255, 0.15);
        position: relative;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      
      .footer-bottom::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
          transparent 0%, 
          rgba(255, 255, 255, 0.3) 20%, 
          rgba(255, 255, 255, 0.6) 50%, 
          rgba(255, 255, 255, 0.3) 80%, 
          transparent 100%);
      }
      
      .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
      }
<<<<<<< HEAD
=======
    display: flex;
    align-items: center;
    gap: 0.5rem;
>>>>>>> 524119758914b91205c1cfffb2786914a5eab9fd
      
      .footer-policies {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
<<<<<<< HEAD
=======

/* Dropdown Styles */
.dropdown {
    position: relative;
}

.dropdown-toggle i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 250px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: #f8f9fa;
    border-left-color: #667eea;
    color: #667eea;
}

.nav-item.active .nav-link {
    background: rgba(255,255,255,0.2);
}
>>>>>>> 524119758914b91205c1cfffb2786914a5eab9fd
      }
      
      .footer-policies a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 0.95rem;
        font-family: var(--font-sans);
        font-weight: 500;
        transition: all 0.3s ease;
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;
      }
      
      .footer-policies a::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
      }
      
      .footer-policies a:hover::before {
        left: 100%;
      }
      
      .footer-policies a:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      
      .footer-meta {
        text-align: right;
      }
      
      .footer-meta p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        margin: 0.25rem 0;
        font-family: var(--font-sans);
        font-weight: 500;
      }
      
      .footer-meta time {
        color: #ffffff;
        font-weight: 600;
      }
      
      /* ⚡ SUPERSONIC GOVERNMENT LOGOS STRIP ⚡ */
      .footer-logos {
        background: linear-gradient(135deg, 
          rgba(0, 0, 0, 0.3) 0%, 
          rgba(15, 23, 42, 0.5) 50%, 
          rgba(0, 0, 0, 0.3) 100%);
        padding: 1.5rem 0;
        border-top: 2px solid rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
      }
      
      .footer-logos::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footer-pattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23footer-pattern)"/></svg>');
        opacity: 0.3;
        pointer-events: none;
      }
<<<<<<< HEAD
=======

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        margin-top: 0.5rem;
    }

    .dropdown-menu a {
        color: white;
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .dropdown-menu a:hover {
        background: rgba(255,255,255,0.2);
        color: white;
    }
>>>>>>> 524119758914b91205c1cfffb2786914a5eab9fd
      
      .logos-strip {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
      }
      
      .footer-logo {
        height: 50px;
        width: auto;
        filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        opacity: 0.8;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0.5rem;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      .footer-logo:hover {
        opacity: 1;
        transform: scale(1.1) translateY(-3px);
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }
      
      /* Mobile Responsive Styles */
      @media (max-width: 1024px) {
        .footer-columns {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
        }
        
        .footer-bottom-content {
          flex-direction: column;
          align-items: flex-start;
          gap: 2rem;
        }
        
        .social-section {
          justify-content: flex-start;
        }
        
        .newsletter-input {
          width: 200px;
        }
      }
      
      @media (max-width: 768px) {
        .modern-footer {
          margin-top: 2rem;
        }
        
        .footer-main {
          padding: 2rem 0 1.5rem;
        }
        
        .footer-columns {
          grid-template-columns: 1fr;
          gap: 2rem;
          padding: 0 1rem;
        }
        
        .footer-bottom {
          padding: 1.5rem 0;
        }
        
        .footer-bottom-content {
          padding: 0 1rem;
          flex-direction: column;
          align-items: stretch;
          gap: 1.5rem;
        }
        
        .newsletter-section,
        .region-section {
          align-items: stretch;
        }
        
        .newsletter-input {
          width: 100%;
        }
        
        .region-select {
          width: 100%;
        }
        
        .social-section {
          justify-content: center;
        }
        
        .social-links {
          justify-content: center;
          flex-wrap: wrap;
        }
        
        .footer-copyright {
          padding: 1rem 0;
        }
        
        .copyright-content {
          flex-direction: column;
          text-align: center;
          gap: 1rem;
          padding: 0 1rem;
        }
        
        .footer-policies {
          justify-content: center;
          flex-wrap: wrap;
          gap: 1rem;
        }
      }
      
      @media (max-width: 480px) {
        .footer-main {
          padding: 1.5rem 0 1rem;
        }
        
        .footer-columns {
          gap: 1.5rem;
          padding: 0 0.5rem;
        }
        
        .footer-heading {
          font-size: 0.9rem;
          margin-bottom: 1rem;
        }
        
        .footer-list {
          gap: 0.5rem;
        }
        
        .footer-list a {
          font-size: 0.8rem;
          padding: 0.2rem 0;
        }
        
        .footer-bottom {
          padding: 1rem 0;
        }
        
        .footer-bottom-content {
          padding: 0 0.5rem;
          gap: 1rem;
        }
        
        .newsletter-label,
        .region-label {
          font-size: 0.8rem;
        }
        
        .newsletter-input,
        .region-select {
          font-size: 0.8rem;
          padding: 0.6rem 0.8rem;
        }
        
        .social-links {
          gap: 0.75rem;
        }
        
        .social-link {
          width: 36px;
          height: 36px;
        }
        
        .social-link svg {
          width: 16px;
          height: 16px;
        }
        
        .footer-copyright {
          padding: 0.75rem 0;
        }
        
        .copyright-content {
          padding: 0 0.5rem;
        }
        
        .copyright-content p,
        .footer-policies a {
          font-size: 0.7rem;
        }
        
        .footer-policies {
          gap: 0.75rem;
        }
      }

      /* ⚡ MODERN FOOTER ANIMATIONS ⚡ */
      .footer-column {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
      }
      
      .footer-column:nth-child(1) { animation-delay: 0.1s; }
      .footer-column:nth-child(2) { animation-delay: 0.2s; }
      .footer-column:nth-child(3) { animation-delay: 0.3s; }
      .footer-column:nth-child(4) { animation-delay: 0.4s; }
      
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ===== Focus states ===== */
      :where(a, button, summary, input, select, textarea):focus-visible {
        outline: 3px solid var(--brand-2); /* Thicker outline for better visibility */
        outline-offset: 2px;
        border-radius: var(--radius);
      }
      
      /* ===== Cross-browser compatibility fixes ===== */
      /* Safari-specific fixes */
      @supports (-webkit-appearance: none) {
        .service {
          -webkit-transform: translateZ(0); /* Hardware acceleration */
        }
        
        .nav-menu {
          -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }
      }
      
      /* Firefox-specific fixes */
      @-moz-document url-prefix() {
        .service {
          background-clip: padding-box; /* Fix background bleeding */
        }
      }
      
      /* Edge/IE compatibility */
      @supports (-ms-ime-align: auto) {
        .section-featured .grid {
          display: -ms-grid; /* Fallback for older Edge */
        }
      }
      
      /* ===== Print styles ===== */
      @media print {
        .mopr-nav,
        .utility,
        .mobile-menu-toggle,
        .nav-arrow,
        .play-pause-btn,
        .slide-indicators {
          display: none !important;
        }
        
        .section-featured {
          background: white !important;
          color: black !important;
          -webkit-print-color-adjust: exact;
          color-adjust: exact;
        }
        
        .service {
          border: 2px solid #000 !important;
          background: white !important;
          break-inside: avoid;
        }
        
        .mopr-main-content {
          box-shadow: none !important;
          border: 1px solid #000 !important;
        }
      }
      
      /* ===== Performance optimizations ===== */
      .service,
      .nav-link,
      .thumb {
        will-change: transform; /* Optimize for animations */
      }
      
      .mann-ki-baat-slideshow {
        contain: layout style paint; /* CSS containment for better performance */
      }
      
      /* ===== Reduced motion preferences ===== */
      /* ⚡ SUPERSONIC SCROLL ANIMATIONS ⚡ */
      .video-card {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.6s ease forwards;
      }

      .video-card:nth-child(1) { animation-delay: 0.1s; }
      .video-card:nth-child(2) { animation-delay: 0.2s; }
      .video-card:nth-child(3) { animation-delay: 0.3s; }
      .video-card:nth-child(4) { animation-delay: 0.4s; }
      .video-card:nth-child(5) { animation-delay: 0.5s; }
      .video-card:nth-child(6) { animation-delay: 0.6s; }

      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Smooth scroll behavior */
      html {
        scroll-behavior: smooth;
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        
        .video-card,
        .footer-column {
          opacity: 1;
          transform: none;
          animation: none;
        }

        html {
          scroll-behavior: auto;
        }
        
        .service:hover {
          transform: none !important;
        }
        
        .nav-arrow:hover {
          transform: translateY(-50%) !important;
        }
      }