/* ── About Page Custom Styling ── */
    .about-hero {
      position: relative;
      background-color: #0c0f1d !important;
      min-height: 480px !important;
      padding-block: 150px 80px !important;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .about-hero .hero-image-bg::after {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(90deg, rgba(2, 8, 19, 0.85) 0%, rgba(2, 8, 19, 0.6) 35%, rgba(2, 8, 19, 0.25) 65%, transparent 100%) !important;
      z-index: 5 !important;
      pointer-events: none !important;
    }

    .about-ccss-section {
      position: relative;
      padding-block: 100px !important;
      background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fa 100%) !important;
      overflow: hidden;
    }

    .ccss-split-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: var(--container-max);
      margin: 0 auto;
      padding-inline: var(--space-6);
      gap: var(--space-8);
      min-height: auto;
    }

    @media (max-width: 768px) {
      .ccss-split-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
    }

    .ccss-half {
      position: relative;
      background: none !important;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 0 !important;
      cursor: default;
    }

    .ccss-content {
      background: #ffffff !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1px solid rgba(15, 32, 61, 0.08) !important;
      border-radius: 16px !important;
      padding: 50px 40px !important;
      max-width: 100%;
      width: 100%;
      z-index: 5;
      box-shadow: 0 10px 30px rgba(13, 32, 61, 0.04) !important;
      transition: all 400ms var(--ease);
    }

    .ccss-half:hover .ccss-content {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(13, 32, 61, 0.08) !important;
      border-color: var(--gold) !important;
    }

    .ccss-num {
      font-family: var(--font-display);
      font-size: 3.5rem !important;
      font-weight: 700;
      color: var(--gold) !important;
      line-height: 1;
      margin-bottom: var(--space-2);
    }

    .ccss-title {
      font-family: var(--font-display);
      font-size: 2.2rem !important;
      font-weight: 700;
      color: var(--navy) !important;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      transition: color var(--trans-base);
    }

    .ccss-title::after {
      content: '';
      display: block;
      width: 45px;
      height: 3px;
      background: var(--gold);
      margin-top: 12px;
      border-radius: 2px;
    }

    .ccss-half:hover .ccss-title {
      color: var(--navy) !important;
    }

    .ccss-desc {
      font-family: var(--font-body);
      font-size: 1.05rem !important;
      color: var(--text-body) !important;
      line-height: 1.8;
    }

    /* ── Bento Highlights Gallery Styling ── */
    .about-bento-section {
      padding-block: 80px;
      background: #ffffff;
    }

    .about-bento-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 240px 240px 320px;
      grid-auto-flow: dense;
      gap: 4px;
      width: 100%;
      background: #ffffff;
    }

    .bento-item {
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 0;
      overflow: hidden;
      transition: opacity 0.3s ease;
      cursor: pointer;
    }

    .bento-item:hover {
      opacity: 0.92;
    }

    .bento-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
      z-index: 1;
    }

    .bento-content {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      z-index: 2;
      color: #ffffff;
    }

    .bento-title {
      font-family: var(--font-display);
      font-size: 1.4rem !important;
      font-weight: 700;
      color: var(--gold) !important;
      margin-bottom: 6px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }

    .bento-desc {
      font-family: var(--font-body);
      font-size: 0.9rem !important;
      color: rgba(255, 255, 255, 0.9) !important;
      line-height: 1.4;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* Grid Span Configurations */
    .bento-tall {
      grid-row: span 2;
    }

    .bento-wide {
      grid-column: span 2;
    }

    .bento-wide-bottom {
      grid-column: span 2;
    }

    @media (max-width: 991px) {
      .about-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: 220px;
      }
      .bento-tall {
        grid-row: span 2;
      }
      .bento-wide {
        grid-column: span 2;
      }
      .bento-wide-bottom {
        grid-column: span 2;
      }
    }

    @media (max-width: 768px) {
      .about-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 200px;
      }
      .bento-tall, .bento-wide, .bento-wide-bottom {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
      }
      .about-bento-section {
        padding-block: 50px;
      }
    }


    /* ── Vision & Mission Area (Redesigned) ── */
    .about-vm-section {
      position: relative;
      background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fa 100%) !important;
      color: var(--navy) !important;
      padding-block: 120px !important;
    }

    .about-vm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-12);
      align-items: stretch;
    }

    @media (max-width: 992px) {
      .about-vm-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
    }

    .vm-card {
      background: rgba(255, 255, 255, 0.96) !important;
      border: 1px solid rgba(14, 40, 73, 0.1) !important;
      border-radius: var(--radius-xl);
      padding: var(--space-10);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all var(--trans-base);
      box-shadow: 0 10px 30px rgba(14, 40, 73, 0.05) !important;
    }

    .vm-card:hover {
      background: #ffffff !important;
      border-color: var(--gold) !important;
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(14, 40, 73, 0.1) !important;
    }

    .vm-accent-line {
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
      margin-bottom: var(--space-5);
      border-radius: 2px;
    }

    .vm-card-title {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      color: var(--navy) !important;
      margin-bottom: var(--space-4);
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .vm-card-text {
      font-family: var(--font-body) !important;
      font-size: 1.05rem !important;
      color: var(--text-body) !important;
      line-height: 1.8;
      font-style: normal !important;
      font-weight: 500;
    }

    .vm-card-text p {
      margin-bottom: var(--space-4);
    }

    /* ── Target Beneficiaries ── */
    .about-beneficiaries-section {
      background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fa 100%) !important;
      padding-block: 100px !important;
    }

    .about-beneficiaries-section .container {
      max-width: 1440px !important;
      width: 95% !important;
    }

    .beneficiaries-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      margin-top: 50px;
    }

    @media (max-width: 1200px) {
      .beneficiaries-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .beneficiaries-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .ben-card {
      background: var(--white);
      border: 1px solid rgba(14, 40, 73, 0.08);
      border-radius: 20px !important;
      padding: 0 0 30px 0 !important;
      box-shadow: 0 10px 30px rgba(13, 32, 61, 0.03);
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
      transition: all var(--trans-base);
    }

    .ben-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(13, 32, 61, 0.08);
      border-color: rgba(14, 40, 73, 0.15);
    }

    .ben-card-img {
      width: 100%;
      height: 180px !important;
      object-fit: cover;
      border-radius: 20px 20px 0 0 !important;
      margin-bottom: 0 !important;
    }

    .ben-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding-top: 36px;
      padding-inline: var(--space-4);
      margin-bottom: 20px;
      border-bottom: none !important;
    }

    .ben-icon {
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      width: 56px;
      height: 56px;
      color: var(--white) !important;
      border-radius: 50%;
      display: flex !important;
      align-items: center;
      justify-content: center;
      border: 4px solid var(--white) !important;
      box-shadow: 0 4px 12px rgba(14, 40, 73, 0.12);
      font-size: 18px !important;
      z-index: 10;
    }

    .ben-title {
      font-family: var(--font-display);
      font-size: 1.3rem !important;
      font-weight: 700;
      color: var(--navy);
      text-align: center;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .ben-title::after {
      content: '';
      display: block;
      width: 45px;
      height: 3px;
      border-radius: 2px;
      margin-top: 10px;
    }

    .ben-list {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-inline: 28px !important;
      margin-top: 5px;
    }

    .ben-list li {
      font-family: var(--font-body);
      font-size: 0.9rem !important;
      color: var(--text-body);
      display: block;
      position: relative;
      padding-left: 20px;
      line-height: 1.4;
    }

    .ben-list li::before {
      content: "\f054";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 4px;
      font-size: 8px;
      color: var(--text-body);
      transition: transform var(--trans-base);
    }

    .ben-card:hover .ben-list li::before {
      transform: translateX(3px);
    }

    /* Healthcare specific theme */
    .beneficiaries-grid > .ben-card:nth-child(1) .ben-icon {
      background: #1a73e8 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(1) .ben-title::after {
      background: #1a73e8 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(1) .ben-list li::before {
      color: #1a73e8 !important;
    }

    /* Legal System specific theme */
    .beneficiaries-grid > .ben-card:nth-child(2) .ben-icon {
      background: #7e57c2 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(2) .ben-title::after {
      background: #7e57c2 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(2) .ben-list li::before {
      color: #7e57c2 !important;
    }

    /* Education specific theme */
    .beneficiaries-grid > .ben-card:nth-child(3) .ben-icon {
      background: #2979ff !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(3) .ben-title::after {
      background: #2979ff !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(3) .ben-list li::before {
      color: #2979ff !important;
    }

    /* Security & Law specific theme */
    .beneficiaries-grid > .ben-card:nth-child(4) .ben-icon {
      background: #fb8c00 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(4) .ben-title::after {
      background: #fb8c00 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(4) .ben-list li::before {
      color: #fb8c00 !important;
    }

    /* Smart Cities specific theme */
    .beneficiaries-grid > .ben-card:nth-child(5) .ben-icon {
      background: #2e7d32 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(5) .ben-title::after {
      background: #2e7d32 !important;
    }
    .beneficiaries-grid > .ben-card:nth-child(5) .ben-list li::before {
      color: #2e7d32 !important;
    }

    /* ── Aims and Objectives ── */
    .about-aims-section {
      background: var(--white);
      padding-block: 100px !important;
    }

    .aims-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-8);
    }

    @media (max-width: 992px) {
      .aims-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .aim-card {
      background: #F8FAFC;
      border: 1px solid rgba(15, 32, 61, 0.06);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      box-shadow: 0 4px 20px rgba(13, 32, 61, 0.02);
      transition: transform var(--trans-base), box-shadow var(--trans-base);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .aim-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(13, 32, 61, 0.08);
    }

    .aim-card-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: var(--radius-md);
      margin-bottom: var(--space-4);
    }

    .aim-card-header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-2);
    }

    .aim-icon-wrap {
      color: var(--navy-light);
      font-size: var(--text-base);
    }

    .aim-title {
      font-family: var(--font-display);
      font-size: var(--text-md);
      font-weight: 700;
      color: var(--navy);
    }

    .aim-desc {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-light);
      line-height: 1.6;
      margin-top: auto;
    }

    /* ── Key Technologies (Redesigned with Global Background Hover Swapping) ── */
    .about-tech-section {
      position: relative;
      background-color: #0c0f1d !important; /* Solid dark background to prevent white showing through during transition */
      color: var(--navy) !important;
      padding-block: 120px !important;
      overflow: hidden;
    }

    .about-tech-section .section-header {
      background: none !important;
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
      max-width: 850px !important;
      margin-inline: auto !important;
      margin-bottom: 60px !important;
      text-align: center;
    }

    .about-tech-section .section-title::after {
      background: var(--gold) !important;
    }

    .tech-bg-layers {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .tech-bg-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 400ms var(--ease);
      z-index: 1;
    }

    .tech-bg-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: none !important;
    }

    .tech-bg-layer.active {
      opacity: 1;
    }

    .tech-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
      margin-top: var(--space-8);
      position: relative;
      z-index: 10;
    }

    @media (max-width: 1200px) {
      .tech-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .tech-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .tech-card {
      position: relative;
      height: 290px !important;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 16px !important;
      background: rgba(12, 15, 29, 0.65) !important;
      border: 1px solid rgba(0, 191, 255, 0.25) !important;
      transition: all 400ms var(--ease) !important;
      cursor: pointer;
      z-index: 10;
      padding: 30px 20px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }

    .tech-card:hover {
      border-color: var(--gold) !important;
      background: rgba(12, 15, 29, 0.8) !important;
      transform: translateY(-8px) !important;
      box-shadow: 0 15px 35px rgba(214, 164, 0, 0.25) !important;
    }

    .tech-icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      transition: all 400ms var(--ease);
      background: rgba(255, 255, 255, 0.03);
    }

    .tech-card:hover .tech-icon-wrap {
      border-color: var(--gold);
      background: rgba(214, 164, 0, 0.1);
      transform: scale(1.05);
    }

    .tech-icon {
      font-size: 26px !important;
      color: var(--white) !important;
      margin-bottom: 0 !important;
      transition: all 400ms var(--ease) !important;
    }

    .tech-card:hover .tech-icon {
      color: var(--gold) !important;
      transform: scale(1.05) !important;
    }

    .tech-name {
      font-family: var(--font-display) !important;
      font-weight: 700;
      font-size: 1.15rem !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      color: var(--white) !important;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 12px;
    }

    .tech-desc-text {
      font-family: var(--font-body);
      font-size: 0.85rem !important;
      color: rgba(255, 255, 255, 0.65) !important;
      line-height: 1.5;
      text-align: center;
      margin-top: 0;
    }

    /* ── Strategy Section (Redesigned) ── */
    .about-strategy-section {
      background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fa 100%) !important;
      padding-block: 100px !important;
    }

    .strat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-10);
    }

    @media (max-width: 992px) {
      .strat-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
    }

    .strat-block {
      background: #ffffff !important;
      border: 1px solid var(--grey-200);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      height: 100%;
      transition: border-color var(--trans-base), box-shadow var(--trans-base);
    }

    .strat-block:hover {
      border-color: var(--gold);
      box-shadow: var(--shadow-md);
    }

    .strat-header {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
      border-bottom: 2px solid var(--grey-200);
      padding-bottom: var(--space-3);
    }

    .strat-num {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--gold-dark);
    }

    .strat-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--navy);
    }

    .strat-desc {
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--text-body);
      line-height: 1.7;
    }

    /* Strategic Focus Components Restyling */
    .strat-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-8);
    }

    @media (max-width: 992px) {
      .strat-pillars {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .strat-pillars {
        grid-template-columns: 1fr;
      }
    }

    .pillar-card {
      background: #ffffff !important;
      border: 1px solid rgba(15, 32, 61, 0.08);
      padding: var(--space-5) var(--space-6);
      border-radius: var(--radius-lg);
      transition: all var(--trans-base);
    }

    .pillar-card:hover {
      border-color: var(--gold);
      background: var(--white);
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }

    .pillar-name {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--navy);
      margin-bottom: var(--space-2);
      font-size: var(--text-md);
    }

    .pillar-desc {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: var(--text-light);
      line-height: 1.6;
    }
/* --- Extracted Inline Styles --- */
.home-bg-1 { background-image: url('../images/HOMEBG.webp'); }
.home-bg-2 { background-image: url('../images/AdobeStockBG (2).webp'); }
.home-bg-3 { background-image: url('../images/AdobeStockBG (3).webp'); }
.home-bg-4 { background-image: url('../images/AdobeStockBG (4).webp'); }
.home-bg-5 { background-image: url('../images/AdobeStockBG (5).webp'); }
.home-bg-6 { background-image: url('../images/AdobeStockBG (6).webp'); }

.about-image-ihub { background-image: url('../images/aboutihub.webp'); }
.about-image-hall { background-image: url('../images/hall.webp'); }
.about-image-mcc { background-image: url('../images/mcc.webp'); }
.vr-bg-img { background-image: url('../images/vrimg.webp'); }
.sim-humanoid-bg { background-image: url('../images/simulator humanoid.webp'); }
.sim2-bg { background-image: url('../images/simulator2.webp'); }
.pillars-bg { background-image: url('../images/pillars_bg.webp'); }

.align-flex-start { align-items: flex-start; }
.hero-content-title { margin-bottom: var(--space-4); text-align: left; margin-inline: 0; }
.mb-8 { margin-bottom: var(--space-8); }
.mb-3 { margin-bottom: var(--space-3); }
.hero-stat-title { margin-bottom: var(--space-6); text-align: left; margin-inline: 0; }
.hero-col-footer { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; margin-top: auto; width: 100%; }
.hero-partners-logo-row { display: flex; gap: clamp(16px, 3vw, 36px); align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100%; }
.hero-logo-img-1 { height: 64px; max-width: 140px; width: auto; object-fit: contain; }
.hero-logo-img-2 { height: 75px; max-width: 150px; width: auto; object-fit: contain; }
.hero-illustration-container { width: 100%; max-width: 320px; }
.hero-illustration-img { width: 100%; max-width: 320px; height: auto; object-fit: contain; }
.custom-section-heading { font-size: 2.2rem !important; margin-bottom: 12px; }
.relative-z10 { position: relative; z-index: 10; }
.text-white-force { color: var(--white) !important; }
.text-white-trans-force { color: rgba(255, 255, 255, 0.8) !important; }
.center-mt12-xl { text-align: center; margin-top: var(--space-12); font-size: var(--text-xl); }
.svg-icon-size { width: 20px; height: 20px; flex-shrink: 0; }