/*
  Additional Services page (additional-services.php) — scoped redesign.
  Every rule is prefixed with .additional-services-page so nothing here
  leaks onto the sibling service pages (digital-transformation.php,
  consulting-services.php, saas-platform-development.php,
  app-modernization.php) that share the exact same .solution-box /
  .service-bg / #myHeader markup and CSS classes, defined in
  assets/css/main.css.

  Unlike its four siblings, this page never had an "Our Expertise" grid,
  "Benefits to Clients" grid, or "Our Process" timeline — it's a shorter
  page (hero -> intro -> a single 5-card solution grid -> testimonials ->
  CTA -> case studies). This redesign matches the sibling pages' visual
  language (hero badge/gradient, working sticky-nav scrollspy, the same
  card-grid treatment for the 5 solution boxes, the same CTA-band tint)
  WITHOUT inventing new content sections that were never part of this
  page — a shorter page is the honest shape of this content, not a gap
  to be papered over with fabricated "expertise"/"benefits" copy.
*/

.additional-services-page{--asx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

/* ---------------------------------------------------------------------- */
/* 1) Hero — richer gradient, faint diagonal signal-line texture, eyebrow  */
/*    badge, pulsing status dot. This page's `.video-overlay-main` has no */
/*    inline background style (unlike digital-transformation.php's), so   */
/*    !important isn't strictly required, but it's kept for parity/safety.*/
/* ---------------------------------------------------------------------- */
.additional-services-page .main-video-section .video-overlay-main{
  background: linear-gradient(125deg, rgba(8,14,28,.88) 0%, rgba(24,88,202,.60) 55%, rgba(8,14,28,.84) 100%) !important;
  position: absolute;
}
.additional-services-page .main-video-section .video-overlay-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  opacity:.6;
}
.additional-services-page .main-video-section .container{position:relative;z-index:1;}
.additional-services-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family: var(--asx-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.additional-services-page .hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4A8AFE;
  box-shadow:0 0 0 4px rgba(74,138,254,.3);
  animation: asxPulse 2.2s ease-in-out infinite;
}
@keyframes asxPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.additional-services-page .main-video-section .section-content .title{text-shadow:0 2px 20px rgba(0,0,0,.3);}

/* ---------------------------------------------------------------------- */
/* 2) Sticky sub-nav — the markup existed only as a commented-out block    */
/*    (copy-pasted from saas-platform-development.php with sections this  */
/*    page never had). It's re-enabled here with just the 3 sections that */
/*    actually exist (About / Solutions / Case Studies), plus a real      */
/*    sliding indicator driven by the IntersectionObserver scrollspy      */
/*    added in the page's inline script.                                  */
/* ---------------------------------------------------------------------- */
.additional-services-page .single-header-main{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16,24,40,.06);
}
.additional-services-page .single-header-main.sticky{background: rgba(255,255,255,.86);}
.additional-services-page .single-header-main .container{position:relative;}
.additional-services-page .main-menu .menu-item .menu-link{font-weight:600;}
.additional-services-page .main-menu .menu-item .menu-link::after{display:none;}
.additional-services-page .menu-indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:2.5px;
  width:0;
  border-radius:3px 3px 0 0;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
  transition: transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  opacity:0;
}
.additional-services-page .menu-indicator.is-ready{opacity:1;}

/* ---------------------------------------------------------------------- */
/* 3) Intro ("About") — a heading accent bar above the existing intro     */
/*    paragraph, matching the section-heading treatment every sibling     */
/*    page uses for its first section.                                   */
/* ---------------------------------------------------------------------- */
.additional-services-page .heading11 h2{position:relative;padding-top:18px;margin-bottom:16px;}
.additional-services-page .heading11 h2::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:46px;height:4px;border-radius:2px;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
}

/* ---------------------------------------------------------------------- */
/* 4) Solution grid — 5 cards (odd count) reflowed as a CSS grid so the    */
/*    5th ("Workflow Tools & Integrations", carries .border-bottom-0) can */
/*    be promoted to a full-width closing card instead of sitting alone   */
/*    in a half-empty row — the same technique used on the sibling pages. */
/*                                                                          */
/*    GOTCHA: the row is a Bootstrap `.row.g-0` flex container with       */
/*    `.col-lg-6` children. Switching it to `display:grid` doesn't remove */
/*    the children's Bootstrap padding/max-width on its own — those must  */
/*    be zeroed out explicitly below (grid item sizing itself is fine,    */
/*    it ignores the old flex-basis/width automatically).                 */
/* ---------------------------------------------------------------------- */
.additional-services-page .solution-section-main{background:var(--vtc-bg-main-bg-9);}
.additional-services-page .solution-section-main .row.g-0{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.additional-services-page .solution-section-main .row.g-0 > [class*="col-"]{
  width:auto;max-width:none;padding:0;
}
.additional-services-page .solution-box{
  border:1px solid var(--vtc-border-border-1) !important;
  border-radius:16px;
  background:#fff;
  padding:32px 28px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.additional-services-page .solution-box:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(24,88,202,.28);
  border-color: transparent !important;
}
.additional-services-page .solution-box .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;height:58px;
  border-radius:14px;
  background: var(--vtc-bg-main-bg-6);
  transition: background-color .3s ease, transform .3s ease;
}
.additional-services-page .solution-box .icon img{max-width:28px;max-height:28px;}
.additional-services-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);transform: scale(1.06);}
.additional-services-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.additional-services-page .solution-box .heading2 h3::after{display:none;}

/* 5th card ("Workflow Tools & Integrations", carries .border-bottom-0)   */
/* spans both columns with a horizontal icon+copy layout.                */
/* GOTCHA: `grid-column` only affects actual grid ITEMS. The grid items    */
/* here are the `.col-lg-6` wrapper divs (direct children of the          */
/* `display:grid` row) — `.solution-box` is a grandchild, so putting      */
/* `grid-column:1/-1` on it directly has no effect at all. `:has()` lets   */
/* the wrapper be targeted by what it contains instead of needing a       */
/* dedicated class on the wrapper itself. */
.additional-services-page .solution-section-main .row.g-0 > [class*="col-"]:has(.solution-box.border-bottom-0){
  grid-column: 1 / -1;
}
.additional-services-page .solution-box.border-bottom-0{
  display:flex;
  align-items:center;
  gap:28px;
  background: linear-gradient(120deg, var(--vtc-bg-main-blue-1), #fff 60%);
}
.additional-services-page .solution-box.border-bottom-0 .icon{flex-shrink:0;margin-bottom:0 !important;}
.additional-services-page .solution-box.border-bottom-0 .heading2{flex:1;}

@media (max-width:767px){
  .additional-services-page .solution-section-main .row.g-0{grid-template-columns:1fr;}
  .additional-services-page .solution-box.border-bottom-0{flex-direction:column;align-items:flex-start;text-align:left;gap:16px;}
}

/* ---------------------------------------------------------------------- */
/* 5) CTA band (.mini-section-main) — brand-tinted overlay for stronger   */
/*    text contrast, matching the sibling pages' CTA treatment.          */
/* ---------------------------------------------------------------------- */
.additional-services-page .mini-section-main{position:relative;}
.additional-services-page .mini-section-main::before{
  content:"";position:absolute;inset:0;z-index:0;
  background: linear-gradient(100deg, rgba(6,14,34,.86) 0%, rgba(24,88,202,.48) 60%, rgba(6,14,34,.68) 100%);
}
.additional-services-page .mini-section-main .section-absolute{z-index:1;}

/* ---------------------------------------------------------------------- */
/* 6) Reduced motion                                                       */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .additional-services-page .hero-badge .dot{animation:none;}
  .additional-services-page .solution-box,
  .additional-services-page .menu-indicator{transition:none;}
  .additional-services-page .solution-box:hover{transform:none;}
}