/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Tags: one-column,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog,portfolio
Version: 2.7.1771872880
Updated: 2026-02-23 18:54:40

*/

 :root {
        --amber: #c4832a;
        --primary: #f56713;
        --primary-dark: #d9560e;
        --secondary: #004394;
        --secondary-dark: #003070;
        --navy: #0f2347;
        --muted: #f5f7fa;
        --muted-fg: #64748b;
        --border: #e2e8f0;
        --fg: #0f2347;
        --r-sm: 4px;
        --r-md: 8px;
        --r-lg: 12px;
        --r-xl: 16px;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
        --top-bar-h: 40px;
        --nav-h: 68px;
        --row:#f8f9fb;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "DM Sans", sans-serif;
        color: var(--fg);
        line-height: 1.6;
        overflow-x: hidden;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      img {
        max-width: 100%;
        display: block;
      }
      p {
        color: var(--muted-fg);
        margin-bottom: 16px;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        line-height: 1.2;
        font-weight: 700;
      }
      h1 {
        font-size: clamp(32px, 5vw, 56px);
        letter-spacing: -1.5px;
      }
      h2 {
        font-size: clamp(26px, 4vw, 42px);
        letter-spacing: -0.5px;
      }
      h3 {
        font-size: clamp(18px, 2.5vw, 24px);
      }
      .global-card{
  background:#fff;
  border-radius:12px;
  padding:30px 20px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.06);
  transition:all .3s ease;
  height:100%;
}

.global-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(15,35,71,0.15);
}

.global-flag{
  font-size:28px;
  display:inline-block;
  margin-bottom:15px;
}

.global-card h3{
  font-size:18px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:8px;
}

.global-card p{
  margin:0;
  color:#6c757d;
  font-size:14px;
}
      /* Section wrapper */
.table-section{
  display:flex;
  justify-content:center;
}

/* Card container */
.comp-container{
  width:100%;
  max-width:1100px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  overflow:hidden;
}

/* Table */
.comp-table{
  width:100%;
  border-collapse:collapse;
  font-family: 'Segoe UI', sans-serif;
  font-size:15px;
}

/* Header */
.comp-table thead th{
  background:var(--navy);
  color:#fff;
  padding:18px 20px;
  text-align:left;
  font-weight:600;
  letter-spacing:.5px;
}

/* Zealicon Header Highlight */
.comp-table thead th:nth-child(2){
  background:var(--primary);
  text-align:left;
}

/* Body rows */
.comp-table tbody tr{
  border-bottom:1px solid var(--border);
}

.comp-table tbody tr:nth-child(even){
  background:var(--row);
}

.comp-table td{
  padding:18px 20px;
  vertical-align:middle;
}

/* First column bold */
.comp-table td:first-child{
  font-weight:500;
  color:#1f2937;
}

/* Zealicon column */
.comp-table td:nth-child(2){
  background:#fff7f1;
  font-weight:600;
  color:#111827;
}

/* Check icon style */
.check{
  color:#16a34a;
  font-weight:600;
}

.cross{
  color:#9ca3af;
}

/* Hover */
.comp-table tbody tr:hover{
  background:#eef2ff;
  transition:0.2s ease;
}
      .eng-feature::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--amber);
        flex-shrink: 0;
      }
      .eng-feature {
        font-size: 13.5px;
        color: var(--text-m);
        padding: 9px 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .eng-card {
        border-radius: 14px;
        border: 1.5px solid var(--border);
        padding: 36px 30px;
        background: #fff;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
      }
      .eng-card.featured {
        background: var(--navy);
        border-color: var(--navy);
      }
      .eng-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        background: var(--amber);
        color: #fff;
        padding: 3px 10px;
        border-radius: 4px;
        margin-top: -10px;
      }
      .eng-card.featured h3 {
        color: #fff;
      }
      .eng-card.featured .eng-feature {
        color: rgba(255, 255, 255, 0.7);
        border-bottom-color: rgba(255, 255, 255, 0.08);
      }
      .btn-outline-amber {
        border: 1.5px solid var(--amber);
        color: var(--amber);
        background: transparent;
      }
      .btn-primary {
        background: var(--amber);
        color: #fff;
        box-shadow: 0 4px 18px rgba(196, 131, 42, 0.32);
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 30px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.02em;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
      }
      .eng-card h3 {
        font-weight: 700;
        font-size: 16px;

        margin: 14px 0 8px;
      }
      .marquee-wrap {
        overflow: hidden;
        white-space: nowrap;
        background: #f56713;
        color: #fff;
        padding: 12px 0;
        position: relative;
      }

      .marquee-track {
        display: inline-flex;
        gap: 16px;
        animation: marquee 25s linear infinite;
      }

      .marquee-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
      }

      .marquee-sep {
        opacity: 0.5;
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      .ai-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .card_price a {
        border: 1px solid var(--amber);
      }
      .btn-outline-amber:hover {
        background: var(--amber);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(196, 131, 42, 0.42);
        color: #fff;
      }

      .card_price .btn-primary:hover {
        background: var(--navy);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(196, 131, 42, 0.42);
        color: #fff;
      }
      .glass {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--border);
        border-radius: var(--r);
        backdrop-filter: blur(12px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
      }
      .ai-tag {
        background: #e4eefd;
        color: var(--navy);
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 100px;
        letter-spacing: 0.02em;
      }
      .ind-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--r);
        padding: 28px 20px;
        text-align: center;
        transition: all var(--ease);
        cursor: default;
      }
      .ic-rose {
        background: #fff0f3;
        color: #e11d48;
      }
      .ic-emerald {
        background: #f0fdf4;
        color: #16a34a;
      }
      .ic-amber {
        background: #fbf0dc;
        color: #c4832a;
      }
      .ic-sky {
        background: #eff6ff;
        color: #0284c7;
      }
      .ic-navy {
        background: #eef2f8;
        color: #1a2e4a;
      }
      .ic-violet {
        background: #f0eeff;
        color: #6d28d9;
      }
      .ic-teal {
        background: #e6faf5;
        color: #0d9488;
      }
      .ind-card h3 {
        font-size: 13.5px;
        font-weight: 600;
      }

      .ic {
        width: 54px;
        height: 54px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        margin-bottom: 22px;
      }

      .tech-overflow {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
      }
      .tech-track {
        display: flex;
        gap: 0;
        width: max-content;
        animation: techscroll 28s linear infinite;
        padding: 12px 0;
      }

      .tech-chip {
        background: #fff;
        border: 1px solid var(--border);
        color: var(--text-m);
        font-size: 13px;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 100px;
        white-space: nowrap;
        transition: all 0.25s ease;
        margin-right: 10px;
      }

      .tech-chip:hover {
        border-color: var(--amber);
        color: var(--amber);
      }

      .tech-track {
        display: inline-flex;
        gap: 16px;
        animation: scroll 25s linear infinite;
      }

      .tech-chip {
        padding: 8px 16px;
        background: #f5f5f5;
        border-radius: 50px;
        font-weight: 500;
        white-space: nowrap;
      }

      /* Marquee animation */
      @keyframes scroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      /* ════════════════════════════════════
         SITE HEADER WRAPPER
         Wraps top-bar + nav-main together.
         Transition handles the top-bar hide.
      ════════════════════════════════════ */
      #site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        /* default: show both bars */
        transform: translateY(0);
        transition:
          transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.3s;
      }

      /* When scrolled: push header UP by top-bar height → hides top bar, nav stays visible */
      #site-header.scrolled {
        transform: translateY(calc(-1 * var(--top-bar-h)));
        box-shadow: var(--shadow-lg);
      }

      /* ── TOP BAR ── */
      .top-bar {
        background: #f56713;
        height: var(--top-bar-h);
        display: flex;
        align-items: center;
        font-size: 12.5px;
        color: #fff;
      }

      /* ── MAIN NAV ── */
      .nav-main {
        background: #fff;
        height: var(--nav-h);
      }
      .nav-main .navbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .logo-icon {
        width: 34px;
        height: 34px;
        background: var(--primary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: white;
        font-size: 20px;
        flex-shrink: 0;
      }
      .logo-text {
        font-size: 22px;
        font-weight: 800;
        color: white;
        letter-spacing: -0.5px;
      }

      /* Bootstrap toggler custom style */
      .navbar-toggler {
        border: none !important;
        padding: 6px 8px;
        background: var(--navy) !important;
        border-radius: var(--r-md) !important;
        outline: none !important;
        box-shadow: none !important;
      }
      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
      }

      /* Desktop nav links */
      .navbar-nav .nav-link {
        color: #000;
        font-size: 14.5px;
        font-weight: 500;
        padding: 8px 14px !important;
        border-radius: var(--r-md);
        transition:
          color 0.2s,
          background 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .navbar-nav .nav-link:hover,
      .navbar-nav .nav-link.active {
        color: var(--navy) !important;
        background: rgba(255, 255, 255, 0.1);
      }
      .btn-nav-cta {
        background: var(--primary) !important;
        color: white !important;
        padding: 9px 20px !important;
        border-radius: var(--r-md) !important;
        font-weight: 600 !important;
        margin-left: 6px;
        transition: background 0.2s !important;
        font-size: 14.5px;
      }
      .btn-nav-cta:hover {
        background: var(--primary-dark) !important;
      }

      .chevron-icon {
        font-size: 14px;
        transition: transform 0.25s;
      }

      /* ── MEGA MENU (desktop only) ── */
      .mega-wrapper {
        position: relative;
      }
      .mega-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-lg);
        padding: 32px;
        width: 820px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          visibility 0.22s;
        z-index: 300;
      }
      .mega-menu::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 12px;
        height: 12px;
        background: white;
        border-left: 1px solid var(--border);
        border-top: 1px solid var(--border);
        transform: translateX(-50%) rotate(45deg);
      }
      .mega-wrapper:hover .mega-menu,
      .mega-wrapper:focus-within .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }
      .mega-wrapper:hover .chevron-icon {
        transform: rotate(180deg);
      }

      .mega-menu-featured {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 8px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 20px;
      }
      .mega-featured-card {
        background: linear-gradient(
          135deg,
          var(--secondary),
          var(--secondary-dark)
        );
        border-radius: var(--r-lg);
        padding: 24px;
        color: white;
      }
      .mega-featured-card .mf-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        color: white;
        font-size: 20px;
      }
      .mega-featured-card h4 {
        font-size: 16px;
        margin-bottom: 6px;
        color: white;
      }
      .mega-featured-card p {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
      }
      

      .mega-menu-inner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
      }
      .mega-svc-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: background 0.15s;
      }
      .mega-svc-item:hover {
        background: var(--muted);
      }
      .mega-svc-item .ms-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: rgba(245, 103, 19, 0.1);
        border-radius: var(--r-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 18px;
      }
      .mega-svc-item h5 {
        font-size: 13.5px;
        font-weight: 600;
        margin-bottom: 2px;
        color: var(--fg);
      }
      .mega-svc-item p {
        font-size: 12px;
        color: var(--muted-fg);
        margin: 0;
      }

      .mega-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--muted);
        border-radius: var(--r-lg);
        padding: 16px 20px;
        margin-top: 16px;
      }
      .mega-cta p {
        margin: 0;
        font-size: 13px;
        color: var(--muted-fg);
      }
      .mega-cta a {
        background: var(--primary);
        color: white;
        padding: 8px 18px;
        border-radius: var(--r-md);
        font-size: 13px;
        font-weight: 600;
        transition: background 0.2s;
      }
      .mega-cta a:hover {
        background: var(--primary-dark);
      }

     

      /* ── HEADER OFFSET ── */
      .header-offset {
        padding-top: calc(var(--top-bar-h) + var(--nav-h));
      }

      /* ════════════════════════════════════
         SCROLL REVEAL
      ════════════════════════════════════ */
      .reveal {
        opacity: 0;
        transform: translateY(48px);
        transition:
          opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }
      .reveal-delay-4 {
        transition-delay: 0.4s;
      }

      /* ── SECTION LABEL ── */
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--primary);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 12px;
      }
      .section-label::before {
        content: "";
        display: block;
        width: 24px;
        height: 2px;
        background: var(--primary);
        border-radius: 2px;
      }

      /* ── HERO ── */
      .hero {
        background: var(--navy);
        color: white;
        padding: 100px 0 80px;
        position: relative;
        overflow: hidden;
      }
      .hero::after {
        content: "";
        position: absolute;
        top: -200px;
        right: -200px;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(245, 103, 19, 0.15) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(245, 103, 19, 0.2);
        color: #ffaa70;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12.5px;
        font-weight: 700;
        margin-bottom: 24px;
        border: 1px solid rgba(245, 103, 19, 0.3);
      }
      .hero h1 {
        color: white;
        margin-bottom: 20px;
      }
      .hero h1 span {
        color: var(--primary);
      }
      .hero p {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 36px;
      }
      .btn-hero-primary {
        background: var(--primary);
        color: white;
        padding: 14px 32px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 15px;
        transition:
          background 0.2s,
          transform 0.2s;
        display: inline-block;
      }
      .btn-hero-primary:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        color: white;
      }
      .btn-hero-outline {
        background: transparent;
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.3);
        padding: 14px 32px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 15px;
        transition:
          border-color 0.2s,
          background 0.2s;
        display: inline-block;
      }
      .btn-hero-outline-2 {
        border: 2px solid var(--navy);
        padding: 14px 32px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 15px;
        transition:
          border-color 0.2s,
          background 0.2s;
        display: inline-block;
      }
      .btn-hero-outline:hover {
        border-color: white;
        background: rgba(255, 255, 255, 0.08);
        color: white;
      }
      .stat-divider {
        width: 1px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
      }
      .stat-num {
        font-size: 26px;
        font-weight: 800;
        color: white;
      }
      .stat-label {
        font-size: 12px;
        opacity: 0.65;
        color: white;
      }

      .hero-visual {
        position: relative;
        height: 400px;
      }
      .hero-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--r-xl);
        padding: 24px;
        position: absolute;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      }
      .hc-1 {
        top: 0;
        right: 0;
        width: 290px;
      }
      .hc-2 {
        bottom: 20px;
        left: 0;
        width: 320px;
      }
      .hbar {
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        margin-bottom: 10px;
      }

      /* ── MARQUEE ── */
      .marquee-bar {
        background: var(--primary);
        color: white;
        padding: 11px 0;
      }
      .marquee-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12.5px;
        flex-wrap: wrap;
        padding: 0 24px;
      }

      /* ── TRUST BAR ── */
      .trust-bar {
        padding: 40px 0;
        border-bottom: 1px solid var(--border);
      }
      .trust-logos {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        opacity: 0.5;
        filter: grayscale(100%);
        flex-wrap: wrap;
      }

      /* ── ABOUT ── */
      .check-list {
        list-style: none;
        padding: 0;
        margin: 0 0 32px 0;
      }
      .check-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
        font-weight: 500;
        color: var(--fg);
      }
      .check-icon {
        width: 22px;
        height: 22px;
        background: var(--secondary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 13px;
        flex-shrink: 0;
      }
      .about-img {
        border-radius: var(--r-xl);
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
      .stat-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
      }
      .stat-card.dark {
        background: var(--navy);
      }
      .stat-card.orange {
        background: var(--primary);
      }
      .orange .snum,
      .orange p {
        color: #fff !important;
      }
      .lg-bg {
        background: #e4eefd;
      }
      .stat-card .snum {
        font-size: 36px;
        font-weight: 800;
        color: var(--secondary);
        margin-bottom: 4px;
      }
      .stat-card.dark .snum {
        color: var(--muted);
      }
      .stat-card p {
        margin: 0;
        font-size: 13.5px;
      }
      .stat-card.dark p {
        color: rgba(255, 255, 255, 0.6);
      }
      .btn-z {
        display: inline-flex;
        align-items: center;
        background: var(--primary);
        color: white;
        padding: 12px 26px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 14.5px;
        transition:
          background 0.2s,
          transform 0.15s;
      }
      .btn-z:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        color: white;
      }

      /* ── SERVICE CARDS ── */
      .service-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px;
        display: flex;
        flex-direction: column;
        transition:
          box-shadow 0.2s,
          transform 0.2s;
        height: 100%;
      }
      .service-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .svc-icon {
        width: 46px;
        height: 46px;
        background: rgba(245, 103, 19, 0.1);
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 20px;
      }
      .service-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .service-card p {
        font-size: 14px;
        flex: 1;
      }
      .svc-link {
        margin-top: 16px;
        color: var(--secondary);
        font-weight: 700;
        font-size: 13.5px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      /* ── STATS BAND ── */
      .stats-band {
        background: linear-gradient(90deg, var(--primary), var(--primary-dark));
        padding: 50px 0;
        color: white;
      }
      .stat-item {
        text-align: center;
        padding: 16px 20px;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-item .big {
        font-size: 38px;
        font-weight: 800;
      }
      .stat-item .lbl {
        font-size: 13px;
        opacity: 0.85;
        margin-top: 4px;
      }
    

      /* ── AI SECTION ── */
      .ai-feature {
        margin-bottom: 22px;
      }
      .ai-feature h4 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        margin-bottom: 6px;
      }
      .ai-feature p {
        font-size: 14px;
        margin: 0;
        padding-left: 28px;
      }
      .ai-img-wrap {
        position: relative;
      }
      .ai-img-wrap img {
        width: 100%;
        border-radius: var(--r-xl);
        object-fit: cover;
        height: 420px;
      }
      .ai-badge {
        position: absolute;
        bottom: -24px;
        left: -24px;
        background: white;
        padding: 20px 24px;
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-md);
      }
      .ai-badge .pct {
        font-size: 44px;
        font-weight: 800;
        color: var(--primary);
        line-height: 1;
      }
      .ai-badge .al {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--fg);
      }
      .ai-badge p {
        font-size: 12px;
        margin: 4px 0 0;
      }
      

      /* ── WHY US ── */
      .why-item .nbig {
        font-size: 64px;
        font-weight: 900;
        color: #f1f5f9;
        line-height: 1;
        margin-bottom: -16px;
      }
      .why-item h3 {
        font-size: 18px;
        position: relative;
        z-index: 1;
        margin-bottom: 8px;
      }
      .why-item p {
        font-size: 14px;
      }
      .why-num {
        font-size: 34px;
        font-weight: bolder;
      }
      .why-item {
        background: #0f2347;
        color: #fff;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        margin: 0 5px;
        width: 24%;
      }

      /* ── INDUSTRY SLICK ── */
      .industry-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 36px 20px;
        text-align: center;
        margin: 0 10px;
        transition:
          box-shadow 0.2s,
          transform 0.2s;
      }
      .industry-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .ind-icon {
        width: 64px;
        height: 64px;
        background: #e0f2fe;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        color: var(--secondary);
        font-size: 28px;
      }
      .industry-card h4 {
        margin-bottom: 8px;
      }
      .industry-card p {
        font-size: 13px;
        margin: 0;
      }

      /* Slick dots/arrows */
      .slick-dots li button:before {
        color: var(--primary) !important;
        font-size: 10px !important;
      }
      .slick-dots li.slick-active button:before {
        color: var(--primary) !important;
      }
      .slick-prev:before,
      .slick-next:before {
        color: var(--primary) !important;
        font-size: 22px !important;
      }

      /* ── TECH TAGS ── */
      .tech-tags {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .tech-tag {
        padding: 8px 18px;
        border: 1.5px solid var(--border);
        border-radius: 24px;
        font-size: 13.5px;
        font-weight: 500;
        transition:
          border-color 0.2s,
          color 0.2s;
        cursor: default;
      }
      .tech-tag:hover {
        border-color: var(--primary);
        color: var(--primary);
      }

      /* ── CASE STUDIES ── */
      .case-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        overflow: hidden;
        height: 100%;
      }
      .case-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .case-body {
        padding: 28px;
      }
      .case-tag {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: var(--primary);
        margin-bottom: 8px;
      }
      .case-body h3 {
        font-size: 20px;
        margin-bottom: 10px;
      }
      .case-body p {
        font-size: 14px;
        margin-bottom: 16px;
      }
      .case-link {
        color: var(--secondary);
        font-weight: 700;
        font-size: 14px;
      }

      /* ── TESTIMONIAL SLICK ── */
      .testi-card {
        background: #f8f9fa;
        border-radius: var(--r-xl);
        padding: 28px;
        margin: 0 10px;
      }
      .stars {
        color: var(--primary);
        font-size: 18px;
        margin-bottom: 14px;
      }
      .testi-card p {
        font-style: italic;
        font-size: 14.5px;
        color: #334155;
        margin-bottom: 20px;
      }
      .testi-author {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .testi-author img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
      }
      .tname {
        font-weight: 700;
        font-size: 14px;
        color: var(--fg);
      }
      .trole {
        font-size: 12px;
        color: var(--muted-fg);
      }
      .reveal.v {
        opacity: 1;
        transform: none;
      }

      .proc-track {
        display: flex;
        align-items: flex-start;
        gap: 0;
        position: relative;
        margin-top: 16px;
      }
      .proc-track::before {
        content: "";
        position: absolute;
        top: 25px;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(
          90deg,
          var(--border),
          var(--navy),
          var(--border)
        );
        z-index: 0;
      }
      .proc-step {
        text-align: center;
        flex: 1;
        position: relative;
        z-index: 1;
        padding: 0 16px;
      }
      .proc-dot {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #1a2e4a;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        font-family: var(--sans);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        position: relative;
        z-index: 2;
        box-shadow: 0 8px 22px rgba(26, 46, 74, 0.28);
        transition: all 0.3s ease;
      }
      .proc-step:hover .proc-dot {
        background: var(--amber);
        transform: scale(1.08);
      }
      .proc-step h3 {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 8px;
      }
      .proc-step p {
        font-size: 12.5px;
        color: #4a5568;
        line-height: 1.65;
      }

      /* ── PROCESS ── */
      .process-wrap {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
        position: relative;
      }
      .process-wrap::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 0%;
        right: 0%;
        height: 2px;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
        z-index: 0;
      }
      .process-item {
        position: relative;
        z-index: 1;
      }
      .pnum {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--secondary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 16px;
        margin-bottom: 16px;
      }
      .pnum.hl {
        background: var(--primary);
      }
      .process-item h4 {
        font-size: 16px;
        margin-bottom: 8px;
      }
      .process-item p {
        font-size: 13.5px;
      }
      
     

      /* ── ENGAGEMENT ── */
      .engage-card {
        background: white;
        border: 1.5px solid var(--border);
        border-radius: var(--r-xl);
        padding: 32px;
        text-align: center;
        height: 100%;
      }
      .engage-card.featured {
        border-color: var(--primary);
        box-shadow: 0 10px 40px rgba(245, 103, 19, 0.12);
      }
      .eng-badge {
        background: var(--primary);
        color: white;
        display: inline-block;
        padding: 4px 14px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 14px;
      }
      .engage-card h4 {
        font-size: 18px;
        margin-bottom: 8px;
      }
      .engage-price {
        font-size: 30px;
        font-weight: 800;
        color: var(--secondary);
        margin: 16px 0;
      }
      .engage-card.featured .engage-price {
        color: var(--primary);
      }
      .engage-features {
        list-style: none;
        text-align: left;
        margin: 0 0 24px;
        padding: 0;
      }
      .engage-features li {
        padding: 9px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13.5px;
        color: var(--muted-fg);
      }
      .eng-btn {
        display: block;
        width: 100%;
        padding: 12px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 14px;
        text-align: center;
        transition: all 0.2s;
      }
      .eng-btn.outline {
        border: 1.5px solid var(--border);
        color: var(--fg);
        background: transparent;
      }
      .eng-btn.outline:hover {
        border-color: var(--secondary);
        color: var(--secondary);
      }
      .eng-btn.solid {
        background: var(--primary);
        color: white;
        border: none;
      }
      .eng-btn.solid:hover {
        background: var(--primary-dark);
        color: white;
      }

      /* ── GLOBAL ── */
      .global-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 24px 16px;
        text-align: center;
      }
      .gflag {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .gcity {
        font-weight: 700;
        font-size: 14px;
        color: var(--fg);
      }

      /* ── CTA BAND ── */
      .cta-band {
        background: var(--navy);
        padding: 80px 0;
        position: relative;
        overflow: hidden;
      }
      .cta-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(245, 103, 19, 0.2) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .cta-band h2 {
        color: white;
        margin-bottom: 20px;
      }
      .cta-band > .container > p {
        color: rgba(255, 255, 255, 0.75);
        font-size: 18px;
        max-width: 580px;
        margin: 0 auto 44px;
      }
      .btn-cta-primary {
        background: var(--primary);
        color: white;
        padding: 16px 40px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 16px;
        transition: background 0.2s;
      }
      .btn-cta-primary:hover {
        background: var(--primary-dark);
        color: white;
      }
      .btn-cta-outline {
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 16px 40px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 16px;
        transition: border-color 0.2s;
      }
      .btn-cta-outline:hover {
        border-color: white;
        color: white;
      }

      /* ── BLOG ── */
      .blog-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        overflow: hidden;
        height: 100%;
      }
      .blog-card img {
        width: 100%;
        height: 190px;
        object-fit: cover;
      }
      .blog-body {
        padding: 22px;
      }
      .blog-tag {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: var(--primary);
        margin-bottom: 8px;
      }
      .blog-body h4 {
        font-size: 16px;
        margin-bottom: 10px;
      }
      .blog-body p {
        font-size: 13.5px;
        margin-bottom: 14px;
      }
      .blog-link {
        color: var(--secondary);
        font-weight: 700;
        font-size: 13.5px;
      }

      /* ── FAQ ACCORDION ── */
      .faq-item {
        background: white;
        border: 1.5px solid var(--border);
        border-radius: var(--r-lg);
        margin-bottom: 14px;
        overflow: hidden;
        transition: border-color 0.2s;
      }
      .faq-item.open {
        border-color: var(--primary);
      }
      .faq-trigger {
        width: 100%;
        background: none;
        border: none;
        padding: 20px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
      }
      .faq-trigger h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--secondary);
        margin: 0;
        flex: 1;
        padding-right: 16px;
      }
      .faq-item.open .faq-trigger h4 {
        color: var(--primary);
      }
      .faq-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(245, 103, 19, 0.1);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        flex-shrink: 0;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .faq-item.open .faq-icon {
        background: var(--primary);
        color: white;
      }
      .faq-body {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          padding 0.3s;
        padding: 0 24px;
      }
      .faq-body.open {
        max-height: 400px;
        padding: 0 24px 20px;
      }
      .faq-body p {
        font-size: 14px;
        color: var(--muted-fg);
        margin: 0;
        line-height: 1.7;
      }

      /* ── CONTACT ── */
      .contact-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        padding: 36px;
        border-top: 4px solid var(--primary);
      }
      .f-label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 6px;
        color: var(--fg);
      }
      .f-input,
      .f-textarea {
        width: 100%;
        background: var(--muted);
        border: 1.5px solid var(--border);
        border-radius: var(--r-md);
        padding: 12px 14px;
        font-size: 14px;
        font-family: inherit;
        transition: border-color 0.2s;
        outline: none;
        color: var(--fg);
      }
      .f-input:focus,
      .f-textarea:focus {
        border-color: var(--secondary);
      }
      .f-textarea {
        height: 110px;
        resize: vertical;
      }
      .btn-submit {
        width: 100%;
        background: var(--primary);
        color: white;
        border: none;
        padding: 14px;
        border-radius: var(--r-md);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
        font-family: inherit;
        margin-top: 8px;
      }
      .btn-submit:hover {
        background: var(--primary-dark);
      }

      /* ── CAREERS ── */
      .careers-bar {
        background: white;
        border-top: 1px solid var(--border);
        padding: 36px 0;
      }
      .btn-careers {
        border: 2px solid var(--secondary);
        color: var(--secondary);
        padding: 11px 24px;
        border-radius: var(--r-md);
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        transition: all 0.2s;
        display: inline-block;
      }
      .btn-careers:hover {
        background: var(--secondary);
        color: white;
      }

      /* ── FOOTER ── */
      footer {
        background: var(--navy);
        color: white;
        padding: 72px 0 28px;
        border-top: 4px solid var(--primary);
      }
      .footer-desc {
        opacity: 0.65;
        font-size: 14px;
        max-width: 280px;
        margin-bottom: 20px;
        color: white;
      }
      .social-dot {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: inline-block;
      }
      .footer-col h4 {
        font-size: 15px;
        margin-bottom: 20px;
        color: white;
      }
      .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .footer-links a {
        font-size: 14px;
        opacity: 0.65;
        transition: opacity 0.15s;
        color: white;
      }
      .footer-links a:hover {
        opacity: 1;
      }

      .footer-office i {
        margin-right: 5px;
        color: #e57e2d;
      }

      .footer-geo {
        text-align: center;
        padding: 16px 0;
        font-size: 14px;
        color: rgb(255, 255, 255, 0.42);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 24px;
        letter-spacing: 0.04em;
      }

      .footer-bottom {
        padding-top: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        opacity: 0.45;
        flex-wrap: wrap;
        gap: 12px;
        color: white;
      }

      .footer-social div {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .section-pad {
        padding: 80px 0;
      }
      .bg-light-z {
        background: var(--muted);
      }
    
       /* Mobile collapse panel — same navbar, no extra elements */

      @media (max-width: 991.98px) {
        .hero_count{gap: 16px!important;}
        .btn-hero-primary,.btn-hero-outline-2{padding: 14px;}
        .section-pad {
          padding: 56px 0;
        }
         .process-wrap {
          grid-template-columns: 1fr;
        }
         .process-wrap {
          grid-template-columns: 1fr 1fr;
        }
        .process-wrap::before {
          display: none;
        }
         .ai-badge {
          position: static;
          margin-top: 16px;
        }
        .ai-img-wrap img {
          height: 280px;
        }        .proc-track::before{content: unset !important;}
.why-item {
        width: 100% !important;
        margin: 5px!important;
    }
    .proc-track
 {flex-direction: column;}
        .stat-item {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .stat-item:last-child {
          border-bottom: none;
        }
        .navbar-collapse {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: var(--secondary-dark);
          padding: 12px 0 20px;
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
          max-height: calc(100vh - var(--nav-h));
          overflow-y: auto;
        }
        .navbar-nav .nav-link {
          border-radius: 0 !important;
          padding: 12px 20px !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }
        .btn-nav-cta {
          margin: 12px 20px 0 !important;
          display: block;
          text-align: center;
        }
        .mega-wrapper {
          position: static;
        }
        .mega-menu {
          position: static !important;
          width: 100% !important;
          transform: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          border: none !important;
          border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
          padding: 8px 20px 16px !important;
          background: rgba(0, 0, 0, 0.15) !important;
          opacity: 1 !important;
          visibility: visible !important;
          pointer-events: auto !important;
          display: none;
        }
        .mega-menu.mobile-open {
          display: block;
        }
        .mega-menu::before {
          display: none;
        }
        .mega-menu-featured {
          grid-template-columns: 1fr;
        }
        .mega-featured-card {
          display: none;
        }
        .mega-menu-inner {
          grid-template-columns: 1fr 1fr;
          gap: 4px;
        }
        .mega-svc-item {
          background: transparent !important;
        }
        .mega-svc-item h5 {
          color: rgba(255, 255, 255, 0.9) !important;
        }
        .mega-svc-item p {
          color: rgba(255, 255, 255, 0.55) !important;
        }
        .mega-svc-item .ms-icon {
          background: rgba(255, 255, 255, 0.1) !important;
        }
        .mega-cta {
          display: none;
        }
        .nav-main .navbar-nav {
          position: relative;
        }
      }