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

  Concept: "digital transformation" = signal, code, systems getting upgraded.
  The signature vocabulary borrowed from that world is used sparingly:
    - Hero gradient/texture + pulsing status-dot badge, and a sticky sub-nav
      with a real sliding indicator (IntersectionObserver-driven scrollspy,
      inline script in digital-transformation.php).
    - "> Statement" CLI-prompt markers on the client-benefit cards.
    - Numeric step markers are reserved for the ONE genuine sequence on this
      page — the 7-stage "Our Process" timeline — since only that content is
      actually ordered.
*/

.digital-transformation-page{--dtx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

/* ---------------------------------------------------------------------- */
/* 1) Hero — richer gradient, faint diagonal signal-line texture, eyebrow  */
/*    badge, pulsing status dot.                                          */
/* ---------------------------------------------------------------------- */
/* !important is required here: the hero markup carries an inline
   `style="background: rgba(0,0,0,.7)"` on this element, which otherwise
   always wins over any external stylesheet rule regardless of selector
   specificity. */
.digital-transformation-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;
}
.digital-transformation-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;
}
.digital-transformation-page .main-video-section .container{position:relative;z-index:1;}
.digital-transformation-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(--dtx-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.digital-transformation-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: dtxPulse 2.2s ease-in-out infinite;
}
@keyframes dtxPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.digital-transformation-page .main-video-section .section-content .title{text-shadow:0 2px 20px rgba(0,0,0,.3);}

/* ---------------------------------------------------------------------- */
/* 2) Sticky sub-nav — glass bar + a real sliding indicator driven by the  */
/*    IntersectionObserver scrollspy added in the page's inline script     */
/*    (previously the "active" class was hard-coded on the first item and */
/*    never updated on scroll).                                            */
/* ---------------------------------------------------------------------- */
.digital-transformation-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);
}
.digital-transformation-page .single-header-main.sticky{background: rgba(255,255,255,.86);}
.digital-transformation-page .single-header-main .container{position:relative;}
.digital-transformation-page .main-menu .menu-item .menu-link{font-weight:600;}
.digital-transformation-page .main-menu .menu-item .menu-link::after{display:none;}
.digital-transformation-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;
}
.digital-transformation-page .menu-indicator.is-ready{opacity:1;}

/* ---------------------------------------------------------------------- */
/* 4) "Why Choose" grid — 5 cards (odd count) reflowed as a CSS grid so    */
/*    the 5th ("Operational Efficiency") can be promoted to a full-width   */
/*    closing card instead of sitting alone in a half-empty row.          */
/*                                                                          */
/*    GOTCHA: the row is a Bootstrap `.row.mt-5.g-0` flex container with  */
/*    `.col-lg-6` children. Switching the row to `display:grid` does NOT  */
/*    remove the children's flex-basis/width rules on its own — those     */
/*    still come from Bootstrap's `.col-lg-6{flex:0 0 auto;width:50%}`    */
/*    and, unlike flexbox, a grid item's sizing is controlled by the      */
/*    grid track, not the item's own width/flex properties, so in practice*/
/*    this is harmless — but padding/max-width from the column classes    */
/*    DO still apply and must be zeroed out explicitly below.             */
/* ---------------------------------------------------------------------- */
.digital-transformation-page .solution-section-main{background:var(--vtc-bg-main-bg-9);}
.digital-transformation-page .solution-section-main .row.mt-5.g-0{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.digital-transformation-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]{
  width:auto;max-width:none;padding:0;
}
.digital-transformation-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;
}
.digital-transformation-page .solution-box:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(24,88,202,.28);
  border-color: transparent !important;
}
.digital-transformation-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;
}
.digital-transformation-page .solution-box .icon img{max-width:28px;max-height:28px;}
.digital-transformation-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);transform: scale(1.06);}
.digital-transformation-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.digital-transformation-page .solution-box .heading2 h3::after{display:none;}

/* 5th card ("Operational Efficiency", carries .border-bottom-0) spans     */
/* both columns and switches to a horizontal icon+copy layout — a closing  */
/* statement rather than a 5th item awkwardly alone in the grid.           */
/* GOTCHA: `grid-column` only affects actual grid ITEMS — the grid items   */
/* here are the `.col-lg-6` wrapper divs, not `.solution-box` (a           */
/* grandchild), so setting it directly on `.solution-box` has NO effect.   */
/* `:has()` targets the wrapper by what it contains instead. */
.digital-transformation-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]:has(.solution-box.border-bottom-0){
  grid-column: 1 / -1;
}
.digital-transformation-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%);
}
.digital-transformation-page .solution-box.border-bottom-0 .icon{flex-shrink:0;margin-bottom:0 !important;}
.digital-transformation-page .solution-box.border-bottom-0 .heading2{flex:1;}

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

/* ---------------------------------------------------------------------- */
/* 5) CTA bands (.service-bg / .mini-section-main) — brand-tinted overlay  */
/*    on the full-bleed photo banners for stronger text contrast, and a   */
/*    restrained top hairline on the lighter .service-bg bands so all     */
/*    four CTA moments read as one consistent family rather than each     */
/*    getting its own decoration.                                        */
/* ---------------------------------------------------------------------- */
.digital-transformation-page .mini-section-main{position:relative;}
.digital-transformation-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%);
}
.digital-transformation-page .mini-section-main .section-absolute{z-index:1;}
.digital-transformation-page .service-bg{border-top:1px solid rgba(24,88,202,.12);}

/* ---------------------------------------------------------------------- */
/* 6) "Our Expertise" grid — 8 cards, 4-column grid (2 clean rows), each   */
/*    promoted to a real bordered card. The existing box1..box8 colour    */
/*    variety on the icon strip (from the earlier design-system pass) is  */
/*    kept as-is — it already gives each capability its own identity.     */
/* ---------------------------------------------------------------------- */
.digital-transformation-page .expertise-section .row.g-0{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.digital-transformation-page .expertise-section .row.g-0 > [class*="col-"]{width:auto;max-width:none;padding:0;}
.digital-transformation-page .expertise-box{
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--vtc-border-border-1);
  border-radius:16px;
  overflow:hidden;
}
.digital-transformation-page .expertise-box:hover{box-shadow: 0 20px 44px -20px rgba(24,88,202,.28);}
.digital-transformation-page .expertise-box .icon{height:190px;margin-bottom:0;padding:0;}
.digital-transformation-page .expertise-box .icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
.digital-transformation-page .expertise-box .content{padding:22px 22px 26px;}
.digital-transformation-page .expertise-box .content h3{font-size:18px;}
.digital-transformation-page .expertise-box .content p{font-size:14px;}

@media (max-width:1199px){
  .digital-transformation-page .expertise-section .row.g-0{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:575px){
  .digital-transformation-page .expertise-section .row.g-0{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- */
/* 7) "Benefits to Clients" — 12 glass cards on the dark photo band get a  */
/*    CLI-prompt "> " marker and alternate blue/amber left accent for a   */
/*    quiet visual rhythm across the grid (kept subtle — column count and */
/*    the existing glass-card treatment are left untouched).              */
/* ---------------------------------------------------------------------- */
.digital-transformation-page .benefit-box h3{position:relative;padding-left:20px;}
.digital-transformation-page .benefit-box h3::before{
  content:">";position:absolute;left:0;top:-1px;
  color:#7DAEFF;font-weight:800;
}
/* .benefit-box is the sole child of its `.col-lg-6` wrapper, so the        */
/* alternation has to key off the wrapper's position among its siblings —  */
/* `.benefit-box:nth-child(even)` would never match (it's always the       */
/* wrapper's only/first child, i.e. always odd).                           */
.digital-transformation-page .benefits-section .row > div:nth-child(even) .benefit-box{border-left-color: var(--vtc-bg-main-bg-3);}
.digital-transformation-page .benefits-section .row > div:nth-child(even) .benefit-box h3::before{color: var(--vtc-bg-main-bg-3);}

/* ---------------------------------------------------------------------- */
/* 8) "Our Process" — left untouched. An earlier pass tried to add an      */
/*    "app window" chrome frame directly on `.how-we-work-img`, but that   */
/*    class also carries the layout's `padding-right:100px` (main.css)    */
/*    used purely as invisible spacing before the text column — painting  */
/*    a dark background on it turned that spacing into a visible dark     */
/*    rectangle next to every step image. Reverted; do not re-add a       */
/*    background/padding treatment directly on `.how-we-work-img` without */
/*    first isolating a dedicated wrapper around just the `<img>`.        */
/* ---------------------------------------------------------------------- */

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