/* ==========================================================================
   1. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

button,
input {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ==========================================================================
   2. FONTS
   ========================================================================== */
@font-face {
  font-family: "Creato Display";
  src: url("../fonts/CreatoDispaly/CreatoDisplay-Regular.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Creato Display";
  src: url("../fonts/CreatoDispaly/CreatoDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Creato Display";
  src: url("../fonts/CreatoDispaly/CreatoDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Creato Display";
  src: url("../fonts/CreatoDispaly/CreatoDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Creato Display";
  src: url("../fonts/CreatoDispaly/CreatoDisplay-ExtraBold.otf")
    format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Season Mix";
  src: url("../fonts/SeasonMix/SeasonMix-TRIAL-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Season Mix";
  src: url("../fonts/SeasonMix/SeasonMix-TRIAL-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Season Mix";
  src: url("../fonts/SeasonMix/SeasonMix-TRIAL-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Season Mix";
  src: url("../fonts/SeasonMix/SeasonMix-TRIAL-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

/* ==========================================================================
   3. VARIABLES
   ========================================================================== */
:root {
  /* fonts */
  --font-heading: "Season Mix", Georgia, serif;
  --font-body: "Creato Display", Arial, sans-serif;

  /* text colors */
  --color-heading: #232323;
  --color-text: #2b2b2b;
  --color-text-muted: rgba(35, 35, 35, 0.6);
  --color-white: #ffffff;
  --color-white-muted: rgba(255, 255, 255, 0.65);
  --color-white-faint: rgba(255, 255, 255, 0.4);

  /* section background placeholders (jahan photo/image asset nahi hai) */
  --bg-light: #ededed;
  --bg-light-alt: #e2e2e2;
  --bg-card: #e7e7e7;
  --bg-white: #ffffff;
  --bg-dark: #131313;
  --bg-dark-alt: #1e1e1e;
  --bg-dark-card: #262626;

  /* layout */
  --container-max: 1800px;
  --container-padding: 40px;
  --notch: 26px;

  /* spacing scale */
  --space-3xs: 6px;
  --space-2xs: 10px;
  --space-xs: 14px;
  --space-sm: 20px;
  --space-md: 26px;
  --space-lg: 35px;
  --space-xl: 48px;
  --space-1xl: 65px;
  --space-2xl: 90px;
  --space-3xl: 120px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--bg-white);
  line-height: 1.6;
  font-size: 15px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 400;
  line-height: 1.15;
}

p {
  color: var(--color-text-muted);
}

section {
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

/* ==========================================================================
   4. GRID — Bootstrap 5 (container / row / col) via CDN, see includes/header.php
   ========================================================================== */
/* Design ka content-frame 1784px tha 1920px canvas ke andar — Bootstrap ka
   default max-width (1320px @ xxl) isse zyada tang hai, isliye override: */
.container {
  max-width: var(--container-max); /* 1800px */
}

/* 1800px se neeche gutter chhota lagta tha (sirf Bootstrap ka default
   gutter reh jata tha) — is liye left/right spacing add ki, jo screen
   ke sath fluid rehti hai (mobile par kam, laptop par ~40px tak). */
@media (max-width: 1800px) {
  .container {
    padding-left: clamp(16px, 3vw, var(--container-padding));
    padding-right: clamp(16px, 3vw, var(--container-padding));
  }
}

/* Bootstrap ka .col-xxl-* apna width 1400px se lagu karta hai (CDN file
   hai, edit nahi kar sakte) — 1400–1439px ke darmiyan usay cancel karke
   agli-chhoti breakpoint wali width force kar di, taake effectively yahan
   "xxl" 1440px se activate ho, na ke 1400px se. */
@media (max-width: 1440px) {
}

.row + .row {
  margin-top: var(--space-lg);
}

/* ==========================================================================
   5. SHARED / REUSABLE COMPONENTS
   ========================================================================== */
.section-title {
  font-size: 70px;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}

.section-title--on-dark {
  color: var(--color-white);
}

.section-subtitle {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 20px;
  max-width: 800px;
}

.tag-pill {
  display: inline-block;
  padding: 6px 15px;
  margin: 0 6px 10px 0;
  border: 1px solid rgba(35, 35, 35, 0.25);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.partnerships .tag-pill {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  font-family: var(--font-heading);
}

.btn:hover {
  opacity: 0.8;
}

.btn-primary,
.btn-primary:hover {
  background: var(--bg-dark);
  color: var(--color-white);
}

.btn-outline,
.btn-outline:hover {
  border: 1px solid var(--color-heading);
  color: var(--color-heading);
}
.btn-white,
.btn-white:hover {
  background-color: var(--bg-white);
  color: var(--color-text);
}

/* arrow.svg khud dark color (#1E1E1E) ka hai — halke/white background
   wale buttons (outline, white, light) par waisa hi black rehta hai,
   sirf dark-background wale .btn-primary par white karne ke liye invert. */
.btn__arrow {
  width: 12px;
  height: 12px;
}

.btn-primary .btn__arrow {
  filter: invert(1);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 46px;
  border-radius: 22px;
  background: var(--color-heading);
  flex-shrink: 0;
}

.icon-btn img {
  width: 14px;
  height: 14px;
  filter: invert(1);
}

.icon-btn.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.icon-btn.swiper-button-lock {
  display: none;
}

/* notch corner — reused: journey cards, framework cards, metric cards */
.notched {
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}

/* carousel arrows — reused: Beyond Business, Journey, Partnerships, Trade Network */
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-nav ~ [style*="text-align:right"] {
  color: var(--color-text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* stat blocks — reused: hero stats */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-block__number {
  font-family: var(--font-heading);
  font-size: 58px;
  line-height: 1.2;
  color: var(--color-heading);
}

.stat-block__label {
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* icon card — reused base for: framework, expertise cards */
.icon-card {
  background: var(--bg-card);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.icon-card__icon img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.icon-card__title {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-heading);
  max-width: 260px;
  text-align: center;
  line-height: 1.3;
}

.icon-card__text {
  font-size: 20px;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.4;
}

/* photo card — reused base for: leadership, partnerships, network cards */
.photo-card {
  position: relative;
  overflow: hidden;
  background: #000;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.photo-card__title {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 18px;
}

/* ==========================================================================
   6. HEADER / TOP NAV
   ========================================================================== */
.site-header {
  /* background: var(--bg-light); */
  padding: var(--space-sm) 0;
  position: absolute;
  width: 100%;
  z-index: 999;
}

.site-header .row {
  align-items: center;
}

.site-header__menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-heading);
}

.site-header__menu img {
  width: 18px;
  height: 18px;
}

.site-header__logo {
  text-align: center;
}

.site-header__logo img {
  height: 100px;
  margin: 0 auto;
}

/* ==========================================================================
   6b. FULL-SCREEN MENU
   ========================================================================== */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl) 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4%);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0s linear 0.5s;
}

.site-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0s linear 0s;
}

.site-menu__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--container-padding);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  transition:
    background 0.2s ease,
    transform 0.3s ease;
}

.site-menu__close:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(90deg);
}

.site-menu__close img {
  width: 16px;
  height: 16px;
  filter: invert(1);
}

.site-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--space-lg);
}

.site-menu__nav {
  display: flex;
  flex-direction: column;
}

.site-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white-muted);
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    color 0.25s ease,
    padding-left 0.25s ease;
}

.site-menu.is-open .site-menu__link {
  opacity: 1;
  transform: translateY(0);
}

.site-menu__link:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-menu__link:hover {
  color: var(--color-white);
  padding-left: var(--space-sm);
}

.site-menu__link-num {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-white-faint);
  min-width: 32px;
}

.site-menu__footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-white-muted);
}

.site-menu__contact,
.site-menu__social {
  display: flex;
  gap: var(--space-md);
}

.site-menu__contact a,
.site-menu__social a {
  color: var(--color-white-muted);
  transition: color 0.2s ease;
}

.site-menu__contact a:hover,
.site-menu__social a:hover {
  color: var(--color-white);
}

body.menu-is-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .site-menu__link {
    font-size: 30px;
  }
  .site-menu__footer {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  background: var(--bg-light);
  /* padding-top: var(--space-lg); */
  padding-top: 0;
  min-height: 879px;
  height: 100vh;
}

.fluided-container {
  padding-left: calc((100vw - 1800px) / 2 + 20px);
}
.hero_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 130px;
  padding-bottom: 20px;
}
.hero__name {
  font-size: 92px;
  margin-bottom: var(--space-sm);
}

.hero__years {
  font-family: var(--font-heading);
  font-size: 60px;
  color: var(--color-heading);
  display: block;
}
.hero .hero_grid {
  display: flex;
  gap: 16px;
}
.hero .hero_grid-item {
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 500;
  width: 140px;
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.hero_grid-item-years {
  flex-direction: column;
}
.hero .hero_grid-item:not(:last-child) {
  border-right: 1px solid rgba(35, 35, 35, 0.25);
}

.hero__years-text {
  /* transform: translate(36px, -23px) !important; */
  display: inline-block;
  position: absolute;
  left: 60px;
  bottom: -8px;
}

.hero__statement {
  margin: var(--space-md) 0;
  font-size: 20px;
  color: var(--color-text);
  max-width: 520px;
  line-height: 1.4;
}

.hero__tags {
  margin: var(--space-md) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 85%,
    transparent
  );
}

.hero__tags-track {
  display: flex;
  width: max-content;
  animation: hero-tags-marquee 22s linear infinite;
}

.hero__tags-track .tag-pill {
  flex-shrink: 0;
}

@keyframes hero-tags-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero__actions {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.hero__quote {
  border-top: 1px solid rgba(35, 35, 35, 0.15);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  width: max-content;
}

.hero__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 0;
}

.hero__quote cite {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 20px;
  color: var(--color-text);
  margin-top: 0;
}

.hero__stats {
  /* border-top: 1px solid rgba(35, 35, 35, 0.15); */
  padding-top: var(--space-sm);
  display: flex;
  justify-content: space-between;
}

.hero__media {
  position: relative;
}

.hero__media img {
  width: 100%;
  height: auto;
}

.hero__badges {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  gap: 10px;
  background-color: #d9d9d9;
  /* grid-template-columns: 1fr 1fr;
  max-width: 400px; */
  grid-template-columns: 1fr;
  max-width: 200px;
  width: 100%;
  height: 100px;
}

.hero__badge {
  border-radius: 8px;
  padding: 6px;
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); */
  display: flex;
  justify-content: center;
  padding: 20px 12px;
}
.hero__badge--static {
  background: var(--color-white);
}

.hero__badge img {
  width: 100%;
  height: 65px;
  object-fit: contain;
}

/* vertical auto-rotating ticker — 5 badges, holds then slides up, loops seamlessly */
.hero__badge--rotating {
  overflow: hidden;
}

.hero__badge-rotator {
  height: 65px;
  overflow: hidden;
}

.hero__badge-rotator__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-badge-rotate 15s ease-in-out infinite;
}

.hero__badge-rotator__track img {
  flex-shrink: 0;
}

/* 4 REAL logos hain abhi ($heroBadges), track mein 5th image sirf seamless
   loop ke liye duplicate hai — is liye 4 positions ko EQUAL hold-time
   milta hai (0, -65, -130, -195), aur -260 (duplicate) sirf ek instant
   "snap" point hai 100% par jahan se turant 0% par wrap ho jata hai
   (dono ek hi image hain, is liye jump nazar nahi aata). Agar logos ki
   count kabhi badle/ghate, ye keyframe bhi usi hisab se update karni hogi. */
@keyframes hero-badge-rotate {
  0%,
  20% {
    transform: translateY(0);
  }
  25%,
  45% {
    transform: translateY(-65px);
  }
  50%,
  70% {
    transform: translateY(-130px);
  }
  75%,
  95% {
    transform: translateY(-195px);
  }
  100% {
    transform: translateY(-260px);
  }
}

/* ==========================================================================
   8. BEYOND BUSINESS
   ========================================================================== */
.beyond-business {
  /* background: var(--bg-light); */
}

.beyond-business__tags {
  /* text-align: right;
  margin-left: auto; */
  text-align: center;
  align-self: center;
  margin: auto;
  max-width: 550px;
}

.beyond-business .photo-card {
  aspect-ratio: 4 / 3;
}

.beyond-business .carousel-nav-row,
.partnerships .carousel-nav-row,
.trade-network .carousel-nav-row,
.cross-functional .carousel-nav-row,
.scaling-framework .carousel-nav-row,
.testimonials .carousel-nav-row,
.trade-shows .carousel-nav-row,
.expertise .carousel-nav-row {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Cross-Functional Leadership dark background par light pill-style
   prev/next buttons (Partnerships section jaisa hi treatment) */
.cross-functional .icon-btn,
.expertise .icon-btn {
  background: var(--bg-light);
}

.cross-functional .icon-btn img,
.expertise .icon-btn img {
  filter: none;
}

/* reusable Swiper pagination — renders as "1 —— 2 3 4" (number + trailing
   line on the active one), reused wherever .js-carousel-pagination is used */
.carousel-pagination {
  font-size: 14px;
  color: var(--color-text-muted);
}

.carousel-pagination .swiper-pagination-bullet {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  background: none;
  opacity: 1;
  border-radius: 0;
  margin: 0 6px !important;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
}

.carousel-pagination .swiper-pagination-bullet-active {
  color: var(--color-heading);
  position: relative;
  padding-right: 22px;
}

.carousel-pagination .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--color-text-muted);
}

/* ==========================================================================
   9. PROFESSIONAL JOURNEY
   ========================================================================== */
.journey {
  background: var(--bg-light-alt);
  padding: 0; /* spacing ab .journey-scroll-pin ke andar hai */
}

/* Title normal page-scroll ke sath chala jata hai (pin ka hissa nahi) — is
   liye apna spacing khud carry karta hai, jo pehle scroll-pin se milta tha */
.journey > .container:first-child {
  padding-top: var(--space-2xl);
}

/* Scroll-driven pinned carousel: track lamba hota hai (kai viewport-heights),
   uske andar pin wala hissa sticky ho kar screen par ruka rehta hai jab tak
   user scroll karke poore track se guzar na jaye. Scroll position ko
   assets/js/script.js me slide-index se map kiya jata hai. */
.journey-scroll-track {
  position: relative;
  /* Pin hamesha 100vh hai (cards flex-fill karke gap khatam karte hain —
     dekhein .journey-scroll-pin niche). Buffer yahan chhota rakha hai
     (gap na bane) — overshoot-protection (fast scroll ek jhatke mein
     pura buffer paar na kare) ab script.js ke wheel-clamp se hoti hai,
     is liye track ko physically bada rakhne ki zaroorat nahi. */
  height: calc(100vh + 60px);
}

.journey-scroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-lg) 0 var(--space-lg);
  overflow: hidden;
}

/* Cards ka wrapper ab bachi hui poori vertical space fill karta hai (years
   row top par fix rehta hai, cards neeche jitni jagah bache utni le lete
   hain) — is se pehle jo bada khaali gray gap card ke neeche dikhta tha
   (jab card ka content thoda hota tha), wo khatam ho jata hai. */
.journey-scroll-pin .fluided-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.journey__carousel {
  width: 100%;
  height: 100%;
}

.journey__carousel .swiper-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.journey__carousel .journey-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.journey-card__label {
  font-size: 50px;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* Journey ka apna section-padding hata diya tha (scroll-pin ke andar
   handle hota hai), isliye brand-marquee wale trailing container ko
   apni khud ki top/bottom breathing room deni padegi */
.journeyLastContainer {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.journey__pagination {
  align-self: center;
}

.journey__years {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(35, 35, 35, 0.2);
  padding-bottom: var(--space-sm);
}

.journey__years > .journey__year {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-text-muted);
  position: relative;
  /* padding-bottom: var(--space-xs); */
  cursor: pointer;
}

.journey__years > .journey__year--active {
  font-size: 45px;
  color: var(--color-heading);
}

/* Design ka marker: numbers ke NEECHE wali shared timeline line ke reference
   point par ek chhoti dark tick line (::after) hoti hai, aur diamond
   (::before) us tick ke bilkul x/y center par — dono ka bottom same rakh kar
   translate(-50%, 50%) se center kiya hai, taake size chahe jo ho, hamesha
   exact-center rahe. */
.journey__years > .journey__year--active::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--space-sm));
  left: 50%;
  width: 26px;
  height: 3px;
  background: var(--color-heading);
  transform: translate(-50%, 50%);
}

.journey__years > .journey__year--active::before {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--space-sm));
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-heading);
  transform: translate(-50%, 50%) rotate(45deg);
  z-index: 1;
}
.journey__subtitle {
  font-size: 50px;
  margin-bottom: 30px;
}
.journey > .container > .row:nth-of-type(3) h3 {
  /* margin-top: var(--space-xl);
  font-size: 22px; */
}

.journey-card {
  background: var(--bg-light);
  padding: var(--space-lg) var(--space-md);
  position: relative;
}
/* Container me scrollbar enable karne ke liye — fixed height ki jagah ab
   flex:1 hai, taake card jitni vertical space mile utni khud consume kare
   (chhote content ke sath bhi neeche khaali gap na bache) */
.journey-card__content-scoll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 20px;
  padding-right: 16px;
}

/* Sirf active/current slide ka content scroll ho — peeking/inactive
   neighbour card ka scrollbar/scroll-interaction disable, taake accidental
   scroll us par na lage jab tak wo khud active na ho jaye. */
.swiper-slide:not(.swiper-slide-active) .journey-card__content-scoll {
  overflow: hidden;
  pointer-events: none;
}

/* width */
.journey-card__content-scoll::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.journey-card__content-scoll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #0000002b;
  border-radius: 10px;
}

/* Handle */
.journey-card__content-scoll::-webkit-scrollbar-thumb {
  background: #00000061;
  border-radius: 10px;
}

/* Handle on hover */
.journey-card__content-scoll::-webkit-scrollbar-thumb:hover {
  background: #0000002b;
}

/* default = muted/inactive; Swiper flags the current slide with
   .swiper-slide-active, us par active look chadh jata hai */
.journey-card {
  color: var(--color-text-muted);
}

.journey-card__title,
.journey-card__company {
  color: var(--color-text-muted);
}

.swiper-slide-active .journey-card {
  background: #f5f5f5;
  color: var(--color-text);
}

.swiper-slide-active .journey-card__title,
.swiper-slide-active .journey-card__company {
  color: var(--color-heading);
}

.journey-card__years {
  display: block;
  font-size: 26px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

/* Company-name (left) aur logo (right) ek hi row mein, saamne-saamne —
   naam lamba ho to bhi logo se takrata nahi, khud hi 2nd line par wrap
   ho jata hai (align-items:flex-start rakha hai taake logo hamesha
   naam ki PEHLI line ke sath top-aligned rahe, chahe naam 1 line ho ya 2). */
.journey-card__company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

/* Logo khud koi background/box nahi rakhta (agar current asset mein white
   box dikh raha hai to wo source-file ka apna baked-in background hai, jo
   real logo file se replace hone par khud hi chala jayega). */
.journey-card__logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 220px;
}

.journey-card__logo {
  height: 70px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.journey-card__logo-tagline {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-align: right;
}

.journey-card__title {
  font-size: 46px;
  margin-bottom: var(--space-xs);
}

.journey-card__company {
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.journey-card__text {
  font-size: 20px;
  margin-bottom: var(--space-sm);
}

.journey-card__achievements {
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  margin-top: var(--space-sm);
}

.journey-card__achievements-list {
  margin-top: var(--space-xs);
}

.journey-card__achievements-list li {
  font-size: 18px;
  color: var(--color-text-muted);
  padding-left: 18px;
  position: relative;
  margin-bottom: var(--space-2xs);
}

.journey-card__achievements-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--color-heading);
}

/* brand logos marquee — reused: journey strip + global brands section */
.brand-marquee {
  overflow: hidden;
  margin-top: var(--space-xl);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}

.brand-marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.brand-logo img {
  height: 26px;
  width: auto;
  opacity: 1;
}

/* ==========================================================================
   10. REVENUE GROWTH
   ========================================================================== */
.revenue-growth {
  background-color: var(--bg-dark);
  background-image:
    /* linear-gradient(rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0.75)), */ url("../images/Revenue/growth-bg-building.png");
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.revenue-growth .section-title {
  font-size: 48px;
}

.revenue-growth__text {
  color: var(--color-white-muted);
  font-size: 26px;
  /* max-width: 560px; */
}

.revenue-growth__text strong {
  color: var(--color-white);
}

.revenue-growth-img {
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

.revenue-growth img,
.revenue-growth video {
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   11. SCALING FRAMEWORK
   ========================================================================== */
.scaling-framework {
  background: var(--bg-light-alt);
  text-align: center;
}

.scaling-framework .section-subtitle {
  margin: 0 auto var(--space-xl);
}

.scaling-framework .row {
  text-align: left;
  align-items: stretch;
}

.scaling-framework__flow {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

.scaling-framework__arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 22px;
  color: var(--color-heading);
}

.framework-card {
  position: relative;
  flex: 1 1 0;
  background-color: #ededed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  height: 100%;
  padding: var(--space-md) var(--space-sm);
  transition: all 0.7s ease;
}
.framework-card * {
  transition: all 0.7s ease;
}
.framework-card:hover {
  background-color: #fff;
}

.framework-card__num {
  font-family: var(--font-heading);
  font-size: 24px;
  align-self: self-start;
  margin-bottom: 60px;
  transition: all 0.7s ease;
}
.framework-card:hover * {
  color: #000;
}
.framework-card:hover .icon-card__title {
  font-weight: 600;
}
/* ==========================================================================
   12. ACTIVE MARKET NODES
   ========================================================================== */
.market-nodes {
  background: var(--bg-white);
}

.market-nodes .section-title {
  font-size: 65px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

/* Map k green pins (.market-pin) jaisa hi solid dot + blinking ripple —
   ek real span hai (title centered/flex hone ki wajah se ::before ka
   position guess karna reliable nahi tha), is liye ripple hamesha dot
   ke apne exact center par hi anchor rehta hai. */
.market-nodes__pulse-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6fbf73;
  margin-right: 10px;
  vertical-align: middle;
}

.market-nodes__pulse-dot::before,
.market-nodes__pulse-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #6fbf73;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pinBlink 2s ease-out infinite;
  opacity: 0.7;
}

.market-nodes__pulse-dot::after {
  animation-delay: 1s;
}

.market-nodes__map {
  background: var(--bg-light);
  /* padding: var(--space-md); */
}

.market-nodes h3 {
  /* font-size: 26px; */
  font-size: 29px;
  letter-spacing: 0.05em;
  /* color: var(--color-text-muted); */
  margin-bottom: var(--space-md);
}
.activeMarketListWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  /* padding-left: 70px; */
}

.market-insight {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 30px 0;
}
.market-insight:not(:first-child) {
  border-top: 1px solid rgba(35, 35, 35, 0.12);
}

.market-insight-img {
  width: 80px;
  height: 80px;
  padding: 20px;
  /* width: 100px;
  height: 100px;
  padding: 26px; */
  border-radius: 50%;
  background: var(--bg-light);
  flex-shrink: 0;
  display: flow;
  justify-content: center;
  align-items: center;
}
.market-insight img {
}

.market-insight__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  line-height: 1.4;
}

.market-insight__label {
  font-size: 22px;
  /* color: var(--color-text-muted); */
  line-height: 1.3;
}

.market-insight__text strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-heading);
}

/* ==========================================================================
   13. AREA OF EXPERTISE
   ========================================================================== */
.expertise {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  background-image: url(../images/area-of-expertize/area-of-expertise-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.expertise__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.expertise > .container {
  position: relative;
  z-index: 1;
}

.expertise .row {
  text-align: left;
}

.expertise .icon-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  height: 100%;
  backdrop-filter: blur(10px);
}

.expertise .icon-card__icon {
  align-self: center;
}

.expertise .icon-card__icon img {
  /* filter: invert(1); */
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.expertise-card__title {
  color: #fff;
  font-size: 18px;
  margin-bottom: 0;
  text-transform: capitalize;
  font-weight: 400;
}
.expertise .icon-card__text {
  font-size: 18px;
}
.expertise .icon-card__title,
.expertise .icon-card__text {
  color: var(--color-white-muted);
}

.expertise .icon-card__title {
  color: var(--color-white);
}

/* ==========================================================================
   14. KEY EXECUTIVE METRICS
   ========================================================================== */
.executive-metrics {
  background: var(--bg-light);
  /* global `section{overflow:hidden}` sticky ko tod deta tha (ancestor ka
     overflow visible na ho to position:sticky kaam nahi karta) — is section
     mein AOS/marquee jaisa kuch clip nahi karna, is liye visible wapas */
  overflow: visible;
}

.executive-metrics .row {
  align-items: flex-start;
  background-image: url(../images/executive-metrics/key-metrics-bg.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 45% auto;
  /* background-attachment: fixed; */
}

.executive-metrics .col-lg-5 {
  /* position: sticky;
  top: 100px; */
  /* align-self: flex-start; */
  /* min-height: 300px; */
}

/* Desktop: rotator container 3 cards ki height tak clip karta hai, track
   (.metric-card__wrapper) JS se translateY hoke andar hi auto-scroll/rotate
   karta hai (JS is exact height/gap naap kar shift-amount + container-height
   set karta hai — koi hardcoded pixel value yahan nahi). */
.metric-card__rotator {
  overflow: hidden;
}

.metric-card__wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  padding: var(--space-xl) var(--space-xl);
  gap: 20px;
}

.metric-card__title {
  /* font-size: 32px; */
  font-size: 40px;
}

.metric-card__subtitle {
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: 2px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.metric-card img {
  width: 105px;
  height: 105px;
  /* padding: 12px; */
  background: var(--bg-white);
  border-radius: 8px;
}

/* ==========================================================================
   15. GLOBAL BRANDS DEVELOPED
   ========================================================================== */
.global-brands {
  background: var(--bg-light-alt);
  text-align: center;
}

.global-brands .brand-marquee {
  margin-top: var(--space-lg);
}

/* boxed 2-row staggered tile marquee — "Global Brands Developed" only */
.brand-tiles {
  overflow: hidden;
  margin-top: var(--space-lg);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}

.brand-tiles__row {
  overflow: hidden;
}

.brand-tiles__row + .brand-tiles__row {
  margin-top: 10px;
}

.brand-tiles__track {
  display: flex;
  width: max-content;
}

.brand-tiles__row--1 .brand-tiles__track {
  animation: brand-tiles-left 40s linear infinite;
}

.brand-tiles__row--2 .brand-tiles__track {
  animation: brand-tiles-right 40s linear infinite;
  margin-left: -130px; /* staggers row 2 half a tile against row 1 */
}

@keyframes brand-tiles-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes brand-tiles-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.brand-tile {
  flex-shrink: 0;
  width: 260px;
  height: 155px;
  margin-right: 10px;
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-tile img {
  max-width: 55%;
  max-height: 40%;
  object-fit: contain;
}

.global-brands .section-subtitle {
  margin: var(--space-lg) auto 0;
  /* max-width: 700px; */
  max-width: unset;
}

/* ==========================================================================
   16. CROSS-FUNCTIONAL LEADERSHIP
   ========================================================================== */
.cross-functional {
  background: var(--bg-dark);
  background-image: url(../images/cross-functional/cross-functional-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: var(--space-3xl) 0;
}

.cross-functional .row {
  text-align: left;
}

.cross-functional .photo-card {
  /* aspect-ratio: 3 / 4; */
  /* .photo-card (base class) mein pehle se overflow:hidden hai, is liye
     hover par scale hone wali image card ki boundary se bahar nahi jayegi. */
}

.cross-functional .photo-card img {
  transition: transform 0.4s ease;
}

.cross-functional .photo-card:hover img {
  transform: scale(1.08);
}

.cross-functional .photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 60%); */
}

.cross-functional .photo-card__title {
  z-index: 1;
  font-size: 20px;
  text-align: center;
  left: var(--space-2xs);
  right: var(--space-2xs);
  bottom: var(--space-sm);
}

/* ==========================================================================
   17. BUILDING STRATEGIC PARTNERSHIPS
   ========================================================================== */
.partnerships {
  background: var(--bg-dark-alt);
  color: var(--color-white);
  text-align: center;
}

.partnerships .row {
  text-align: left;
}

.partnerships .section-subtitle {
  margin: 0 auto;
  color: var(--color-white-muted);
}

/* is section ke prev/next buttons light pill style ke hain (baaki
   sections ke dark circular buttons se alag) */
.partnerships .icon-btn {
  background: var(--bg-light);
}

.partnerships .icon-btn img {
  filter: none;
}

/* dark background par muted-dark pagination numbers dikhte nahi the */
.partnerships .carousel-pagination {
  color: var(--color-white-faint);
}

.partnerships .carousel-pagination .swiper-pagination-bullet {
  color: var(--color-white-faint);
}

.partnerships .carousel-pagination .swiper-pagination-bullet-active {
  color: var(--color-white);
}

.partnerships .carousel-pagination .swiper-pagination-bullet-active::after {
  background: var(--color-white);
}

/* Swiper apne wrapper ko align-items:stretch nahi deta by default, isliye
   alag-alag content-length wali slides ki height mismatch ho jati hai. Ye
   sab .swiper carousels (Partnerships, Trade Network, waghera) par lagega. */
.swiper-wrapper {
  align-items: stretch;
}

/* Swiper apni base CSS me .swiper-slide ko height:100% deta hai — jo apne
   auto-height wrapper ke against "auto" resolve ho jata hai aur stretch
   kaam nahi karne deta. height:auto override karke asal stretch enable
   karte hain. */
.swiper-slide {
  height: auto;
}

.partnership-card {
  background: var(--bg-dark-card);
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

.partnership-card img {
  aspect-ratio: 16 / 10;
  opacity: 1;
}

.partnership-card__title {
  color: var(--color-white);
  font-size: 24px;
  padding: var(--space-sm) var(--space-sm) 0;
  font-weight: 900;
}

.partnership-card__text {
  font-size: 17px;
  color: var(--color-white);
  padding: var(--space-2xs) var(--space-sm) 0;
  margin-bottom: 0;
}

/* Title+description ko fixed height de di (jaise sab se lambi wali
   description bina scroll ke fit ho jaye) — is se tags hamesha same
   Y-position (baseline) se shuru hote hain, chahe kisi card ki
   description chhoti ho ya badi. Agar kabhi content isse bhi lamba ho
   jaye to andar hi scroll ho jayega (journey-card__content-scoll jaisi
   scrollbar styling, sirf rang dark-card ke hisab se — light thumb,
   kyunki background dark hai). */
.photo-card-textContent {
  height: 90px;
  overflow-y: auto;
}

.photo-card-textContent::-webkit-scrollbar {
  width: 3px;
}

.photo-card-textContent::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.photo-card-textContent::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.photo-card-textContent::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* Brands ki count har category mein bohot alag hai (4 se 20 tak) — pehle
   tags wrap ho kar multi-line ban jati thi, is liye kisi card mein bohot
   zyada khaali space (Swiper sab slides ki height barabar kar deta hai
   sabse lambi ke hisab se) to kisi mein bohot lambi list. Fix: fixed
   height + vertical scroll (baaki cards jaisa hi established pattern) —
   har card ki height hamesha consistent rehti hai, zyada tags ho to
   andar hi scroll ho jata hai. */
.partnership-card__tags {
  height: 110px;
  overflow-y: auto;
  padding: var(--space-sm);
  padding-right: 20px;
  margin-bottom: 30px;
}

.partnership-card__tags::-webkit-scrollbar {
  width: 3px;
}

.partnership-card__tags::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.partnership-card__tags::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.partnership-card__tags::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* .partnerships .carousel-nav,
.trade-network .carousel-nav {
  margin-top: var(--space-lg);
} */

/* ==========================================================================
   18. EXTENSIVE TRADE AND DISTRIBUTION NETWORK
   ========================================================================== */
.trade-network {
  /* background: var(--bg-light); */
  background: #d9d9d9;
  text-align: center;
}

.trade-network .row {
  text-align: left;
}

.network-card {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

.network-card img {
  aspect-ratio: 16 / 10;
  opacity: 1;
}

.network-card__title {
  font-size: 23px;
  padding: var(--space-sm) var(--space-sm) 0;
  /* Titles ki length bahut alag hai (kuch 1-line, kuch 2-line) — fixed
     height di taake tags hamesha same Y-position se shuru hon, chahe
     title chhota ho ya bara. Agar kabhi title isse lamba ho jaye to
     andar hi scroll ho jayega (partnership-card jaisi scrollbar). */
  height: 74px;
  font-weight: 900;
  overflow-y: auto;
}

.network-card__title::-webkit-scrollbar {
  width: 3px;
}

.network-card__title::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(35, 35, 35, 0.15);
  border-radius: 10px;
}

.network-card__title::-webkit-scrollbar-thumb {
  background: rgba(35, 35, 35, 0.35);
  border-radius: 10px;
}

.network-card__title::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 35, 35, 0.55);
}

/* Brands ki count har category mein bohot alag hai (3 se 22 tak — jaise
   Hypermarket sirf 3, Consumer Electronics Retail 22) — fixed height +
   vertical scroll (Partnerships jaisa hi established pattern) taake har
   card ki height consistent rahe, zyada tags ho to andar hi scroll ho. */
.network-card__tags {
  height: 110px;
  overflow-y: auto;
  padding: var(--space-sm);
  padding-right: 20px;
  margin-bottom: 30px;
}

.network-card__tags::-webkit-scrollbar {
  width: 3px;
}

.network-card__tags::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(35, 35, 35, 0.15);
  border-radius: 10px;
}

.network-card__tags::-webkit-scrollbar-thumb {
  background: rgba(35, 35, 35, 0.35);
  border-radius: 10px;
}

.network-card__tags::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 35, 35, 0.55);
}

/* ==========================================================================
   18a. GLOBAL INDUSTRY EXPOSURE (Trade Shows)
   ========================================================================== */
.trade-shows .row {
  text-align: left;
}

.trade-show-card__img {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-sm);
}

.trade-show-card__img img {
  opacity: 1;
}

/* Place (location) hamesha LEFT par, aur state/year (jo bhi diya gaya ho)
   ek group ki tarah RIGHT par — chahe place ho ya na ho, meta-group
   margin-left:auto se hamesha right-aligned rehta hai. */
.trade-show-card__tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-sm);
}

.trade-show-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.trade-show-card__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trade-show-card__location img {
  width: 12px;
  height: 12px;
}

.trade-show-card__text {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.15;
  color: var(--color-heading);
}

/* ==========================================================================
   18b. TESTIMONIALS
   ========================================================================== */
.testimonials {
  background: var(--bg-light);
  text-align: center;
}

.testimonials .row {
  text-align: left;
}

.testimonial-card {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg) var(--space-md);
}

/* Quote-length bohot alag hai (kuch 2 lines, kuch poora paragraph) — fixed
   height + scroll, jaisa Journey/Partnerships cards mein already hai, taake
   sab cards ki height consistent rahe aur lamba quote andar hi scroll ho. */
.testimonial-card__quote {
  height: 190px;
  overflow-y: auto;
  padding-right: 14px;
  margin-bottom: var(--space-md);
}

.testimonial-card__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  color: var(--color-text);
}

.testimonial-card__quote::-webkit-scrollbar {
  width: 3px;
}

.testimonial-card__quote::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(35, 35, 35, 0.15);
  border-radius: 10px;
}

.testimonial-card__quote::-webkit-scrollbar-thumb {
  background: rgba(35, 35, 35, 0.35);
  border-radius: 10px;
}

.testimonial-card__quote::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 35, 35, 0.55);
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-top: 1px solid rgba(35, 35, 35, 0.15);
  padding-top: var(--space-sm);
  margin-top: auto;
}

.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-card__person-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-heading);
}

/* Designations ki length bhi bohot alag hai (kuch 1 line, kuch 3-4 credentials
   pipe-separated) — isi wajah se fixed height + scroll, taake ek lamba
   designation poori card ki height na barha de. */
.testimonial-card__title {
  display: block;
  /* height: 36px; */
  overflow-y: auto;
  font-size: 13px;
  color: var(--color-text-muted);
  padding-right: 10px;
  line-height: 1.4;
}

.testimonial-card__title::-webkit-scrollbar {
  width: 3px;
}

.testimonial-card__title::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(35, 35, 35, 0.15);
  border-radius: 10px;
}

.testimonial-card__title::-webkit-scrollbar-thumb {
  background: rgba(35, 35, 35, 0.35);
  border-radius: 10px;
}

.testimonial-card__title::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 35, 35, 0.55);
}

/* ==========================================================================
   19. WHAT'S NEXT / CTA
   ========================================================================== */
.cta {
  background: var(--bg-light);
  padding-top: 0;
  padding-bottom: 0;
}

.cta__bullets {
  margin: var(--space-lg) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 469px;
}

.cta ul li {
  font-size: 18px;
  color: var(--color-text);
  padding-left: 16px;
  position: relative;
  margin-bottom: var(--space-2xs);
}

.cta ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  background: var(--color-heading);
}

.cta__ready {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.cta h3 {
  font-size: 35px;
  margin-bottom: 0;
}

.cta .col-6:last-child img {
  border-radius: 4px;
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--color-white);
}

.site-footer__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.2;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.site-footer-topRow {
  padding-top: 100px;
}

.site-footer a {
  color: var(--color-white-muted);
}

.site-footer .section-title--on-dark {
  font-size: 30px;
  max-width: 600px;
}

.site-footer h4 {
  font-family: var(--font-heading);
  font-size: 23px;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.footer-links li,
.footer-contact li,
.footer-social li {
  margin-bottom: var(--space-xs);
  font-size: 16px;
}

.footer-contact li,
.footer-social li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-social li {
  align-items: center;
}

.footer-contact img,
.footer-social img {
  width: 24px;
  height: 24px;
  /* filter: invert(1); */
  margin-top: 2px;
}
.footer-social img {
}
.footer-social .footer-social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 2px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px;
}

.footer-form {
  display: flex;
  gap: 12px;
  margin-top: var(--space-md);
  max-width: 500px;
}

.footer-form input {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 14px 22px;
  color: var(--color-white);
}

.footer-form input::placeholder {
  color: var(--color-white-faint);
}

/* ==========================================================================
   FORM SUBMIT MODAL (footer email-capture form ke success/error message)
   ========================================================================== */
.form-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 19, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
  opacity: 0;
  animation: form-modal-fade 0.3s ease forwards;
}

@keyframes form-modal-fade {
  to {
    opacity: 1;
  }
}

.form-modal {
  position: relative;
  background: var(--bg-white);
  border-radius: 20px;
  padding: var(--space-xl) var(--space-lg);
  max-width: 400px;
  width: 100%;
  text-align: center;
  transform: scale(0.92);
  animation: form-modal-scale 0.3s ease forwards;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

@keyframes form-modal-scale {
  to {
    transform: scale(1);
  }
}

.form-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.form-modal__close:hover {
  color: var(--color-heading);
}

.form-modal__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}

.form-modal--success .form-modal__icon {
  background: rgba(74, 222, 128, 0.15);
  color: #22a35a;
}

.form-modal--error .form-modal__icon {
  background: rgba(255, 100, 100, 0.15);
  color: #e04b4b;
}

.form-modal__title {
  font-size: 26px;
  margin-bottom: var(--space-2xs);
}

.form-modal__text {
  color: var(--color-text-muted);
  font-size: 15px;
  margin-bottom: 0;
}

.footer-goup {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  /* margin-top: var(--space-xl); */
  color: var(--color-white);
  font-size: 15px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-md);
  margin-top: var(--space-lg) !important;
  font-size: 12px;
  align-items: center;
}
.site-footer__bottom p {
  color: var(--color-white);
  font-size: 16px;
}

.site-footer__bottom a {
  margin-left: var(--space-md);
  color: var(--color-white);
  font-size: 16px;
}

/* Blinkong effect */
.market-nodes__map {
  position: relative;
  width: 100%;
  line-height: 0;
  aspect-ratio: 1248 / 723;
}

.market-nodes__map img {
  width: 100%;
  height: auto;
  display: block;
}

.market-nodes__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.market-nodes__slide.is-active {
  opacity: 1;
}

.market-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.8);
  z-index: 2;
}

/* Pehla ripple ring */
.market-pin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #4ade80;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pinBlink 2s ease-out infinite;
  opacity: 0.7;
}

/* Doosra ripple ring - thodi delay ke sath */
.market-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #4ade80;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pinBlink 2s ease-out infinite;
  animation-delay: 1s;
  opacity: 0.7;
}

@keyframes pinBlink {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

@media (max-width: 1800px) {
  .fluided-container {
    padding-left: 40px;
  }
}
@media (max-width: 1600px) {
  .hero {
    background: var(--bg-light);
    /* padding-top: var(--space-lg); */
    padding-top: 0;
    min-height: 700px;
    height: 100vh;
  }
  .hero .hero_grid-item {
    font-size: 16px;
    width: 150px;
  }
  .hero__years {
    font-size: 50px;
  }

  .hero__name {
    font-size: 80px;
    margin-bottom: var(--space-sm);
  }
  .hero__quote p {
    font-size: 24px;
  }
  .stat-block__number {
    font-size: 50px;
  }
  .stat-block__label {
    font-size: 16px;
  }
  .section-title {
    font-size: 55px;
  }
  .journey-card__label {
    font-size: 35px;
  }
  .journey-card__title {
    font-size: 33px;
  }
  .journey-card__company {
    font-size: 20px;
  }
  .journey-card__text {
    font-size: 18px;
  }
  .revenue-growth__text {
    font-size: 20px;
  }
  .icon-card__title {
    font-size: 22px;
  }
  .icon-card__text {
    font-size: 18px;
  }
  .market-nodes .section-title {
    font-size: 50px;
  }

  .scaling-framework__flow {
    gap: var(--space-2xs);
  }
}
/* @media (max-width: 1600px) {
} */
@media (max-width: 1440px) {
  .hero_content {
    padding-top: 140px;
  }
  .market-insight__label {
    font-size: 18px;
  }
  .market-insight-img {
    width: 70px;
    height: 70px;
  }
  .market-insight {
    padding: 20px 0;
  }
  .icon-card__text {
    font-size: 16px;
  }
}
@media (max-width: 1380px) {
  .hero__quote {
    border-top: 1px solid rgba(35, 35, 35, 0.15);
    padding-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .hero__tags {
    margin: var(--space-sm) 0;
  }
  .hero__quote p {
    font-size: 20px;
  }
  .journey-card__title {
    font-size: 30px;
  }
  .journey-card__company {
    font-size: 18px;
  }
  .journey-card__label {
    font-size: 30px;
  }

  .hero {
    min-height: auto;
    height: auto;
  }
}
@media (max-width: 1340px) {
}
@media (max-width: 1280px) {
  .stat-block__number {
    font-size: 40px;
  }
  .site-header__logo img {
    height: 70px;
  }
  .hero__name {
    font-size: 65px;
    margin-bottom: var(--space-2xs);
  }
  section {
    padding: var(--space-1xl) 0;
  }
  .section-title {
    font-size: 45px;
  }
  .fluided-container {
    padding-left: 25px;
  }
  .metric-card {
    padding: var(--space-lg) var(--space-lg);
  }
  .tag-pill {
    padding: 3px 10px;
    font-size: 12px;
  }
  .hero .hero_grid-item {
    font-size: 12px;
  }
  .btn {
    padding: 12px 22px;
  }
  .hero__actions {
    margin-bottom: var(--space-sm);
  }
  .hero_content {
    padding-top: 110px;
  }

  .framework-card__num {
    margin-bottom: 10px;
  }

  .metric-card__title {
    font-size: 27px;
  }
  .metric-card__subtitle {
    font-size: 16px;
  }
  .metric-card img {
    width: 75px;
    height: 75px;
  }
}
@media (max-width: 1200px) {
  .site-footer-topRow {
    padding-top: 60px;
  }
}
@media (max-width: 1140px) {
  .journey-card__company {
    font-size: 16px;
  }
  .journey-card__text {
    font-size: 16px;
  }
  .market-nodes h3 {
    font-size: 22px;
    margin-bottom: var(--space-1xs);
  }
  .brand-tile {
    width: 260px;
    height: 105px;
  }
  .icon-card__title {
    font-size: 19px;
  }
  .hero__stats {
    padding-top: var(--space-2xs);
  }
  .hero__years {
    font-size: 37px;
  }
  .hero__years-text {
    left: 44px;
    bottom: -8px;
  }
  .hero__quote p {
    font-size: 17px;
  }
  .stat-block__label {
    font-size: 13px;
  }
  .stat-block__number {
    font-size: 35px;
  }
  .hero__quote {
    padding-top: var(--space-2xs);
    margin-bottom: var(--space-2xs);
  }
}
@media (max-width: 1024px) {
  .market-insight-img {
    width: 60px;
    height: 60px;
    padding: 14px;
  }
}
@media (max-width: 991px) {
  /* col-lg-5/col-lg-7 yahan se stack ho jate hain (side-by-side nahi
     rehte) — sticky sirf desktop wale side-by-side layout ke liye tha,
     stacked hone ke baad wo hi bara khaali gap bana raha tha. */
  .executive-metrics .col-lg-5 {
    position: static;
    min-height: auto;
  }
  .hero__stats {
    gap: 16px;
  }
  /* .beyond-business__tags {
    text-align: center;
    align-self: center;
    margin: auto;
  } */

  .cta__ready {
    justify-content: space-between;
  }
  .cta-conten {
    padding: 30px 0 30px;
  }
  .metric-card__title {
    font-size: 20px;
  }
  .metric-card__subtitle {
    font-size: 14px;
  }
  .metric-card img {
    width: 65px;
    height: 65px;
  }
  .hero__badges {
    max-width: 190px;
  }
  .cta__content {
    padding: 40px 0 20px;
  }

  .beyond-business__tags {
    text-align: center;
    margin-left: unset;
    margin: auto;
  }
  .metric-card__wrapper {
    height: auto;
  }
}
@media (max-width: 767px) {
  /* Executive Metrics rotator sirf desktop ke liye hai — mobile par sab
     cards normal static list ki tarah dikhte hain, koi rotation nahi
     (JS bhi matchMedia check karke mobile par height/transform set nahi
     karta). Duplicate cards (seamless-loop ke liye) yahan hide kar dete
     hain taake list mein dobara na dikhein. */
  .metric-card__rotator {
    height: auto !important;
    overflow: visible;
  }
  .metric-card[aria-hidden="true"] {
    display: none;
  }

  .scaling-framework__flow {
    flex-direction: column;
    gap: var(--space-md);
  }
  .scaling-framework__arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .framework-card {
    width: 100%;
    padding: var(--space-md) var(--space-sm);
  }
  .framework-card__num {
    margin-bottom: var(--space-md);
  }
  .scaling-framework .icon-card__icon img {
    width: 90px;
    height: 90px;
  }
  .scaling-framework .icon-card__title {
    font-size: 20px;
  }
  .scaling-framework .icon-card__text {
    font-size: 16px;
  }
  .site-header__logo img {
    height: 70px;
    margin: 0 0 0 auto;
  }
  .fluided-container {
    padding-left: 15px;
  }
  .banner-rightCol {
    padding-left: 0;
  }
  .scaling-framework .section-subtitle {
    margin: 0 auto var(--space-3xs);
  }
  .section-subtitle {
    font-size: 16px;
  }
  .expertise .icon-card {
    /* padding: var(--space-2xs) var(--space-2xs); */
  }
  .expertise .icon-card__icon img {
    width: 50px;
    height: 50px;
  }
  .expertise-card__title {
    font-size: 16px;
  }
  .expertise .icon-card__text {
    font-size: 15px;
    line-height: 1.2;
  }

  .site-footer-topRow {
    padding-top: var(--space-xl);
  }
  .site-footer .section-title--on-dark {
    font-size: 24px;
  }

  /* ================= PROFESSIONAL JOURNEY — mobile ================= */
  /* Desktop ka pinned wheel-jack carousel mobile par disable ho jata hai
     (script.js mein) — is liye yahan koi sticky/height-trick nahi
     chahiye, sab kuch normal page-flow mein chalta hai. */
  /* global `section{overflow:hidden}` years-list ke sticky ko tod deta
     hai (ancestor ka overflow visible na ho to position:sticky kaam
     nahi karta) — mobile par yahan kuch clip nahi karna, visible wapas. */
  .journey {
    overflow: visible;
  }
  .journey-scroll-track {
    height: auto;
  }
  .journey-scroll-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
  }
  .journey-scroll-pin > .container {
    width: auto;
    max-width: none;
    padding-left: 16px;
    padding-right: 0;
    /* Years-list yahin sticky ho jati hai (apni jagah ruk jati hai) jab
       tak cards scroll hote rehte hain — is se wo poori scroll ke dauran
       nazar aati rehti hai, sirf shuru mein hi khatam nahi ho jati, aur
       card-height ke sath perfectly sync karne ki zaroorat bhi nahi
       (jo unequal card-heights ki wajah se reliably possible nahi tha). */
    position: sticky;
    top: var(--space-lg);
    align-self: start;
  }
  .journey-scroll-pin > .fluided-container {
    padding: 0 16px 0 0;
    /* CSS Grid ka "1fr" column apne content (image/text) ki natural
       min-width se chhota nahi sikurta jab tak min-width:0 na diya
       jaye — is ki wajah se card container apni jagah se overflow ho
       kar screen se bahar ja raha tha (chhoti screens par). */
    min-width: 0;
  }

  /* Years — ab horizontal row ki bajaye vertical list (cards ke bagal
     mein), diamond/tick marker neeche ki bajaye right side par. */
  .journey__years {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    border-right: 1px solid rgba(35, 35, 35, 0.2);
    padding-bottom: 0;
    padding-right: var(--space-md);
    gap: var(--space-md);
  }
  .journey__years > .journey__year {
    font-size: 13px;
  }
  .journey__years > .journey__year--active {
    font-size: 26px;
  }
  .journey__years > .journey__year--active::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(-1 * var(--space-md));
    width: 3px;
    height: 20px;
    transform: translate(50%, -50%);
  }
  .journey__years > .journey__year--active::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(-1 * var(--space-md));
    transform: translate(50%, -50%) rotate(45deg);
  }

  /* Cards — Swiper ki jagah plain vertical stack (JS mobile par Swiper
     init hi nahi karti, is liye koi transform nahi lagega, sirf display
     ko block/normal-flow karna hai). */
  .journey__carousel,
  .journey__carousel .swiper-wrapper {
    display: block;
    height: auto;
  }
  .journey__carousel .swiper-slide {
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: var(--space-lg);
  }
  .journey__carousel .journey-card {
    display: block;
  }
  .journey-card__label {
    font-size: 28px;
    margin-top: 0;
  }
  /* Nested scroll-box mobile par nahi chahiye — page khud hi scroll
     karega, achievements bhi bina clip huye poori dikhengi. */
  .journey-card__content-scoll {
    overflow: visible !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  .footer-form {
    flex-direction: column;
  }
  .footer-form .btn {
    width: 100%;
    justify-content: center;
  }
  .fluided-container {
    padding-left: 12px;
  }

  .journeyLastContainer {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-md);
  }
}
@media (max-width: 575px) {
  .metric-card {
    padding: var(--space-sm) var(--space-sm);
    min-height: 140px;
  }
  .metric-card__title {
    font-size: 18px;
  }
  .metric-card img {
    width: 55px;
    height: 55px;
  }
  .cross-functional .photo-card__title {
    font-size: 17px;
    bottom: 7px;
  }
  .site-footer__bottom p {
    text-align: center;
  }
  .partnership-card__title{
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .hero__name {
    font-size: 55px;
  }
  .hero .hero_grid-item {
    font-size: 11px;
  }
  .hero .hero_grid-item {
    width: 80px;
  }
  .hero .hero_grid {
    gap: 10px;
  }
  .section-title {
    font-size: 30px;
  }
  .btn {
    padding: 12px 16px;
    font-size: 11px;
  }
  .revenue-growth .section-title {
    font-size: 32px;
  }
  .revenue-growth__text {
    font-size: 16px;
  }
  .market-nodes .section-title {
    font-size: 32px;
  }
  .cta ul li {
    font-size: 16px;
    color: var(--color-text);
    padding-left: 16px;
    position: relative;
    margin-bottom: var(--space-2xs);
  }
  .cta__ready {
    margin-top: 10px;
  }
  .cta__bullets {
    margin: var(--space-2xs) 0;
  }

  .journey-card__title {
    font-size: 27px;
  }
  .journey-card__company {
    font-size: 14px;
  }
  .journey-card__text {
    font-size: 14px;
  }
  .journey-card__years {
    font-size: 18px;
  }
  .journey-card__logo {
    height: 35px;
    max-width: 200px;
  }
  .hero__badge {
    padding: 10px 25px;
  }
  .hero__badges {
    max-width: 140px;
    height: 80px;
  }
  .hero__statement{
    font-size: 16px;
    line-height: 1.4;
  }
  .network-card__title{
    font-size: 20px;
  }
  .stat-block__label {
    max-width: 90px;
  }
}
@media (max-width: 425px) {
  .hero__quote p {
    font-size: 14px;
  }
  .hero__years {
    font-size: 32px;
  }
  .hero__years-text {
    left: 39px;
    bottom: -7px;
  }
  .market-nodes .section-title {
    font-size: 27px;
  }
  
}
@media (max-width: 375px) {
}
@media (max-width: 360px) {
}