/* ==========================================================================
           1. Theme Variables & Design System
           ========================================================================== */
  :root {
      /* Warm Parchment & Cream Palette */
      --bg-base: #f4f1ea;
      --bg-card: #faf8f3;
      --bg-card-alt: #f1ede4;
      --bg-accent-light: #e8f0ec;

      /* Borders & Divider Colors */
      --border-color: #e2dad0;
      --border-dark: #d5c8b8;

      /* Slate & Dark Shades */
      --slate-600: #475569;
      --slate-700: #334155;
      --slate-800: #1e293b;
      --slate-900: #0f172a;
      --slate-950: #020617;

      /* Emerald Tones */
      --emerald-50: #ecfdf5;
      --emerald-700: #047857;
      --emerald-800: #065f46;
      --emerald-900: #022c22;

      /* Gold & Amber Tones */
      --amber-100: #fef3c7;
      --amber-400: #fbbf24;
      --amber-500: #f59e0b;
      --amber-600: #d97706;
      --amber-700: #b45309;

      /* Fonts */
      --font-ui: 'Tajawal', system-ui, -apple-system, sans-serif;
      --font-quran: 'Markazi Text', 'Amiri', serif;

      /* Elevated Shadows */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 12px -2px rgba(40, 30, 20, 0.08);
      --shadow-lg: 0 12px 24px -4px rgba(40, 30, 20, 0.12);
  }

  /*
  CSS Reset
*/

  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  *:not(dialog) {
      margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
      html {
          interpolate-size: allow-keywords;
      }
  }

  body {
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
      display: block;
      max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
      font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      overflow-wrap: break-word;
  }

  p {
      text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      text-wrap: balance;
  }

  #root,
  #__next {
      isolation: isolate;
  }

  /* ==========================================================================
             1.2 Global Typography & Layout
             ========================================================================== */
  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: var(--font-ui);
      background-color: var(--bg-base);
      color: var(--slate-800);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
  }


  /* Layout Container */
  .container {
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 1.5rem;
  }

  /* Utility Section Classes */
  .section {
      padding: 3.5rem 0;
  }

  .section-accent {
      background-color: var(--bg-accent-light);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
  }

  .section-alt {
      background-color: var(--bg-card-alt);
      border-top: 1px solid var(--border-color);
  }

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

  .section-title {
      font-family: var(--font-quran);
      font-size: 2.5rem;
      color: var(--emerald-900);
      margin-bottom: 0.5rem;
      font-weight: 700;
  }

  .section-subtitle {
      color: var(--slate-600);
      font-size: 1.05rem;
  }

  /* Global Media Elements */
  img {
      height: auto;
      display: block;
      border-radius: 0.5rem;
      border: 1px solid var(--border-color);
      background-color: var(--bg-card-alt);
      object-fit: cover;
  }

  embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 0.5rem 0.5rem 0 0;
      border: none;
      background-color: var(--slate-900);
      display: block;
  }

  /* ==========================================================================
           2. Header & Navigation
           ========================================================================== */
  .navbar {
      background-color: rgba(2, 44, 34, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 2px solid var(--amber-600);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow-md);
  }

  .nav-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 72px;
  }

  .brand-title {
      display: flex;
      align-items: center;
  }

  .brand-title img {
      background: transparent;
      width: 95px;
      border: none;
      transition: transform 0.2s ease;
      filter: invert(84%) sepia(14%) saturate(147%) hue-rotate(3deg) brightness(98%) contrast(95%);
  }

  .nav-menu {
      display: flex;
      gap: 1.75rem;
      list-style: none;
  }

  .nav-menu a {
      text-decoration: none;
      color: #f1f5f9;
      font-weight: 500;
      font-size: 0.95rem;
      position: relative;
      padding: 0.25rem 0;
      transition: color 0.2s ease;
  }

  .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      right: 0;
      width: 0%;
      height: 2px;
      background-color: var(--amber-500);
      transition: width 0.25s ease;
  }

  .nav-menu a:hover {
      color: var(--amber-500);
  }

  .nav-menu a:hover::after {
      width: 100%;
  }

  /* Toggle Checkbox (Hidden) */
  .nav-toggle-input {
      display: none;
  }

  /* Hamburger Icon (Hidden on Desktop) */
  .nav-toggle-label {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 28px;
      height: 20px;
      cursor: pointer;
      z-index: 102;
      padding: 2px 0;
  }

  .nav-toggle-label span {
      display: block;
      height: 3px;
      width: 100%;
      background-color: var(--amber-400);
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
  }

  /* Hero / Intro Header */
  .hero-section {
      background-color: #134634;
      border-bottom: 1px solid var(--border-color);
      text-align: center;
      padding: 3.5rem 0;
  }

  .hero-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 800px;
      margin: 0 auto;
      gap: 1rem;
  }

  .hero-logo {
      width: 380px;
      border: none;
      background: transparent;
      margin: 0 auto;
      max-width: 100%;
      filter: invert(84%) sepia(14%) saturate(147%) hue-rotate(3deg) brightness(98%) contrast(95%);
  }

  .hero-subtitle {
      font-family: var(--font-quran);
      font-size: 2rem;
      color: #e2e8f0;
      opacity: 0.92;
      line-height: 1.25;
  }

  /* ==========================================================================
           3. Horizontal Timeline (LTR Section)
           ========================================================================== */
  #timeline {
      background-color: #ffffff;
  }

  .timeline-section {
      direction: ltr;
      padding: 3.5rem 1.5rem;
      width: 100%;
      overflow-x: auto;
      box-shadow: var(--shadow-sm);
  }

  .timeline-container {
      max-width: 1000px;
      min-width: 720px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 1rem;
      font-family: var(--font-ui);
  }

  .timeline-badge {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--emerald-800);
      background-color: var(--emerald-50);
      border: 1px solid #a7f3d0;
      padding: 0.35rem 0.9rem;
      border-radius: 9999px;
      letter-spacing: 0.02em;
      user-select: none;
      white-space: nowrap;
  }

  .timeline-track {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
  }

  .timeline-line {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #cbd5e1;
      transform: translateY(-50%);
      z-index: 1;
  }

  .timeline-items {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-around;
      width: 100%;
  }

  .timeline-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 0.5rem;
      cursor: pointer;
  }

  .item-node {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 2px solid var(--emerald-800);
      margin: 0.75rem 0;
      transition: all 0.25s ease;
  }

  .timeline-item:hover .item-node {
      background-color: var(--emerald-800);
      box-shadow: 0 0 0 4px #d1fae5;
      transform: scale(1.25);
  }

  .item-slot {
      font-size: 0.875rem;
      white-space: nowrap;
      text-align: center;
      transition: color 0.2s ease;
  }

  .item-slot.year {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--slate-900);
  }

  .item-slot.label {
      font-weight: 500;
      color: var(--slate-600);
  }

  .timeline-item:hover .item-slot.label {
      color: var(--emerald-800);
      font-weight: 600;
  }

  /* ==========================================================================
           4. Feature Cards
           ========================================================================== */
  .features-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1.75rem;
  }

  .feature-card {
      background: var(--bg-card);
      flex: 1 1 300px;
      /* Responsive minimum width before wrapping */
      display: flex;
      flex-direction: column;
      /* Enables vertical stacking inside cards */
      border: 1px solid var(--border-color);
      border-top: 4px solid var(--emerald-800);
      border-radius: 0.75rem;
      padding: 1.75rem;
      box-shadow: var(--shadow-sm);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .feature-card:hover {
      /* transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-top-color: #f59e0b; */
      /* Top border accent turns gold on hover */
  }

  .feature-card-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--emerald-900);
      margin-bottom: 0.65rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .feature-card-desc {
      font-size: 0.925rem;
      color: var(--slate-700);
      line-height: 1.6;
      flex-grow: 1;
      /* Pushes the button cleanly to the bottom of the card */
  }

  .feature-video-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      margin-top: 1.5rem;
      /* Smooth separation from description */
      padding: 0.7rem 1.25rem;
      border-radius: 0.5rem;
      align-self: flex-start;
      /* Keeps crisp size on desktop */

      /* Deep Magenta Fill (Centered around #9e005d) */
      background: linear-gradient(135deg, #ba006e, #9e005d);
      border: 1px solid #750045;

      /* Crisp white text for contrast on rich magenta */
      color: #ffffff;
      font-size: 0.9rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(158, 0, 93, 0.3);
      transition: all 0.25s ease;
  }

  .feature-video-btn svg {
      fill: #ffffff;
      transition: transform 0.25s ease;
  }

  .feature-video-btn:hover {
      /* Lighter, vibrant magenta glow on hover */
      background: linear-gradient(135deg, #d81b60, #ba006e);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(158, 0, 93, 0.45);
  }

  .feature-video-btn:hover svg {
      fill: #ffffff;
      transform: scale(1.15);
  }

  /* ==========================================================================
           5. Script Comparisons & Showcase
           ========================================================================== */
  .comparison-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 0.85rem;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-md);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      img {
          width: 100%;
      }
  }

  .comparison-card img {
      flex: 1 1 40%;
  }

  .comparison-card img.full-width {
      flex-basis: 100%;
  }

  .pages-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
  }

  .page-card {
      background: var(--bg-card);
      flex: 1 1 30%;
      border: 1px solid var(--border-color);
      border-radius: 0.75rem;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .page-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
  }

  .page-card img {
      border: none;
      border-radius: 0;
  }

  /* ==========================================================================
           6. Quranic Posters Layout
           ========================================================================== */
  .posters-section {
      background-color: var(--bg-card-alt);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      padding: 3.5rem 0;
  }

  .posters-layout {
      display: flex;
      gap: 1.75rem;
      align-items: stretch;
  }

  .posters-col-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.25rem;
  }

  .posters-col-left {
      flex: 1.35;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.25rem;
  }

  .stacked-images {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
  }

  .poster-item {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 0.85rem;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .poster-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
  }

  .poster-square img {
      aspect-ratio: 1 / 1;
      margin: 0 auto;
  }

  .poster-tall {
      margin: auto 0;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
  }

  .poster-tall img {
      transform: scale(1.1);
      transition: transform 0.3s ease;
  }

  .poster-btn {
      display: inline-flex;
      align-content: center;
      justify-content: center;
      padding: 0.85rem 1.5rem;
      background: linear-gradient(135deg, var(--emerald-800) 0%, var(--emerald-900) 100%);
      color: var(--emerald-50);
      border-radius: 0.5rem;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;

      &.yellow {
          background: linear-gradient(135deg, var(--amber-500, #f59e0b), var(--amber-600, #d97706));
          color: #0f172a;
          box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
      }

      svg {
          transition: transform 0.3s ease;
      }

  }

  .poster-btn:hover {
      background: linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-800) 100%);
      box-shadow: var(--shadow-md);

      &.yellow:hover {
          box-shadow: 0 12px 28px rgba(245, 158, 11, 0.38);
          background: linear-gradient(135deg, var(--amber-400, #fbbf24), var(--amber-500, #f59e0b));
      }

      svg {
          transform: translateX(-4px);
      }
  }

  /* ==========================================================================
           7. Video Showcase Grid
           ========================================================================== */
  .media-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
  }

  .media-card {
      background: var(--bg-card);
      flex: 1 1 30%;
      border: 1px solid var(--border-color);
      border-radius: 0.85rem;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .media-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
  }

  .media-card-info {
      padding: 1.15rem;
      text-align: center;
  }

  .media-card-title {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--slate-800);
      margin-bottom: 0.25rem;
  }

  .media-card-sub {
      font-size: 0.875rem;
      color: var(--slate-600);
  }

  /* ==========================================================================
           8. Unified Project Vision, Roadmap & Licensing Section
           ========================================================================== */
  .project-unified-section {
      background-color: var(--bg-accent-light);
      border-top: 1px solid var(--border-color);
      padding: 4.5rem 0;
  }

  .project-unified-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 2rem;
      align-items: stretch;
  }

  .project-info-card,
  .project-contact-card {
      background-color: var(--bg-card, #ffffff);
      border: 1px solid var(--border-color, #e2e8f0);
      border-radius: 1rem;
      padding: 2.25rem;
      box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.04));
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .card-header-badge {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
  }

  .project-badge {
      background-color: var(--amber-100, #fef3c7);
      color: var(--amber-700, #b45309);
      font-size: 0.8rem;
      font-weight: 700;
      padding: 0.3rem 0.85rem;
      border-radius: 9999px;
  }

  .version-badge {
      font-size: 0.75rem;
      background-color: var(--emerald-50, #ecfdf5);
      color: var(--emerald-800, #065f46);
      border: 1px solid var(--border-color, #e2e8f0);
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-weight: 700;
  }

  .project-main-title {
      font-family: var(--font-quran, inherit);
      font-size: 2.25rem;
      font-weight: 800;
      color: var(--emerald-900, #064e3b);
      line-height: 1.3;
      margin-bottom: 0.85rem;
      position: relative;
      display: inline-block;
  }

  .project-lead-text {
      font-size: 0.98rem;
      color: var(--slate-700, #334155);
      line-height: 1.8;
      margin-bottom: 2rem;
  }

  .subsection-title {
      font-family: var(--font-quran, inherit);
      font-size: 1.4rem;
      color: var(--emerald-900, #064e3b);
      margin-bottom: 1rem;
      padding-bottom: 0.35rem;
      border-bottom: 2px solid var(--border-color, #e2e8f0);
  }

  /* --- Roadmap Grid --- */

  .milestones-container {
      margin-bottom: 1.75rem;
  }

  .roadmap-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.15rem;

      @media (max-width: 640px) {
          grid-template-columns: 1fr;
      }
  }

  /* Base Roadmap Card */
  .roadmap-card {
      position: relative;
      background-color: var(--bg-card-alt, #f8fafc);
      border: 1px solid var(--border-color, #e2e8f0);
      border-radius: 0.85rem;
      padding: 1.35rem 1.25rem;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;

      p {
          font-size: 0.885rem;
          color: var(--slate-700, #334155);
          line-height: 1.7;
          margin: 0;
          font-weight: 500;
      }

      &:hover {
          transform: translateY(-3px);
      }

      /* ------------------------------------------------------------------------
     4 High-Contrast Palette Colors (Tailwind Standards)
     ------------------------------------------------------------------------ */

      /* Card 1: Emerald Green */
      &:nth-child(1) {
          border-right: 4px solid #059669;
          /* Tailwind emerald-600 */
          background: linear-gradient(135deg, rgba(5, 150, 105, 0.05) 0%, rgba(248, 250, 252, 1) 100%);

          &:hover {
              border-right-color: #047857;
              background: linear-gradient(135deg, rgba(5, 150, 105, 0.09) 0%, #ffffff 100%);
              box-shadow: 0 12px 24px -6px rgba(5, 150, 105, 0.15);
          }
      }

      /* Card 2: Amber / Warm Gold */
      &:nth-child(2) {
          border-right: 4px solid #d97706;
          /* Tailwind amber-600 */
          background: linear-gradient(135deg, rgba(217, 119, 6, 0.05) 0%, rgba(248, 250, 252, 1) 100%);

          &:hover {
              border-right-color: #b45309;
              background: linear-gradient(135deg, rgba(217, 119, 6, 0.09) 0%, #ffffff 100%);
              box-shadow: 0 12px 24px -6px rgba(217, 119, 6, 0.15);
          }
      }

      /* Card 3: Sky Blue (Completely replaced Teal) */
      &:nth-child(3) {
          border-right: 4px solid #0284c7;
          /* Tailwind sky-600 */
          background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(248, 250, 252, 1) 100%);

          &:hover {
              border-right-color: #0369a1;
              background: linear-gradient(135deg, rgba(2, 132, 199, 0.09) 0%, #ffffff 100%);
              box-shadow: 0 12px 24px -6px rgba(2, 132, 199, 0.15);
          }
      }

      /* Card 4: Violet / Vibrant Purple */
      &:nth-child(4) {
          border-right: 4px solid #7c3aed;
          /* Tailwind violet-600 */
          background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(248, 250, 252, 1) 100%);

          &:hover {
              border-right-color: #6d28d9;
              background: linear-gradient(135deg, rgba(124, 58, 237, 0.09) 0%, #ffffff 100%);
              box-shadow: 0 12px 24px -6px rgba(124, 58, 237, 0.15);
          }
      }
  }

  /* --- Call to Action Banner --- */

  .mushaf-cta-box {
      background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
      color: #ffffff;
      border-radius: 0.85rem;
      padding: 1.4rem 1.6rem;
      border-right: 5px solid #f59e0b;
      box-shadow: 0 10px 30px rgba(2, 44, 34, 0.18);
      position: relative;
      overflow: hidden;

      &::after {
          content: "";
          position: absolute;
          top: -50px;
          left: -50px;
          width: 120px;
          height: 120px;
          background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
          pointer-events: none;
      }

      p {
          font-size: 0.925rem;
          color: #f8fafc;
          line-height: 1.65;
          margin: 0;
          font-weight: 500;
      }
  }


  .card-box-title {
      font-family: var(--font-quran);
      font-size: 1.85rem;
      color: var(--emerald-900);
      margin-bottom: 0.25rem;
  }

  .card-box-sub {
      font-size: 0.85rem;
      color: var(--slate-600);
      margin-bottom: 1.25rem;
  }

  .quick-contact-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border-color);
  }

  .contact-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background-color: var(--bg-card-alt);
      border: 1px solid var(--border-color);
      padding: 0.45rem 0.85rem;
      border-radius: 0.5rem;
      font-size: 0.825rem;
      color: var(--slate-800);
      text-decoration: none;
      font-weight: 600;
      transition: all 0.2s ease;
  }

  .contact-pill svg {
      color: var(--emerald-800);
  }

  .contact-pill:hover {
      background-color: #ffffff;
      border-color: var(--amber-500);
      box-shadow: var(--shadow-sm);
  }

  .unified-form {
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
  }

  .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
  }

  .form-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--slate-700);
  }

  .form-control {
      width: 100%;
      padding: 0.75rem 0.9rem;
      background-color: var(--bg-card-alt);
      border: 1px solid var(--border-color);
      border-radius: 0.5rem;
      font-family: var(--font-ui);
      font-size: 0.875rem;
      color: var(--slate-900);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-control:focus {
      outline: none;
      border-color: var(--emerald-700);
      background-color: #ffffff;
      box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
  }

  .textarea-control {
      resize: vertical;
      min-height: 95px;
  }

  .btn-submit {
      width: 100%;
      padding: 0.85rem 1.5rem;
      background: linear-gradient(135deg, var(--emerald-800) 0%, var(--emerald-900) 100%);
      color: var(--emerald-50);
      border: none;
      border-radius: 0.5rem;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s ease;
      margin-top: 0.25rem;
      box-shadow: var(--shadow-sm);
  }

  .btn-submit:hover {
      background: linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-800) 100%);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
  }


  /* ==========================================================================
           9. Footer
           ========================================================================== */
  .footer {
      background: linear-gradient(180deg, var(--slate-950, #020617) 0%, #010e0b 100%);
      color: #f8fafc;
      padding: 4rem 0 2rem 0;
      border-top: 3px solid var(--amber-600, #d97706);
      position: relative;
      overflow: hidden;

      /* Ambient Gold Top Glow */
      &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 1px;
          background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, transparent 100%);
      }
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
      gap: 2.5rem;
      margin-bottom: 3.5rem;

      @media (max-width: 1024px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
      }

      @media (max-width: 640px) {
          grid-template-columns: 1fr;
          gap: 2rem;
      }
  }

  /* --- Brand Column --- */

  .footer-logo-link {
      display: inline-block;
      margin-bottom: 1rem;
      transition: transform 0.3s ease;

      &:hover {
          transform: translateY(-2px);
      }
  }

  .footer-logo {
      background: transparent;
      filter: invert(84%) sepia(14%) saturate(147%) hue-rotate(3deg) brightness(98%) contrast(95%);
      height: 52px;
      width: auto;
      border: none;
      object-fit: contain;
  }

  .brand-desc {
      font-size: 0.885rem;
      color: #94a3b8;
      line-height: 1.75;
      margin: 0;
  }

  /* --- Section Titles --- */

  .footer-title {
      font-family: var(--font-quran, inherit);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--amber-400, #fbbf24);
      margin-bottom: 1.25rem;
      position: relative;
      display: inline-block;

      &::after {
          content: '';
          position: absolute;
          bottom: -6px;
          right: 0;
          width: 28px;
          height: 2px;
          background-color: var(--amber-500, #f59e0b);
          border-radius: 2px;
      }
  }

  /* --- Calligrapher Card --- */

  .designer-card {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      background-color: rgba(255, 255, 255, 0.03);
      padding: 1rem 1.15rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-right: 3px solid var(--amber-500, #f59e0b);
      transition: all 0.3s ease;

      &:hover {
          border-color: rgba(245, 158, 11, 0.3);
          border-right-color: var(--amber-400, #fbbf24);
          background-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
  }

  .designer-icon {
      color: var(--amber-400, #fbbf24);
      background: rgba(245, 158, 11, 0.12);
      padding: 0.55rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .designer-name {
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 0.25rem;
  }

  .designer-role {
      font-size: 0.78rem;
      color: #94a3b8;
      line-height: 1.5;
      margin: 0;
  }

  /* --- Footer Links Base --- */

  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
  }

  /* Contact Links (With SVGs) */
  .contact-links a {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 0.885rem;
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      transition: all 0.25s ease;

      .link-icon {
          width: 18px;
          height: 18px;
          color: var(--amber-500, #f59e0b);
          flex-shrink: 0;
          transition: transform 0.25s ease;
      }

      &:hover {
          color: var(--amber-400, #fbbf24);
          transform: translateX(-4px);

          .link-icon {
              transform: scale(1.15);
          }
      }
  }

  /* Site Links (Pure Text without Icons - Modern Hover Accent) */
  .site-links a {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 0.885rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      position: relative;
      padding-right: 0;
      transition: all 0.25s ease;

      /* Subtle indicator dash that appears on hover */
      &::before {
          content: '';
          width: 0;
          height: 2px;
          background-color: var(--amber-400, #fbbf24);
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 2px;
          opacity: 0;
          transition: all 0.25s ease;
      }

      &:hover {
          color: var(--amber-300, #fde047);
          padding-right: 0.85rem;

          &::before {
              width: 6px;
              opacity: 1;
          }
      }
  }

  /* --- Copyright Section --- */

  .copyright {
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 1.75rem;
      font-size: 0.85rem;
      color: #94a3b8;

      p {
          margin: 0;
      }
  }

  /* ==========================================================================
   10. Comprehensive Responsive Breakpoints
   ========================================================================== */

  /* --- Desktop & Large Tablets (Max-width: 1024px) --- */
  @media (max-width: 1024px) {
      .container {
          padding: 0 1.25rem;
      }

      /* Stack unified project section into a single balanced column */
      .project-unified-grid {
          grid-template-columns: 1fr;
          gap: 1.75rem;
      }

      .section-title {
          font-size: 2.15rem;
      }

      .project-main-title {
          font-size: 1.95rem;
      }
  }

  /* --- Tablets & Small Laptops (Max-width: 768px) --- */
  @media (max-width: 768px) {

      html,
      body {
          overflow-x: hidden;
          width: 100%;
          position: relative;
      }

      .section,
      .hero-section {
          padding: 2rem 0;
      }

      /* Navbar height stabilization */
      .nav-wrapper {
          height: 64px;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
      }

      /* Display Animated Hamburger Icon */
      .nav-toggle-label {
          display: flex;
      }

      /* Transform Hamburger to 'X' Close Button when open */
      .nav-toggle-input:checked~.nav-toggle-label span:nth-child(1) {
          transform: translateY(7px) rotate(45deg);
      }

      .nav-toggle-input:checked~.nav-toggle-label span:nth-child(2) {
          opacity: 0;
      }

      .nav-toggle-input:checked~.nav-toggle-label span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg);
      }

      /* Sliding Glass Drawer */
      .nav-menu-wrapper {
          position: fixed;
          top: 0;
          right: 0;
          /* Align right for RTL */
          width: 280px;
          height: 100vh;
          background-color: rgba(2, 44, 34, 0.98);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-left: 2px solid var(--amber-600);
          padding: 5.5rem 1.25rem 2rem 1.25rem;
          /* 1. Start hidden and translated */
          transform: translateX(100%);
          /* Off-screen right */
          transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          /* box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4); */
          z-index: 101;
      }

      /* Reveal Drawer when checkbox is toggled */
      .nav-toggle-input:checked~.nav-menu-wrapper {
          transform: translateX(0);
          box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);

      }

      /* Vertical Navigation Items */
      .nav-menu {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          width: 100%;
      }

      .nav-menu li {
          width: 100%;
      }

      .nav-menu a {
          display: block;
          font-size: 1.05rem;
          font-weight: 600;
          color: #f8fafc;
          padding: 0.75rem 1rem;
          border-radius: 0.5rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          transition: all 0.2s ease;
      }

      .nav-menu a::after {
          display: none;
          /* Disable desktop underline indicator */
      }

      /* Active / Touch Feedback */
      .nav-menu a:hover,
      .nav-menu a:active {
          background-color: rgba(245, 158, 11, 0.15);
          color: var(--amber-400);
          padding-right: 1.35rem;
          /* Smooth RTL shift */
      }


      /* Hero Section Adjustments */
      .hero-logo {
          width: 300px;
      }

      .hero-subtitle {
          font-size: 1.75rem;
      }

      /* Container setup */
      .timeline-section {
          padding: 2rem 0;
      }

      .timeline-container {
          min-width: 0;
          width: 100%;
          flex-direction: column;
          align-items: center;
      }

      /* Start / End Badges (1968 & 2026) */
      .timeline-badge {
          font-size: 0.85rem;
          padding: 0.3rem 0.85rem;
          z-index: 2;
      }

      .timeline-track {
          position: relative;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0.5rem 0;
      }

      /* Spine line straight down 50% center */
      .timeline-line {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 50%;
          width: 2px;
          height: 100%;
          transform: translateX(-50%);
          z-index: 1;
      }

      .timeline-items {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1.75rem;
          width: 100%;
      }

      /* Horizontal Row Layout */
      .timeline-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: relative;
          z-index: 2;
      }

      /* --- 1. LEFT SIDE: YEAR --- */
      .timeline-item .item-slot.year {
          order: 1;
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 0.85rem;
          text-align: right;
          font-size: 0.85rem;
          font-weight: 700;
          color: var(--emerald-800, #065f46);
      }

      /* Badge styling for the year */
      .timeline-item .item-slot.year {
          white-space: nowrap;
      }

      /* --- 2. CENTER: NODE DOT --- */
      .timeline-item .item-node {
          order: 2;
          flex: 0 0 auto;
          position: relative;
          z-index: 3;
          margin: 0;
          transform: none;
      }

      /* --- 3. RIGHT SIDE: LABEL --- */
      .timeline-item .item-slot.label {
          order: 3;
          flex: 1;
          display: flex;
          justify-content: flex-start;
          padding-left: 0.85rem;
          text-align: left;
          font-size: 0.9rem;
          font-weight: 600;
          color: var(--slate-800, #1e293b);
          line-height: 1.25;
      }

      /* Feaure Cards: Stack vertically for smaller screens */

      .feature-card,
      .page-card,
      .media-card {
          flex: 1 1 90%;
      }

      .feature-video-btn {
          width: 100%;
          /* Stretches to full-width button for mobile tapping */
      }

      /* Comparison Cards: Stack comparison images vertically */
      .comparison-card {
          padding: 1.25rem;
          flex-direction: column;
      }

      .comparison-card img {
          flex: 1 1 100%;
          width: 100%;
      }


      /* Posters Layout: Stack vertical & horizontal poster columns */
      .posters-layout {
          flex-direction: column;
          gap: 1.5rem;
      }

      .poster-tall {
          margin: 0;
      }

      /* Inner card spacing adjustments */
      .project-info-card,
      .project-contact-card {
          padding: 1.5rem;
      }

      /* Footer structure stacked for mobile readability */
      .footer {
          padding: 3rem 0 1.5rem 0;
      }

      .footer-grid {
          grid-template-columns: 1fr;
          gap: 2.25rem;
      }
  }

  /* --- Mobile Devices (Max-width: 640px) --- */
  @media (max-width: 640px) {
      .section-title {
          font-size: 1.75rem;
      }

      .section-subtitle {
          font-size: 0.925rem;
      }

      /* Hero Section Adjustments */
      .hero-logo {
          width: 300px;
      }

      .hero-subtitle {
          font-size: 1.5rem;
      }


      /* Convert roadmap 2x2 grid to single column */
      .roadmap-grid {
          grid-template-columns: 1fr;
      }

      /* Ensure cards take full width on smaller screens */
      .media-grid {
          grid-template-columns: 1fr;
      }

      .mushaf-cta-box {
          padding: 1rem 1.15rem;
      }
  }

  /* --- Small Mobile Screens (Max-width: 480px) --- */
  @media (max-width: 480px) {
      .container {
          padding: 0 1rem;
      }

      .brand-title img {
          width: 80px;
      }

      .nav-menu {
          gap: 0.5rem 0.85rem;
      }

      .nav-menu a {
          font-size: 0.8rem;
      }

      /* Hero Section Adjustments */
      .hero-logo {
          width: 250px;
      }

      .hero-subtitle {
          font-size: 1.25rem;
      }

      /* Stack quick contact pills full-width for easy tapping */
      .quick-contact-pills {
          flex-direction: column;
          align-items: stroke;
      }

      .contact-pill {
          justify-content: center;
          width: 100%;
      }

      .project-main-title {
          font-size: 1.6rem;
      }

      .card-box-title {
          font-size: 1.5rem;
      }

      .btn-submit,
      .poster-btn {
          width: 100%;
          padding: 0.8rem 1rem;
          font-size: 0.9rem;
      }
  }