/* ==========================================================================
   AHX Home Revamp — combined stylesheet for the home-revamp page
   Merges: ahxw-header.css + ahxhh-hero.css + ahxwho-section.css
   Each section keeps its own unique namespace (ahxw-, ahxhh-, ahxwho-) so
   none of the rules below collide with one another or with any other
   stylesheet in this project.
   ========================================================================== */

/* ==========================================================================
   AHXW Header (white/static header — Home / Capabilities / Industries /
   Resources / Company)
   Unique namespace: "ahxw-" — isolated from every other header/navbar style
   in this project (ahxm-, headerLink, navList, etc.)
   ========================================================================== */

.ahxw-header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(12, 20, 78, 0.06);
  font-family: "Inter", sans-serif !important;
}

.ahxw-navbar { padding: 16px 0; }

.ahxw-navbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ahxw-navbar__brand { display: block; line-height: 0; }
.ahxw-navbar__logo { height: 30px; width: auto; display: block; }

.ahxw-navbar__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0 0 0 auto;
  padding: 0;
}

.ahxw-navitem { position: relative; }

/* Invisible bridge so the mouse never leaves a hoverable element while
   moving from the trigger link down into the panel (avoids the dropdown
   closing itself before a click can land). */
.ahxw-navitem--mega::after,
.ahxw-navitem--dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  z-index: 49;
}
.ahxw-navitem--mega::after { width: min(980px, 92vw); }
.ahxw-navitem--dropdown::after { width: 220px; }

.ahxw-navlink {
  display: inline-block;
  padding: 8px 2px;
  color: #2b3050;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.ahxw-navlink:hover { color: #f2731f; }

.ahxw-navlink--active { color: #14224d; }

.ahxw-navlink--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #f2731f;
  border-radius: 2px;
}

.ahxw-navbar__cta {
  background: #336AE7;
  background: radial-gradient(circle, rgba(120, 159, 244, 1) 0%, rgba(51, 106, 231, 1) 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 50px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.ahxw-navbar__cta:hover { color: #ffffff; opacity: 0.9; }

/* ----- Capabilities mega menu (desktop) ----- */
.ahxw-mega {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(980px, 92vw);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 15, 60, 0.18);
  padding: 34px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.ahxw-navitem:hover .ahxw-mega,
.ahxw-navitem:hover .ahxw-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.ahxw-mega__col { display: flex; flex-direction: column; gap: 10px; }

.ahxw-mega__heading {
  display: block;
  color: #14224d;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dde1ef;
  margin-bottom: 8px;
}
.ahxw-mega__heading:hover { color: #0070AD; }

.ahxw-mega__plain {
  color: #4a5175;
  font-size: 1rem;
  text-decoration: none;
  padding-bottom: 10px;
}
.ahxw-mega__plain:hover { color: #0070AD; }

.ahxw-mega__plain--last { border-bottom: 1px solid #dde1ef; }

/* ----- Simple dropdown (Resources / Company) ----- */
.ahxw-dropdown {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 220px;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(10, 15, 60, 0.18);
  padding: 1rem 20px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.ahxw-dropdown__link {
  color: #4a5175;
  font-size: 1rem;
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 1px solid #eef0f7;
}
.ahxw-dropdown__link:hover { color: #0070AD; }
.ahxw-dropdown__link:last-child { border-bottom: none; }

/* ----- Hamburger toggler (mobile) ----- */
.ahxw-toggler {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
}
.ahxw-toggler span {
  display: block;
  height: 2px;
  width: 100%;
  background: #14183a;
  border-radius: 2px;
}

/* ----- Mobile left overlay menu ----- */
.ahxw-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 82%;
  max-width: 320px;
  background: #ffffff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 20px 0 50px rgba(0, 0, 0, 0.2);
  text-align: left;
}
.ahxw-offcanvas.ahxw-show { transform: translateX(0); }

.ahxw-offcanvas__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #eef0f7;
  background: #ffffff;
  z-index: 2;
}
.ahxw-offcanvas__logo { height: 24px; }
.ahxw-offcanvas__close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #14183a;
}

.ahxw-offcanvas__links { list-style: none; margin: 0; padding: 10px 20px 30px; text-align: left; }
.ahxw-offcanvas__links > li { border-bottom: 1px solid #f1f2f8; text-align: left; }
.ahxw-offcanvas__links > li > a {
  display: block;
  width: 100%;
  padding: 1rem 4px;
  color: #14183a;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
}

.ahxw-offcanvas__cta {
  background: #336AE7;
  background: radial-gradient(circle, rgba(120, 159, 244, 1) 0%, rgba(51, 106, 231, 1) 100%);
  color: #fff !important;
  text-align: center;
  border-radius: 50px;
  margin-top: 10px;
  text-align: center !important;
}

.ahxw-offcanvas__accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4px;
  border: none;
  background: transparent;
  color: #14183a;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}
.ahxw-offcanvas__accordion-toggle i { transition: transform 0.2s ease; font-size: 1rem; }
.ahxw-offcanvas__accordion-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.ahxw-offcanvas__accordion-panel {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: max-height 0.3s ease;
}
.ahxw-offcanvas__accordion-panel a {
  padding: 10px 4px 10px 1rem;
  color: #4a5175;
  font-size: 1rem;
  text-decoration: none;
  text-align: left;
}
.ahxw-offcanvas__accordion-panel a:hover { color: #0070AD; }
.ahxw-offcanvas__sub-heading {
  display: block;
  padding: 10px 4px 0 1rem;
  color: #14224d;
  font-size: 1rem;
  text-align: left;
  font-weight: 600;
}

.ahxw-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 44, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1040;
}
.ahxw-backdrop.ahxw-show { opacity: 1; visibility: visible; }

/* ----- Responsive breakpoints ----- */
@media (max-width: 1199.98px) {
  .ahxw-navbar__links { gap: 22px; }
  .ahxw-mega { width: min(880px, 92vw); padding: 28px 30px; gap: 18px; }
}

@media (max-width: 991.98px) {
  .ahxw-navbar__links,
  .ahxw-navbar__cta { display: none; }
  .ahxw-toggler { display: flex; }
  .ahxw-navbar { padding: 12px 0; }
}

@media (max-width: 575.98px) {
  .ahxw-navbar__logo { height: 24px; }
  .ahxw-offcanvas { width: 88%; max-width: none; }
}

/* ==========================================================================
   AHXHH Home Hero (light, split-column hero — replaces the video hero on
   the home-revamp page)
   Unique namespace: "ahxhh-" — isolated from .ahx-hero and every other
   hero/section style in this project.
   ========================================================================== */

.ahxhh-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 60px; 
  font-family: "Inter", sans-serif !important;
}
.ahxhh-hero.home {
  padding: 0px;
  min-height: 513px;
  display: flex;
  align-items: center;
}

/* Full-bleed background image, kept as a real <img> (rather than a plain
   CSS background-image) specifically so it can be animated on load — used
   by any hero variant (.home, .healthcare, etc.), not just one. */
.ahxhh-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: ahxhh-hero-slide-down 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ahxhh-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

@keyframes ahxhh-hero-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.ahxhh-hero.bfsi {
  padding: 0px;
  min-height: 513px;
  display: flex;
  align-items: center;
  background-image:url('../images/revamp/bfsi/hero-img.png');
  background-size: cover;
  background-position: right center;
  animation: ahxhh-hero-slide-down 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .ahxhh-hero.bfsi { animation: none; }
}

.ahxhh-hero.healthcare {
  padding: 0px;
  min-height: 513px;
  display: flex;
  align-items: center;
}

.ahx-hcorg__inner{
  border-top:1px solid #99DBFF;
  padding: 40px 0px;
  border-bottom:1px solid #99DBFF;
}

/* Breaks the slider out to full viewport width while .ahx-hcorg__inner
   (the same element as .container) keeps its border and padding at the
   normal contained width — the classic 100vw/-50vw full-bleed technique. */
.ahx-hcorg__slider {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.ahxhh-hero__row { position: relative; z-index: 2; }

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

.ahxhh-hero__title {
  color: #0070AD;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw + 16px, 44px);
  line-height: 1.25;
  margin-bottom: 18px;
}

.ahxhh-hero__desc {
  color: #1c2230;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.05rem);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 30px;
}

.ahxhh-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxhh-hero__btn:hover { color: #ffffff; opacity: 0.9; }

.ahxhh-hero__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxhh-hero__btn-icon i { color: #ffffff; font-size: 1rem; }

.ahxhh-hero__media {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 48%;
  max-width: 760px;
  z-index: 1;
  text-align: right;
}
.ahxhh-hero__media img { width: 100%; height: auto; display: block; margin-left: auto; }

@media (max-width: 991.98px) {
  .ahxhh-hero { padding: 40px 0 20px; text-align: center; }
  .ahxhh-hero.home { min-height: 0; padding: 40px 0 0 0; flex-direction: column; }
  .ahxhh-hero.home .container { order: 1; }
  .ahxhh-hero.home .ahxhh-hero__media { order: 2; }
  .ahxhh-hero__desc { margin-left: auto; margin-right: auto; }
  .ahxhh-hero__btn { margin-bottom: 40px; }
  .ahxhh-hero__media {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .ahxhh-hero { padding: 30px 0 16px; }
  .ahxhh-hero__btn { justify-content: space-between; }
}

/* ==========================================================================
   AHXWHO Section ("Who We Are" — home-revamp page)
   Unique namespace: "ahxwho-" — isolated from every other section style
   in this project.
   ========================================================================== */

.ahxwho-section {
  padding: 60px 0;
  font-family: "Inter", sans-serif !important; background-color: #FBF7EF;
}

.ahxwho-card {
  background: #FBF6EC;
  border-radius: 20px;
  padding: 50px 60px;
}

.ahxwho-eyebrow {
  display: block;
  /* TODO: swap to "TT Hoves" once its kit/CDN link is added to <head> —
     placeholder fallback stack in the meantime. */
  font-family: "TT Hoves", "Inter", sans-serif;
  color: #0070AD;
  font-weight: 600;
  font-size: clamp(22px, 2rem + 10px, 42px);
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-transform: capitalize;
}

.ahxwho-heading {
  color: #14183a;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ahxwho-desc {
  color: #3a3f52;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 26px;
}
.ahxwho-desc:last-child { margin-bottom: 0; }

.ahxwho-stats {
    display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    column-gap: 60px;
    row-gap: 0;
}

.ahxwho-stat {
  text-align: center;
  padding: 22px 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #0070AD;
  border-bottom: 1px solid #0070AD;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s ease, border-radius 0.35s ease;
} 
.ahxwho-stat:nth-child(4) {
  border-top: none;
}

.ahxwho-stat:first-child  {
  border-top: 1px solid #0070AD;
  border-radius:0;
}
 
.ahxwho-stat:hover {
  border-radius: 20px; border:0px;
}
 
.ahxwho-stat--featured {
  border: none;
  border-radius: 20px;
  padding: 40px 24px;
  background: #FBF6EC;
}

/* Every stat cell (plain or featured) reveals this same gradient image as
   its background on hover — scoped to .ahxwho-stat itself, not just the
   featured one, so all four cells get the effect. */
.ahxwho-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-image: url('../images/revamp/home/who-we-are-gradiant-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.ahxwho-stat:hover::before { opacity: 1; transform: scale(1.08); }
.ahxwho-stat:hover { border-color: transparent; }

.ahxwho-stat .ahxwho-counter,
.ahxwho-stat p {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.ahxwho-stat:hover .ahxwho-counter,
.ahxwho-stat:hover p {
  color: #ffffff;
}

.ahxwho-counter {
  color: #0070AD; 
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw + 20px, 64px);
  line-height: 1;
  margin: 0 0 6px;
}

/* Hovering any stat cell (plain or featured) swaps just its own number and
   label to Fraunces as a small interactive flourish — every other piece of
   text on the page, including the rest of this section, stays Inter. */
.ahxwho-stat:hover .ahxwho-counter,
.ahxwho-stat:hover p {
  font-family: "Fraunces", serif;
}

.ahxwho-stat p {
  color: #0070AD;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 991.98px) {
  .ahxwho-card { padding: 36px 26px; text-align: center; }
  .ahxwho-stats { justify-content: center; margin-top: 30px; column-gap: 40px; }
  .ahxwho-stat { text-align: center; }
}

@media (max-width: 575.98px) {
  .ahxwho-card { padding: 28px 18px; }
  .ahxwho-stats { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
}

/* ==========================================================================
   AHXWWD Section ("What We Do" — home-revamp page)
   Unique namespace: "ahxwwd-" — isolated from every other section style
   in this project.
   ========================================================================== */

.ahxwwd-section {
  padding: 60px 0;
  background: #FBF7EF;
  font-family: "Inter", sans-serif !important;
}

.ahxwwd-head { margin-bottom: 40px;  }

.ahxwwd-eyebrow {
  display: block;
  color: #0070AD;
  font-weight: 600;
  font-size: clamp(24px, 2rem + 10px, 42px);
  margin-bottom: 16px;
}

.ahxwwd-heading {
  display: inline-block;
  color: #14183a;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;  
}

.ahxwwd-desc {
  color: #3a3f52;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

.ahxwwd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ahxwwd-list__btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  color: #8b90a3;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ahxwwd-list__btn:hover { color: #0070AD; }
.ahxwwd-list__item--active .ahxwwd-list__btn { color: #0070AD; }

/* Mobile-only accordion panel — hidden by default (and irrelevant on
   desktop, where the shared .ahxwwd-detail panel to the right is used
   instead). Same collapse/expand mechanics as .ahxind-item__panel. */
.ahxwwd-list__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* JS sets an inline max-height on whichever item is active/expanded,
   regardless of viewport — without this, that item's description and
   Explore button (only the image had its own display:none) bleed through
   on desktop, duplicating the shared .ahxwwd-detail panel's content. The
   !important is required to beat that inline style. */
@media (min-width: 992px) {
  .ahxwwd-list__panel {
    max-height: 0 !important;
  }
}

.ahxwwd-list__panel-desc {
  color: #3a3f52;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 16px 0;
}

.ahxwwd-list__panel-media {
  display: none;
  width: min(220px, 70%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
}
.ahxwwd-list__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ahxwwd-detail {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ahxwwd-detail__media {
  flex: 0 0 auto;
  width: min(320px, 46%);
  aspect-ratio: 1 / 1;
}
.ahxwwd-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ahxwwd-detail__body { flex: 1; min-width: 0; }

.ahxwwd-detail__title {
  color: #0070AD;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ahxwwd-detail__desc {
  color: #3a3f52;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ahxwwd-detail__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 22px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxwwd-detail__btn:hover { color: #ffffff; opacity: 0.9; }
.ahxwwd-detail__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxwwd-detail__btn-icon i { color: #ffffff; font-size: 0.9rem; }

@media (max-width: 991.98px) {
  /* Below this point each list item carries its own image/description/CTA
     in an accordion panel, so the single shared detail panel to the right
     is no longer needed — same swap the .ahxind-section makes between
     .ahxind-item__media and .ahxind-media. */
  .ahxwwd-detail { display: none; }
  .ahxwwd-list__panel-media { display: block; }
}

@media (max-width: 575.98px) {
  .ahxwwd-section { padding: 40px 0; }
  .ahxwwd-head { text-align: center; margin-left: auto; margin-right: auto; }
  .ahxwwd-list { text-align: center; align-items: center; }
}

/* ==========================================================================
   AHXAI Section ("How We Transform With AI" — home-revamp page)
   Unique namespace: "ahxai-" — isolated from every other section style
   in this project.
   ========================================================================== */

.ahxai-section {
  padding: 60px 0;
  background: #EDE8DC;
  font-family: "Inter", sans-serif !important;
}

.ahxai-eyebrow {
  display: block;
  color: #0070AD;
  font-weight: 600;
  font-size: clamp(24px, 1.6vw + 14px, 32px);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.ahxai-heading {
  color: #14183a;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

@property --ahxai-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ahxai-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(#FBF8F2, #FBF8F2) padding-box,
    conic-gradient(from var(--ahxai-angle), transparent 0deg, transparent 360deg) border-box;
}

/* Rotating gradient border, blue-toned, shown and animated on hover only —
   same technique the "What We Do" cards used previously. */
.ahxai-card:hover {
  background:
    linear-gradient(#FBF8F2, #FBF8F2) padding-box,
    conic-gradient(from var(--ahxai-angle), transparent 0deg, transparent 270deg, #38b6ff 270deg, #0070AD 300deg, #003b5c 330deg, transparent 360deg) border-box;
  animation: ahxai-border-spin 2s linear infinite;
}

@keyframes ahxai-border-spin {
  to { --ahxai-angle: -360deg; }
}

.ahxai-card__media {
  position: relative;
  aspect-ratio: 330 / 201;
  overflow: hidden;
}
.ahxai-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ahxai-card:hover .ahxai-card__media img { transform: scale(1.05); }

.ahxai-card__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: #0070AD;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
}

.ahxai-card__body { flex: 1; padding: 20px 22px 26px; }

.ahxai-card__title {
  color: #0070AD;
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.ahxai-card__desc {
  color: #3a3f52;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.ahxai-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxai-btn:hover { color: #ffffff; opacity: 0.9; }

.ahxai-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxai-btn__icon i { color: #ffffff; font-size: 1rem; }

@media (max-width: 991.98px) {
  .ahxai-section { text-align: center; }
  .ahxai-card { text-align: left; }
}

@media (max-width: 575.98px) {
  .ahxai-section { padding: 40px 0; }
  .ahxai-btn { justify-content: space-between; }
}

/* ==========================================================================
   AHXCS Section ("Case Studies" slider — home-revamp page)
   Unique namespace: "ahxcs-" — isolated from every other section/slider
   style in this project.
   ========================================================================== */

.ahxcs-section {
  padding: 60px 0;
  background: #FBF7EF;
  font-family: "Inter", sans-serif !important;
}

.ahxcs-eyebrow { 
    display: block;
    color: rgb(0, 112, 173);
    font-weight: 600;
    font-size: clamp(24px, 14px + 1.6vw, 32px);
    margin-bottom: 10px;  
}

.ahxcs-heading {
  color: #14183a;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* One-time slide-in-from-right reveal for the whole section, triggered by
   the "ahxcs-in-view" class (added via IntersectionObserver — see the
   section's own <script> block) once it scrolls into the viewport. Kept
   separate from the per-slide-change reveal below, which still runs every
   time the carousel advances. */
.ahxcs-section .ahxcs-eyebrow,
.ahxcs-section .ahxcs-heading,
.ahxcs-section .ahxcs-slider,
.ahxcs-section .ahxcs-nav {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ahxcs-section .ahxcs-heading { transition-delay: 0.08s; }
.ahxcs-section .ahxcs-slider { transition-delay: 0.16s; }
.ahxcs-section .ahxcs-nav { transition-delay: 0.24s; }

.ahxcs-section.ahxcs-in-view .ahxcs-eyebrow,
.ahxcs-section.ahxcs-in-view .ahxcs-heading,
.ahxcs-section.ahxcs-in-view .ahxcs-slider,
.ahxcs-section.ahxcs-in-view .ahxcs-nav {
  opacity: 1;
  transform: translateX(0);
}

/* Avenga also fades each individual splide__slide in on its own (its
   opacity-0!/is-visible pair) rather than only revealing the slider as one
   block — echoed here with a per-card stagger, keyed off the same
   "ahxcs-in-view" trigger as the block reveal above. */
.ahxcs-section .ahxcs-slide {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Staggered by Slick's own data-slick-index on the .slick-slide wrapper it
   generates around each .ahxcs-slide — nth-child can't be used here since
   Slick wraps every slide in its own single-child wrapper div, making each
   .ahxcs-slide permanently nth-child(1) of its own parent. */
.slick-slide[data-slick-index="1"] .ahxcs-slide { transition-delay: 0.12s; }
.slick-slide[data-slick-index="2"] .ahxcs-slide { transition-delay: 0.24s; }
.slick-slide[data-slick-index="3"] .ahxcs-slide { transition-delay: 0.36s; }

.ahxcs-section.ahxcs-in-view .ahxcs-slide {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .ahxcs-section .ahxcs-eyebrow,
  .ahxcs-section .ahxcs-heading,
  .ahxcs-section .ahxcs-slider,
  .ahxcs-section .ahxcs-nav,
  .ahxcs-section .ahxcs-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.ahxcs-heading-2 {
  color: #0070AD;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* Each slide is a normal, integer (slidesToShow: 1) Slick slide — the
   "peek" is achieved purely with CSS: the slick root itself is narrowed
   to 70% and its list is left to overflow visibly, so the next slide's
   left edge simply spills out past the current one. Nothing here fights
   Slick's own width math, which is what kept breaking with a fractional
   slidesToShow / variableWidth. */
.ahxcs-slider { width: 100%; }
.ahxcs-slider .slick-list { overflow: hidden; }
.ahxcs-slider .slick-slide { height: auto; }

.ahxcs-slide { padding: 0 14px; }

@media (min-width: 992px) {
  .ahxcs-slider { width: 70%; }
  /* The peek trick only applies once there's a narrowed list to spill out
     of — on mobile the slider is full-width single-slide, so overflow
     stays hidden there to avoid an off-screen sliver causing horizontal
     scroll on the page. */
  .ahxcs-slider .slick-list { overflow: visible; }
}

.ahxcs-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #F2F1EA;
  border-radius: 24px;
  overflow: hidden;
}

.ahxcs-card__content {
  padding: 32px 28px;
  display: block; 
  opacity: 1;
} 
.ahxcs-card__content ul {min-height:200px;}
.ahxcs-tag {
  display: inline-block;
  align-self: flex-start;
  background: #E5F1FB;
  border: 1px solid #BFDDF3;
  color: #0070AD;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.ahxcs-card__title {
  color: #0070AD;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 12px;
}

.ahxcs-card__desc {
  color: #3a3f52;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ahxcs-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 6px 6px 6px 22px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxcs-card__btn:hover { color: #ffffff; opacity: 0.9; }

.ahxcs-card__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxcs-card__btn-icon i { color: #ffffff; font-size: 0.9rem; }

.ahxcs-card__media {
  position: relative; flex:1;
}


.ahxind-item__panel li::marker {
    backgroundcolor: #5c5959!important;
    font-size: 1.5rem!important;
}

.footer-grey-section{
  background-color: #F0ECE4; padding: 48px; border-radius:20px;
}
.footer-grey-section-new{
  background-color: #F0ECE4; padding: 48px 48px 0px 48px; border-radius:20px;
}

.ahxind-item__panel ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
.ahxcs-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ahxcs-card__media-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: #E5F1FB;
  border: 1px solid #BFDDF3;
  color: #0070AD;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Reveal-on-active slide (desktop): every non-current card peeks in at
   half width, filled edge-to-edge by its image (category tag floated
   bottom-left, à la avenga.com's testimonial slider) — full rounding on
   all four corners via the card's own border-radius/overflow:hidden.
   Becoming current grows the card to full slide width; the image itself
   stays pinned to the right at 50% width (never stretching to fill the
   full card) with rounding only on its own right corners, while the
   content panel slides in to cover the left 50%. */
@media (min-width: 992px) {
  /* Card, media and content all animate together on the same duration/
     easing curve, started at the same moment (JS marks "current" on
     beforeChange, not afterChange, so this begins right as Slick's own
     track transform begins too) — reading as one motion rather than
     separate steps. Leaving the outgoing card's width unanimated used to
     make it snap straight to 50% the instant you moved on, squeezing its
     content instantly instead of shrinking smoothly. */
  .ahxcs-card { position: relative; height: 420px; width: 50%; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s ease; }

  .ahxcs-slider .ahxcs-is-current .ahxcs-card { width: 100%; }

  /* Avenga-style peek interaction: a not-yet-active card nudges up on
     hover to invite a click, while the active card (already full width)
     stays put — matches its "hover:scale-105" / "is-active:hover:scale-100"
     pairing on splide__slide. */
  .ahxcs-slider .slick-slide:not(.ahxcs-is-current):hover .ahxcs-card {
    transform: scale(1.04);
    z-index: 3;
  }

  .ahxcs-card__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    transition: left 1s cubic-bezier(0.22, 1, 0.36, 1), width 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ahxcs-card__media-tag { opacity: 1; }

  .ahxcs-card__content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 440px;  
    background: #F2F1EA;
    padding: 36px 40px;
    opacity: 0;
    transform: translateX(200%);
    pointer-events: none;
    /* Same 1s duration/easing as the card and media above, so all three
       arrive together instead of drifting out of sync. Opacity fades in
       fast and with no delay, so the content is visible for most of the
       slide-in rather than popping in only once the motion has finished. */
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  }

  /* Driven by our own "ahxcs-is-current" class (set in JS from
     data-slick-index modulo the real slide count) rather than Slick's
     built-in .slick-current — with infinite:true and few slides, Slick's
     wrap-around clones don't reliably carry .slick-current, which is why
     one particular slide (the one most often reached via a clone) could
     fail to reveal/animate while the others worked fine. */
  .ahxcs-slider .ahxcs-is-current .ahxcs-card__content {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    right:auto;
    left:0;
    z-index: 2;
  }
  .ahxcs-slider .ahxcs-is-current .ahxcs-card__media {
    cursor: default;
    /* "left: auto" can't be transitioned/interpolated by CSS at all — it
       always snapped instantly regardless of the transition set above,
       which was one real source of the glitch. An explicit "left: 50%" is
       just as correct here (inset:0 gives the resting state right:0 too,
       so left:50% + width:50% pins it flush to the same right edge) and,
       unlike auto, animates smoothly. */
    right: 0;
    left:auto; z-index: 3;
    width: 40%;
    border-radius: 0 24px 24px 0;
  }
  .ahxcs-slider .ahxcs-is-current .ahxcs-card__media-tag { opacity: 0; }
}

.ahxcs-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.ahxcs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #0070AD;
  color: #ffffff;
  transition: opacity 0.2s ease;
}
.ahxcs-arrow:hover { opacity: 0.85; }
.ahxcs-arrow i { font-size: 1.1rem; }

@media (max-width: 991.98px) { 
  .ahxcs-card__media { aspect-ratio: 8 / 9; order: -1; width: 100%; margin: 0 auto 4px; }
  .ahxcs-card__content { order: 1; }

  /* No side gutter on mobile — the peek/gutter padding is a desktop-only
     concern, so each slide's card fills the full container width. */
  .ahxcs-slider { margin: 0; }
  .ahxcs-slide { padding: 0; }

  .footer-grey-section-new{
  background-color: #F0ECE4; padding:24px; border-radius:20px;
}


}

@media (max-width: 575.98px) {
  .footer-grey-section{
  background-color: #F0ECE4; padding: 24px  20px; border-radius:20px;
}
  .ahxcs-section { padding: 40px 0; }
  .ahxcs-card__content { padding: 26px 22px; }
  .ahxcs-card__content .ahxcs-card__btn{
    margin: 0 auto;
  }
}

/* ==========================================================================
   AHXIND Section ("Industries" — home-revamp page)
   Unique namespace: "ahxind-" — isolated from every other section style
   in this project.
   ========================================================================== */

.ahxind-section {
  padding: 60px 0;
  background: #FBF7EF;
  font-family: "Inter", sans-serif !important;
}

.ahxind-eyebrow {
    display: block;
    color: rgb(0, 112, 173);
    font-weight: 500;
    font-size: clamp(24px, 14px + 1.6vw, 32px);
    margin-bottom: 10px;
}

.ahxind-heading {
  color: #14183a;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ahxind-desc {
  color: #3a3f52;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.ahxind-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid #E3DFD3;
}

.ahxind-item { border-bottom: 1px solid #E3DFD3; }

.ahxind-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.ahxind-item__name {
  color: #0070AD;
  font-size:26px;
  font-weight: 600; 
}

.ahxind-item__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ahxind-item__icon::before,
.ahxind-item__icon::after {
  content: "";
  position: absolute;
  background: #0070AD;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ahxind-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.ahxind-item__icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.ahxind-item--active .ahxind-item__icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.ahxind-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ahxind-item__sub {
  color: #252525;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* Per-item image (avenga.com-style accordion): hidden on desktop, where a
   single shared image sits in its own column and swaps on click instead. */
.ahxind-item__media {
  display: none;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
}
/* Extra breathing room when a CTA button (BFSI accordion panels) sits
   directly above the per-item mobile image, so it isn't flush against it. */
.ahxcs-card__btn + .ahxind-item__media {
  margin-top: 24px;
}
.ahxind-item__media img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
  display: block;
}

.ahxind-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxind-btn:hover { color: #ffffff; opacity: 0.9; }
.ahxind-item.ahxind-item--active{
  padding-bottom: 20px;
}
.ahxind-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxind-btn__icon i { color: #ffffff; font-size: 1rem; }

.ahxind-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ahxind-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991.98px) {
  .ahxind-section { padding: 40px 0; text-align: center; }
  .ahxind-desc { margin-left: auto; margin-right: auto; }
  .ahxind-list { text-align: left; }
  .ahxind-item__media { display: block; }
  .ahxind-media { display: none; }
}

/* ==========================================================================
   AHXINDG Section ("Industries" flat grid — home-revamp page)
   Unique namespace: "ahxindg-" — deliberately distinct from "ahxind-"
   above (a different, accordion-based Industries section used on other
   pages) so neither this markup nor that section's JS ever cross-match.
   ========================================================================== */

.ahxindg-section {
  padding: 60px 0;
  background: #FBF7EF;
  font-family: "Inter", sans-serif !important;
}
.ahxindg-section .container{
background-color: #F7F4ED; padding:48px; border-radius:20px;
}

.ahxindg-eyebrow {
  display: block;
  color: #0070AD;
  font-weight: 600;
  font-size: clamp(24px, 2rem + 10px, 42px);
  margin-bottom: 16px;
}

.ahxindg-heading {
  color: #14183a;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ahxindg-desc {
  color: #3a3f52;
  font-size: 20px;
  line-height: 1.6;
  max-width: 760px;
  margin-bottom: 40px;
}

.ahxindg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 60px;
  row-gap: 30px;
  margin-bottom: 40px;
}

.ahxindg-item {
  display: block;
  text-decoration: none;
  padding: 20px 20px 24px;
  border-bottom: 1px solid #92D9FF;
  transition: border-color 0.3s ease;
}
.ahxindg-item:hover { border-color: #0070AD; }

.ahxindg-item__title {
  color: #0070AD;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.ahxindg-item__tags {
  color: #838383;
  font-size: 0.95rem;
  margin: 0;
  transition: color 0.3s ease;
}
.ahxindg-item:hover .ahxindg-item__tags { color: #252525; }

.ahxindg-btn-wrap { text-align: center; }

.ahxindg-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 26px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ahxindg-btn:hover { color: #ffffff; opacity: 0.9; }

.ahxindg-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxindg-btn__icon i { color: #ffffff; font-size: 1rem; }

@media (max-width: 991.98px) {
  .ahxindg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .ahxindg-section { padding: 40px 0; text-align: center; }
  .ahxindg-desc { margin-left: auto; margin-right: auto; }
  .ahxindg-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AHXFS Section ("Financial Solutions We've Built..." — BFSI page)
   Unique namespace: "ahxfs-" — isolated from every other section style
   in this project.
   ========================================================================== */

.ahxfs-section {
  padding: 60px 0;
  background: #FBF7EF;
  font-family: "Inter", sans-serif !important;
}

.ahxfs-heading {
  color: #14183a;
  font-weight: 700;
  font-size: clamp(26px, 1.6rem + 1.2vw, 40px);
  line-height: 1.25; 
  margin-bottom: 16px;
}

.ahxfs-desc {
  color: #3a3f52;
  font-size: 18px;
  line-height: 1.6;  
  margin-bottom: 34px;
}

.ahxfs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  border-bottom: 1px solid #E3DFD3;
  margin-bottom: 30px;
}

.ahxfs-tab {
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
  color: #7a7f92;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.ahxfs-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #0070AD;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .ahxfs-tab:hover { color: #0070AD; }
  .ahxfs-tab--active:hover { color: #0070AD; }
}
.ahxfs-tab--active { color: #0070AD; }
.ahxfs-tab--active::after { transform: scaleX(1); }

.ahxfs-stage {
  position: relative;
  border-radius: 24px;
  background: #EFE9DC;
}

.ahxfs-media {
  width: 100%;
  aspect-ratio: 1334 / 580;
  border-radius: 24px;
  overflow: hidden;
}
.ahxfs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ahxfs-panel { display: none; }
.ahxfs-panel--active { display: block; }

.ahxfs-slider { position: relative; }

.ahxfs-slide {
  display: none;
  background-size: cover;
  background-position: center;
  background-color: #0b1f3a;
  color: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
}
.ahxfs-slide--active {
  display: block;
  aspect-ratio: 1 / 1;
  overflow-y: auto;
}

.ahxfs-card__tag {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #cfe0f3;
  margin-bottom: 14px;
}

.ahxfs-card__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

.ahxfs-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #dfe6f0;
  margin-bottom: 20px;
}

.ahxfs-card__label {
  font-size: 0.95rem;
  color: #cfe0f3;
  margin-bottom: 10px;
}

.ahxfs-card__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 26px;
}
.ahxfs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ahxfs-stat:not(:last-child) {
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.ahxfs-stat__value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.ahxfs-stat__desc {
  font-size: 0.8rem;
  color: #cfe0f3;
}

.ahxfs-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 22px;
  border-radius: 50px;
  background: #0070AD;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .ahxfs-card__btn:hover { color: #ffffff; opacity: 0.9; }
}
.ahxfs-card__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.ahxfs-card__btn-icon i { color: #ffffff; font-size: 0.9rem; }

.ahxfs-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 992px) {
  /* Extra clearance so the arrows never sit under the card, which is
     intentionally taller than the illustration and overlaps past it. */
  .ahxfs-nav { justify-content: flex-end; margin-top: 60px; }
}
.ahxfs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #0070AD;
  color: #ffffff;
  transition: opacity 0.2s ease;
}
/* Guarded to real hover-capable pointers only — an unguarded :hover here
   makes touchscreen browsers (iOS Safari in particular) treat the first
   tap as merely activating :hover and only fire the click on a second
   tap, which is exactly why prev/next looked like it needed two clicks. */
@media (hover: hover) {
  .ahxfs-arrow:hover { opacity: 0.85; }
}
.ahxfs-arrow i { font-size: 1.1rem; }

@media (min-width: 992px) {
  /* The illustration keeps its own aspect ratio here (it no longer gets
     stretched to an arbitrary fixed stage height) so the stage's height is
     just the image's natural rendered height. The card is intentionally
     taller than that and overlaps down past the image's bottom edge into
     the section's own background, matching the reference design. */
  .ahxfs-slider { position: static; }
  .ahxfs-slide {
    position: absolute;
    top: 40px;
    left: 40px;
    width: min(500px, 44%);
    aspect-ratio: 1 / 1;
    padding: 40px;
    box-shadow: 0 24px 50px rgba(11, 31, 58, 0.35);
  }
}

@media (max-width: 991.98px) {
  .ahxfs-section { padding: 40px 0; text-align: center; }
  .ahxfs-heading,
  .ahxfs-desc { margin-left: auto; margin-right: auto; }
  .ahxfs-tabs { justify-content: center; }
  .ahxfs-media { border-radius: 24px 24px 0 0; }
  .ahxfs-slide { border-radius: 0 0 24px 24px; text-align: left; }
  .ahxfs-card__stats { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {

  .ahxindg-section .container{
background-color: #F7F4ED; padding:24px; border-radius:20px;
}
  .ahxfs-tabs { gap: 8px 20px; }
  .ahxfs-tab { font-size: 15px; }
  .ahxfs-slide { padding: 26px 22px; }
  .ahxfs-card__title { font-size: 1.35rem; }
}