:root {
  --cyan:        #2563eb;
  --bg-dark:     #ffffff;
  --bg-nav:      #ffffff;
  --bg-card:     #ffffff;
  --text-muted:  #5a6b7e;
  --white:       #16263a;
  --navy:        #ffffff;
  --navy-light:  #f4f7fb;
  --navy-card:   #ffffff;
  --cyan-dark:   #1e3a8a;
  --mint:        #eaf2ff;
  --text-light:  #5a6b7e;
  --font-head:   'Plus Jakarta Sans', 'Inter', sans-serif;
}

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

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

  body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-dark);
      color: var(--white);
      overflow-x: hidden;
  }

  /* LOADER */
  #loader {
      position: fixed;
      inset: 0;
      background: var(--bg-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity .7s ease, visibility .7s ease;
  }

  #loader.hidden {
      opacity: 0;
      visibility: hidden;
  }

  .loader-ring {
      position: relative;
      width: 96px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .loader-ring svg {
      position: absolute;
      top: 0;
      left: 0;
      animation: spin 1.4s linear infinite;
  }

  .loader-logo {
      color: var(--cyan);
      font-size: 30px;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }

  /* TOP BAR */
  #topbar {
      background: #080f17;
      font-size: 13px;
      color: var(--text-muted);
      padding: 8px 0;
      border-bottom: 1px solid #1a2e42;
  }

  #topbar a {
      color: var(--text-muted);
      text-decoration: none;
  }

  #topbar a:hover {
      color: var(--cyan);
  }

  /* NAVBAR */
  .navbar {
      background: var(--bg-nav) !important;
      border-bottom: 1px solid #1a2e42;
      padding: 0;
  }

  .navbar-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 22px;
      color: var(--white) !important;
      padding: 8px 0;
  }

  .brand-icon {
      color: var(--cyan);
      font-size: 26px;
      height: 80px;
      width:
          80px;
  }

  .nav-link {
      color: #ccd !important;
      font-size: 14px;
      font-weight: 500;
      padding: 12px 10px !important;
      position: relative;
  }

  .nav-link.active,
  .nav-link:hover {
      color: var(--cyan) !important;
  }

  .nav-link.active:not(.dropdown-toggle)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 14px;
      right: 14px;
      height: 3px;
      background: var(--cyan);
      border-radius: 2px 2px 0 0;
  }

  .btn-quote {
      background: var(--cyan);
      color: #000 !important;
      font-weight: 600;
      font-size: 14px;
      border: none;
      border-radius: 6px;
      padding: 10px 22px !important;
      transition: all .2s;
  }

  .btn-quote:hover {
      background: #00aadd;
      transform: translateY(-1px);
  }

  .navbar-toggler {
      border: 1px solid #334455;
  }

  .navbar-toggler-icon {
      filter: invert(1);
  }

  /* HERO */
  #hero {
      min-height: 92vh;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
  }

  .hero-bg-img {
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80') center/cover no-repeat;
      opacity: .08;
  }

  .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #0d1f2d 55%, transparent 100%);
  }

  .hero-right-img {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 48%;
      background: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=900&q=80') center/cover no-repeat;
      clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
      opacity: .55;
  }

  .hero-right-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg-dark) 0%, transparent 40%);
  }

  .hero-eyebrow {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: .5px;
      margin-bottom: 18px;
  }

  .hero-title {
      font-size: clamp(36px, 5.5vw, 68px);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 28px;
  }

  .hero-title .highlight {
      display: inline-block;
      border: 2px solid #5a6a7a;
      padding: 0 12px;
  }

  .hero-desc {
      font-size: 17px;
      color: var(--text-muted);
      max-width: 500px;
      line-height: 1.7;
      margin-bottom: 36px;
  }

  .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
  }

  .btn-primary-c {
      background: var(--cyan);
      color: #000;
      font-weight: 700;
      font-size: 15px;
      border: none;
      border-radius: 6px;
      padding: 14px 30px;
      transition: all .2s;
      cursor: pointer;
  }

  .btn-primary-c:hover {
      background: #00aadd;
      transform: translateY(-2px);
  }

  .btn-outline-c {
      background: transparent;
      color: var(--white);
      font-weight: 600;
      font-size: 15px;
      border: 1.5px solid #334455;
      border-radius: 6px;
      padding: 14px 28px;
      transition: all .2s;
      cursor: pointer;
  }

  .btn-outline-c:hover {
      border-color: var(--cyan);
      color: var(--cyan);
  }

  .hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 48px;
      flex-wrap: wrap;
  }

  .hero-stat-num {
      font-size: 32px;
      font-weight: 800;
      color: var(--cyan);
  }

  .hero-stat-label {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
  }

  /* CLIENTS BAR */
  /* #clients {
      background: #090f17;
      border-top: 1px solid #1a2e42;
      border-bottom: 1px solid #1a2e42;
      padding: 30px 0;
  }

  .client-logo {
      height: 50px;
      opacity: 1;
      filter: none;
      transition: opacity .2s;
  }

  .client-logo:hover {
      opacity: 1;
  } */

  @keyframes marquee {
      from {
          transform: translateX(0)
      }

      to {
          transform: translateX(-50%)
      }
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

  /* SECTION COMMON */
  section {
      padding: 90px 0;
  }

  .section-eyebrow {
      font-size: 13px;
      font-weight: 600;
      color: var(--cyan);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 12px;
  }

  .section-title {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 16px;
  }

  .section-desc {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 540px;
      line-height: 1.7;
  }

  /* SERVICES */
  #services {
      background: #0a1a28;
  }

  .service-card {
      background: var(--bg-card);
      border: 1px solid #1a2e42;
      border-radius: 12px;
      overflow: hidden;
      transition: transform .25s, border-color .25s;
      height: 100%;
  }

  .service-card:hover {
      transform: translateY(-6px);
      border-color: var(--cyan);
  }

  .service-card-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      opacity: .75;
      transition: opacity .3s;
  }

  .service-card:hover .service-card-img {
      opacity: 1;
  }

  .service-card-body {
      padding: 24px;
  }

  .service-icon {
      width: 46px;
      height: 46px;
      background: rgba(0, 200, 255, .12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      font-size: 22px;
      color: var(--cyan);
  }

  .service-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 10px;
  }

  .service-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
  }

  .service-link {
      font-size: 13px;
      color: var(--cyan);
      text-decoration: none;
      font-weight: 600;
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
  }

  .navbar,
  .navbar *,
  .dropdown-menu,
  .dropdown-menu * {
      font-family: 'Plus Jakarta Sans', sans-serif;
  }

  /* ─── NAVBAR SHELL ─── */
  .navbar {
      padding: 0;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(0, 198, 255, 0.08);
  }

  /* Navbar container is the positioning reference for mega menus */
  .navbar .container {
      position: relative;
  }

  /* ─── BRAND ─── */
  .brand-text {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #fff 0%, #00c6ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  /* ─── NAV LINKS ─── */
  .navbar-nav .nav-link {
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #c8d8e8 !important;
      position: relative;
      padding: 1.5rem 0.8rem;
      transition: color 0.2s ease;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
      color: #fff !important;
  }

  /* underline — only on non-dropdown links */
  .navbar-nav .nav-item:not(.dropdown) .nav-link::after {
      content: '';
      position: absolute;
      bottom: 10px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #00c6ff, #0072ff);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar-nav .nav-item:not(.dropdown) .nav-link:hover::after,
  .navbar-nav .nav-item:not(.dropdown) .nav-link.active::after {
      width: 70%;
  }

  /* ─── BOOTSTRAP CARET OVERRIDE ─── */
  .navbar-nav .nav-link.dropdown-toggle::after {
      display: inline-block;
      position: relative;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      transform: none;
      width: 0;
      height: 0;
      background: none !important;
      border-top: 4px solid currentColor;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 0;
      border-radius: 0 !important;
      margin-left: 5px;
      vertical-align: middle;
      opacity: 0.6;
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
      content: '';
  }

  /* caret spin */
  .nav-item.dropdown:hover>.nav-link.dropdown-toggle::after {
      transform: rotate(180deg);
      opacity: 1;
  }

  /* ─────────────────────────────────────────
   DROPDOWN CORE  ← THE KEY FIX
   Use opacity+pointer-events, NOT display:none
   This avoids the Bootstrap display:block conflict
──────────────────────────────────────────── */
  .dropdown-menu,
  .mega-menu,
  .industries-mega {
      /* always in DOM, never display:none */
      display: block;
      /* hidden state */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      /* animation */
      transform: translateY(10px) scale(0.97);
      transform-origin: top center;
      transition:
          opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
          visibility 0s linear 0.24s;
      /* styling */
      background: #07162a;
      border: 1px solid rgba(0, 198, 255, 0.14);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      padding: 10px 0;
      z-index: 1050;
      /* position */
      position: absolute;
      top: 100%;
  }

  /* visible state — triggered by parent hover */
  .nav-item.dropdown:hover>.dropdown-menu,
  .nav-item.dropdown:hover>.mega-menu,
  .nav-item.dropdown:hover>.industries-mega {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      transition:
          opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
          visibility 0s linear 0s;
  }

  /* Mega-menu parents: position static so menus anchor to .navbar .container */
  .nav-item.dropdown:has(> .mega-menu),
  .nav-item.dropdown:has(> .industries-mega) {
      position: static;
  }

  /* Hide the nav-item::after bridge entirely — no gap since mega-menu top = navbar bottom */
  .nav-item.dropdown::after {
      display: none !important;
  }

  /* ── DEFINITIVE LINE FIX ──
     Forces all ::after on dropdown nav-links to be invisible (no bg, no height, no absolute).
     Only the CSS-border caret (border-top/left/right) remains — those are untouched here. */
  .navbar-nav .nav-item.dropdown .nav-link::after {
      background: transparent !important;
      background-color: transparent !important;
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      width: 0 !important;
      height: 0 !important;
  }

  /* ─── DROPDOWN ITEMS ─── */
  .dropdown-item {
      font-size: 13px;
      font-weight: 500;
      color: #8da8bf !important;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      margin: 1px 8px;
      width: calc(100% - 16px);
      border-radius: 8px;
      background: transparent;
      transition:
          background 0.16s ease,
          color 0.16s ease,
          transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
      background: rgba(0, 198, 255, 0.09) !important;
      color: #e8f4ff !important;
      transform: translateX(4px);
  }

  .dropdown-item i {
      font-size: 15px;
      opacity: 0.55;
      flex-shrink: 0;
      transition: opacity 0.16s, color 0.16s;
  }

  .dropdown-item:hover i {
      opacity: 1;
      color: #00c6ff;
  }

  /* ─── SECTION HEADERS ─── */
  .dropdown-header {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #00c6ff !important;
      padding: 12px 18px 4px;
      opacity: 0.8;
  }

  /* ─── DIVIDER ─── */
  .dropdown-divider {
      border-color: rgba(0, 198, 255, 0.08);
      margin: 5px 12px;
  }

  /* ─── SERVICES MEGA (3 col) — full container width, content centered ─── */
  .mega-menu {
      left: 0;
      right: 0;
      width: 100%;
      margin-left: 0;
      padding: 14px 0 12px;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
  }

  .mega-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 0 8px;
      max-width: 760px;
      margin: 0 auto;
  }

  .mega-col {
      border-right: 1px solid rgba(0, 198, 255, 0.07);
      padding: 0 4px;
  }

  .mega-col:last-child {
      border-right: none;
  }

  /* ─── INDUSTRIES MEGA (4 col) — full container width, content centered ─── */
  .industries-mega {
      left: 0;
      right: 0;
      width: 100%;
      margin-left: 0;
      padding: 14px 0 12px;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
  }

  .mega-top-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #00c6ff;
      padding: 0 18px 10px;
      opacity: 0.8;
      border-bottom: 1px solid rgba(0, 198, 255, 0.09);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 7px;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
  }

  .ind-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 0 8px;
      max-width: 900px;
      margin: 0 auto;
  }

  .ind-grid .dropdown-item {
      font-size: 12px;
      padding: 5px 12px;
      margin: 1px 4px;
      width: calc(100% - 8px);
      gap: 6px;
  }

  /* ─── CTA BUTTON ─── */
  .btn-quote {
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.08em !important;
      color: #000000 !important;
      border: 1.5px solid rgba(0, 198, 255, 0.4) !important;
      border-radius: 8px !important;
      padding: 0.45rem 1.2rem !important;
      white-space: nowrap;
      transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.25s, transform 0.18s !important;
  }

  .btn-quote:hover {
      background: rgba(0, 198, 255, 0.1) !important;
      border-color: #00c6ff !important;
      color: #fff !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 22px rgba(0, 198, 255, 0.22) !important;
  }

  /* kill any ::after/::before on btn-quote */
  .btn-quote::after,
  .btn-quote::before {
      display: none !important;
  }

  /* ─── TOGGLER ─── */
  .navbar-toggler {
      border: 1px solid rgba(0, 198, 255, 0.25);
      border-radius: 8px;
      padding: 6px 10px;
      transition: border-color 0.2s, background 0.2s;
  }

  .navbar-toggler:hover {
      border-color: rgba(0, 198, 255, 0.6);
      background: rgba(0, 198, 255, 0.06);
  }

  .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%280%2C198%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* ══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE (≤991px)
══════════════════════════════════════ */
  @media (max-width: 991.98px) {

      /* mobile slide panel */
      #navMenu {
          background: #071627;
          border: 1px solid rgba(0, 198, 255, 0.12);
          border-radius: 14px;
          margin-top: 10px;
          padding: 10px 8px 14px;
          max-height: 80vh;
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: rgba(0, 198, 255, 0.2) transparent;
      }

      #navMenu::-webkit-scrollbar {
          width: 4px;
      }

      #navMenu::-webkit-scrollbar-thumb {
          background: rgba(0, 198, 255, 0.2);
          border-radius: 4px;
      }

      /* mobile nav link style */
      .navbar-nav .nav-link {
          padding: 0.65rem 0.75rem;
          border-radius: 8px;
          font-size: 0.9rem;
      }

      .navbar-nav .nav-link:hover {
          background: rgba(0, 198, 255, 0.06);
      }

      /* kill desktop underline */
      .navbar-nav .nav-item:not(.dropdown) .nav-link::after {
          display: none;
      }

      /* on mobile, dropdowns switch to Bootstrap click-toggle (display none/block)
     so we reset our opacity trick and let BS handle it */
      .dropdown-menu,
      .mega-menu,
      .industries-mega {
          display: none;
          /* BS adds/removes .show with display:block */
          opacity: 1 !important;
          visibility: visible !important;
          pointer-events: auto !important;
          transform: none !important;
          transition: none !important;
          position: static !important;
          min-width: 100% !important;
          width: 100% !important;
          left: auto !important;
          margin-left: 0 !important;
          border: none !important;
          border-top: 1px solid rgba(0, 198, 255, 0.07) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: transparent !important;
          padding: 4px 0 8px !important;
      }

      /* BS adds .show class on click */
      .dropdown-menu.show,
      .mega-menu.show,
      .industries-mega.show {
          display: block !important;
          animation: mbSlide 0.2s ease;
      }

      @keyframes mbSlide {
          from {
              opacity: 0;
              transform: translateY(-4px);
          }

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

      /* disable hover trigger on mobile */
      .nav-item.dropdown:hover>.dropdown-menu,
      .nav-item.dropdown:hover>.mega-menu,
      .nav-item.dropdown:hover>.industries-mega {
          display: none;
      }

      .nav-item.dropdown>.dropdown-menu.show,
      .nav-item.dropdown>.mega-menu.show,
      .nav-item.dropdown>.industries-mega.show {
          display: block !important;
      }

      /* collapse mega columns → single col */
      .mega-cols,
      .ind-grid {
          grid-template-columns: 1fr;
      }

      .mega-col {
          border-right: none;
          border-bottom: 1px solid rgba(0, 198, 255, 0.06);
          padding-bottom: 4px;
          margin-bottom: 4px;
      }

      .mega-col:last-child {
          border-bottom: none;
          margin-bottom: 0;
      }

      .dropdown-header {
          font-size: 9.5px;
          padding: 10px 12px 3px;
      }

      .dropdown-item {
          font-size: 13px;
          padding: 7px 14px;
      }

      .ind-grid .dropdown-item {
          font-size: 13px;
          padding: 7px 12px;
      }

      .mega-top-label {
          padding: 0 14px 8px;
      }

      /* CTA full-width */
      .btn-quote {
          display: block !important;
          text-align: center !important;
          margin: 12px 8px 4px !important;
          width: calc(100% - 16px) !important;
          color: #000;
      }
  }

  /* ─── SMALL PHONES ─── */
  @media (max-width: 480px) {
      .brand-text {
          font-size: 1.05rem;
      }

      .navbar-brand img {
          height: 46px !important;
      }
  }

  .hero-section,
  .hero-section * {
      font-family: 'Plus Jakarta Sans', sans-serif;
      box-sizing: border-box;
  }

  /* ══════════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════════ */
  .hero-section {
      background: #081624;
      min-height: 580px;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      position: relative;
  }

  /* animated background particles */
  .hero-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
          radial-gradient(ellipse 600px 400px at 80% 50%, rgba(0, 198, 255, 0.055) 0%, transparent 70%),
          radial-gradient(ellipse 300px 300px at 20% 80%, rgba(0, 114, 255, 0.04) 0%, transparent 60%);
      pointer-events: none;
      animation: bgPulse 6s ease-in-out infinite alternate;
  }

  @keyframes bgPulse {
      from {
          opacity: 0.6;
      }

      to {
          opacity: 1;
      }
  }

  /* ══════════════════════════════════════════
   FLOATING PARTICLES (decorative dots)
══════════════════════════════════════════ */
  .hero-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
  }

  .hero-particles span {
      position: absolute;
      border-radius: 50%;
      background: rgba(0, 198, 255, 0.18);
      animation: floatDot linear infinite;
  }

  .hero-particles span:nth-child(1) {
      width: 4px;
      height: 4px;
      left: 72%;
      top: 15%;
      animation-duration: 9s;
      animation-delay: 0s;
  }

  .hero-particles span:nth-child(2) {
      width: 6px;
      height: 6px;
      left: 85%;
      top: 60%;
      animation-duration: 12s;
      animation-delay: 1s;
  }

  .hero-particles span:nth-child(3) {
      width: 3px;
      height: 3px;
      left: 65%;
      top: 80%;
      animation-duration: 8s;
      animation-delay: 2s;
  }

  .hero-particles span:nth-child(4) {
      width: 5px;
      height: 5px;
      left: 90%;
      top: 30%;
      animation-duration: 11s;
      animation-delay: 0.5s;
  }

  .hero-particles span:nth-child(5) {
      width: 4px;
      height: 4px;
      left: 78%;
      top: 70%;
      animation-duration: 14s;
      animation-delay: 3s;
  }

  .hero-particles span:nth-child(6) {
      width: 3px;
      height: 3px;
      left: 55%;
      top: 20%;
      animation-duration: 10s;
      animation-delay: 1.5s;
  }

  @keyframes floatDot {
      0% {
          transform: translateY(0px) scale(1);
          opacity: 0;
      }

      10% {
          opacity: 1;
      }

      90% {
          opacity: 1;
      }

      100% {
          transform: translateY(-60px) scale(0.7);
          opacity: 0;
      }
  }

  /* ══════════════════════════════════════════
   LEFT PANEL — IMAGE
══════════════════════════════════════════ */
  .hero-left {
      width: 44%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
  }

  /* image zoom on section hover */
  .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transform: scale(1.04);
  }

  .hero-section:hover .hero-img {
      transform: scale(1.08);
  }

  /* image overlay tint */
  .hero-left::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
              rgba(8, 22, 36, 0.18) 0%,
              rgba(8, 22, 36, 0.0) 60%,
              rgba(8, 22, 36, 0.55) 100%);
      pointer-events: none;
  }

  /* shimmer scan line across image */
  .hero-img-shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
              transparent 40%,
              rgba(0, 198, 255, 0.06) 50%,
              transparent 60%);
      background-size: 200% 100%;
      animation: shimmerScan 4s linear 1.2s infinite;
      pointer-events: none;
      z-index: 2;
  }

  @keyframes shimmerScan {
      0% {
          background-position: -100% 0;
      }

      100% {
          background-position: 200% 0;
      }
  }

  /* ── LOGO BOX ── */
  .hero-logo-box {
      position: absolute;
      bottom: 148px;
      left: 50%;
      z-index: 3;
      background: rgba(8, 18, 32, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 198, 255, 0.22);
      border-radius: 16px;
      padding: 16px 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 148px;
      cursor: default;
      /* entry */
      opacity: 0;
      transform: translateX(-50%) translateY(20px) scale(0.9);
      animation: logoEntry 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
      /* hover */
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes logoEntry {
      to {
          opacity: 1;
          transform: translateX(-50%) translateY(0) scale(1);
      }
  }

  .hero-logo-box:hover {
      border-color: rgba(0, 198, 255, 0.55);
      box-shadow: 0 0 28px rgba(0, 198, 255, 0.18), 0 8px 32px rgba(0, 0, 0, 0.4);
      transform: translateX(-50%) translateY(-4px) scale(1.03);
  }

  .logo-icon-wrap {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: linear-gradient(135deg, #00c6ff, #133361);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hero-logo-box:hover .logo-icon-wrap {
      transform: rotate(8deg) scale(1.1);
  }

  .logo-icon-wrap i {
      font-size: 26px;
      color: #fff;
  }

  .logo-name {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.01em;
      transition: color 0.2s;
  }

  .hero-logo-box:hover .logo-name {
      color: #00c6ff;
  }

  /* pulse ring on logo box */
  .logo-pulse {
      position: absolute;
      inset: -1px;
      border-radius: 17px;
      border: 1.5px solid rgba(0, 198, 255, 0.35);
      animation: logoPulseRing 2.5s ease-out 1.4s infinite;
  }

  @keyframes logoPulseRing {
      0% {
          transform: scale(1);
          opacity: 0.6;
      }

      100% {
          transform: scale(1.18);
          opacity: 0;
      }
  }

  /* ── CLIENTS PILL ── */
  .hero-clients-pill {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      background: linear-gradient(135deg, #007bb5, #00c6ff);
      padding: 18px 24px 20px;
      cursor: default;
      /* entry */
      opacity: 0;
      transform: translateX(-100%);
      animation: slideFromLeft 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
  }

  @keyframes slideFromLeft {
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  .hero-clients-pill:hover {
      transform: translateY(-3px);
      box-shadow: 0 -6px 24px rgba(0, 198, 255, 0.3);
  }

  .cp-label {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      line-height: 1.25;
  }

  .cp-divider {
      width: 36px;
      height: 2px;
      background: rgba(255, 255, 255, 0.4);
      margin: 8px 0;
      transition: width 0.35s ease;
  }

  .hero-clients-pill:hover .cp-divider {
      width: 60px;
  }

  .cp-avatars {
      display: flex;
      align-items: center;
      margin-top: 6px;
  }

  .cp-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid rgba(255, 255, 255, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      margin-right: -9px;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.25s ease;
  }

  .cp-avatar.a1 {
      background: #e5566a;
  }

  .cp-avatar.a2 {
      background: #9b59d8;
  }

  .cp-avatar.a3 {
      background: #f06292;
  }

  .hero-clients-pill:hover .cp-avatar {
      margin-right: -2px;
  }

  .hero-clients-pill:hover .cp-avatar.a1 {
      transform: translateY(-4px);
  }

  .hero-clients-pill:hover .cp-avatar.a2 {
      transform: translateY(-7px);
  }

  .hero-clients-pill:hover .cp-avatar.a3 {
      transform: translateY(-4px);
  }

  .cp-avatar-more {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 14px;
      transition: background 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hero-clients-pill:hover .cp-avatar-more {
      background: rgba(255, 255, 255, 0.32);
      transform: scale(1.15);
  }

  /* ══════════════════════════════════════════
   RIGHT PANEL — CONTENT
══════════════════════════════════════════ */
  .hero-right {
      flex: 1;
      background: #0d1f34;
      padding: 54px 56px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  /* corner glow */
  .hero-right::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 340px;
      height: 340px;
      background: radial-gradient(circle, rgba(0, 198, 255, 0.08) 0%, transparent 70%);
      pointer-events: none;
      animation: cornerGlow 4s ease-in-out infinite alternate;
  }

  @keyframes cornerGlow {
      from {
          transform: scale(1);
          opacity: 0.6;
      }

      to {
          transform: scale(1.3);
          opacity: 1;
      }
  }

  /* animated accent bar */
  .hero-accent-bar {
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #00c6ff, #0055ff);
      border-radius: 2px;
      margin-bottom: 20px;
      animation: growBar 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  }

  @keyframes growBar {
      to {
          width: 56px;
      }
  }

  /* eyebrow */
  .hero-eyebrow {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: #00c6ff;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInL 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
  }

  .hero-eyebrow::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 2px;
      background: #00c6ff;
      border-radius: 2px;
      flex-shrink: 0;
  }

  /* headline */
  .hero-headline {
      font-size: clamp(26px, 3.2vw, 44px);
      font-weight: 800;
      line-height: 1.1;
      color: #ffffff;
      letter-spacing: -0.025em;
      margin-bottom: 8px;
      opacity: 0;
      transform: translateX(-60px);
      animation: slideInL 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.38s forwards;
  }

  /* word highlight */
  .hero-headline .hl {
      position: relative;
      display: inline-block;
      color: #00c6ff;
      transition: color 0.3s;
  }

  .hero-headline .hl::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #00c6ff, #0055ff);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero-section:hover .hero-headline .hl::after {
      transform: scaleX(1);
  }

  /* subline */
  .hero-subline {
      font-size: clamp(18px, 2.2vw, 30px);
      font-weight: 500;
      color: #8aaec8;
      letter-spacing: -0.01em;
      margin-bottom: 44px;
      opacity: 0;
      transform: translateX(-60px);
      animation: slideInL 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
  }

  /* ── STAT CARDS ── */
  .hero-stats {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
  }

  .stat-card {
      flex: 1;
      min-width: 155px;
      border-radius: 16px;
      padding: 24px 22px 20px;
      position: relative;
      overflow: hidden;
      cursor: default;
      opacity: 0;
      transform: translateX(-70px) translateY(14px);
      /* hover */
      transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          box-shadow 0.3s ease;
  }

  .stat-card.accent {
      background: linear-gradient(135deg, #0095cc 0%, #00c6ff 100%);
      animation: cardEntry 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s forwards;
  }

  .stat-card.light {
      background: linear-gradient(135deg, #b8e8f8 0%, #d4f0ff 100%);
      animation: cardEntry 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.82s forwards;
  }

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

  .stat-card:hover {
      transform: translateY(-6px) scale(1.03);
  }

  .stat-card.accent:hover {
      box-shadow: 0 18px 48px rgba(0, 198, 255, 0.4);
  }

  .stat-card.light:hover {
      box-shadow: 0 18px 48px rgba(0, 140, 200, 0.25);
  }

  /* card inner glow sweep */
  .stat-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 60%;
      height: 200%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.18), transparent);
      transform: skewX(-20deg);
      transition: left 0.6s ease;
  }

  .stat-card:hover::before {
      left: 140%;
  }

  /* check icon */
  .stat-check {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .stat-card.accent .stat-check {
      background: rgba(255, 255, 255, 0.22);
  }

  .stat-card.light .stat-check {
      background: rgba(0, 130, 180, 0.14);
  }

  .stat-check i {
      font-size: 16px;
  }

  .stat-card.accent .stat-check i {
      color: #fff;
  }

  .stat-card.light .stat-check i {
      color: #0072aa;
  }

  .stat-card:hover .stat-check {
      transform: rotate(360deg) scale(1.15);
  }

  /* number — count-up animation handled by JS */
  .stat-number {
      font-size: clamp(32px, 3.8vw, 50px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      margin-bottom: 8px;
      transition: transform 0.3s ease;
  }

  .stat-card.accent .stat-number {
      color: #fff;
  }

  .stat-card.light .stat-number {
      color: #0b1c2e;
  }

  .stat-card:hover .stat-number {
      transform: scale(1.06);
  }

  .stat-label {
      font-size: 13px;
      font-weight: 600;
      position: relative;
      z-index: 1;
  }

  .stat-card.accent .stat-label {
      color: rgba(255, 255, 255, 0.85);
  }

  .stat-card.light .stat-label {
      color: #1a4060;
  }

  /* ── KEYFRAMES ── */
  @keyframes slideInL {
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  /* SCROLL ANIMATIONS */
  @keyframes slideInFromRight {
      from {
          opacity: 0;
          transform: translateX(100px);
      }
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes slideInFromLeft {
      from {
          opacity: 0;
          transform: translateX(-100px);
      }
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  .scroll-animate {
      opacity: 0;
      transform: translateX(0);
  }

  .scroll-animate.animate-right {
      animation: slideInFromRight 0.8s ease-out forwards;
  }

  .scroll-animate.animate-left {
      animation: slideInFromLeft 0.8s ease-out forwards;
  }

  /* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
  @media (max-width: 900px) {
      .hero-section {
          flex-direction: column;
          min-height: auto;
      }

      .hero-left {
          width: 100%;
          height: 320px;
      }

      .hero-right {
          padding: 38px 28px 36px;
      }

      .hero-logo-box {
          bottom: 105px;
      }
  }

  @media (max-width: 540px) {
      .hero-right {
          padding: 28px 18px 30px;
      }

      .stat-card {
          min-width: 140px;
          padding: 18px 16px;
      }

      .hero-stats {
          gap: 12px;
      }

      .hero-subline {
          margin-bottom: 28px;
      }
  }
  h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color:var(--white);
  font-weight:700;
}

a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}

::selection{ background: var(--cyan); color:#fff;}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--cyan-dark); border-radius:10px;}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; background:var(--navy);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.loaded{opacity:0; visibility:hidden;}
.loader-box{text-align:center;}
.loader-logo{
  font-family:var(--font-head); font-weight:700; font-size:2rem; color:#fff;
  display:block; margin-bottom:1rem; letter-spacing:1px;
}
.loader-logo i{color:var(--cyan);}
.loader-bar{
  width:180px; height:4px; background:rgba(255,255,255,.15); border-radius:10px;
  overflow:hidden; margin:0 auto;
}
.loader-bar span{
  display:block; height:100%; width:0%; background:var(--cyan);
  animation: loadbar 1.4s ease-in-out forwards;
}
@keyframes loadbar{ to{width:100%;} }

/* ---------- Buttons ---------- */
.btn-cyan{
  background:var(--cyan); color:#06262c !important; font-weight:600;
  border:none; padding:.7rem 1.6rem; transition: all .35s ease;
}
.btn-cyan:hover{ background:#fff; color:#06262c !important; transform:translateY(-3px); box-shadow:0 10px 20px rgba(30,203,225,.35);}
.btn-dark-outline{
  border:2px solid #fff; color:#fff !important; padding:.65rem 1.5rem; font-weight:600;
  transition:all .35s ease; display:inline-flex; align-items:center; gap:.4rem;
}
.btn-dark-outline:hover{ background:#fff; color:var(--navy) !important;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--cyan); font-weight:600; text-transform:uppercase;
  font-size:.85rem; letter-spacing:1px; margin-bottom:.8rem;
}

.section-title{
  font-size:2.6rem; line-height:1.25; margin-bottom:0;
}
.section-title span{ color: var(--cyan);}

/* ============ TOP BAR ============ */
.topbar{
  background:#081720; font-size:.85rem; padding:.5rem 0; color:var(--text-light);
}
.topbar-left span{margin-right:1.5rem;}
.topbar-left i{color:var(--cyan); margin-right:.3rem;}
.topbar-right a{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06);
  margin-left:.4rem; transition:.3s;
}
.topbar-right a:hover{background:var(--cyan); color:#06262c;}

/* ============ NAVBAR ============ */
.main-nav{
  background:var(--navy); padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  transition: all .35s ease;
  z-index: 1030;
}
.main-nav.scrolled{
  padding:.6rem 0; background:#0a1c25; box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.navbar-brand{
  font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:#fff !important;
  display:flex; align-items:center; gap:.5rem;
}
.logo-icon{
  width:38px; height:38px; background:var(--cyan); color:#06262c;
  display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
}
.navbar-nav .nav-link{
  color:var(--text-light) !important; font-weight:500; margin:0 .8rem; position:relative;
  transition:.3s;
}
.navbar-nav .nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--cyan);
  transition:width .3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{color:#fff !important;}
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{width:100%;}

/* ============ HERO ============ */
.hero-section{
  position:relative; padding:3rem 0 5rem; overflow:hidden;
}
.hero-bg-circle{
  position:absolute; top:-100px; right:-150px; width:500px; height:500px;
  border:1px solid rgba(255,255,255,.06); border-radius:50%;
}
.hero-bg-circle::before{
  content:''; position:absolute; inset:60px; border:1px solid rgba(255,255,255,.06); border-radius:50%;
}
.hero-img-wrap{ position:relative; }
.hero-main-img{
  width:100%; border-radius:20px; object-fit:cover; height:480px;
}
.hero-badge-logo{
  position:absolute; left:30%; top:38%; background:var(--navy);
  color:#fff; font-weight:700; font-size:1.1rem; padding:1.6rem 1.8rem; border-radius:14px;
  display:flex; align-items:center; gap:.5rem; box-shadow:0 15px 30px rgba(0,0,0,.4);
}
.hero-badge-logo i{color:var(--cyan); font-size:1.4rem;}
.hero-clients-card{
  position:absolute; left:0; bottom:0; background:var(--cyan); color:#06262c;
  padding:1.4rem 1.6rem; border-radius:0 16px 0 16px; width:230px;
}
.hero-clients-card h6{color:#06262c; font-weight:700; margin-bottom:.7rem;}
.avatar-stack{display:flex; align-items:center;}
.avatar-stack img{
  width:36px; height:36px; border-radius:50%; border:2px solid #fff; object-fit:cover;
  margin-left:-10px;
}
.avatar-stack img:first-child{margin-left:0;}
.avatar-plus{
  width:36px; height:36px; border-radius:50%; background:#06262c; color:#fff;
  display:flex; align-items:center; justify-content:center; margin-left:-10px;
  font-size:.85rem; border:2px solid #fff;
}
.small-stack img, .small-stack .avatar-plus{width:28px; height:28px;}

.hero-title{font-size:2.7rem; line-height:1.3;}
.hero-title span{display:block; color:var(--cyan); -webkit-text-fill-color: var(--cyan);}

.stat-card{
  border-radius:16px; padding:1.6rem; position:relative; height:100%;
  transition: transform .4s ease;
}
.stat-card:hover{ transform:translateY(-8px);}
.stat-cyan{background:var(--cyan); color:#06262c;}
.stat-light{background:var(--mint); color:#06262c;}
.stat-check{
  width:42px; height:42px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; color:#06262c;
}
.stat-card h2{
  display:inline-block; font-size:2.6rem; color:#06262c; margin:0;
}
.stat-suffix{font-size:2.6rem; font-weight:700; font-family:var(--font-head); color:#06262c;}
.stat-card p{margin:.4rem 0 0; font-weight:500; color:#06262c;}

/* ============ BRAND STRIP ============ */
.brand-strip{
  background:var(--navy-light); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05);
}
.brand-row span{
  color:var(--text-light); font-weight:600; font-size:1.1rem; opacity:.6; transition:.3s;
}
.brand-row span:hover{opacity:1; color:var(--cyan);}
.brand-row i{margin-right:.4rem;}

/* ============ ABOUT ============ */
.about-section{padding:6rem 0;}
.mission-thumb{width:70px; height:70px; border-radius:12px; object-fit:cover; flex-shrink:0;}
.check-list li{margin-bottom:.5rem; color:#fff; font-weight:500;}
.check-list i{color:var(--cyan); margin-right:.5rem;}

.teckko-accordion .accordion-item{
  background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.12);
}
.teckko-accordion .accordion-button{
  background:transparent; color:#fff; font-weight:600; font-size:1.15rem;
  box-shadow:none; padding:1.1rem 0;
}
.teckko-accordion .accordion-button:not(.collapsed){color:var(--cyan);}
.teckko-accordion .accordion-button::after{
  filter: invert(1);
}
.teckko-accordion .accordion-body{padding:0 0 1.3rem;}
.about-img-wrap img{height:520px; object-fit:cover;}

/* marquee */
.marquee-wrap{
  overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  padding:1.2rem 0;
}
.marquee-track{
  display:flex; white-space:nowrap; animation: marquee 18s linear infinite; width:max-content;
}
.marquee-track span{
  font-family:var(--font-head); font-size:1.6rem; font-weight:700; color:rgba(255,255,255,.18);
  margin-right:2.5rem; display:flex; align-items:center; gap:1.5rem;
}
.marquee-track span i{color:var(--cyan); font-size:1rem;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============ SERVICES ============ */
.services-section{
  position:relative; padding:6rem 0; background:var(--navy-light); overflow:hidden;
}
.big-bg-text{
  position:absolute; top:0; left:0; width:100%; text-align:center;
  font-size:7rem; font-weight:800; font-family:var(--font-head);
  color:rgba(255,255,255,.03); white-space:nowrap; line-height:1; z-index:0;
  pointer-events:none;
}
.light-text{color:rgba(255,255,255,.04);}
.service-card{
  background:var(--navy-card); border-radius:18px; padding:2.2rem; height:100%;
  position:relative; transition: all .4s ease; border:1px solid rgba(255,255,255,.05);
}
.service-card:hover{ transform:translateY(-10px); background:#173541; box-shadow:0 20px 40px rgba(0,0,0,.35);}
.service-icon{
  width:60px; height:60px; border-radius:14px; background:rgba(30,203,225,.12);
  color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom:1.3rem; transition:.4s;
}
.service-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  flex-shrink: 0;
}
.service-card:hover .service-icon{background:var(--cyan); color:#06262c;}
.service-plus svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.service-card h4{font-size:1.25rem; margin-bottom:.6rem;}
.service-card p{font-size:.95rem; margin-bottom:1.3rem;}
.service-img{width:100%; height:180px; object-fit:cover; border-radius:12px;}
.service-plus{
  position:absolute; right:2rem; bottom:2rem; width:42px; height:42px; border-radius:50%;
  background:var(--cyan); color:#06262c; display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.service-plus:hover{ background:#fff; transform:rotate(90deg);}

/* ============ PROMO STRIP ============ */
.promo-strip{
  background:var(--cyan); color:#06262c; padding:1.1rem 0; font-weight:600;
  transition: all .4s ease; max-height:200px; overflow:hidden;
}
.promo-strip.hide{max-height:0; padding:0;}
.promo-left i{margin-right:.5rem;}
.promo-left a{
  text-decoration:underline; font-weight:700; margin-left:.6rem;
}
.btn-close-promo{
  background:transparent; border:none; color:#06262c; font-size:1.1rem; margin-left:1rem;
}

/* ============ TEAM ============ */
.team-section{padding:6rem 0;}
.slider-arrow{
  width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.slider-arrow:hover, .slider-arrow.active{background:var(--cyan); color:#06262c; border-color:var(--cyan);}
.team-card{
  background:var(--navy-card); border-radius:16px; overflow:hidden; padding:0 0 1.4rem;
  border:1px solid rgba(255,255,255,.05); position:relative; transition:.4s;
}
.team-card:hover{transform:translateY(-8px);}
.team-card img{width:100%; height:300px; object-fit:cover;}
.team-plus{
  position:absolute; top:265px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--cyan); color:#06262c;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(0,0,0,.3);
}
.team-card h5{margin:1.6rem 1.4rem 0; font-size:1.1rem;}
.team-card p{margin:.2rem 1.4rem 0; color:var(--cyan); font-size:.9rem;}

/* ============ FEATURES CAROUSEL ============ */
.features-section{padding:6rem 0; background:var(--navy-light);}
.feature-title{font-size:1.6rem; margin-bottom:1rem;}
.feature-title span{color:var(--cyan);}
.feature-img{height:280px; object-fit:cover;}
.feature-plus{
  display:inline-flex; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  align-items:center; justify-content:center; margin-top:1rem; transition:.3s;
}
.feature-plus:hover{background:var(--cyan); border-color:var(--cyan); color:#06262c;}
.carousel-dots{display:flex; justify-content:center; gap:.5rem; margin-top:3rem;}
.carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.25);
  padding:0; transition:.3s;
}
.carousel-dots button.active{background:var(--cyan); width:26px; border-radius:6px;}
.dark-dots button{background:rgba(255,255,255,.2);}

/* ============ TESTIMONIALS ============ */
.testimonial-section{padding:6rem 0;}
.quote-icon{color:var(--cyan); display:block; margin-bottom:1rem;}
.testi-text{font-size:1.3rem; color:#fff; font-weight:500; line-height:1.6; margin-bottom:1.5rem;}
.testi-role{color:var(--cyan);}
.testi-grid{position:relative;}
.testi-avatar{width:100%; object-fit:cover; border-radius:16px;}
.testi-avatar.big{height:220px;}
.testi-avatar.small{height:180px;}
.offset-img{margin-top:2rem;}

/* ============ CONTACT ============ */
.contact-section{ min-height:600px; }
.contact-img-col{position:relative; min-height:500px; overflow:hidden;}
.contact-img-col img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.contact-overlay{
  position:absolute; left:0; bottom:0; background:var(--cyan); color:#06262c;
  padding:2.5rem; width:100%; max-width:420px;
}
.contact-overlay .eyebrow{color:#06262c;}
.contact-overlay h2{color:#06262c; font-size:2rem;}
.contact-form-col{background:var(--mint); display:flex; align-items:center;}
.contact-form-wrap{padding:4rem; color:#06262c; width:100%;}
.contact-form-wrap h2{color:#06262c; text-align:center;}
.contact-form-wrap p{color:#345; text-align:center; margin-bottom:2rem;}
.input-icon-group{position:relative;}
.input-icon-group input, .input-icon-group textarea{padding-right:2.6rem;}
.input-icon-group i{position:absolute; right:1rem; top:1rem; color:#88a;}
.contact-form-wrap .form-control, .contact-form-wrap .form-select{
  border:1px solid #cfe3e0; padding:.85rem 1rem; background:#fff;
}
.contact-form-wrap .form-control:focus, .contact-form-wrap .form-select:focus{
  box-shadow:0 0 0 .2rem rgba(30,203,225,.25); border-color:var(--cyan);
}

/* ============ BLOG ============ */
.blog-section{padding:6rem 0;}
.blog-card{
  background:var(--navy-card); border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.05);
  transition:.4s; height:100%;
}
.blog-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.35);}
.blog-card img{width:100%; height:220px; object-fit:cover;}
.blog-body{padding:1.6rem;}
.blog-date{color:var(--cyan); font-size:.85rem;}
.blog-card h5{margin:.8rem 0 1.2rem; font-size:1.15rem; line-height:1.4;}
.blog-readmore{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.25);
  border-radius:30px; padding:.5rem 1.2rem; font-size:.9rem; font-weight:600; color:#fff; transition:.3s;
}
.blog-readmore:hover{background:var(--cyan); border-color:var(--cyan); color:#06262c;}

/* ============ FOOTER ============ */
.footer-section,
.about-footer {
  background: var(--navy-light);
  padding: 5rem 0 0;
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
}

/* brand */
.footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.footer-brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
}
.footer-brand-name span { color: var(--cyan); }

.footer-tagline {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

/* socials */
.footer-socials {
  display: flex;
  gap: 8px;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.footer-socials a:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06262c;
  transform: translateY(-3px) scale(1.12);
}

/* col title */
.footer-col-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: .55rem;
  font-family: var(--font-head);
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: width .3s ease;
}
.footer-col-title:hover::after { width: 50px; }

/* links */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a {
  font-size: 13.5px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .22s ease;
}
.footer-links a i { font-size: 12px; color: var(--cyan); opacity: .6; transition: opacity .2s, transform .2s; }
.footer-links a:hover { color: var(--cyan); padding-left: 4px; }
.footer-links a:hover i { opacity: 1; transform: translateX(2px); }

/* contact list */
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: .85rem;
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.5;
}
.footer-contact-list i {
  color: var(--cyan);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.footer-contact-list a {
  color: var(--text-light);
  transition: color .2s;
}
.footer-contact-list a:hover { color: var(--cyan); }

/* newsletter */
.footer-subscribe-form { margin-bottom: .5rem; }
.footer-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.footer-input-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,200,255,.1);
}
.footer-input-wrap > i {
  font-size: 16px;
  color: var(--text-light);
  padding: 0 12px;
  flex-shrink: 0;
}
.footer-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13.5px;
  padding: 11px 0;
}
.footer-input-wrap input::placeholder { color: var(--text-light); }
.footer-input-wrap button {
  background: var(--cyan);
  border: none;
  color: #06262c;
  padding: 0 16px;
  height: 100%;
  min-height: 44px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-input-wrap button:hover { background: #00aadd; }
.footer-note {
  font-size: 12px;
  color: var(--text-light);
  margin: .4rem 0 0;
}
.footer-note a { color: var(--cyan); text-decoration: underline; }

/* QR card */
.footer-qr-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 150px;
  margin-bottom: .7rem;
  border: 2px solid rgba(0,200,255,.2);
  transition: border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  cursor: default;
}
.footer-qr-card:hover {
  border-color: var(--cyan);
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 32px rgba(0,200,255,.2);
}
.footer-qr-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.footer-qr-label {
  font-size: 11px;
  font-weight: 700;
  color: #0d1f2d;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-qr-label i { color: var(--cyan); font-size: 14px; }
.footer-qr-note {
  font-size: 11.5px;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0;
}

/* divider */
.footer-divider { border-color: rgba(255,255,255,.08); margin: 3rem 0 1.5rem; }

/* bottom bar */
.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.6rem;
  gap: 12px;
}
.footer-bottom-bar p {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}
.footer-bottom-bar strong { color: #fff; }
.footer-bottom-links {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.footer-bottom-links li a, .footer-bottom-links a {
  font-size: 12.5px;
  color: var(--text-light);
  transition: color .2s;
}
.footer-bottom-links li a:hover, .footer-bottom-links a:hover { color: var(--cyan); }

/* old subscribe compat */
.subscribe-form .form-control { padding:.85rem 1rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; }
.subscribe-form .form-control::placeholder { color:#9ab; }
.subscribe-form .input-icon-group i { color:#9ab; }

/* responsive */
@media (max-width: 991px) {
  .footer-section, .about-footer { padding: 3.5rem 0 0; }
  .footer-qr-card { max-width: 130px; }
}
@media (max-width: 575px) {
  .footer-bottom-bar { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { gap: .8rem; }
}

/* ============ BACK TO TOP ============ */
#backToTop{
  position:fixed; right:30px; bottom:30px; width:48px; height:48px; border-radius:50%;
  background:var(--cyan); color:#06262c; border:none; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; opacity:0; visibility:hidden; transform:translateY(15px); transition:all .35s ease; z-index:999;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}
#backToTop.show{opacity:1; visibility:visible; transform:translateY(0);}
#backToTop:hover{background:#fff;}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px){
  .hero-title{font-size:2.1rem;}
  .section-title{font-size:1.9rem;}
  .big-bg-text{font-size:4rem;}
  .hero-badge-logo{left:10%; top:30%; padding:1rem 1.2rem; font-size:.95rem;}
  .navbar-collapse{background:var(--navy); padding:1rem; border-radius:12px; margin-top:1rem;}
  .contact-overlay{position:relative; max-width:100%;}
  .contact-img-col{min-height:380px;}
}
@media (max-width: 575px){
  .hero-main-img{height:340px;}
  .hero-clients-card{width:170px; padding:1rem;}
  .stat-card h2, .stat-suffix{font-size:1.8rem;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  *{transition:none !important; animation:none !important;}
}

/* ============ SIDE ICONS ============ */
.side-icons {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 997;
}

.side-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(13, 31, 45, 0.92);
  border: 1px solid rgba(0, 200, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccd8e8;
  text-decoration: none;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.side-icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s;
  stroke: currentColor;
}

.side-icon-btn:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06262c;
  transform: translateX(5px) scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 200, 255, 0.45);
}

.side-icon-btn:hover svg {
  transform: scale(1.15);
}

/* tooltip label on hover */
.side-icon-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #0d1f2d;
  border: 1px solid rgba(0, 200, 255, 0.22);
  color: #00c8ff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.side-icon-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* active indicator dot */
.side-icon-btn.active-side {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #000;
}

.side-icon-btn.active-side::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--cyan);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .side-icons { display: none; }
}

/* ============ SCROLL PROGRESS BUTTON ============ */
#scrollProgressBtn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 72px;
  height: 72px;
  cursor: pointer;
  z-index: 9998;
  display: none;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#scrollProgressBtn:hover {
  transform: scale(1.12) translateY(-3px);
}

/* dark background inner circle */
#scrollProgressBtn::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #183554 0%, #0d1f2d 100%);
  z-index: 1;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

/* outer animated glow */
.spb-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,255,0.35) 0%, transparent 68%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#scrollProgressBtn:hover .spb-glow {
  opacity: 1;
  animation: spbGlowPulse 1.6s ease-in-out infinite;
}

@keyframes spbGlowPulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%       { transform: scale(1.3); opacity: 1;   }
}

/* tooltip */
.spb-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #0d1f2d;
  border: 1px solid rgba(0,200,255,0.22);
  color: #00c8ff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.spb-tooltip::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-right: none;
  border-left-color: rgba(0,200,255,0.22);
}

#scrollProgressBtn:hover .spb-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* SVG ring */
.spb-svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  z-index: 0;
}

.spb-track {
  fill: none;
  stroke: #1a3050;
  stroke-width: 4.5;
}

.spb-inner-ring {
  fill: none;
  stroke: rgba(0,200,255,0.06);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.spb-fill {
  fill: none;
  stroke: url(#spbGrad);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 188.5;   /* 2 * π * 30 = 188.5 */
  stroke-dashoffset: 188.5;
  transition: stroke-dashoffset 0.15s linear;
}

/* tick marks */
.spb-ticks line {
  stroke: rgba(0,200,255,0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* center icon + % */
.spb-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  gap: 2px;
}

.spb-icon {
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.3s;
}

#scrollProgressBtn:hover .spb-icon {
  color: #00c8ff;
  transform: translateY(-3px) scale(1.15);
}

.spb-pct {
  font-size: 9px;
  font-weight: 800;
  color: #00c8ff;
  letter-spacing: 0.4px;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  transition: color 0.3s;
}

#scrollProgressBtn:hover .spb-pct {
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   FULL RESPONSIVE OVERRIDES
═══════════════════════════════════════════════════ */

/* ── Tablet landscape / small desktop (992px–1199px) ── */
@media (max-width: 1199px) {
  .navbar-nav .nav-link {
    padding: 1.5rem 0.55rem;
    font-size: 0.82rem;
  }
  .btn-quote {
    padding: 0.42rem 0.9rem !important;
    font-size: 0.75rem !important;
  }
}

/* ── Topbar responsive ── */
@media (max-width: 767px) {
  #topbar .d-flex.justify-content-between {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start !important;
  }
  #topbar .d-flex.gap-4 {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #topbar .d-flex.gap-3 {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  #topbar {
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  #topbar {
    display: none;
  }
}

/* ── Marquee section ── */
@media (max-width: 575px) {
  [style*="padding:60px 40px"] {
    padding: 40px 16px 50px !important;
  }
}

/* ── About section image ── */
@media (max-width: 991px) {
  .about-img-wrap img {
    height: 360px;
  }
}
@media (max-width: 575px) {
  .about-img-wrap img {
    height: 260px;
  }
  .section-title {
    font-size: 1.65rem;
  }
  .teckko-accordion .accordion-button {
    font-size: 1rem;
  }
}

/* ── Services section ── */
@media (max-width: 767px) {
  .services-section {
    padding: 4rem 0;
  }
  .big-bg-text {
    font-size: 3rem;
  }
  .service-card {
    padding: 1.6rem;
  }
  .service-img {
    height: 150px;
  }
}

/* ── Promo strip ── */
@media (max-width: 767px) {
  .promo-strip .d-flex.flex-wrap {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start !important;
  }
  .promo-left {
    font-size: 0.9rem;
  }
}

/* ── Team section ── */
@media (max-width: 575px) {
  .team-section {
    padding: 4rem 0;
  }
  .team-card img {
    height: 250px;
  }
  .team-plus {
    top: 215px;
  }
}

/* ── Features carousel ── */
@media (max-width: 767px) {
  .features-section {
    padding: 4rem 0;
  }
  .feature-img {
    height: 220px;
    margin-bottom: 1.5rem;
  }
  .feature-title {
    font-size: 1.3rem;
  }
}
@media (max-width: 575px) {
  .carousel-dots {
    margin-top: 1.5rem;
  }
}

/* ── Testimonial section ── */
@media (max-width: 767px) {
  .testi-text {
    font-size: 1.05rem;
  }
  .testi-avatar.big {
    height: 160px;
  }
  .testi-avatar.small {
    height: 130px;
  }
}

/* ── Contact section ── */
@media (max-width: 991px) {
  .contact-section {
    min-height: 0;
  }
  .contact-form-wrap {
    padding: 2.5rem 1.5rem;
  }
  .contact-overlay h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 575px) {
  .contact-form-wrap {
    padding: 2rem 1rem;
  }
  .contact-form-wrap h2 {
    font-size: 1.6rem;
  }
  .contact-img-col {
    min-height: 280px;
  }
}

/* ── Blog section ── */
@media (max-width: 767px) {
  .blog-section {
    padding: 4rem 0;
  }
  .blog-card img {
    height: 180px;
  }
}

/* ── Footer adjustments ── */
@media (max-width: 767px) {
  .footer-section, .about-footer {
    padding: 3rem 0 0;
  }
  .footer-brand-name {
    font-size: 1.1rem;
  }
}
@media (max-width: 575px) {
  .footer-bottom-bar {
    text-align: center;
  }
  .footer-col-title {
    margin-top: 1rem;
  }
}

/* ── Side icons: hide on touch screens ── */
@media (max-width: 991px) {
  .side-icons {
    display: none;
  }
}

/* ── Scroll progress button: shrink on mobile ── */
@media (max-width: 575px) {
  #scrollProgressBtn {
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 16px;
  }
  #backToTop {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ── Mega menu on medium screens (992px–1199px): limit height and add scroll ── */
@media (min-width: 992px) and (max-width: 1199px) {
  .mega-menu,
  .industries-mega {
    max-height: 80vh;
    overflow-y: auto;
  }
  .mega-cols {
    max-width: 680px;
  }
  .ind-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
  }
}

/* ── Mobile mega-menu: reset position and make full-width ── */
@media (max-width: 991.98px) {
  .nav-item.dropdown:has(> .mega-menu),
  .nav-item.dropdown:has(> .industries-mega) {
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SERVICE ENQUIRY MODAL
═══════════════════════════════════════════════════════════ */

.svc-modal-dialog {
  max-width: 720px;
}

.svc-modal-content {
  background: #061120;
  border: 1px solid rgba(0, 198, 255, 0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 198, 255, 0.06);
}

/* ── Header ── */
.svc-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, #0a1f40 0%, #061120 60%);
  border-bottom: 1px solid rgba(0, 198, 255, 0.12);
  position: relative;
}

.svc-modal-icon-wrap {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 198, 255, 0.18) 0%, rgba(0, 114, 255, 0.12) 100%);
  border: 1px solid rgba(0, 198, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #00c6ff;
  box-shadow: 0 4px 20px rgba(0, 198, 255, 0.15);
  margin-top: 2px;
}

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

.svc-modal-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00c6ff;
  background: rgba(0, 198, 255, 0.1);
  border: 1px solid rgba(0, 198, 255, 0.2);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.svc-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.svc-modal-desc {
  font-size: 0.875rem;
  color: #94a8bc;
  margin: 0;
  line-height: 1.6;
}

.svc-modal-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a8bc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 2px;
}
.svc-modal-close:hover {
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.3);
  color: #ff6b6b;
}

/* ── Body / Form ── */
.svc-modal-body {
  padding: 24px 28px 28px;
}

.svc-form-label-top {
  font-size: 0.8rem;
  color: #6b8299;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.svc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.svc-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #c8d8e8;
  letter-spacing: 0.03em;
}
.svc-field-label span {
  color: #00c6ff;
}

.svc-field-wrap {
  position: relative;
}

.svc-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #4a6a85;
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.2s;
}

.svc-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #e0eaf4;
  font-size: 0.875rem;
  padding: 11px 14px 11px 38px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.svc-input::placeholder {
  color: #3a5269;
}
.svc-input:focus {
  border-color: rgba(0, 198, 255, 0.5);
  background: rgba(0, 198, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.08);
  color: #fff;
}
.svc-input:focus + .svc-field-icon,
.svc-field-wrap:focus-within .svc-field-icon {
  color: #00c6ff;
}

.svc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a6a85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.svc-select option {
  background: #061120;
  color: #e0eaf4;
}

.svc-textarea {
  padding: 11px 14px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.6;
}
.svc-field:has(.svc-textarea) .svc-field-wrap .svc-field-icon {
  display: none;
}

/* ── Submit Button ── */
.svc-submit-btn {
  width: 100%;
  padding: 13px 24px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 6px 24px rgba(0, 114, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.svc-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.2s;
}
.svc-submit-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0, 114, 255, 0.45);
}
.svc-submit-btn:active {
  transform: translateY(0);
}
.svc-submit-btn.sending {
  opacity: 0.7;
  pointer-events: none;
}
.svc-submit-btn.sent {
  background: linear-gradient(135deg, #00c084 0%, #00a86b 100%);
  box-shadow: 0 6px 24px rgba(0, 160, 107, 0.35);
}

/* ── Modal backdrop tweak ── */
.modal-backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .svc-modal-dialog {
    margin: 12px;
  }
  .svc-modal-header {
    padding: 20px 18px 18px;
    gap: 14px;
  }
  .svc-modal-body {
    padding: 18px 18px 22px;
  }
  .svc-modal-icon-wrap {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  .svc-modal-title {
    font-size: 1.05rem;
  }
  .svc-input {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* ═══════════ BAAKI DARK SECTIONS → LIGHT (END mein paste) ═══════════ */

/* topbar → blue */
#topbar, .topbar{ background:#1e3a8a !important; color:#cdd9ee; }
#topbar a, .topbar a, .topbar-left span, .topbar-left i{ color:#cdd9ee !important; }
#topbar a:hover, .topbar a:hover{ color:#fff !important; }
.topbar-right a{ background:rgba(255,255,255,.12); }

/* hero (top split) → light + readable text */
.hero-section{ background:#f4f7fb !important; }
.hero-right{ background:#ffffff !important; }
.hero-headline, .hero-title{ color:#0f172a !important; }
.hero-headline .hl, .hero-title span{ color:#2563eb !important; -webkit-text-fill-color:#2563eb; }
.hero-subline{ color:#52677d !important; }
.hero-eyebrow{ color:#2563eb !important; }
.hero-eyebrow::before, .hero-accent-bar{ background:#2563eb !important; }
.hero-logo-box{ background:rgba(255,255,255,.92) !important; border-color:rgba(37,99,235,.25) !important; }
.logo-name{ color:#16263a !important; }

/* services + stats + popular-service + about sections (hardcoded darks) */
#services{ background:#f4f7fb !important; }
.stats-strip, .why-section, .about-hero, .accordion-section{ background:#f4f7fb !important; }
.hero-section, [style*="#081624"], [style*="#0a1826"], [style*="#0a1a28"]{ background:#f4f7fb !important; }

/* marquee strip */
.marquee-wrap{ background:#f4f7fb !important; border-color:#e6ecf3 !important; }
.marquee-track span{ color:rgba(30,58,138,.20) !important; }
.marquee-track span i{ color:#2563eb !important; }

/* navbar / dropdown / mega → light */
.navbar, .main-nav{ background:#ffffff !important; border-bottom:1px solid #e6ecf3 !important; }
.main-nav.scrolled{ background:#ffffff !important; box-shadow:0 8px 24px rgba(30,58,138,.08); }
.navbar-brand, .navbar-brand *{ color:#1e3a8a !important; }
.brand-text{ -webkit-text-fill-color:#1e3a8a; background:none; }
.nav-link, .navbar-nav .nav-link{ color:#16263a !important; }
.nav-link:hover, .nav-link.active, .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{ color:#2563eb !important; }
.dropdown-menu, .mega-menu, .industries-mega{ background:#ffffff !important; border:1px solid #e6ecf3 !important; box-shadow:0 24px 60px rgba(15,23,42,.14) !important; }
.dropdown-item{ color:#3a4a5c !important; }
.dropdown-item:hover, .dropdown-item:focus{ background:rgba(37,99,235,.09) !important; color:#1e3a8a !important; }
.dropdown-header, .mega-top-label{ color:#2563eb !important; }

/* headings/text that were white → dark */
.testi-text{ color:#33455a !important; }
.check-list li{ color:#16263a !important; }
.teckko-accordion .accordion-button{ color:#16263a !important; }
.teckko-accordion .accordion-button:not(.collapsed){ color:#2563eb !important; }
.teckko-accordion .accordion-button::after{ filter:none !important; }
.teckko-accordion .accordion-item{ border-bottom-color:#e6ecf3 !important; }

/* cards: white borders → light grey */
.service-card, .team-card, .blog-card, .value-card, .testi-card,
.brand-strip, .features-section, .footer-section, .about-footer{ border-color:#e6ecf3 !important; }
.service-card:hover{ background:#ffffff !important; box-shadow:0 20px 40px rgba(37,99,235,.14) !important; }

/* footer text → dark */
.footer-brand-name{ color:#0f172a !important; }
.footer-col-title{ color:#0f172a !important; }
.footer-bottom-bar strong{ color:#0f172a !important; }
.footer-input-wrap{ background:#fff !important; border-color:#dbe4f3 !important; }
.footer-input-wrap input{ color:#16263a !important; }

/* side icons / modal */
.side-icon-btn{ background:#ffffff !important; border-color:#dbe4f3 !important; color:#1e3a8a !important; }
.side-icon-btn:hover{ background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; }
.svc-modal-content{ background:#ffffff !important; border-color:#dbe4f3 !important; }
.svc-modal-header{ background:linear-gradient(135deg,#eaf2ff,#ffffff) !important; border-bottom-color:#e6ecf3 !important; }
.svc-modal-title{ color:#0f172a !important; }
.svc-input{ background:#fff !important; border-color:#dbe4f3 !important; color:#16263a !important; }

/* buttons: ensure white text on blue */
.btn-quote, .btn-cyan, .btn-primary-c{ color:#fff !important; }

/* ═══════════ NAYA FIX: Scrolling Headline + Rotating Circle wala dark strip ═══════════ */
/* Yeh section home.blade.php mein inline-style hai is liye CSS specificity ke liye
   attribute selector aur generic tags use kiye gaye hain. */

div[style*="background:#0d1f2d"],
div[style*="background: #0d1f2d"] {
  background: #f4f7fb !important;
}

div[style*="background:#0d1f2d"] span[style*="color:#fff"],
div[style*="background: #0d1f2d"] span[style*="color:#fff"],
div[style*="background:#0d1f2d"] div[style*="color:#fff"],
div[style*="background: #0d1f2d"] div[style*="color:#fff"] {
  color: #16263a !important;
}

div[style*="background:#0d1f2d"] span[style*="color:#00c8ff"],
div[style*="background: #0d1f2d"] span[style*="color:#00c8ff"],
div[style*="background:#0d1f2d"] div[style*="color:#00c8ff"],
div[style*="background: #0d1f2d"] div[style*="color:#00c8ff"] {
  color: #2563eb !important;
}

div[style*="background:#0d1f2d"] div[style*="color:#8899aa"],
div[style*="background: #0d1f2d"] div[style*="color:#8899aa"] {
  color: #5a6b7e !important;
}

div[style*="background:#0d1f2d"] text[fill="#ffffff"],
div[style*="background: #0d1f2d"] text[fill="#ffffff"] {
  fill: #16263a !important;
}

div[style*="background:#0d1f2d"] a[style*="background:#fff"],
div[style*="background: #0d1f2d"] a[style*="background:#fff"] {
  background: #2563eb !important;
  color: #fff !important;
}

div[style*="background:#0d1f2d"] [style*="border-top:1px solid #1a3050"],
div[style*="background: #0d1f2d"] [style*="border-top:1px solid #1a3050"],
div[style*="background:#0d1f2d"] [style*="border-bottom:1px solid #1a3050"],
div[style*="background: #0d1f2d"] [style*="border-bottom:1px solid #1a3050"] {
  border-color: #e6ecf3 !important;
}




/* ═══════════ HERO #2 (NextGen Software Innovators wala) → LIGHT FIX ═══════════ */

#hero {
  background: #f4f7fb !important;
}

.hero-bg-img {
  opacity: 0.04 !important;
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(244,247,251,0.97) 55%, rgba(244,247,251,0.4) 100%) !important;
}

.hero-right-img {
  opacity: 1 !important;
  filter: saturate(1.05) contrast(1.03);
}

.hero-right-img::after {
  background: linear-gradient(90deg, rgba(244,247,251,0.97) 0%, rgba(244,247,251,0.5) 22%, transparent 45%) !important;
}

.hero-title {
  color: #0f172a !important;
}

.hero-title .highlight {
  border-color: #2563eb !important;
  color: #2563eb !important;
}

.hero-desc {
  color: #5a6b7e !important;
}

.hero-eyebrow {
  color: #2563eb !important;
}

.hero-stat-num {
  color: #2563eb !important;
}

.hero-stat-label {
  color: #5a6b7e !important;
}

.btn-outline-c {
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.btn-outline-c:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
}




/* for hearo animation  */


.hero-orbit-wrap {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  z-index: 1;
}

.hero-orbit-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  box-sizing: border-box;
  border: 1.5px dashed rgba(37,99,235,0.35) !important;
  background: radial-gradient(circle, rgba(37,99,235,0.04) 0%, transparent 70%);
}

.hero-orbit-circle::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,0.12);
}

.hero-orbit-hub {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #16263a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  z-index: 3;
  box-shadow: 0 0 0 0 rgba(37,99,235,0.5);
  animation: heroHubPulse 2.4s ease-out infinite;
}

@keyframes heroHubPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

.hero-orbit-avatars {
  position: absolute;
  inset: 0;
  animation: heroOrbitSpin 16s linear infinite;
}

.hero-orbit-avatar {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  box-shadow: 0 6px 14px rgba(37,99,235,0.18);
  animation: heroOrbitCounter 16s linear infinite;
}

.hero-orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px rgba(22,38,58,0.16);
  z-index: 2;
  white-space: nowrap;
  border: 1px solid rgba(37,99,235,0.08);
}

.hero-orbit-card-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e6f1fb;
  color: #2563eb;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 13px;
}

.hero-orbit-card-label {
  font-size: 13px;
  font-weight: 700;
  color: #16263a;
  vertical-align: middle;
}

.hero-orbit-badge {
  position: absolute;
  bottom: -6px;
  right: 6%;
  background: #fff;
  border-radius: 30px;
  padding: 8px 16px;
  box-shadow: 0 10px 26px rgba(22,38,58,0.14);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #16263a;
  z-index: 3;
}

.hero-orbit-badge i {
  color: #22c55e;
  font-size: 14px;
}

.hero-orbit-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(37,99,235,0.4);
  animation: heroDotDrift 5s ease-in-out infinite;
}

@keyframes heroDotDrift {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50%      { transform: translateY(-12px); opacity: 0.9; }
}

@keyframes heroOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes heroOrbitCounter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (max-width: 991px) {
  .hero-orbit-wrap { display: none; }
}



#marqueeWrap:hover #marqueeText {
  animation-play-state: paused !important;
}


@media (max-width: 768px) {
  .hero-right-img {
    opacity: 0.08 !important;
  }
}




/* ===== TEMP: Industries + Pricing nav se hide (jab tak ready na ho) ===== */
.nav-item.dropdown:has(.industries-mega){ display:none !important; }
.navbar .nav-item:has(> a[href$="/pricing"]){ display:none !important; }
/* footer ke pricing links bhi hide */
.footer-links a[href$="/pricing"],
.footer-bottom-links a[href$="/pricing"]{ display:none !important; }



/* ═══════════ FIX: white-space + side-icons (side-collapsed) ═══════════ */
html, body { overflow-x: hidden !important; }

/* DESKTOP: centered; collapsed pe fade (screen se bahar nahi jate) */
@media (min-width: 769px){
  .side-icons{
    transform: translateY(-50%) !important;
    transition: opacity .3s ease, visibility .3s ease !important;
  }
  .side-icons.side-collapsed{
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
}

/* MOBILE: bottom-left; collapsed pe fade */
@media (max-width: 768px){
  .side-icons{
    display: flex !important; transform: none !important;
    transition: opacity .3s ease, visibility .3s ease !important;
  }
  .side-icons.side-collapsed{
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  }
}



/* ═══════════ mobile menu (#navMenu) → LIGHT (sabse END mein paste) ═══════════ */
@media (max-width: 991.98px){
  #navMenu{
    background:#ffffff !important;
    border:1px solid #e6ecf3 !important;
    box-shadow:0 12px 30px rgba(15,23,42,.10) !important;
  }
  #navMenu .nav-link{ color:#16263a !important; }
  #navMenu .nav-link.active{ color:#2563eb !important; }
  #navMenu .nav-link:hover{ background:#eaf2ff !important; color:#1e3a8a !important; border-radius:8px; }
  #navMenu .dropdown-item{ color:#3a4a5c !important; }
  #navMenu .dropdown-item:hover{ background:#eaf2ff !important; color:#1e3a8a !important; }
  #navMenu .dropdown-header, #navMenu .mega-top-label{ color:#2563eb !important; }
  #navMenu .dropdown-menu, #navMenu .mega-menu, #navMenu .industries-mega{ background:transparent !important; box-shadow:none !important; border:none !important; }
}





/* ═══════════ GLOBAL SOFT / SMOOTH TRANSITIONS (sabse END mein paste) ═══════════ */

/* smooth scroll jab kisi anchor pe jao */
html{ scroll-behavior: smooth; }

/* har interactive cheez pe soft transition */
a, button, .btn, .nav-link, .dropdown-item,
.service-card, .team-card, .blog-card, .p-card,
.side-icon-btn, .footer-links a, .footer-socials a,
input, textarea, select, .form-control, .form-select,
.accordion-button{
  transition: color .25s ease,
              background-color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease,
              transform .25s ease,
              opacity .25s ease !important;
}

/* ═══════════ mobile toggle (#navMenu) → SMOOTH open (END mein paste) ═══════════ */
@media (max-width: 991.98px){
  /* height smoothly animate ho (jhatka na ho) */
  #navMenu.collapsing{
    transition: height .34s cubic-bezier(.4,0,.2,1) !important;
  }
  /* khulte waqt soft fade + halka slide */
  #navMenu.show{
    animation: navMenuOpen .34s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes navMenuOpen{
    from{ opacity:0; transform: translateY(-10px); }
    to  { opacity:1; transform: translateY(0); }
  }
  /* links bhi halke se aayein (stagger feel) */
  #navMenu.show .navbar-nav .nav-item{
    animation: navItemIn .3s ease both;
  }
  #navMenu.show .navbar-nav .nav-item:nth-child(1){ animation-delay:.04s; }
  #navMenu.show .navbar-nav .nav-item:nth-child(2){ animation-delay:.08s; }
  #navMenu.show .navbar-nav .nav-item:nth-child(3){ animation-delay:.12s; }
  #navMenu.show .navbar-nav .nav-item:nth-child(4){ animation-delay:.16s; }
  #navMenu.show .navbar-nav .nav-item:nth-child(5){ animation-delay:.20s; }
  @keyframes navItemIn{
    from{ opacity:0; transform: translateX(-8px); }
    to  { opacity:1; transform: translateX(0); }
  }
}



/* Services link click → /#services pe jaye */
.navbar-nav .nav-link.dropdown-toggle{ pointer-events: auto; }





/* ═══ sections remove (site-wide) ═══ */
.team-section{ display:none !important; }   /* Meet Our Experience Members — home + about dono */
.blog-section{ display:none !important; }   /* Read Our Latest News & Blog */
.hero-section{ display:none !important; }   /* Premier Tech Innovations */




/* ═══ logo size bara ═══ */
.navbar-brand img{ height:60px !important; width:auto !important; }
.footer-logo{ height:64px !important; width:auto !important; }
/* ═══ loader ring + logo center fix ═══ */
.loader-ring{ width:140px !important; height:140px !important; }
.loader-ring svg{ width:140px !important; height:140px !important; }
.loader-logo{ margin:0 !important; display:flex !important; align-items:center; justify-content:center; }


.navbar-brand{ display:flex; align-items:center; }
/* ═══ brand tagline (force visible) ═══ */
.navbar-brand{ display:flex !important; align-items:center; }
.brand-text-wrap{ display:flex !important; flex-direction:column !important; line-height:1.1; }
.brand-text-wrap .brand-tagline{
  font-size:10px !important;
  font-weight:500 !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  background:none !important;
  letter-spacing:.4px;
  margin-top:1px;
  display:block !important;
}
.footer-brand-tagline{
  display:block !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
  background:none !important;
  letter-spacing:.4px;
  margin-top:2px;
}



/* footer brand = navbar jaisa */
.footer-brand-wrap{ display:flex !important; align-items:center; gap:12px; }
.footer-brand-textwrap{ display:flex; flex-direction:column; line-height:1.15; }
.footer-brand-textwrap .footer-brand-name{ margin:0; }
.footer-brand-textwrap .footer-brand-tagline{
  display:block; margin:2px 0 0 !important; padding:0 !important;
  font-size:13px; font-weight:500; color:#2563eb !important;
  -webkit-text-fill-color:#2563eb; letter-spacing:.4px;
  width:auto !important; flex-basis:auto !important;
}


/* ═══ mega-menu hover fix (turant band na ho) ═══ */
.navbar-nav .nav-item.dropdown{ position: static; }

/* dropdown aur toggle ke beech ka gap bharo (mouse move karne pe menu band na ho) */
.navbar-nav .nav-item.dropdown > .dropdown-toggle::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -18px;
  height: 18px;
}

/* hover pe menu khula rahe + thodi der tak visible */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
.navbar-nav .nav-item.dropdown:hover > .mega-menu,
.navbar-nav .nav-item.dropdown:hover > .industries-mega{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* menu par hover karte hi woh khula rahe */
.dropdown-menu:hover, .mega-menu:hover, .industries-mega:hover{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* menu ko navbar ke bilkul neeche laao (koi gap na rahe) */
.mega-menu, .industries-mega{ margin-top: 0 !important; }