/* =========================================================================
   AZTÖR AUTOMATION — BRAND THEME
   =========================================================================
   Loads AFTER style.css and overrides the stock theme palette with the
   colours taken from the AZTÖR logo and brand banner.

   Brand palette
   -------------
   #0745B6   Brand Blue      sampled from the "AZ" in the logo — primary
   #1B6FE0   Bright Blue     hover / gradient partner
   #2B8AEF   Light Blue      highlights on dark backgrounds
   #0B1220   Ink             deep navy-charcoal — headings, footer, dark UI
   #131C2E   Ink Soft        raised surfaces on dark backgrounds

   The stock theme was orange (#fe712b) on teal (#0d403e). Almost all of it
   flows through CSS variables, so redefining them here re-skins the whole
   site. The handful of places where the theme hardcoded a colour are
   corrected explicitly further down.

   Do not edit style.css. Keep every brand change in this file so the theme
   can be updated later without losing the work.
   ========================================================================= */

:root {
  /* --- core brand ------------------------------------------------------ */
  --theme-color:      #0745B6;
  --theme-color2:     #0B1220;
  --color-dark:       #0B1220;

  /* --- extended brand ramp (used by aztor.css) ------------------------- */
  --brand-blue:       #0745B6;
  --brand-blue-dark:  #053794;
  --brand-blue-bright:#1B6FE0;
  --brand-blue-light: #2B8AEF;
  --brand-ink:        #0B1220;
  --brand-ink-soft:   #131C2E;
  --brand-ink-line:   #1E2A40;

  /* --- surfaces -------------------------------------------------------- */
  --theme-bg-light:   #f4f7fb;
  --theme-bg-light2:  #eef3fa;
  --body-text-color:  #5b6880;

  /* --- accents --------------------------------------------------------- */
  --color-blue:       #0745B6;
  --color-skyblue:    #2B8AEF;
  --color-yellow:     #f5a623;

  /* --- footer ---------------------------------------------------------- */
  --footer-bg:        #0B1220;
  --footer-text-color:#dbe4f2;

  /* --- shadows tinted to the brand instead of neutral grey ------------- */
  --box-shadow:       0 0 40px 5px rgba(7, 69, 182, 0.07);
  --box-shadow3:      0 0 40px 5px rgba(7, 69, 182, 0.06);
}

/* =========================================================================
   1. HARDCODED VALUES IN style.css
   Three rules in the stock theme bake in the old palette. Corrected here.
   ========================================================================= */

/* was: 1px solid rgba(254, 113, 43, 0.2) */
.hero-item-box {
  border: 1px solid rgba(7, 69, 182, 0.18);
}

/* was: rgba(13, 64, 62, 0.45) / rgba(13, 64, 62, 0.65) — section overlays */
.breadcrumb-wrapper::before,
.cta-area::before,
.video-area::before,
.counter-area::before {
  background: rgba(11, 18, 32, 0.72);
}

/* =========================================================================
   2. GRADIENTS & BUTTONS
   The stock theme used flat orange. Brand blue reads better with a subtle
   two-stop gradient, which also matches the banner artwork.
   ========================================================================= */

.theme-btn {
  background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(7, 69, 182, 0.22);
}
.theme-btn:hover {
  background: linear-gradient(120deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  box-shadow: 0 10px 26px rgba(7, 69, 182, 0.32);
}
.theme-btn2 {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.theme-btn2:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-ink);
}

/* On light backgrounds the outline button needs an ink border, not white */
.bg-light .theme-btn2,
.form-card .theme-btn2,
.solution-card .theme-btn2 {
  border-color: rgba(11, 18, 32, 0.25);
  color: var(--brand-ink);
}
.bg-light .theme-btn2:hover,
.form-card .theme-btn2:hover,
.solution-card .theme-btn2:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* =========================================================================
   3. HEADER
   ========================================================================= */

.header .header-top {
  background: var(--brand-ink);
  border-bottom: 1px solid var(--brand-ink-line);
}
.header .header-top a:hover,
.header .header-top .social-link a:hover {
  color: var(--brand-blue-light);
}

.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link:hover {
  color: var(--brand-blue);
}
.navbar .nav-item .dropdown-menu .dropdown-item.active,
.navbar .nav-item .dropdown-menu .dropdown-item:hover {
  color: var(--brand-blue);
  background: rgba(7, 69, 182, 0.06);
}

/* =========================================================================
   4. FOOTER — deep navy with a blue hairline, matching the banner panel
   ========================================================================= */

.footer-area {
  background: var(--brand-ink);
  border-top: 3px solid var(--brand-blue);
}
.footer-area .footer-widget-title::after,
.footer-area .footer-contact-strip {
  background: var(--brand-blue);
}
.footer-area .footer-list li a:hover,
.footer-area .footer-contact-content a:hover {
  color: var(--brand-blue-light);
}
.footer-area .copyright {
  background: #070C16;
  border-top: 1px solid var(--brand-ink-line);
}

/* =========================================================================
   5. SECTION HEADINGS & TAGLINES
   ========================================================================= */

.site-title-tagline {
  color: var(--brand-blue);
  background: rgba(7, 69, 182, 0.08);
}
.site-title-tagline.bg-white {
  background: #fff;
}
.site-title span,
.hero-title span {
  color: var(--brand-blue);
}

/* =========================================================================
   6. FLOATING ACTION BUTTONS
   WhatsApp keeps its own green — brand consistency does not override a
   platform colour people recognise. The emergency button takes brand blue.
   ========================================================================= */

.floating-actions .float-btn.emergency {
  background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
}

#scroll-top {
  background: var(--brand-blue);
}
#scroll-top:hover {
  background: var(--brand-blue-dark);
}

/* =========================================================================
   7. FORM FOCUS STATES
   ========================================================================= */

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(7, 69, 182, 0.12);
}

/* =========================================================================
   8. SELECTION & SCROLLBAR — small details, but they sell the identity
   ========================================================================= */

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

@media (min-width: 992px) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: #eef3fa; }
  ::-webkit-scrollbar-thumb {
    background: #b9c6da;
    border-radius: 6px;
    border: 2px solid #eef3fa;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }
}

/* =========================================================================
   9. HERO — brand banner treatment
   Photography from the AZTÖR banner, with the headline set in live HTML so
   it stays sharp, selectable and readable at every viewport width.
   ========================================================================= */

.hero-aztor {
  position: relative;
  background-image: url("../img/hero/hero-aztor.jpg");
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
  /* The header sits over the hero, so reserve room for it */
  padding-top: 165px;
  padding-bottom: 70px;
  min-height: 840px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Dark panel on the left, exactly as the printed banner is composed */
.hero-aztor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 10, 18, 0.96) 0%,
    rgba(8, 13, 24, 0.92) 26%,
    rgba(9, 15, 28, 0.72) 44%,
    rgba(11, 18, 32, 0.28) 60%,
    rgba(11, 18, 32, 0.05) 76%
  );
}

.hero-aztor .container { position: relative; z-index: 2; }

.hero-aztor .hero-rule {
  width: 62px;
  height: 4px;
  background: var(--brand-blue-bright);
  border-radius: 3px;
  margin: 22px 0 26px;
}

.hero-aztor .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  background: rgba(43, 138, 239, 0.12);
  border: 1px solid rgba(43, 138, 239, 0.3);
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 26px;
}

.hero-aztor h1 {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}
.hero-aztor h1 .accent {
  display: block;
  color: var(--brand-blue-light);
}

.hero-aztor .hero-tagline {
  font-family: var(--heading-font);
  font-size: 25px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 20px;
}

.hero-aztor .hero-lead {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.76);
  max-width: 520px;
  margin-bottom: 34px;
}

.hero-aztor .hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

/* --- the four badges from the banner, rebuilt as live markup ---------- */
.hero-features {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-features .hf {
  display: flex;
  align-items: center;
  gap: 13px;
}
.hero-features .hf i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid rgba(43, 138, 239, 0.42);
  background: rgba(43, 138, 239, 0.1);
  color: var(--brand-blue-light);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-features .hf span {
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1399px) {
  .hero-aztor h1 { font-size: 54px; }
  .hero-features { gap: 24px; }
}

@media (max-width: 1199px) {
  .hero-aztor { min-height: 760px; padding-top: 150px; }
  .hero-aztor h1 { font-size: 46px; }
  .hero-aztor .hero-tagline { font-size: 22px; }
  .hero-features { grid-template-columns: repeat(2, 1fr); gap: 20px 26px; }
}

@media (max-width: 991px) {
  .hero-aztor {
    /* Tighter crop keeps the technician in frame on a narrow viewport */
    background-image: linear-gradient(
        180deg,
        rgba(6, 10, 18, 0.86) 0%,
        rgba(8, 13, 24, 0.7) 50%,
        rgba(9, 15, 28, 0.9) 100%
      ),
      url("../img/hero/hero-aztor-mobile.jpg");
    background-position: center 22%;
    min-height: 0;
    padding: 175px 0 70px;
    text-align: center;
  }
  .hero-aztor::before { display: none; }
  .hero-aztor .hero-rule { margin-left: auto; margin-right: auto; }
  .hero-aztor .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-aztor .hero-cta { justify-content: center; }
  .hero-features .hf { justify-content: center; }
}

@media (max-width: 767px) {
  /* Header top bar wraps onto two rows here, so it needs more clearance */
  .hero-aztor { padding-top: 200px; }
}

@media (max-width: 575px) {
  .hero-aztor { min-height: 0; padding: 200px 0 56px; }
  .hero-aztor h1 { font-size: 33px; }
  .hero-aztor .hero-tagline { font-size: 18px; }
  .hero-aztor .hero-lead { font-size: 15.5px; }
  .hero-aztor .hero-eyebrow { font-size: 11px; padding: 7px 14px; }
  .hero-features { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-features .hf { flex-direction: column; text-align: center; gap: 8px; }
  .hero-features .hf span { font-size: 11px; }
  .hero-aztor .hero-cta .theme-btn,
  .hero-aztor .hero-cta .theme-btn2 { width: 100%; justify-content: center; }
}

/* Users who prefer less motion get a still hero */
@media (prefers-reduced-motion: reduce) {
  .hero-aztor * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   10. BREADCRUMB — brand photography with a navy grade
   ========================================================================= */

.site-breadcrumb {
  background-position: center 32% !important;
}
.site-breadcrumb::before {
  background: linear-gradient(
    180deg,
    rgba(7, 11, 20, 0.86) 0%,
    rgba(9, 15, 28, 0.78) 55%,
    rgba(7, 69, 182, 0.42) 100%
  );
}
.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--brand-blue-light);
}
.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--brand-blue-light);
}

/* =========================================================================
   11. ICONS — brand colour, correct contrast
   =========================================================================
   Two problems the stock theme left behind:

   1. `.service-icon` is a solid brand-blue disc built to hold a white SVG.
      A Font Awesome glyph placed inside inherited the brand colour too, so
      it was blue on blue — an empty circle.
   2. The theme's SVG icons are a fixed orange from the old palette. They are
      now replaced by Font Awesome classes, which inherit `currentColor` and
      therefore follow the brand automatically.
   ========================================================================= */

.service-icon .svc-glyph,
.service-icon i {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 26px;
  line-height: 60px;
}

/* Any legacy SVG still in the database gets forced white inside the disc */
.service-icon img { filter: brightness(0) invert(1); width: 28px; }

/* Service / solution cards: light tile, brand-blue glyph */
.sc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(7, 69, 182, .08);
  color: var(--brand-blue);
  font-size: 22px;
  margin-bottom: 18px;
}
.sc-icon i { color: var(--brand-blue); }

/* A legacy SVG in a light tile would still be orange — tint it to brand blue.
   The filter chain maps any source colour onto the brand hue. */
.sc-icon img {
  width: 26px;
  filter: brightness(0) saturate(100%) invert(19%) sepia(89%)
          saturate(3234%) hue-rotate(217deg) brightness(92%) contrast(101%);
}

.industry-card .ic-body i,
.category-block .cb-head i,
.solution-card .sc-icon i {
  color: var(--brand-blue);
}

/* =========================================================================
   12. MOBILE — PROJECTS STRIP
   =========================================================================
   On desktop the projects band is a hover-expand gallery: one shared
   background photo on the wrapper that swaps as you move between columns.
   That pattern has no meaning on a touch screen — there is no hover — and it
   collapsed into a giant blurred backdrop with the cards floating over it.

   Below 992px the band becomes what it should be: four ordinary stacked
   cards, each with its own contained image.
   ========================================================================= */

.pf-thumb { display: none; }

@media (max-width: 991px) {
  .portfolio-wrap.hbc-wrap {
    background-image: none !important;
    background: transparent;
    padding: 0;
  }
  .portfolio-wrap.hbc-wrap .row { gap: 18px 0; }

  .portfolio-wrap.hbc-wrap .item,
  .portfolio-wrap.hbc-wrap .item.active {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    opacity: 1;
    filter: none;
  }

  .portfolio-wrap.hbc-wrap .portfolio-item {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand-ink);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .12);
  }

  .portfolio-wrap.hbc-wrap .pf-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    filter: none;
  }

  /* Content sits under the photo, not floating over a blur */
  .portfolio-wrap.hbc-wrap .portfolio-content {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    padding: 20px 20px 22px;
    background: var(--brand-ink);
  }
  .portfolio-wrap.hbc-wrap .portfolio-content .subtitle {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-blue-light);
    margin-bottom: 8px;
  }
  .portfolio-wrap.hbc-wrap .portfolio-content .title {
    font-size: 19px;
    line-height: 1.32;
    margin: 0 0 16px;
  }
  .portfolio-wrap.hbc-wrap .portfolio-content .title a { color: #fff; }
  .portfolio-wrap.hbc-wrap .portfolio-bottom { margin: 0; }
  .portfolio-wrap.hbc-wrap .portfolio-bottom .theme-btn2 {
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    padding: 9px 18px;
    font-size: 14px;
  }
}

/* =========================================================================
   13. MOBILE NAVIGATION DRAWER
   =========================================================================
   The mega menu is a desktop construct — a wide panel positioned against the
   navbar. Dropped into the off-canvas drawer it kept its panel chrome, so a
   stray bordered box appeared, section headings collided with the item above,
   and the drawer was too narrow to read a product name in one line.

   Below 992px it is rebuilt as a plain accordion: full-width, no panel
   chrome, generous tap targets, clear section headings.
   ========================================================================= */

@media (max-width: 991px) {

  /* --- the drawer itself ------------------------------------------------ */
  .offcanvas.offcanvas-start {
    width: 86vw;
    max-width: 380px;
  }
  .offcanvas-header {
    padding: 18px 20px;
    border-bottom: 1px solid #eef1f5;
  }
  .offcanvas-brand img { max-width: 150px; height: auto; }
  .offcanvas-body {
    padding: 8px 0 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- top-level items -------------------------------------------------- */
  .offcanvas-body .navbar-nav > .nav-item {
    border-bottom: 1px solid #f0f2f6;
  }
  .offcanvas-body .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-ink);
    min-height: 52px;
  }
  .offcanvas-body .navbar-nav > .nav-item > .nav-link.active,
  .offcanvas-body .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
    color: var(--brand-blue);
  }
  .offcanvas-body .dropdown-toggle::after {
    transition: transform .25s ease;
  }
  .offcanvas-body .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* --- strip ALL panel chrome from dropdowns inside the drawer ---------- */
  .offcanvas-body .dropdown-menu,
  .offcanvas-body .nav-item.mega-menu > .dropdown-menu {
    position: static !important;
    float: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: 0 0 10px;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f7f9fc;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .offcanvas-body .nav-item.mega-menu > .dropdown-menu > li { width: 100%; }
  .offcanvas-body .mega-content,
  .offcanvas-body .mega-content .row {
    display: block;
    margin: 0;
  }
  .offcanvas-body .mega-content .row > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  /* --- section headings ------------------------------------------------- */
  .offcanvas-body .mega-menu-title {
    display: block;
    margin: 0;
    padding: 16px 20px 8px;
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: #eef2f8;
    border-top: 1px solid #e2e8f2;
  }
  .offcanvas-body .mega-menu-title a { color: inherit; }

  /* --- links ------------------------------------------------------------ */
  .offcanvas-body .dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 20px 12px 30px;
    min-height: 46px;
    font-size: 15px;
    line-height: 1.35;
    color: #44526b;
    white-space: normal;
    word-break: break-word;
    background: transparent;
  }
  .offcanvas-body .dropdown-item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c3cede;
    margin-right: 11px;
    flex: 0 0 5px;
  }
  .offcanvas-body .dropdown-item:active,
  .offcanvas-body .dropdown-item.active {
    background: rgba(7, 69, 182, .07);
    color: var(--brand-blue);
  }
  .offcanvas-body .dropdown-item.active::before { background: var(--brand-blue); }

  .offcanvas-body .mega-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 12px 20px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-blue);
    background: rgba(7, 69, 182, .09);
    border-radius: 30px;
  }
  .offcanvas-body .mega-more::before { content: none; }

  /* --- drawer CTA ------------------------------------------------------- */
  .offcanvas-body .nav-right,
  .offcanvas-body .navbar-cta {
    padding: 20px;
  }
  .offcanvas-body .theme-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Very small screens — buy back horizontal room */
@media (max-width: 400px) {
  .offcanvas.offcanvas-start { width: 92vw; }
  .offcanvas-body .dropdown-item { padding-left: 26px; font-size: 14.5px; }
  .offcanvas-body .mega-menu-title { font-size: 11px; padding-left: 16px; }
}

/* =========================================================================
   11. MEGA MENU — desktop
   The CMS rewrite changed the markup to .mega-grid / .mega-col / .mega-title
   / .mega-list but the stylesheet still targeted the old class names, so the
   panel had no styling at all. These are the rules for the current markup.
   ========================================================================= */

@media (min-width: 992px) {
  .navbar .nav-item.mega { position: static; }

  .navbar .nav-item.mega > .dropdown-menu.mega-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 30px 28px 24px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 26px 60px rgba(11, 18, 32, .16);
    max-height: min(72vh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navbar .nav-item.mega .mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
    gap: 26px 30px;
  }
}

.mega-col { min-width: 0; }

.mega-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-ink);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8edf4;
}
.mega-title i { color: var(--brand-blue); font-size: 15px; }
.mega-title:hover { color: var(--brand-blue); }

.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li { margin: 0; }
.mega-list a {
  display: block;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body-text-color);
  padding: 6px 0 6px 15px;
  position: relative;
  transition: color .18s, transform .18s;
}
.mega-list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #c8d2e2;
  transition: background .18s;
}
.mega-list a:hover,
.mega-list a.active {
  color: var(--brand-blue);
  transform: translateX(2px);
}
.mega-list a:hover::before,
.mega-list a.active::before { background: var(--brand-blue); }

/* =========================================================================
   12. MOBILE DRAWER NAVIGATION
   A plain nested accordion. No Bootstrap dropdowns, no multi-column grid —
   those are what broke inside a 360px drawer.
   ========================================================================= */

.mobile-nav,
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav > li {
  position: relative;
  border-bottom: 1px solid #edf1f7;
}

.mobile-nav > li > a {
  display: block;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 15px 52px 15px 4px;
  line-height: 1.35;
}
.mobile-nav > li > a:hover,
.mobile-nav > li > a.active { color: var(--brand-blue); }

/* The chevron is its own button so tapping the label still follows the link */
.mobile-nav .sub-toggle {
  position: absolute;
  top: 4px;
  right: 0;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  color: #8fa0b8;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}
.mobile-nav .sub-toggle i { transition: transform .25s ease; }
.mobile-nav .sub-toggle[aria-expanded="true"] { color: var(--brand-blue); }
.mobile-nav .sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* Collapsed by default; height animated open by aztor.js */
.mobile-nav .mobile-sub {
  display: none;
  padding: 2px 0 10px 12px;
  margin-left: 2px;
  border-left: 2px solid #e6ecf5;
}
.mobile-nav .mobile-sub.open { display: block; }

.mobile-nav .mobile-sub > li { position: relative; }

.mobile-nav .mobile-sub > li > a {
  display: block;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 11px 46px 11px 12px;
  line-height: 1.35;
}
.mobile-nav .mobile-sub > li > a:hover { color: var(--brand-blue); }

.mobile-nav .mobile-sub .sub-toggle { top: 0; height: 42px; width: 42px; }

/* Third level — the individual products */
.mobile-nav .mobile-sub .mobile-sub {
  border-left-color: #eef2f8;
  padding-bottom: 6px;
}
.mobile-nav .mobile-sub .mobile-sub > li > a {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--body-text-color);
  padding: 9px 12px 9px 12px;
}
.mobile-nav .mobile-sub .mobile-sub > li > a:hover { color: var(--brand-blue); }

/* Long product lists get their own scroll rather than pushing the page */
.mobile-nav .mobile-sub .mobile-sub.open {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Drawer chrome */
.offcanvas.offcanvas-start {
  width: min(340px, 88vw);
  max-width: 88vw;
}
.offcanvas-header {
  padding: 18px 20px;
  border-bottom: 1px solid #edf1f7;
}
.offcanvas-header .offcanvas-brand img { max-height: 42px; width: auto; }
.offcanvas-body { padding: 6px 20px 28px; }

/*
 * Drawer-only. The offcanvas element IS the desktop navbar above 992px, so
 * these must be behind a media query — unscoped, the divider rule drew a
 * stray line across the desktop header next to Request a Quote.
 */
@media (max-width: 991.98px) {
  .offcanvas .nav-right {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f7;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .offcanvas .nav-right .theme-btn { width: 100%; justify-content: center; }
  /* The drawer already has a search button in the header bar */
  .offcanvas .nav-right .search-btn { display: none; }
}

/* =========================================================================
   14. SIDEBAR CTA
   The button was inheriting a fixed width and collapsing into an oval blob.
   Give it real box sizing and let the text set the width.
   ========================================================================= */

.sidebar-cta {
  background: linear-gradient(155deg, var(--brand-ink) 0%, #16233C 100%);
  border-radius: 16px;
  padding: 34px 26px 30px;
  text-align: center;
  color: #fff;
}
.sidebar-cta > i {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(43, 138, 239, .16);
  border: 1px solid rgba(43, 138, 239, .34);
  color: var(--brand-blue-light);
  font-size: 23px;
  line-height: 56px;
}
.sidebar-cta :is(h2,h3,h4,h5) {
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}
.sidebar-cta p {
  color: rgba(255, 255, 255, .74);
  font-size: 14.5px;
  line-height: 1.62;
  margin-bottom: 18px;
}
.sidebar-cta .phone {
  display: block;
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  word-break: break-word;
}
.sidebar-cta .phone:hover { color: var(--brand-blue-light); }

/* The actual fix: a proper inline-flex button instead of an inherited blob */
.sidebar-cta .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 260px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.2;
}
.sidebar-cta .theme-btn i { margin: 0; font-size: 13px; }

/* =========================================================================
   15. SIDEBAR CATEGORY LIST
   ========================================================================= */

.service-sidebar .widget {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  padding: 26px 22px;
  margin-bottom: 26px;
}
.service-sidebar .widget > .title {
  font-family: var(--heading-font);
  font-size: 19px;
  color: var(--brand-ink);
  padding-bottom: 14px;
  margin-bottom: 16px;
  position: relative;
}
.service-sidebar .widget > .title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  border-radius: 2px;
  background: var(--brand-blue);
}

.service-sidebar .category { display: flex; flex-direction: column; gap: 2px; }
.service-sidebar .category a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 12px 14px;
  border-radius: 9px;
  line-height: 1.35;
  transition: background .2s, color .2s, padding-left .2s;
}
.service-sidebar .category a i { font-size: 11px; color: #9fb0c8; transition: color .2s; }
.service-sidebar .category a:hover {
  background: #f2f6fc;
  color: var(--brand-blue);
  padding-left: 18px;
}
.service-sidebar .category a:hover i { color: var(--brand-blue); }
.service-sidebar .category a.active {
  background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 69, 182, .22);
}
.service-sidebar .category a.active i { color: #fff; }

/* Long lists scroll instead of running down the page forever */
.service-sidebar .category {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 991px) {
  .service-sidebar { margin-top: 40px; }
  .service-sidebar .category { max-height: 340px; }
}

/* =========================================================================
   16. PROJECTS STRIP — mobile
   The theme's horizontal-blind layout puts four columns side by side and
   swaps a shared background image. Below 992px that is unreadable, so the
   strip becomes a normal stack of cards with each project's own image.
   ========================================================================= */

@media (max-width: 991px) {
  .portfolio-wrap.hbc-wrap {
    background-image: none !important;
    display: block;
    height: auto;
  }
  .portfolio-wrap.hbc-wrap .row { display: block; margin: 0; }

  .portfolio-wrap.hbc-wrap .item {
    width: 100%;
    max-width: 100%;
    flex: none;
    height: auto;
    padding: 0;
    margin-bottom: 18px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
  }
  .portfolio-wrap.hbc-wrap .item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,0) 30%, rgba(8,13,24,.88) 100%);
  }

  .portfolio-wrap.hbc-wrap .portfolio-item {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  .portfolio-wrap.hbc-wrap .portfolio-content,
  .portfolio-wrap.hbc-wrap .portfolio-info {
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    width: 100%;
  }
  .portfolio-wrap.hbc-wrap .portfolio-title,
  .portfolio-wrap.hbc-wrap .portfolio-title a {
    font-size: 19px;
    line-height: 1.3;
    color: #fff;
  }
  .portfolio-wrap.hbc-wrap .portfolio-subtitle {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-blue-light);
  }
  /* Kill the vertical rotated titles the desktop layout uses */
  .portfolio-wrap.hbc-wrap .portfolio-vertical,
  .portfolio-wrap.hbc-wrap .vertical-title { display: none !important; }
}

@media (max-width: 575px) {
  .portfolio-wrap.hbc-wrap .item { min-height: 250px; }
  .portfolio-wrap.hbc-wrap .portfolio-title,
  .portfolio-wrap.hbc-wrap .portfolio-title a { font-size: 17px; }
}

/* =========================================================================
   17. PARTNER LOGO STRIP
   ========================================================================= */

.partner-area .partner-title {
  text-align: center;
  position: relative;
  margin-bottom: 36px;
}
.partner-area .partner-title::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #e6ecf5;
}
.partner-area .partner-title :is(h2,h3,h4,h5) {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 22px;
  font-size: 17px;
  color: var(--brand-ink);
}

.partner-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 16px 20px;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.partner-item a:hover {
  border-color: rgba(7, 69, 182, .34);
  box-shadow: 0 10px 26px rgba(7, 69, 182, .1);
  transform: translateY(-3px);
}
.partner-item img {
  max-height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .25s, opacity .25s;
}
.partner-item a:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 575px) {
  .partner-area .partner-title :is(h2,h3,h4,h5) { font-size: 15px; padding: 0 14px; }
  .partner-item a { height: 78px; }
}

/* =========================================================================
   18. NAV SWITCHING
   The offcanvas element serves as both the desktop navbar and the mobile
   drawer, so it holds two renderings of the same menu. Show exactly one.
   ========================================================================= */

/*
 * Belt and braces. The markup also carries Bootstrap's d-none / d-lg-flex /
 * d-lg-none utilities, which live in bootstrap.min.css — so if this file is
 * ever cached stale or fails to load, the two menus still cannot both show.
 */
.mobile-nav-wrap   { display: none; }
.desktop-nav       { display: flex; }

@media (max-width: 991.98px) {
  .desktop-nav      { display: none !important; }
  .mobile-nav-wrap  { display: block !important; }
}
@media (min-width: 992px) {
  .mobile-nav-wrap  { display: none !important; }
}

/* =========================================================================
   19. OUR PROCESS
   Six numbered steps with connector arrows on wide screens. Content is
   database-driven, so the grid adapts to however many steps exist.
   ========================================================================= */

.process-area { position: relative; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.process-step {
  position: relative;
  background: #fff;
  border: 1px solid #e5ebf4;
  border-radius: 14px;
  padding: 40px 18px 26px;
  text-align: center;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.process-step:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(7, 69, 182, .14);
}

/* The step number sits astride the top edge, like the reference layout */
.process-step .ps-num {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--brand-ink) 0%, #16233C 100%);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(11, 18, 32, .22);
}
.process-step:hover .ps-num {
  background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  box-shadow: 0 8px 20px rgba(7, 69, 182, .3);
}

.process-step .ps-icon {
  width: 72px;
  height: 72px;
  margin: 8px auto 18px;
  border-radius: 50%;
  border: 2px solid rgba(7, 69, 182, .18);
  background: #f4f7fd;
  color: var(--brand-blue);
  font-size: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .28s, border-color .28s, color .28s;
}
.process-step .ps-icon img { width: 30px; }
.process-step:hover .ps-icon {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  border-color: transparent;
  color: #fff;
}
.process-step:hover .ps-icon img { filter: brightness(0) invert(1); }

.process-step :is(h2,h3,h4,h5) {
  font-family: var(--heading-font);
  font-size: 15.5px;
  line-height: 1.32;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 10px;
}
.process-step :is(h2,h3,h4,h5) a { color: inherit; }
.process-step :is(h2,h3,h4,h5) a:hover { color: var(--brand-blue); }
.process-step :is(h2,h3,h4,h5) .ps-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-blue);
  margin-top: 3px;
}

.process-step p {
  font-size: 13.6px;
  line-height: 1.6;
  color: var(--body-text-color);
  margin: 0;
}

/* Dotted connector between steps, hidden on the last one and on small grids */
@media (min-width: 1200px) {
  .process-step::after {
    content: "";
    position: absolute;
    top: 74px;
    right: -18px;
    width: 18px;
    height: 2px;
    background-image: linear-gradient(90deg, #c3d0e4 0 5px, transparent 5px 9px);
    background-size: 9px 2px;
  }
  .process-step:last-child::after { display: none; }
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1399px) {
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
}

@media (max-width: 991px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .process-step { padding: 38px 16px 24px; }
}

@media (max-width: 575px) {
  .process-grid { grid-template-columns: 1fr; gap: 30px; }
  .process-step { padding: 36px 22px 24px; }
  .process-step .ps-icon { width: 64px; height: 64px; font-size: 24px; }
  .process-step :is(h2,h3,h4,h5) { font-size: 15px; }
  .process-step p { font-size: 14px; }
}

/* =========================================================================
   20. MENU PANELS — solid white
   Every dropdown, mega panel and drawer sub-level sits on plain white with
   no tint, so the sub-items read cleanly at any depth.
   ========================================================================= */

.navbar .dropdown-menu,
.navbar .nav-item.mega > .dropdown-menu.mega-menu,
.navbar .dropdown-menu .dropdown-menu {
  background: #fff;
  background-color: #fff;
}

/* Hover state uses a tint of the brand rather than grey */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background: rgba(7, 69, 182, .06);
}

/* Drawer: white all the way down, including the nested levels */
.offcanvas,
.offcanvas-body,
.mobile-nav-wrap,
.mobile-nav,
.mobile-nav .mobile-sub,
.mobile-nav .mobile-sub .mobile-sub {
  background: #fff;
}
.mobile-nav .mobile-sub > li > a:hover,
.mobile-nav .mobile-sub .mobile-sub > li > a:hover {
  background: transparent;
  color: var(--brand-blue);
}

/* =========================================================================
   21. STANDARD DROPDOWNS — white, like the Solutions mega panel
   The stock theme paints these dark navy at a fixed 220px, which clipped
   longer labels ("Annual Maintenance Contra…") and looked nothing like the
   Solutions panel. These match, size to their content, and scroll when long.
   ========================================================================= */

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    left: 0;
    margin-top: 10px;
    padding: 10px 0;
    width: auto;
    min-width: 262px;
    max-width: 340px;
    background: #fff;
    border: 0;
    border-top: 3px solid var(--brand-blue);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 22px 48px rgba(11, 18, 32, .15);
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The theme used dashed white rules — invisible on white */
  .navbar .nav-item .dropdown-menu li {
    border-bottom: 1px solid #f0f4f9;
  }
  .navbar .nav-item .dropdown-menu li:last-child { border-bottom: 0; }

  .navbar .nav-item .dropdown-menu .dropdown-item {
    font-family: var(--heading-font);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--brand-ink);
    padding: 11px 20px 11px 26px;
    white-space: normal;      /* let long service names wrap instead of clip */
    position: relative;
    transition: color .18s, background .18s, padding-left .18s;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #ccd7e6;
    transition: background .18s;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item:hover,
  .navbar .nav-item .dropdown-menu .dropdown-item:focus,
  .navbar .nav-item .dropdown-menu .dropdown-item.active {
    background: rgba(7, 69, 182, .06);
    color: var(--brand-blue);
    padding-left: 30px;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before,
  .navbar .nav-item .dropdown-menu .dropdown-item.active::before {
    background: var(--brand-blue);
  }

  /* Keep the last menus inside the viewport instead of running off-screen */
  .navbar .navbar-nav > .nav-item:nth-last-child(-n+2) > .dropdown-menu {
    left: auto;
    right: 0;
  }

  /* Scrollbar inside a long dropdown */
  .navbar .nav-item .dropdown-menu::-webkit-scrollbar { width: 8px; }
  .navbar .nav-item .dropdown-menu::-webkit-scrollbar-track { background: #f4f7fb; }
  .navbar .nav-item .dropdown-menu::-webkit-scrollbar-thumb {
    background: #c6d2e2; border-radius: 4px;
  }
  .navbar .nav-item .dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }
}

/* =========================================================================
   22. NAV RIGHT — search + Request a Quote
   These were overlapping the links on laptop widths and disappearing
   entirely between 992 and 1200px.
   ========================================================================= */

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.nav-right .search-btn .nav-right-link {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-ink);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.nav-right .search-btn .nav-right-link:hover {
  background: rgba(7, 69, 182, .08);
  color: var(--brand-blue);
}
.nav-right .theme-btn {
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 14.5px;
}

/*
 * Laptop widths (992-1199px).
 *
 * The stock theme simply hid the Request a Quote button and the sidebar
 * button in this range — so on a 13" laptop the primary call to action
 * vanished entirely. Instead of hiding it, the row is tightened: smaller
 * nav gaps, a smaller logo, and a compact button. Everything stays visible.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .nav-right .nav-btn,
  .navbar .nav-right .sidebar-btn { display: block !important; }

  .navbar .nav-item .nav-link {
    font-size: 14px;
    margin-right: 0 !important;
    padding-left: 7px;
    padding-right: 7px;
  }
  .navbar .nav-right { gap: 10px !important; margin-left: 12px !important; }
  .navbar-brand img { max-height: 42px; }

  .nav-right .theme-btn {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 7px;
  }
  /* The arrow is decoration; drop it before the label wraps */
  .nav-right .theme-btn i { display: none; }
  .nav-right .search-btn .nav-right-link { width: 36px; height: 36px; font-size: 15px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar .nav-item .nav-link { font-size: 14.5px; padding-left: 9px; padding-right: 9px; }
  .navbar .nav-right { gap: 14px !important; margin-left: 18px !important; }
  .nav-right .theme-btn { padding: 10px 18px; font-size: 13.5px; }
}

}

/* Partner strip sits right under the hero — tighter spacing, bolder heading */
.partner-strip { padding-top: 68px; padding-bottom: 68px; }
.partner-strip .partner-title :is(h2,h3,h4,h5) {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}
@media (max-width: 767px) {
  .partner-strip { padding-top: 48px; padding-bottom: 48px; }
  .partner-strip .partner-title :is(h2,h3,h4,h5) { font-size: 15.5px; line-height: 1.4; }
  .partner-strip .partner-title::before { display: none; }
}

/* =========================================================================
   23. HELPDESK
   ========================================================================= */

.ticket-created {
  background: #fff;
  border: 1px solid #e5ebf4;
  border-radius: 18px;
  padding: 50px 34px 42px;
  text-align: center;
}
.ticket-created .tc-icon {
  width: 76px; height: 76px; margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(34, 160, 90, .1);
  color: #22a05a; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}
.ticket-created h3 { font-size: 27px; margin-bottom: 8px; }
.ticket-created .tc-ref {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 26px; font-weight: 700; letter-spacing: .06em;
  color: var(--brand-blue);
  background: rgba(7, 69, 182, .07);
  border: 1px dashed rgba(7, 69, 182, .35);
  border-radius: 12px;
  padding: 14px 26px;
  margin: 14px 0 18px;
  word-break: break-all;
}
.ticket-created .tc-note { color: var(--body-text-color); font-size: 14.5px; }
.ticket-created .tc-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
}

.ticket-view {
  background: #fff; border: 1px solid #e5ebf4; border-radius: 18px; padding: 30px 26px;
}
.ticket-view .tv-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eef2f8; flex-wrap: wrap;
}
.ticket-view .tv-ref {
  font-family: var(--heading-font); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--brand-blue);
}
.ticket-view .tv-head h3 { font-size: 22px; margin: 4px 0 0; }

.ticket-view .tv-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #eef2f8;
}
.ticket-view .tv-meta div { font-size: 14.5px; color: var(--brand-ink); }
.ticket-view .tv-meta span {
  display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #9aa8bd; margin-bottom: 3px;
}

.tv-thread { display: flex; flex-direction: column; gap: 14px; }
.tv-msg { border-radius: 12px; padding: 16px 18px; }
.tv-msg.from-customer { background: #f4f7fc; border: 1px solid #e6ecf5; }
.tv-msg.from-staff    { background: rgba(7, 69, 182, .06); border: 1px solid rgba(7, 69, 182, .18); }
.tv-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.tv-msg-head strong { font-family: var(--heading-font); font-size: 14.5px; color: var(--brand-ink); }
.tv-msg-head span { font-size: 12.5px; color: #90a0b7; }
.tv-msg p { margin: 0; font-size: 14.8px; line-height: 1.66; }

.tv-reply { margin-top: 24px; padding-top: 22px; border-top: 1px solid #eef2f8; }
.tv-reply label {
  display: block; font-family: var(--heading-font); font-weight: 600;
  font-size: 14.5px; margin-bottom: 8px; color: var(--brand-ink);
}
.tv-reply textarea {
  width: 100%; padding: 14px 16px; border: 1px solid #e3e9f2; border-radius: 10px;
  font-family: var(--body-font); font-size: 15px; margin-bottom: 14px; resize: vertical;
}
.tv-reply textarea:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(7, 69, 182, .12);
}
.tv-closed {
  margin-top: 22px; padding: 14px 18px; border-radius: 10px;
  background: #f4f7fc; color: var(--body-text-color); font-size: 14.5px;
}

@media (max-width: 575px) {
  .ticket-created { padding: 38px 20px 32px; }
  .ticket-created .tc-ref { font-size: 20px; padding: 12px 18px; }
  .ticket-created .tc-actions .theme-btn { width: 100%; justify-content: center; }
  .ticket-view { padding: 22px 18px; }
  .ticket-view .tv-head h3 { font-size: 19px; }
}

/* =========================================================================
   24. FAQ ACCORDION
   ========================================================================= */

.faq-accordion .accordion-item {
  background: #fff;
  border: 1px solid #e5ebf4;
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(7, 69, 182, .34);
  box-shadow: 0 14px 34px rgba(7, 69, 182, .1);
}

.faq-accordion .accordion-button {
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-ink);
  background: #fff;
  padding: 20px 56px 20px 20px;
  border: 0;
  box-shadow: none !important;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--brand-blue); background: #fff; }

/* Numbered marker instead of the theme's question-mark blob */
.faq-accordion .accordion-button > span:first-child {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(7, 69, 182, .09);
  color: var(--brand-blue);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.faq-accordion .accordion-button:not(.collapsed) > span:first-child {
  background: linear-gradient(120deg, var(--brand-blue), var(--brand-blue-bright));
  color: #fff;
}
.faq-accordion .accordion-button > span.faq-num {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Replace the default caret with a + / − that rotates */
.faq-accordion .accordion-button::after {
  content: "\f067";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  background-image: none !important;
  width: 30px; height: 30px;
  border-radius: 50%;
  background-color: #f1f5fb;
  color: var(--brand-blue);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  right: 16px; top: 18px;
  transition: transform .28s ease, background-color .25s;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: rotate(180deg);
  background-color: var(--brand-blue);
  color: #fff;
}

.faq-accordion .accordion-body {
  padding: 0 20px 22px 68px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body-text-color);
}

@media (max-width: 575px) {
  .faq-accordion .accordion-button {
    font-size: 15px;
    padding: 17px 48px 17px 16px;
    gap: 11px;
  }
  .faq-accordion .accordion-button > span:first-child { flex-basis: 30px; width: 30px; height: 30px; }
  .faq-accordion .accordion-button::after { right: 12px; top: 16px; width: 26px; height: 26px; }
  .faq-accordion .accordion-body { padding: 0 16px 18px 57px; font-size: 14.5px; }
}

/* =========================================================================
   25. TESTIMONIAL MARQUEE
   Two rows scrolling in opposite directions. Duration comes from an inline
   --tm-speed set by PHP, so the admin controls the pace.
   ========================================================================= */

.testimonial-marquee-area { background: linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%); }

.tm-shell {
  background: #fff;
  border-radius: 26px;
  padding: 54px 0 44px;
  box-shadow: 0 26px 70px rgba(11, 18, 32, .08);
  position: relative;
  overflow: hidden;
}

.tm-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 22px;
  background: var(--brand-ink);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 30px;
}
.tm-badge i { color: var(--brand-blue-light); margin-right: 7px; }

.tm-shell .site-heading { padding: 0 24px; margin-bottom: 34px; }

/* --- the rows ---------------------------------------------------------- */
.tm-row {
  position: relative;
  overflow: hidden;
  padding: 9px 0;
  /* Fade the edges so cards enter and leave softly */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.tm-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tm-scroll var(--tm-speed, 55s) linear infinite;
}
.tm-row.reverse .tm-track { animation-direction: reverse; }

@keyframes tm-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* The list is printed twice, so -50% is exactly one full loop */
  to   { transform: translate3d(-50%, 0, 0); }
}

.tm-row:hover .tm-track { animation-play-state: paused; }

/* --- the card ---------------------------------------------------------- */
.tm-card {
  flex: 0 0 344px;
  width: 344px;
  margin: 0;
  background: #f6f8fc;
  border: 1px solid #e8edf5;
  border-radius: 15px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: background .25s, border-color .25s, transform .25s;
}
.tm-card:hover {
  background: #fff;
  border-color: rgba(7, 69, 182, .28);
  transform: translateY(-3px);
}

.tm-card .tm-quote { color: var(--brand-blue); font-size: 19px; margin-bottom: 12px; }

.tm-card blockquote {
  margin: 0 0 18px;
  font-size: 14.8px;
  line-height: 1.7;
  color: var(--brand-ink);
  flex: 1 1 auto;
}

.tm-card figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
.tm-card figcaption img,
.tm-card .tm-initial {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
}
.tm-card .tm-initial {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-bright));
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.tm-card .tm-who { display: flex; flex-direction: column; min-width: 0; }
.tm-card .tm-who strong {
  font-family: var(--heading-font);
  font-size: 14.5px;
  color: var(--brand-ink);
  line-height: 1.3;
}
.tm-card .tm-who small { font-size: 12.5px; color: #8a99b0; line-height: 1.35; }
.tm-card .tm-stars { margin-left: auto; color: #f5a623; font-size: 11px; letter-spacing: 1px; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 991px) {
  .tm-shell { border-radius: 20px; padding: 42px 0 34px; }
  .tm-card { flex-basis: 300px; width: 300px; }
}
@media (max-width: 575px) {
  .testimonial-marquee-area { padding-top: 70px; padding-bottom: 70px; }
  .tm-shell { border-radius: 16px; padding: 34px 0 28px; }
  .tm-badge { font-size: 11.5px; padding: 8px 15px; }
  .tm-card { flex-basis: 268px; width: 268px; padding: 20px 18px 17px; }
  .tm-card blockquote { font-size: 14.2px; }
  .tm-row {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

/* Anyone who prefers reduced motion gets a static, scrollable row */
@media (prefers-reduced-motion: reduce) {
  .tm-track { animation: none; }
  .tm-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================================
   26. HELPDESK LINK IN THE HEADER + FLOATING BUTTON
   ========================================================================= */

.nav-help .help-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 9px 14px;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.nav-help .help-link i { color: var(--brand-blue); font-size: 15px; }
.nav-help .help-link:hover {
  border-color: rgba(7, 69, 182, .4);
  background: rgba(7, 69, 182, .05);
  color: var(--brand-blue);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-help .help-link { padding: 7px 10px; font-size: 13px; }
  .nav-help .help-link span { display: none; }   /* icon only when tight */
}
@media (max-width: 991.98px) {
  .nav-help { width: 100%; }
  .nav-help .help-link { width: 100%; justify-content: center; }
}

.floating-actions .float-btn.helpdesk {
  background: var(--brand-ink);
}
.floating-actions .float-btn.helpdesk:hover { background: var(--brand-blue); }

/* =========================================================================
   27. SERVICE CARDS — image + heading + content
   ========================================================================= */

.service-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 20px 46px rgba(7, 69, 182, .14);
}

.service-card .sc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef3fa;
}
.service-card .sc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.service-card:hover .sc-media img { transform: scale(1.07); }
.service-card .sc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 45%, rgba(9,15,28,.55) 100%);
}

/* The icon rides on the bottom edge of the photo, tying the two together */
.service-card .sc-media-icon {
  position: absolute;
  left: 20px;
  bottom: -22px;
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  color: #fff;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(7, 69, 182, .3);
}
.service-card .sc-media-icon img { width: 22px; filter: brightness(0) invert(1); }

.service-card .sc-body {
  padding: 36px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.service-card .sc-body :is(h2,h3,h4,h5) {
  font-family: var(--heading-font);
  font-size: 18px;
  line-height: 1.34;
  margin-bottom: 10px;
}
.service-card .sc-body :is(h2,h3,h4,h5) a { color: var(--brand-ink); }
.service-card .sc-body :is(h2,h3,h4,h5) a:hover { color: var(--brand-blue); }
.service-card .sc-body p {
  font-size: 14.4px;
  line-height: 1.65;
  color: var(--body-text-color);
  margin-bottom: 16px;
  flex: 1 1 auto;
}
.service-card .sc-link {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card .sc-link i { transition: transform .25s; font-size: 12px; }
.service-card:hover .sc-link i { transform: translateX(4px); }

/* Icon-only variant, if the layout setting is switched back */
.service-card.icon-mode .sc-body { padding-top: 0; }
.service-card.icon-mode .sc-icon {
  width: 56px; height: 56px;
  margin: 24px 22px 0;
  border-radius: 13px;
  background: rgba(7, 69, 182, .08);
  color: var(--brand-blue);
  font-size: 21px;
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================================
   28. SECTION SPACING
   The partner strip sat immediately above Our Process with both paddings
   stacking, which left a large empty band.
   ========================================================================= */

.partner-strip + .process-area,
.partner-strip + * > .process-area { padding-top: 24px; }
.process-area { padding-bottom: 0; }

@media (max-width: 767px) {
  .partner-strip + .process-area { padding-top: 8px; }
}

/* Downloads box — outlined pills, and the empty-state prompt */
.service-download { display: flex; flex-direction: column; gap: 10px; }
.service-download a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--heading-font);
  font-size: 14.2px;
  font-weight: 600;
  color: var(--brand-ink);
  border: 1.5px solid var(--brand-blue);
  border-radius: 30px;
  padding: 12px 18px;
  line-height: 1.3;
  transition: background .2s, color .2s;
}
.service-download a i { color: var(--brand-blue); font-size: 15px; flex: 0 0 auto; }
.service-download a:hover { background: var(--brand-blue); color: #fff; }
.service-download a:hover i { color: #fff; }

.service-download .dl-empty {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-text-color);
  margin: 0 0 4px;
}
.service-download .dl-request {
  border-style: dashed;
  justify-content: center;
}

@media (max-width: 575px) {
  .service-download a { font-size: 13.6px; padding: 11px 15px; }
}

/* A heading that exists for the document outline and screen readers only */
.visually-hidden-heading {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   29. CARD REDESIGN — image-led with gradient
   Applies to solution ranges, services and industries so the three grids
   read as one family. The gradient is what makes white text legible over
   any photograph, however light.
   ========================================================================= */

/* ---- shared image treatment ---- */
.card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0B1220;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,18,32,0) 38%, rgba(9,15,28,.82) 100%),
    linear-gradient(115deg, rgba(7,69,182,.42) 0%, rgba(7,69,182,0) 55%);
  transition: opacity .35s;
}

/* =========================================================================
   30. INDUSTRY CARDS — legible title over any photo
   ========================================================================= */

.industry-card {
  position: relative;
  height: 100%;
  min-height: 250px;
  border-radius: 14px;
  overflow: hidden;
  background: #0B1220;
  display: flex;
  isolation: isolate;
}
.industry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;                       /* the gradient does the darkening now */
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
}
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,18,32,.15) 0%, rgba(9,15,28,.62) 46%, rgba(6,11,22,.94) 100%),
    linear-gradient(120deg, rgba(7,69,182,.45) 0%, rgba(7,69,182,0) 60%);
  transition: opacity .35s;
}
.industry-card:hover img { transform: scale(1.07); }
.industry-card:hover::before { opacity: .93; }

.industry-card .ic-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 22px 20px 20px;
  width: 100%;
}
.industry-card .ic-body i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(43,138,239,.22);
  border: 1px solid rgba(43,138,239,.45);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 17px;
}
.industry-card .ic-body :is(h2,h3,h4,h5) {
  font-family: var(--heading-font);
  font-size: 19px;
  line-height: 1.28;
  margin-bottom: 7px;
  /* A shadow keeps it readable even where a photo goes pale */
  text-shadow: 0 1px 12px rgba(6,11,22,.6);
}
.industry-card .ic-body :is(h2,h3,h4,h5) a { color: #fff; }
.industry-card .ic-body :is(h2,h3,h4,h5) a:hover { color: var(--brand-blue-light); }
.industry-card .ic-body p {
  font-size: 13.8px;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  margin: 0;
  text-shadow: 0 1px 10px rgba(6,11,22,.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 575px) {
  .industry-card { min-height: 215px; }
  .industry-card .ic-body { padding: 18px 16px 16px; }
  .industry-card .ic-body :is(h2,h3,h4,h5) { font-size: 17.5px; }
}

/* =========================================================================
   31. SOLUTION RANGE CARDS — image + heading + text
   Replaces the theme's masked "blob" image shape, which cropped the
   photograph into overlapping circles.
   ========================================================================= */

.solution-range-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.solution-range-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(7,69,182,.15);
}
.solution-range-card .card-media { aspect-ratio: 16 / 10; }
.solution-range-card:hover .card-media img { transform: scale(1.07); }

.solution-range-card .src-num {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px;
  padding: 4px 10px;
}
.solution-range-card .src-icon {
  position: absolute;
  left: 18px;
  bottom: -21px;
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  color: #fff;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(7,69,182,.32);
}
/* The icon sat flush to the edge and looked clipped */
.solution-range-card .src-icon i { line-height: 1; }

.solution-range-card .src-body {
  padding: 34px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.solution-range-card .src-body :is(h2,h3,h4,h5) {
  font-family: var(--heading-font);
  font-size: 18px;
  line-height: 1.32;
  margin-bottom: 9px;
}
.solution-range-card .src-body :is(h2,h3,h4,h5) a { color: var(--brand-ink); }
.solution-range-card .src-body :is(h2,h3,h4,h5) a:hover { color: var(--brand-blue); }
.solution-range-card .src-body p {
  font-size: 14.2px;
  line-height: 1.64;
  color: var(--body-text-color);
  margin-bottom: 15px;
  flex: 1 1 auto;
}
.solution-range-card .src-count {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-blue);
  background: rgba(7,69,182,.08);
  border-radius: 20px;
  padding: 3px 11px;
  margin-bottom: 11px;
  align-self: flex-start;
}
.solution-range-card .sc-link {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.solution-range-card .sc-link i { font-size: 12px; transition: transform .25s; }
.solution-range-card:hover .sc-link i { transform: translateX(4px); }

@media (max-width: 575px) {
  .solution-range-card .src-body { padding: 32px 18px 20px; }
}

/* =========================================================================
   32. SERVICE CARD — icon no longer clipped by the image edge
   ========================================================================= */

.service-card .sc-media { aspect-ratio: 16 / 10; }
.service-card .sc-media-icon {
  left: 18px;
  bottom: -21px;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: visible;
}
.service-card .sc-media-icon i { line-height: 1; font-size: 18px; }
.service-card .sc-body { padding-top: 34px; }
.service-card .sc-media::after {
  background:
    linear-gradient(180deg, rgba(11,18,32,0) 45%, rgba(9,15,28,.5) 100%),
    linear-gradient(115deg, rgba(7,69,182,.34) 0%, rgba(7,69,182,0) 58%);
}

/* =========================================================================
   33. NAVBAR HEIGHT — the row was taller than it needed to be
   ========================================================================= */

@media (min-width: 992px) {
  .header .navbar { padding-top: 0; padding-bottom: 0; }
  .header .navbar > .container { padding-top: 6px; padding-bottom: 6px; }
  .navbar-brand { padding-top: 4px; padding-bottom: 4px; }
  .navbar-brand img { max-height: 44px; }
  .navbar .nav-item .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .header .header-top { padding-top: 7px; padding-bottom: 7px; }
}

/* =========================================================================
   34. FOOTER ALIGNMENT
   The contact strip, columns and utility row were each aligned differently.
   ========================================================================= */

.footer-area .footer-contact {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--brand-ink-line);
}
.footer-area .footer-contact > div:first-child { flex: 0 0 auto; }
.footer-area .footer-logo img { max-height: 54px; width: auto; }

.footer-area .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.footer-area .footer-contact-item :is(h2,h3,h4,h5) {
  font-size: 14px;
  margin: 0 0 2px;
  color: rgba(255,255,255,.62);
  font-weight: 500;
}
.footer-area .footer-contact-item p,
.footer-area .footer-contact-item a {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
}

/* Equal-height columns on one baseline */
.footer-area .footer-widget-wrap > .row > [class*="col-"] { display: flex; }
.footer-area .footer-widget-box { width: 100%; }
.footer-area .footer-widget-title {
  font-size: 17px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  position: relative;
}
.footer-area .footer-list { display: flex; flex-direction: column; gap: 9px; }
.footer-area .footer-list li { line-height: 1.4; }
.footer-area .footer-list li a { font-size: 14.4px; }

/* The utility row wrapped unevenly and crowded the copyright line */
.footer-area .footer-utility {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  padding: 20px 0;
  margin-top: 26px;
  border-top: 1px solid var(--brand-ink-line);
}
.footer-area .footer-utility a { font-size: 13.6px; color: rgba(255,255,255,.72); }
.footer-area .footer-utility a:hover { color: var(--brand-blue-light); }

.footer-area .copyright { text-align: center; padding: 16px 0; }
.footer-area .copyright p { margin: 0; font-size: 13.8px; }

@media (max-width: 991px) {
  .footer-area .footer-contact { justify-content: flex-start; gap: 20px; }
  .footer-area .footer-widget-box { margin-bottom: 30px; }
}
@media (max-width: 575px) {
  .footer-area .footer-contact { flex-direction: column; align-items: flex-start; }
  .footer-area .footer-utility { gap: 9px 16px; }
  .footer-area .footer-utility a { font-size: 13px; }
}

/* =========================================================================
   35. ABOUT PAGE
   ========================================================================= */

/* ---- split image composition ---- */
.about-figures {
  position: relative;
  padding: 0 0 62px 0;
}
.about-figures .af-main,
.about-figures .af-sub {
  border-radius: 16px;
  overflow: hidden;
  background: #eef3fa;
}
.about-figures .af-main { aspect-ratio: 4 / 3; }
.about-figures .af-main img,
.about-figures .af-sub img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-figures .af-sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 6px solid #fff;
  box-shadow: 0 18px 44px rgba(11,18,32,.16);
}
.about-figures .af-badge {
  position: absolute;
  left: 0;
  bottom: 26px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 14px 34px rgba(7,69,182,.34);
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-figures .afb-n {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.about-figures .afb-l { font-size: 12.4px; line-height: 1.3; opacity: .92; }

.about-lead {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--brand-ink);
  margin-bottom: 14px;
}

.about-quickfacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e6ecf5;
}
.about-quickfacts div { display: flex; flex-direction: column; }
.about-quickfacts strong {
  font-family: var(--heading-font);
  font-size: 25px;
  color: var(--brand-blue);
  line-height: 1.1;
}
.about-quickfacts span { font-size: 12.6px; color: var(--body-text-color); margin-top: 2px; }

.about-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---- mission & vision ---- */
.mv-area { padding-bottom: 20px; }
.mv-card {
  height: 100%;
  border-radius: 18px;
  padding: 34px 30px;
  background: linear-gradient(150deg, var(--brand-ink) 0%, #16233C 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mv-card::after {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: rgba(43,138,239,.12);
}
.mv-card.alt {
  background: linear-gradient(150deg, var(--brand-blue) 0%, var(--brand-blue-bright) 100%);
}
.mv-card.alt::after { background: rgba(255,255,255,.12); }
.mv-card .mv-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.mv-card h2 {
  color: #fff;
  font-size: 23px;
  margin-bottom: 12px;
  position: relative; z-index: 2;
}
.mv-card p {
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.72;
  margin: 0;
  position: relative; z-index: 2;
}

/* ---- values ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.value-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  padding: 26px 22px 22px;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.value-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(7,69,182,.13);
}
.value-card .vc-num {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--brand-blue);
  background: rgba(7,69,182,.08);
  border-radius: 7px;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.value-card h3 {
  font-family: var(--heading-font);
  font-size: 17px;
  line-height: 1.34;
  color: var(--brand-ink);
  margin-bottom: 7px;
}
.value-card p {
  font-size: 14.2px;
  line-height: 1.64;
  color: var(--body-text-color);
  margin: 0;
}

/* ---- stats band ---- */
.about-stats {
  background: linear-gradient(120deg, var(--brand-ink) 0%, #16233C 100%);
  padding: 56px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-box { color: #fff; }
.stat-box .sb-n {
  display: block;
  font-family: var(--heading-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}
.stat-box .sb-l {
  display: block;
  font-size: 13.4px;
  color: rgba(255,255,255,.72);
  margin-top: 6px;
}

/* ---- team ---- */
.team-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.team-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(7,69,182,.14);
}
.team-card .card-media { aspect-ratio: 1 / 1; }
.team-card:hover .card-media img { transform: scale(1.06); }
.team-card .tc-body { padding: 20px 18px; }
.team-card .tc-body h3 {
  font-family: var(--heading-font);
  font-size: 17px;
  color: var(--brand-ink);
  margin-bottom: 2px;
}
.team-card .tc-role {
  display: block;
  font-size: 13px;
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: 8px;
}
.team-card .tc-body p {
  font-size: 13.8px;
  line-height: 1.6;
  color: var(--body-text-color);
  margin: 0;
}

/* ---- where to next ---- */
.next-card {
  display: block;
  height: 100%;
  background: #f6f8fc;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  padding: 28px 24px;
  transition: background .28s, transform .28s, box-shadow .28s, border-color .28s;
}
.next-card:hover {
  background: #fff;
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(7,69,182,.13);
}
.next-card > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-bright));
  color: #fff;
  font-size: 20px;
  margin-bottom: 18px;
}
.next-card h3 {
  font-family: var(--heading-font);
  font-size: 18px;
  color: var(--brand-ink);
  margin-bottom: 8px;
}
.next-card p {
  font-size: 14.2px;
  line-height: 1.62;
  color: var(--body-text-color);
  margin-bottom: 14px;
}
.next-card .nc-go {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.next-card .nc-go i { font-size: 12px; transition: transform .25s; }
.next-card:hover .nc-go i { transform: translateX(4px); }

/* ---- responsive ---- */
@media (max-width: 1199px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .about-figures { padding-bottom: 54px; margin-bottom: 34px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .mv-card { padding: 30px 24px; }
}
@media (max-width: 575px) {
  .about-quickfacts { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .about-quickfacts strong { font-size: 22px; }
  .values-grid { grid-template-columns: 1fr; }
  .about-figures .af-sub { width: 52%; border-width: 5px; }
  .about-figures .af-badge { padding: 13px 15px; bottom: 18px; }
  .about-figures .afb-n { font-size: 24px; }
  .about-figures .afb-l { font-size: 11.4px; }
  .stat-box .sb-n { font-size: 32px; }
  .mv-card h2 { font-size: 20px; }
  .about-actions .theme-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Partner logo marquee — continuous, GPU-accelerated, no flicker
   ============================================================ */
.partner-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partner-marquee .partner-track{display:flex;width:max-content;
  animation:partnerScroll var(--marquee-speed,30s) linear infinite;
  will-change:transform}
.partner-marquee:hover .partner-track{animation-play-state:paused}
.partner-marquee .partner-item{flex:0 0 auto;padding:0 34px;display:flex;align-items:center}
.partner-marquee .partner-item img{max-height:46px;width:auto;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.partner-marquee .partner-item a:hover img{filter:grayscale(0);opacity:1}
@keyframes partnerScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .partner-marquee .partner-track{animation:none;flex-wrap:wrap;justify-content:center}
}

/* Typical Applications — clean two-column list (consistent with other pages,
   replaces the old boxed grid). Uses the standard .list item styling. */
.service-details .content .application-list{
  display:grid;grid-template-columns:1fr 1fr;gap:0 30px;
}
.service-details .content .application-list li{margin-top:8px}
@media (max-width:575.98px){
  .service-details .content .application-list{grid-template-columns:1fr}
}