.case-swiper,
.mega-inner,
.service-tabnav,
body.m-nav-lock {
  overflow: hidden;
}

.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.site-header {
  background: var(--dark-bg);
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    box-shadow 0.3s,
    padding 0.3s;
}

.site-header.is-scrolled {
  padding-block: 12px;
}

.site-header .brand-logo {
  height: 44px;
  width: auto;
}

.site-header .navbar-nav {
  gap: 26px;
}

.site-header .nav-link {
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 400;
  padding: 6px 2px;
  opacity: 0.92;
}

.site-header .nav-link.show,
.site-header .nav-link:focus,
.site-header .nav-link:hover {
  color: var(--primary-color);
  opacity: 1;
}

.site-header .ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-pill);
  background: rgba(237, 245, 255, 0.06);
}

.site-header .ai-pill img {
  width: 22px;
  height: 22px;
}

.site-dropdown {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  margin-top: 10px;
}

.site-dropdown .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 1rem;
  color: var(--text-color);
}

.site-dropdown .dropdown-item:hover {
  background: var(--light-blue);
  color: var(--primary-color);
}

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

.mega-menu {
  margin: 0;
  padding: 0;
  min-width: 0;
  background: 0 0;
  border: 0;
  box-shadow: none;
}

.mega-inner {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  margin-top: 8px;
}

.mega-rail {
  flex: 0 0 290px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #f8fafc;
  border-right: 1px solid var(--border-color);
}

.mega-cat,
.mega-cat-ico,
.mega-link-ico {
  background: var(--white);
}

.mega-cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 80px;
  padding: 15px 17px;
  border-radius: 16px;
  border: 1px solid rgba(209, 213, 220, 0.5);
}

.mega-cat-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}

.case-tech img,
.mega-cat-ico img {
  width: 24px;
  height: 24px;
}

.mega-cat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mega-cat-title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading-color);
}

.mega-cat-sub {
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-light);
  opacity: 0.9;
}

.mega-cat:hover,
.service-tab:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.mega-cat.active {
  background: var(--secondary-color);
  border-color: rgba(94, 125, 255, 0.29);
}

.mega-cat.active .mega-cat-ico {
  background: #f8fafc;
  border-color: transparent;
}

.mega-cat.active .mega-cat-sub,
.mega-cat.active .mega-cat-title {
  color: var(--white);
}

.mega-cat.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 56px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5b7fff, #7b61ff);
}

.mega-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
  align-content: start;
  padding: 16px;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  border-radius: 12px;
  transition: color 0.2s;
}

.mega-link-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.contact-attach svg,
.mega-link-ico img {
  width: 20px;
  height: 20px;
}

.mega-link:hover,
.tech-tablist .nav-link:hover {
  color: var(--primary-color);
}

.mega-link:hover .mega-link-ico {
  border-color: var(--primary-color);
  background: var(--light-blue);
}

/* ------------------------------------------------------------------
   Mega menu: links that have child pages of their own.

   A pane holding any such link runs as two columns - the links in a
   single column on the left, the active link's child pages in their own
   panel beside them - so a child list is always plainly attached to the
   highlighted link instead of running on underneath its neighbour. This
   is the flyout shape: the rail picks the pane, the pane picks the
   panel.

   A pane where no link has children is untouched and keeps the two
   column grid exactly as it was.
   ------------------------------------------------------------------ */

/* Both columns are given a definite width rather than "whatever is left
   over", because there is no space left over to take: .mega-menu is
   absolutely positioned inside the nav item, so the card is a shrink to
   fit box and resolves at its MIN-content width. A column sized
   flex: 1 1 auto collapses to its longest word there, which is what wraps
   a service name down five lines. A flex-basis in px is what actually
   makes the card wide enough to hold it.

   280 + 360 + the 234px promo = 874, which is the min-width given to
   .mega-content-split below so that every pane of the menu - including
   the ones with no panel - is laid out in the same box. */
.mega-pane-split .mega-grid {
  flex: 0 0 280px;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

/* One width for the whole menu, so it does not resize as the pointer
   moves down the rail. Below 1200px responsive.css hides .mega-promo, so
   the same two columns need 234px less.

   Both classes in the selector on purpose: .mega-content sets
   min-width: 0 further down this file, and at equal specificity that
   would win on source order and undo this. */
.mega-content.mega-content-split {
  min-width: 640px;
}

@media (min-width: 1200px) {
  .mega-content.mega-content-split {
    min-width: 874px;
  }
}

/* A link row in a split pane, with or without children: same padding on
   both, so the labels line up down the column and the highlight behind
   the active one is a full row rather than a ragged box. */
.mega-link-group,
.mega-pane-split .mega-grid > .mega-link {
  padding: 6px 10px;
  border-radius: 12px;
  transition: background-color 0.2s;
}

.mega-link-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-link-group .mega-link {
  flex: 1 1 auto;
  min-width: 0;
}

/* The active link, tinted to match the panel it is showing. */
.mega-link-group.is-open {
  background: var(--light-blue);
}

.mega-pane-split .mega-grid > .mega-link:hover {
  background: #f1f5fb;
}

.mega-sub-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

/* A ">" chevron: this points at the panel beside it, it does not open
   and close something underneath. */
.mega-sub-arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--text-light);
  border-right: 2px solid var(--text-light);
  transform: rotate(45deg);
  transition: border-color 0.25s;
}

.mega-link-group.is-open .mega-sub-arrow,
.mega-link-group:hover .mega-sub-arrow {
  border-color: var(--primary-color);
}

/* The panel column. Tinted like .mega-rail, so the pane reads as three
   bands - rail, links, child pages - rather than two lists on white.
   Capped in height because a long child list would otherwise push the
   card past the bottom of the window.

   grow 1, shrink 0, basis 360: the 360 is what widens the card, and the
   grow takes up the promo's 234px on a menu that has no promo set. */
.mega-subs {
  flex: 1 0 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  border-left: 1px solid var(--border-color);
}

/* Every parent's list is rendered; one is shown. */
.mega-sub {
  display: none;
}

.mega-sub.is-active {
  display: block;
  animation: 0.25s fadeUp;
}

.mega-sub-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* flex-start, not center: a name long enough to wrap would otherwise
   float its bullet down beside the middle line. */
.mega-sub-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 9px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-color);
  border-radius: 10px;
  transition:
    background 0.2s,
    color 0.2s;
}

.mega-sub-link::before {
  content: "";
  width: 5px;
  height: 5px;
  /* Centres the bullet on the first line: half a line box, less half
     the bullet. */
  margin-top: calc((1.45em - 5px) / 2);
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #c5d3e6;
  transition:
    background 0.2s,
    transform 0.2s;
}

.mega-sub-link:hover {
  background: var(--white);
  color: var(--primary-color);
}

.mega-sub-link:hover::before {
  background: var(--primary-color);
  transform: scale(1.3);
}

.mega-sub-link:focus-visible,
.mega-sub-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.mega-promo {
  flex: 0 0 234px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  background: #0f172b;
  color: var(--white);
}

.mega-promo-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--white);
  margin-bottom: 4px;
}

.mega-promo-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.mega-cat {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.mega-content {
  flex: 1 1 auto;
  min-width: 0;
}

.m-nav-actions,
.m-nav-drawer,
.m-nav-overlay,
.mega-pane,
.service-panel {
  display: none;
}

.mega-pane.active {
  display: flex;
  align-items: stretch;
  animation: 0.25s fadeUp;
  height: 100%;
}

@media (max-width: 1023.98px) {

  .site-header #mainNav,
  .site-header .navbar-toggler {
    display: none !important;
  }

  .site-header {
    background: rgba(4, 7, 11, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .m-acc-link:hover::before,
  .m-acc.is-open .m-acc-ico,
  .m-nav-cta {
    background: var(--primary-color);
  }

  .site-header.is-scrolled {
    background: rgba(4, 7, 11, 0.85);
  }

  .m-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .m-nav-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(50, 130, 235, 0.35);
    transition:
      transform 0.2s,
      box-shadow 0.2s;
  }

  .m-nav-cta:active,
  .m-nav-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(50, 130, 235, 0.45);
  }

  .m-nav-burger {
    position: relative;
    width: 46px;
    height: 46px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition:
      background 0.2s,
      border-color 0.2s;
  }

  .m-nav-burger:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .m-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.25s;
  }

  .m-nav-burger.is-active span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .m-nav-burger.is-active span:nth-child(2) {
    opacity: 0;
  }

  .m-nav-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .m-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(4, 7, 11, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.4s,
      visibility 0.4s;
  }

  .m-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .m-nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: 90%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    background: var(--white);
    border-radius: 30px 0 0 30px;
    transform: translateX(105%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    overflow: hidden;
  }

  .m-nav-drawer.is-open {
    transform: translateX(0);
  }

  .m-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border-color);
  }

  .m-nav-logo {
    height: 34px;
    width: auto;
  }

  .m-nav-close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--heading-color);
    cursor: pointer;
    transition:
      background 0.2s,
      transform 0.3s;
  }

  .m-acc-link:hover,
  .m-acc.is-open>.m-acc-trigger,
  .m-nav-item:hover,
  .m-nav-pill {
    color: var(--primary-color);
  }

  .m-nav-close:hover {
    background: var(--light-blue);
    transform: rotate(90deg);
  }

  .m-nav-close svg {
    width: 18px;
    height: 18px;
  }

  .m-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 10px;
  }

  .m-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 8px;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-pill);
    background: rgba(50, 130, 235, 0.06);
  }

  .m-nav-pill img {
    width: 20px;
    height: 20px;
  }

  .m-nav-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: 16px 8px 8px;
  }

  .m-acc-trigger,
  .m-nav-item {
    display: flex;
    color: var(--heading-color);
  }

  .m-nav-item {
    align-items: center;
    padding: 14px 16px;
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: 14px;
    transition:
      background 0.2s,
      color 0.2s;
  }

  .m-nav-item:hover {
    background: #f5f8fd;
  }

  .m-acc {
    border-bottom: 1px solid #eef2f7;
  }

  .m-acc:last-of-type {
    border-bottom: 0;
  }

  .m-acc-trigger {
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    background: 0 0;
    border: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  .m-acc-ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f3f7fd;
    border: 1px solid #e6eef9;
    transition:
      background 0.25s,
      border-color 0.25s;
  }

  .m-acc-ico img {
    width: 22px;
    height: 22px;
  }

  .m-acc-label {
    flex: 1 1 auto;
  }

  .m-acc-arrow {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    margin-right: 8px;
    border-right: 2.5px solid var(--text-light);
    border-bottom: 2.5px solid var(--text-light);
    transform: rotate(45deg);
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.25s;
  }

  .m-acc.is-open .m-acc-arrow {
    transform: rotate(-135deg);
    border-color: var(--primary-color);
  }

  .m-acc.is-open .m-acc-ico {
    border-color: var(--primary-color);
  }

  .m-acc.is-open .m-acc-ico img {
    filter: brightness(0) invert(1);
  }

  .m-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-acc.is-open .m-acc-panel {
    grid-template-rows: 1fr;
  }

  .m-acc-panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .m-acc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 14px 14px;
    margin-left: 22px;
    border-left: 1.5px dashed #d7e2f0;
  }

  .m-acc-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    border-radius: 11px;
    transition:
      background 0.2s,
      color 0.2s,
      transform 0.2s;
  }

  .m-acc-link::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #c5d3e6;
    transition:
      background 0.2s,
      transform 0.2s;
  }

  .m-acc-link:hover {
    background: #f5f8fd;
    transform: translateX(2px);
  }

  .m-acc-link:hover::before {
    transform: scale(1.3);
  }

  /* ----------------------------------------------------------------
     Drawer: a link inside an accordion that has child pages of its
     own. Its own class names rather than .m-acc-*, so the single-open
     rule script.js binds to .m-acc cannot mistake this nested panel
     for a sibling of the section it sits inside and close its parent.
     ---------------------------------------------------------------- */
  .m-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .m-sub-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-sub.is-open .m-sub-panel {
    grid-template-rows: 1fr;
  }

  .m-sub-panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .m-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    align-self: stretch;
    padding: 0;
    background: 0 0;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
  }

  .m-sub-arrow {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-right: 2.5px solid var(--text-light);
    border-bottom: 2.5px solid var(--text-light);
    transform: translateY(-2px) rotate(45deg);
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.25s;
  }

  .m-sub.is-open .m-sub-arrow {
    transform: translateY(1px) rotate(-135deg);
    border-color: var(--primary-color);
  }

  .m-sub-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 8px 12px;
    margin-left: 14px;
    border-left: 1.5px dashed #e3ebf5;
  }

  .m-sub-list .m-acc-link {
    font-size: 0.95rem;
  }

  .m-sub-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
  }

  .m-nav-foot {
    flex-shrink: 0;
    padding: 16px 22px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    background: #fff;
  }

  .m-nav-foot .site-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .m-acc-link:focus-visible,
  .m-acc-trigger:focus-visible,
  .m-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
  }
}

@media (max-width: 400px) {
  .m-nav-cta {
    height: 38px;
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .m-nav-burger {
    width: 42px;
    height: 42px;
  }
}

.hero-bg img,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-section {
  position: relative;
  background: var(--dark-bg-2);
  overflow: hidden;
  isolation: isolate;
}

.hero-bg img {
  object-position: right center;
}

.hero-inner,
.inner-hero .hero-inner {
  position: relative;
  padding-block: 80px 150px;
}

.hero-inner {
  min-height: 760px;
}

.inner-hero .hero-inner {
  min-height: 400px;
}

.hero-content {
  max-width: 620px;
}

.hero-title {
  color: var(--white);
  font-size: clamp(2.25rem, 1.3rem + 3.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1.21;
  margin-bottom: 16px;
}

.hero-text {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 28px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  display: block;
  transform: scale(1.03);
}

.case-deco,
.service-tab::before {
  top: 50%;
  transform: translateY(-50%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hero-bottom-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.45) 70%,
      #0b0f19 100%);
}

.hero-partners {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent);
  mask-image: linear-gradient(90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent);
}

.partner-track {
  width: max-content;
  gap: 60px;
  animation: 28s linear infinite marquee;
}

.partner-strip {
  height: 24px;
  width: auto;
  opacity: 0.85;
}

.hero-partners:hover .partner-track {
  animation-play-state: paused;
}

.services-section {
  position: relative;
  overflow: hidden;
}

.services-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(50, 130, 235, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(50, 130, 235, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%,
      #000 30%,
      transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

.service-tab,
.service-tablist {
  position: relative;
  display: flex;
}

.service-tablist {
  flex-direction: column;
  gap: 14px;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  margin-right: 2px;
}

.service-tab {
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  background: var(--gradient-white);
  border: 1px solid var(--white);
  border-radius: var(--radius-md);
  text-align: left;
  color: var(--secondary-color);
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

.service-tab::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--primary-color);
  transition: height 0.3s;
}

.service-tab-num {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  width: 22px;
}

.service-tab-ico {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: #5b7fff1f;
  border: 1px solid #3282eb42;
}

.service-tab-label {
  font-size: 1.0625rem;
  font-weight: 500;
  flex: 1;
}

.service-tab-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-light);
  flex-shrink: 0;
  transition: transform 0.25s;
}

.service-tab.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white);
}

.service-tab.active::before {
  height: 60%;
}

.service-tab.active .service-tab-num {
  color: rgba(255, 255, 255, 0.6);
}

.service-tab.active .service-tab-arrow {
  color: var(--white);
  transform: translateX(3px);
}

.service-panel-wrap {
  padding: 40px;
  min-height: 100%;
  height: 100%;
}

.service-panel.active {
  display: block;
  position: relative;
  min-height: 100%;
  animation: 0.5s fadeUp;
}

.service-panel-body {
  position: relative;
  z-index: 1;
}

.case-deco,
.service-panel-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.service-panel-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.service-chip-grid {
  gap: 12px;
  margin-bottom: 28px;
}

.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary-color);
}

.service-stack-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary-color);
  background-color: #fff;
  padding: 6px 22px 6px 6px;
  border-radius: 100px;
}

.service-panel-art {
  right: -40px;
  bottom: -40px;
  margin: 0;
  user-select: none;
  border-radius: 0 0 10px;
  overflow: hidden;
}

.service-panel-art img {
  width: clamp(200px, 24vw, 300px);
  height: auto;
}

.stat-card {
  gap: 18px;
  padding: 14px 20px;
  background: var(--dark-blue);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  color: var(--white);
}

.stat-ico,
.stat-num {
  color: var(--primary-color);
}

.stat-ico {
  width: 66px;
  height: 66px;
  border-radius: var(--radius-pill);
  background: #5b7fff1f;
  border: 1px solid #3282eb42;
}

.case-deco,
.case-swiper .swiper-slide {
  height: auto;
}

.stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  margin-top: 2px;
}

.case-deco {
  left: -288px;
  width: min(942px, 58vw);
  opacity: 0.15;
  mix-blend-mode: luminosity;
}

@media (min-width: 992px) {
  .has-mega {
    position: relative;
    top: 0;
  }

  .has-mega>.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.25s;
    display: block;
  }

  .has-mega:focus-within>.mega-menu,
  .has-mega:hover>.mega-menu,
  .has-mega>.mega-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .case-swiper {
    margin-right: calc(50% - 50vw);
  }
}

.case-visual {
  height: clamp(320px, 38vw, 400px);
  border: 1px solid var(--white);
  box-shadow: var(--shadow-sm);
}

.case-nav,
.case-tech {
  width: 44px;
  height: 44px;
}

.case-img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.case-overlay {
  background: linear-gradient(180deg,
      rgba(11, 20, 30, 0.35) 0,
      rgba(11, 20, 30, 0.92) 100%);
  color: var(--white);
  will-change: opacity, transform;
}

.case-visual:focus-within .case-overlay,
.case-visual:hover .case-overlay {
  opacity: 1;
  transform: translateY(0);
}

.case-visual:focus-within .case-img,
.case-visual:hover .case-img {
  transform: scale(1.06);
}

.case-overlay-text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
}

.case-stack-title {
  font-size: 0.95rem;
  font-weight: 500;
}

.case-tech {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.case-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--heading-color);
}

.case-sub {
  font-size: 1.0625rem;
  color: var(--text-light);
}

.case-nav {
  padding: 0;
  background: 0 0;
  border: 0;
  opacity: 0.85;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.case-nav img {
  width: 40px;
  height: 40px;
}

.case-nav:hover {
  opacity: 1;
}

.case-prev:hover {
  transform: translateX(-3px);
}

.case-next:hover {
  transform: translateX(3px);
}

.case-nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.case-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 0.35s;
}

.case-visual:hover .case-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  .case-overlay-text {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .case-tech {
    width: 38px;
    height: 38px;
  }

  .case-tech img {
    width: 20px;
    height: 20px;
  }
}

.tech-tablist.nav-tabs {
  flex-wrap: nowrap;
  gap: 0;
  padding: 2px 2px 0;
  border: 0;
  background: #eaeaea;
  border-radius: 12px 12px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.connect-band,
.contact-map,
.faq-avatar,
.service-card,
.testi-card,
.testi-swiper {
  overflow: hidden;
}

.tech-tablist.nav-tabs::-webkit-scrollbar {
  display: none;
}

.tech-tablist .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin: 0;
  padding: 16px 26px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: 0 0;
  color: var(--heading-color);
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
}

.dev-process .card-content,
section.tabs-row {
  margin-top: -40px;
}

.tech-tablist .nav-link.active {
  background: #fff;
  color: var(--primary-color);
}

.tech-tab-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.tech-tab-count {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--heading-color);
  font-size: 0.875rem;
  font-weight: 700;
}

.tech-tablist .nav-link.active .tech-tab-count {
  background: #eaeaea;
}

.tech-content {
  min-height: 320px;
  background: #f3f8ff;
  border-radius: 0 0 12px 12px;
  padding: 32px 20px 24px;
}

.tech-card {
  width: 160px;
  padding: 28px 16px;
  background: #fff;
  border-radius: 20px;
}

.tech-card-ico {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.tech-card-name {
  font-size: 1.125rem;
  color: #333;
}

.connect-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  border-radius: 24px;
  background-image: url("../images/home-page/Quick_Connect-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.about-stat,
.industry-cta {
  border-radius: var(--radius-md);
}

.connect-person {
  flex: 0 0 320px;
}

.connect-person img {
  max-width: 100%;
  height: auto;
  display: block;
}

.connect-body {
  flex: 1;
}

.connect-text {
  max-width: 650px;
}

.industry-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  padding: 30px 34px;
  background: var(--dark-blue);
  color: var(--white);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.industry-cta:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}

.about-stats {
  position: absolute;
  inset-inline: 24px;
  bottom: 24px;
}

.about-stat {
  padding: 18px 22px;
  background: var(--dark-bg);
  box-shadow: var(--shadow-md);
}

.about-stat-num {
  display: block;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  color: var(--primary-color);
}

.about-stat-label {
  display: block;
  margin-top: 4px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.4rem);
  color: var(--white);
}

@media (max-width: 991.98px) {

  .connect-band,
  .connect-body {
    text-align: center;
  }

  .connect-band {
    flex-direction: column;
    padding: 32px 24px;
  }

  .connect-actions {
    justify-content: center;
  }

  .connect-person {
    flex: unset;
    max-width: 280px;
  }

  .about-stats {
    position: static;
    margin-top: 24px;
    left: auto;
    right: auto;
    bottom: auto;
  }
}

.testi-swiper {
  padding-block: 6px;
}

.testi-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.testi-top {
  padding: 28px 28px 22px;
  flex: 1;
}

.email-card,
.testi-head {
  align-items: center;
  gap: 14px;
}

.testi-head {
  display: flex;
  margin-bottom: 18px;
}

.testi-name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.testi-quote {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #2a3342;
}

.testi-foot {
  padding: 22px 28px 24px;
  background: #f4f8fe;
  border-top: 1px solid var(--border-color);
}

.testi-foot-label {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-bottom: 6px;
}

.testi-foot-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 6px;
}

.testi-foot-text {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 12px;
}

.testi-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-color);
}

.testi-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.review-on {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #595959;
  margin-bottom: 4px;
}

.review-num {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-top: 2px;
}

.blog-badge {
  position: absolute;
  top: 12px;
  left: 22px;
  padding: 8px 14px;
  background: var(--secondary-color);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
}

.faq-avatar {
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin-bottom: 18px;
}

.faq-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.email-card {
  display: flex;
  padding-top: 18px;
}

.icon-ico {
  width: 44px;
  height: 44px;
  background: var(--white);
}

.small-heading {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-light);
}

.small-text {
  display: block;
  font-size: 0.9375rem;
}

.faq-accordion .accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) !important;
  background: var(--white);
  overflow: hidden;
}

.faq-accordion .accordion-button {
  padding: 22px 26px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading-color);
  background: var(--white);
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--heading-color);
  background: var(--white);
}

.faq-accordion .accordion-button::after {
  width: 1.4rem;
  height: 1.4rem;
  background-size: 1.4rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233282eb' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233282eb' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M5 12h14'/%3e%3c/svg%3e");
  transform: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faq-accordion .accordion-body {
  padding: 0 26px 22px;
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.65;
}

.card-icon {
  width: 46px;
  height: 46px;
}

.card-icon img,
.card-icon svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.contact-label {
  font-weight: 600;
  color: var(--heading-color);
}

.contact-attach,
.contact-check,
.contact-value {
  color: var(--text-light);
}

.contact-value {
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-socials a:hover {
  transform: translateY(-2px);
}

.contact-map {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.contact-map iframe {
  width: 100%;
  height: 230px;
  border: 0;
  display: block;
}

select.site-select.phone-cc {
  position: absolute;
  border: none;
  top: 2px;
  left: 2px;
  width: 72px;
  flex-shrink: 0;
}

#phone {
  padding-left: 80px;
}

.gsection_title {
  color: var(--bs-secondary-color) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.contact-attach,
body .gform_wrapper.gravity-theme .gform_drop_area {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.25s,
    color 0.25s;
}

body .gform_wrapper.gravity-theme .gform_drop_area .gform_drop_instructions {
  margin-bottom: 0;
}

body .gform_wrapper.gravity-theme .gform_drop_area .gform_button_select_files {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  border: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
  white-space: nowrap;
  cursor: pointer;
  background: var(--primary-dark);
  color: var(--white);
}

.contact-attach:hover,
body .gform_wrapper.gravity-theme .gform_drop_area:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.contact-check,
.ginput_container_consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  accent-color: var(--primary-color);
}

.contact-check input,
.ginput_container_consent input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}

.contact-check a {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-logo {
  height: 46px;
  width: auto;
  margin-bottom: 22px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  font-size: 0.9375rem;
  color: var(--text-light);
}

.footer-links a:hover {
  color: var(--primary-color);
  padding-left: 4px;
}

.footer-col-title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 18px;
}

.footer-about {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 440px;
}

.footer-bottom.text-center {
  border-top: 1px solid #3282eb57;
  padding-top: 20px;
}

.inner-hero .hero-title {
  color: var(--white);
  font-size: clamp(2rem, 1.5rem + 1vw, 42px);
  font-weight: 600;
  line-height: 1.21;
  margin-bottom: 16px;
}

section.tabs-row {
  position: absolute;
  z-index: 9;
  left: 50%;
  transform: translateX(-50%);
}

span.industry-title {
  font-size: 18px;
  color: #fff;
}

.tech-slide {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 18, 0.2);
  backdrop-filter: blur(6px);
  padding: 30px 14px;
}

.service-purple {
  background: #e9e4f6;
}

.service-purple .card-icon {
  background: #7c5cff;
}

.service-blue {
  background: #e8eef5;
}

.service-blue .card-icon {
  background: #37a0ff;
}

.service-sky {
  background: #e8f0f5;
}

.service-sky .card-icon {
  background: #5a7dff;
}

.service-pink {
  background: #f3e6f3;
}

.service-pink .card-icon,
.pink-bg {
  background: #e54be5 !important;
}

.service-light-blue {
  background: #e5eef5;
}

.service-light-blue .card-icon {
  background: #2196f3;
}

.service-lavender {
  background: #ece8f5;
}

.service-lavender .card-icon,
.purple-bg {
  background: #8b5cf6 !important;
}

.service-beige {
  background: #f3ebe1;
}

.service-beige .card-icon,
.yellow-bg {
  background: #ff9800 !important;
}

.service-green {
  background: #e2f0ea;
}

.service-green .card-icon,
.green-bg {
  background: #00c853 !important;
}

.service-card {
  position: relative;
  min-height: 380px;
  border-radius: 24px;
  background: #111827;
}

.service-overlay {
  background: linear-gradient(to top,
      rgb(0 0 0) 0,
      rgb(0 0 0 / 88%) 35%,
      rgba(0, 0, 0, 0.15) 70%,
      rgba(0, 0, 0, 0.05) 100%);
}

.strip-title {
  position: relative;
  padding-left: 18px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.strip-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: calc(100% - 6px);
  border-radius: 20px;
  background: linear-gradient(180deg, #2563eb 0, #60a5fa 100%);
}

.card-cover img {
  border-radius: 16px 16px 16px 0;
}

span.card-number {
  z-index: 0;
  background-color: #195db6;
  width: 60px;
  height: 60px;
  right: 8px;
  bottom: 8px;
}

.trusted-partner {
  min-height: 140px;
  max-height: 150px;
}

.icon-no-bg img {
  max-width: 86px;
}

/* hire-pages */
.hire-form .site-input,
.hire-form .site-textarea,
.hire-form .site-select {
  width: 100%;
  padding: 10px 10px 10px 20px;
  font-family: inherit;
  font-size: 0.9rem;
}

.office-swiper {
  width: 100%;
  overflow: hidden;
}

.office-swiper .swiper-wrapper {
  align-items: center;
}

.office-swiper .swiper-slide {
  transition: all 0.4s ease;
  opacity: 0.45;
  transform: scale(0.88);
}

.office-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.office-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 32px;
}

@media (max-width: 767.98px) {
  .office-img {
    height: 260px;
    border-radius: 20px;
  }
}

.vm-icon .card-icon img {
  width: 66px;
  height: 66px;
}

.vm-icon .card-icon {
  width: 100px;
  height: 100px;
}

/* ---------- Blog details (only what Bootstrap can't express) ---------- */
.bd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 1040;
  background: linear-gradient(90deg, var(--primary-color), #7b61ff);
  transition: width 0.1s linear;
}

.bd-content h2 {
  scroll-margin-top: 100px;
}

/* The static file hand writes the design's utility classes on every element in
   the article body (h2.h4.fw-semibold.mt-5.mb-3, p.lh-lg.mb-3, and so on).
   Content written in the WordPress editor carries no classes, so the container
   applies the same values instead - the post HTML stays clean. Values match
   Bootstrap's, and the designed blocks inside .bd-content keep their own
   utility classes because those carry !important. */
.bd-content p {
  line-height: 2;
  margin-bottom: 1rem;
}

.bd-content h2 {
  font-size: calc(1.275rem + 0.3vw);
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.bd-content h3 {
  font-size: calc(1.26rem + 0.12vw);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.bd-content h4,
.bd-content h5,
.bd-content h6 {
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 1200px) {
  .bd-content h2 {
    font-size: 1.5rem;
  }

  .bd-content h3 {
    font-size: 1.35rem;
  }
}

.bd-content ul,
.bd-content ol {
  line-height: 2;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.bd-content li {
  margin-bottom: 0.5rem;
}

.bd-content blockquote {
  border-left: 3px solid var(--primary-color);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.bd-content img,
.bd-content figure {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.bd-content figure {
  margin: 1.5rem 0;
}

.bd-content> :first-child {
  margin-top: 0;
}

.bd-content> :last-child {
  margin-bottom: 0;
}

/* The callout's own list is laid out with flex utilities, not body copy. */
.bd-content aside ul,
.bd-content aside ol {
  padding-left: 0;
}

.bd-content aside li {
  margin-bottom: 0;
}

.bd-check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* Selectable tag / chip pills */
.bd-tag {
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--secondary-color);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  transition:
    color 0.2s,
    background-color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.bd-tag:hover,
.bd-tag.is-active {
  color: #fff;
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.bd-tag:hover {
  transform: translateY(-2px);
}

/* TOC links (Bootstrap ScrollSpy toggles .active) */
.bd-toc-link {
  color: var(--text-light);
  font-weight: 500;
  border-radius: 10px;
}

.bd-toc-link:hover {
  color: var(--primary-color);
  background: var(--bg-light);
}

.bd-toc-link.active {
  color: var(--primary-color);
  font-weight: 600;
  background: rgba(50, 130, 235, 0.08);
}

.tabs-wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

span.text-bg {
  background-color: #cfe4ff;
  padding: 2px 2px;
}

.map-wrapper {
  position: relative;
}

.location-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--primary-color);
  border-radius: 50%;
  z-index: 2;
}

.location-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary-color);
  animation: ping 2s infinite;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  80% {
    transform: scale(3.5);
    opacity: 0;
  }

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

/* Adjust according to your map image */

.usa {
  top: 38%;
  left: 22%;
}

.india {
  top: 48%;
  left: 66%;
}

img.menu-arrow {
  max-width: 16px;
}

/* ---------- Blog listing (blog-listing.html) ----------
   The static design repeats a single 640x366 image, so every card there is the
   same height and the .row.g-4 gutter reads as an even bottom margin under all
   of them. WordPress featured images and excerpts vary, so the card is
   stretched to the row height and the media is locked to the design's aspect
   ratio here. Nothing else is needed: the rest of the card is the same set of
   shared utility classes the static file uses. */
.blog-listing .blog-card {
  height: 100%;
}

.blog-listing .blog-media img {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 366;
  object-fit: cover;
}