/* /  (homepage) — AISHTMLNEWDESIGN
   Page-owned styles. Loaded LAST, after the 9 isolated Next.js CSS chunks in
   /css/homepage/. Everything here is scoped to #page-homepage.

   This file exists for two things only:
   1. The mandatory baseline block (RUNBOOK "The baseline block") — link/
      heading behaviour this page must declare itself rather than inherit.
   2. Visual + interaction CSS for the "Industries We Serve" carousel, which
      was rebuilt from scratch (see the inline JS) rather than shipping
      react-slick's clone-based DOM. Same content, same look, plain classes
      instead of slick's — deliberately NOT reusing slick-* class names so
      this never collides with the vendor slick CSS already bundled in the
      isolated chunks (that CSS assumes a real slick.js init this page does
      not run). Values below are lifted from the vendor bundle's own
      .industry-we-serve-wrapper rules so the rebuild matches pixel-for-pixel.
*/

/* Baseline link-decoration rule lives INLINE in <head>, not here -- the
   conversion gate only scans inline <style> for it (see homepage.html). */

/* BUG001 fix: the baseline's `#page-homepage a{color:inherit}` (ID+element,
   specificity 1-0-1) beats the vendor rule `.banner-btn-prime{color:#fff}`
   (class-only, 0-1-0) shipped in the isolated CSS chunks -- those chunks
   are unscoped Next.js CSS-module output, never written to coexist with a
   page-level baseline override. Of the hero's 4 rotating-slide CTA <a>
   buttons, only the first ships its own inline color:#fff (kept from the
   source markup), so only that one rendered correctly; the other 3 fell
   back to the baseline's inherited (near-black) text on the purple
   background. Restated here at #page-homepage + class specificity
   (1-1-0), which beats the baseline rule regardless of element count, so
   all 4 buttons render the same white text the design calls for. */
#page-homepage .banner-btn-prime{color:#fff;}

/* ── Industries We Serve — rebuilt carousel ──────────────────────────────
   Original (react-slick): centerMode, slidesToShow responsive 1-4, infinite,
   asNavFor-synced with a name-tab strip. Same visual result here via a
   plain CSS-transform track + index-based JS, wrapping with modulo instead
   of slick's clone buffer. See "Smart" note in the JS for why. */
#page-homepage .ind-slider{
  position:relative;display:flex;align-items:center;gap:12px;
}
#page-homepage .ind-viewport{overflow:hidden;flex:1 1 auto;}
#page-homepage .ind-track{
  display:flex;
  transition:transform .5s cubic-bezier(.645,.045,.355,1); /* matches speed:1000/2 ~ slick's own easing family */
}
#page-homepage .ind-item{
  position:relative;flex:0 0 auto;
  width:calc(20% - 16px); /* 5 visible at desktop, matches slidesToShow:5 */
  margin-inline:8px;
}
/* Client feedback (2026-09-30, screenshot): the original photo-background
   treatment looked "very odd" once the 8 iGaming verticals replaced the
   old generic industries -- the only available representative photos for
   these verticals (this site's own /assets/images/igaming/ and
   portfolio-img/ folders) turned out to be product screenshots and ad
   graphics with baked-in UI chrome and placeholder usernames, wildly
   inconsistent in color/style card-to-card, and the dark-gradient overlay
   text was hard to read over some of them. Redesigned as a clean icon
   card instead of a photo card: consistent by construction (one brand
   icon badge per vertical, same size/color/style, all self-drawn) rather
   than depending on 8 photos that happen to match -- no photo, no overlay
   contrast problem, no mismatched screenshots. */
#page-homepage .ind-item{
  background:#fff;border:1px solid #ececf5;border-radius:16px;
  padding:28px 24px;min-height:300px;display:flex;flex-direction:column;
  box-shadow:0 4px 20px rgba(14,11,61,.05);transition:border-color .16s ease,box-shadow .16s ease;
}
#page-homepage .ind-item.is-active{border-color:#3b259c;box-shadow:0 8px 28px rgba(59,37,156,.14);}
#page-homepage .ind-item__icon{
  width:64px;height:64px;border-radius:50%;background:#3b259c;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
#page-homepage .ind-item__icon img{width:32px;height:32px;display:block;}
#page-homepage .ind-item__desc{color:#1b1a20;}
#page-homepage .ind-item__desc .sm-title{font-size:clamp(18px,1.565vw,22px);font-weight:600;line-height:1.4;margin:0 0 10px;color:#0e0b3d;}
#page-homepage .ind-item__desc .para{margin:0;font-size:16px;line-height:1.5;color:#535479;}
#page-homepage .ind-arrow{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;border-radius:50%;
  border:1px solid #e2e2f0;background:#fff;color:#0e0b3d;font-size:16px;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
#page-homepage .ind-arrow:hover{background:#3b259c;color:#fff;border-color:#3b259c;}
#page-homepage .ind-arrow:focus-visible{outline:3px solid #3b259c;outline-offset:2px;}
#page-homepage .ind-names{
  margin-inline:100px;margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;
}
#page-homepage .ind-name{
  font:inherit;text-align:center;font-size:clamp(16px,3.1vw,18px);line-height:normal; /* BUG003: was clamp(12px,...) -- see the 16px-minimum block below */
  color:#535479;font-weight:500;max-width:96px;background:none;border:none;cursor:pointer;
  padding:4px 0;
}
#page-homepage .ind-name.is-active{font-weight:700;color:#0e0b3d;}

@media (max-width:1240px){
  #page-homepage .ind-item{width:calc(33.333% - 16px);}
}
@media (max-width:1000px){
  #page-homepage .ind-item{width:calc(20% - 16px);}
}
@media (max-width:600px){
  #page-homepage .ind-item{width:calc(50% - 16px);}
  #page-homepage .ind-names{margin-inline:20px;}
}
@media (max-width:480px){
  #page-homepage .ind-item{width:calc(100% - 16px);}
}

/* ── Industries We Serve — desktop carousel (#slider-area) — same
   icon-card redesign, applied to the untouched-since-conversion original
   markup instead. .industry-item/.img-box/.desc-details class names and
   the .active/.rev-arrow toggling are left alone -- NewIndustrySlider's
   handleIndexClick (ported verbatim in the JS) targets them directly --
   only the visual treatment changes from photo+overlay to icon+card. */
#page-homepage .industry-we-serve-slider-wrapper .industry-item{
  width:280px;flex:0 0 auto; /* was implicit via the old .img-box{width:360px} photo -- that's gone now */
  height:auto;min-height:300px;background:#fff;border:1px solid #ececf5;border-radius:16px;
  padding:28px 24px;margin-inline:8px;box-shadow:0 4px 20px rgba(14,11,61,.05);
  transition:border-color .16s ease,box-shadow .16s ease;
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .img-box{
  width:64px;height:64px;border-radius:50%;background:#3b259c;overflow:visible;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item:has(.img-box.active){
  border-color:#3b259c;box-shadow:0 8px 28px rgba(59,37,156,.14);
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .img-box img{
  width:32px!important;height:32px!important;object-fit:contain;
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .img-box:before,
#page-homepage .industry-we-serve-slider-wrapper .slider-area .img-box.active:before{content:none!important;}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .desc-details{
  position:static;padding:0;color:#1b1a20;max-width:none;
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .desc-details .sm-title{
  font-size:clamp(18px,1.565vw,22px);font-weight:600;line-height:1.4;margin:0 0 10px;color:#0e0b3d;
}
#page-homepage .industry-we-serve-slider-wrapper .industry-item .desc-details .para{
  margin:0;font-size:16px;line-height:1.5;color:#535479;
}
/* Client feedback (screenshot): the card row and the name-pill strip below
   it looked "attached" -- the vendor CSS never set a margin-top here
   (the gap used to be filled by the now-removed .img-box:before "wave
   arrow" decoration, which extended ~41-85px below the active card). */
#page-homepage .industry-we-serve-slider-wrapper .slider-bottom-areas{margin-top:40px;}

/* ── Hiring Gateway modal chain (TechBrilliance "Let's Discuss Your
   Project" + CtaBtn "Let's Discuss" both open this same shared shell) ───
   Visual chrome (.modal, .modal-dialog, .modal-content, .hiring-platform,
   .fade, .show) all come from the vendor Bootstrap CSS already isolated in
   this page's own /css/homepage/ chunks — this block only adds what that
   CSS doesn't cover: the backdrop this page manages by hand (no Bootstrap
   JS bundle loaded), and the two choice cards' layout. */
#page-homepage .ais-modal-backdrop{
  position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.5);display:none;
}
#page-homepage .ais-modal-backdrop.is-open{display:block;}
#page-homepage .modal.is-open{display:block;}
#page-homepage .interact-box{padding:16px;text-align:center;}
#page-homepage .interact-box img{max-width:190px;height:auto;margin-inline:auto;}
#page-homepage .interact-box .cta-button{
  margin-top:12px;padding:12px 24px;border-radius:8px;border:none;
  background:#3b259c;color:#fff;font:inherit;font-weight:600;cursor:pointer;
  min-height:44px;
}
#page-homepage .interact-box .cta-button:hover{background:#2b1b73;}

/* ── BUG003: 16px minimum font size (client rule, applies to this page) ──
   The isolated vendor CSS chunks carry several clamp()/media-query text
   sizes whose narrow-viewport floor drops below 16px (found via a live
   computed-style sweep of every text node under #page-homepage at 320,
   390 and 900px -- not a guess from reading the CSS). Each rule below
   restates the SAME selector's own base (widest) declaration, scoped
   under #page-homepage for higher specificity, so it wins over every
   narrower per-breakpoint vendor variant unconditionally -- the desktop
   size is untouched (it was already >=16px there in every case) and only
   the mobile floor is raised. */
#page-homepage .home-banner-wrapper .banner-btn{font-size:clamp(16px,4.1vw,20px);}
#page-homepage .company-review-text{font-size:16px;}
#page-homepage .tech-brilient-wrapper .para{font-size:clamp(16px,3.1vw,20px);}
#page-homepage .growth-wrapper .growth-content .growth-box .para{font-size:16px;}
#page-homepage .what-we-offer-wrapper .para{font-size:clamp(16px,1.75781vw,20px);}
#page-homepage .solution-expert-wrapper .para{font-size:clamp(16px,3.1vw,20px);}
#page-homepage .what-we-offer-wrapper .tab-area .nav-tabs .nav-link{font-size:clamp(16px,1.953125vw,22px);}
#page-homepage .solution-expert-wrapper .tab-area .nav-tabs .nav-link{font-size:clamp(16px,3.1vw,20px);}
#page-homepage .what-we-offer-wrapper .tab-area .offer-box .offer-list .list-name{font-size:clamp(16px,2.15vw,22px);}
#page-homepage .what-we-offer-wrapper .tab-area .offer-box .offer-details-list li{font-size:clamp(16px,1.75781vw,22px);}
#page-homepage .solution-expert-wrapper .tab-area .offer-box .offer-list .offer-list-name{font-size:clamp(16px,2.15vw,22px);}
#page-homepage .solution-expert-wrapper .lang-details .sm-title{font-size:20px;}
/* Client screenshot: "Tech" tab (5 list items, 4-5 icons per subgroup) looks
   fine, but "Digital"/"Cyber Gaming" (3-5 list items, as few as 3 icons)
   show the icon grid stuck at the TOP of its column with empty space below.
   Root cause: Bootstrap's row already stretches the icon column (.col-md-8)
   to match the taller list column (.col-md-4) -- confirmed live, both
   report the same height -- but .language-details-list itself is
   display:block, sized to its own content (just the icon row's height),
   so it never actually fills that stretched column; the icon row just sits
   at the top of unused vertical space. Vendor's own .offer-box already
   centers HORIZONTALLY (justify-content:center) -- this adds the missing
   vertical centering.

   FIRST ATTEMPT (reverted below) put height:100%;display:flex;align-items:
   center directly on .language-details-list. That measured correctly in
   this session's own automated-browser testing (Chromium via Playwright,
   confirmed with exact pixel math at five different widths) but the client
   still saw it top/left-stuck after a hard refresh in their own real
   browser. Root cause of THAT: percentage heights resolving against a
   flex-STRETCHED (not explicitly-set) parent height is a long-standing
   cross-browser inconsistency area -- some engines treat the stretched
   size as "definite" for a child's height:100% to resolve against,
   others fall back to the percentage computing as auto, silently
   dropping the fix. Rather than depend on that, center at the level
   where no percentage resolution is involved at all: make the already-
   stretched .col-md-8 itself a flex container and center its direct
   child (.language-details-list) with it -- plain flex alignment of a
   child within its own parent's used size is not spec-ambiguous in any
   browser. .col-md-8 is used exactly 3 times on this page, all three
   inside this same component, so scoping to it directly is safe. */
#page-homepage .solution-expert-wrapper .tab-area .col-md-8{
  display:flex;align-items:center;
}
#page-homepage .solution-expert-wrapper .language-details-list{
  width:100%; /* language-details-list is now a flex item of col-md-8 above;
    without an explicit width it would shrink to content instead of
    spanning the column, breaking .offer-box's own horizontal centering */
}
#page-homepage .industry-we-serve-wrapper .industry-item .desc-details .sm-title,
#page-homepage .industry-we-serve-slider-wrapper .industry-item .desc-details .sm-title{font-size:clamp(16px,1.565vw,24px);}
#page-homepage .industry-we-serve-wrapper .industry-item .desc-details .para,
#page-homepage .industry-we-serve-owl-wrapper .owl-slider-area .industry-item .desc-details .para,
#page-homepage .industry-we-serve-slider-wrapper .industry-item .desc-details .para{font-size:clamp(16px,1.17vw,18px);}
#page-homepage .experience-years-wrapper .exp-box .sm-title{font-size:clamp(16px,1.563vw,20px);}
#page-homepage .hiring-platform .section-subtitle{font-size:clamp(16px,2vw,18px);}
#page-homepage .hiring-platform .interact-box .inetract-desc{font-size:clamp(16px,2vw,18px);}
#page-homepage .form-wrapper .disc .para{font-size:clamp(16px,1.5625vw,20px);}
#page-homepage .industry-we-serve-slider-wrapper .slider-bottom-areas .indus-name,
#page-homepage .industry-we-serve-wrapper .slider-bottom-areas .indus-name{font-size:clamp(16px,4.1vw,18px);}

@media (prefers-reduced-motion:reduce){
  #page-homepage .ind-track,#page-homepage .ind-arrow{transition:none;}
}