/*=================================================
  KR Info Solutions — About Us page styles (about.html)
  Loaded AFTER css/style.css (shared tokens, header,
  footer, buttons, choose-sec base, counters, keyframes
  such as orderPulse / fadeIn all live in style.css).
=================================================*/

/* ---------- Section headings ----------
   One scale for every section title on this page: 40px / 700.
   .sec-title already carries these values from style.css; the rules
   below bring the remaining section titles onto the same scale. */
.about-need-title,
.brand-title,
.client-sec-title {
  font-size: 40px;
  font-weight: 700;
}

/* ---------- Section spacing ----------
   About follows the HOMEPAGE rhythm: --section-space (120px) per side, as on
   the live site (client, 2026-07-28). It used to override these utilities to
   --inner-section-space (40px); because this sheet loads after style.css those
   overrides silently won and kept About at 80px gaps while the homepage moved
   to 120px. Left here (rather than deleted) only so the intent is explicit —
   they now resolve to exactly the same values as style.css.
   --inner-section-space stays reserved for services.html / our-community.html. */
.space { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.space-top { padding-top: var(--section-space); }
.space-bottom { padding-bottom: var(--section-space); }
.brand-sec {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* ---------- Breadcrumb hero (inner-page banner) ---------- */
.breadcumb-wrapper {
  position: relative;
  background-color: var(--title-color);
  background-image: url("../assets/images/about/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  text-align: center;
}
.breadcumb-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.breadcumb-content { position: relative; z-index: 2; width: 100%; }
.breadcumb-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white-color);
  margin: 0;
}
.breadcumb-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 18px;
  margin-top: 18px;
}
/* Matched to the breadcrumb on every other inner page (.svc- / .oc- /
   .prod- / .prj- / .ct-): white text, ORANGE hover, and the same inline
   SVG chevron in orange. This page previously used a white "›" text
   character with a purple hover, which was the odd one out. */
.breadcumb-menu li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white-color);
  text-transform: capitalize;
}
.breadcumb-menu li a { color: var(--white-color); }
.breadcumb-menu li a:hover { color: var(--accent-orange); }
.breadcumb-menu .sep {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-orange);
}

/* ---------- About intro: EVER CHANGING (right) + video/tabs (left) ---------- */
.about-intro-sec { background-color: var(--white-color); }
.about-intro-row { display: flex; align-items: flex-start; gap: 0; }
.about-intro-text { flex: 0 0 50%; max-width: 50%; min-width: 0; padding-left: 40px; }
.about-intro-text .title-area { position: relative; }
.about-intro-text .sec-title { color: var(--hero-title-color); }
.about-intro-text .shadow-title { margin-left: 0; margin-right: auto; }
.about-intro-desc { color: var(--black-color); line-height: 2; margin: 0; }
.about-intro-media { flex: 0 0 50%; max-width: 50%; min-width: 0; }

/* ---------- Vision / Mission + video ---------- */
.about-vm-media { position: relative; margin-bottom: 30px; }
.about-vm-media img { width: 100%; height: auto; border-radius: 20px; }
.about-vm-media .img-box4 { position: relative; display: block; }
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 25px rgba(1, 15, 28, 0.18);
  animation: orderPulse 2.5s infinite;
}
.play-btn:hover { background-color: var(--theme-color); color: var(--white-color); }
.vm-tabs { display: flex; gap: 0; margin-bottom: 25px; }
.vm-tab {
  flex: 1;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--white-color);
  background-color: #182A32;
  border: none;
  padding: 20px 15px;
  transition: all 0.3s ease-in-out;
}
.vm-tab:hover { background-color: var(--btn-orange); color: var(--white-color); }
.vm-tab.active { background-color: var(--btn-orange); color: var(--white-color); }
.vm-panel { display: none; }
.vm-panel.active { display: block; animation: fadeIn 0.5s ease-in-out; }
/* The VISION / MISSION button now lives INSIDE .vm-imgbox_content, i.e. under
   the text rather than under the whole row (client, 2026-07-28). It used to be
   a sibling after .vm-imgbox, so it sat below both columns and read as
   belonging to the image.
   `stretch` makes the two columns equal height, `margin-top: auto` drops the
   button to the bottom of the text column, and the image is told to fill its
   own column — so the image and the button always finish on the same line
   whichever of the two is naturally taller. */
.vm-imgbox { display: flex; align-items: stretch; gap: 15px; }
.vm-imgbox_img { flex: none; width: 44%; display: flex; }
.vm-imgbox_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.vm-imgbox_content { flex: 1; display: flex; flex-direction: column; }
.vm-imgbox_title { font-size: 30px; font-weight: 600; line-height: 1.4; color: #182A32; margin: 0; }
.vm-imgbox_desc { font-size: 16px; line-height: 1.7; margin: 0; color: var(--body-color); }
/* margin-top:auto absorbs the slack above, pinning the button to the bottom
   edge of the text column — level with the bottom of the image. */
.vm-btn-wrap { text-align: left; margin-top: auto; padding-top: 18px; }
.vm-btn {
  display: inline-block;
  background-color: var(--btn-orange);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 15px 50px;
  transition: all 0.4s ease-in-out;
}
.vm-btn:hover { background-color: #182A32; color: var(--white-color); }

/* ---------- Choose Us (about page — exact live design) ---------- */
.about-choose {
  background-color: #F5F5F5;
  background-image: url("../assets/images/why_bg_2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.about-choose .choose-row { align-items: stretch; }
.about-choose .choose-content { width: 50%; }
.about-choose .choose-img { width: 50%; display: flex; align-items: stretch; }
/* image fills the full height of the content column */
.about-choose .img-box5 { width: 100%; display: flex; }
.about-choose .img-box5 > img { width: 100%; height: 100%; object-fit: cover; }
.about-choose .counter-area { gap: 50px; }
.about-choose .counter-card_icon img { width: 50px; height: 50px; }
/* square image, no rounded corners */
.about-choose .img-box5 > img { border-radius: 0; }
/* stat / counter — exact live values (black, 40px number, 22px label) */
.about-choose .counter-card_number { font-size: 40px; font-weight: 900; color: var(--black-color); }
.about-choose .counter-card_text { font-size: 22px; font-weight: 700; color: var(--black-color); }
/* "10k+ Active Clients" badge — exact live circular design */
.about-choose .img-box5 .year-counter {
  top: 20px;
  left: 40%;
  bottom: auto;
  width: 155px;
  height: 155px;
  padding: 0;
  border-radius: 50%;
  border: 12px solid var(--smoke-color2);
  box-shadow: none;
  background-color: var(--theme-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.about-choose .img-box5 .year-counter_number { font-size: 36px; font-weight: 800; line-height: 1.1; margin-bottom: 0; }
.about-choose .img-box5 .year-counter_text { font-size: 15px; font-weight: 400; margin: 0; }

/* ---------- Success (Unveiling) — 2-column, exact live design ---------- */
/* Live: section padding 120px 12px, boxed container 1140px,
   left column padding 0 12px, right column padding 0 12px 0 50px.
   No flex gap — a gap would push the row past the container and make
   the left/right outer space unequal. */
/* The `.about-need-sec` below carries a full-bleed background image, so its
   own top padding sits INSIDE that artwork and does nothing for the white gap
   between the two. That gap was purely this section's `--section-space` bottom
   padding, which read as cramped under the button/call row (client, 2026-07-30).
   The margin adds to it at every breakpoint — it uses the flat 40px token, so
   it stacks on top of whatever `--section-space` currently resolves to rather
   than doubling with it. */
.about-success-sec {
  background-color: var(--white-color);
  margin-bottom: var(--inner-section-space);
}
.about-success-row { display: flex; align-items: center; gap: 0; }
.about-success-media { flex: 0 0 50%; max-width: 50%; padding: 0 12px; }
.about-success-content { flex: 0 0 50%; max-width: 50%; padding: 0 12px 0 50px; }

/* left image group */
.about-success-media .img-box1 { position: relative; z-index: 2; margin-left: 50px; margin-right: 18px; }
.about-success-media .img1 img { width: 100%; max-width: 650px; }
.about-success-media .shape1 { position: absolute; bottom: 0; right: 80px; z-index: -1; }
.about-success-media .year-counter {
  position: absolute;
  bottom: 30px;
  right: 0;
  left: auto;
  top: auto;
  width: 184px;
  height: 184px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  border: 12px solid var(--white-color);
  box-shadow: 0 10px 30px rgba(8, 14, 28, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.about-success-media .year-counter_number { color: var(--white-color); font-size: 64px; font-weight: 800; line-height: 1.1; margin: 0; }
.about-success-media .year-counter_text { color: var(--white-color); font-weight: 400; margin: 0; }

/* right content — exact live colours:
   sub-title #F0622D, heading #080E1C, heading <span> #F0622D, body copy #000000 */
.about-success-content .sub-title { color: var(--accent-orange); margin-bottom: 30px; }
.about-success-content .sec-title { color: var(--hero-title-color); }
.about-success-content .sec-title span { color: var(--accent-orange); }
.about-success-text { margin-bottom: 30px; color: var(--black-color); }

/* feature cards */
.about-feature-wrap {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
  padding-bottom: 35px;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 40px;
}
.about-feature { display: flex; align-items: center; gap: 10px; }
.about-feature_icon { flex: none; }
.about-feature_icon img { width: 60px; height: 60px; object-fit: contain; }
.about-feature_title { font-size: 20px; color: var(--title-color); margin: 0 0 7px 0; }
.about-feature_text { margin: 0; font-size: 15px; color: var(--body-color); }

/* CTA button group */
/* 50px, not 30: the call icon's ripple rings scale to 1.8x (see callRipple
   below), so the 56px circle sweeps ~22px past its own box on each side and ate
   most of the old gap at the animation's peak. Also applies at 768-991, where
   the columns are stacked full width and there is ample room. */
.about-success-content .btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; }
/* Only the colour and icon alignment are set here — size, font and padding
   come from the shared .th-btn so it matches the site's other buttons. */
.about-success-content .th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--accent-orange);
}
.call-btn { display: flex; align-items: center; gap: 20px; }

/* phone icon — circle + the live site's double "ripple" zoom rings */
.call-btn_icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 56px;
  height: 56px;
}
.call-btn_icon::before,
.call-btn_icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--accent-orange);
  transition: all 0.4s ease;
  animation: callRipple var(--ripple-ani-duration, 5s) ease-in-out infinite;
}
.call-btn_icon::after { animation-delay: 2s; }
.call-btn_circle {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--accent-orange);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}
.call-btn_icon:hover .call-btn_circle,
.call-btn_icon:hover::before,
.call-btn_icon:hover::after { background-color: var(--title-color); }
@keyframes callRipple {
  0% { transform: scale(1); opacity: 0; }
  30% { opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call-btn_icon::before, .call-btn_icon::after { animation: none; }
}

.call-btn .btn-text { font-size: 14px; font-weight: 500; display: block; color: var(--body-color); }
.call-btn .btn-title { font-family: var(--title-font); font-weight: 600; font-size: 20px; color: var(--title-color); }
.call-btn .btn-title:hover { color: var(--theme-color); }

/* ---------- When might you need us (icon-box grid) ----------
   Live: parallax bg (Picture1.jpg) + white overlay at 65%, 80px 0 padding,
   400px min-height container, rows of 3 / 2 / 3 cards alternating
   navy #071C44 and orange #F05C1F, each card 30px padding with a 10px
   gutter (Elementor column margin 0 5px). */
.about-need-sec {
  position: relative;
  z-index: 1;
  padding: var(--section-space) 0;
  background-image: url("../assets/images/about/v_Picture1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Parallax only on pointer devices at desktop widths — background-attachment:
   fixed combined with background-size: cover is broken on iOS Safari, where it
   sizes to the viewport and jumps while scrolling. */
@media (hover: hover) and (min-width: 992px) {
  .about-need-sec { background-attachment: fixed; }
}
.about-need-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--white-color);
  opacity: 0.65;
  pointer-events: none;
}
.about-need-sec .container { position: relative; z-index: 2; min-height: 400px; }
.about-need-title {
  line-height: 1.3;
  color: var(--btn-orange);
  text-align: center;
  margin: 0;
}
.about-need-intro {
  padding: 2em 4em;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3em;
  color: var(--black-color);
}

/* rows */
.need-row { display: grid; gap: 10px; margin: 10px 5px 0 5px; }
.need-row-3 { grid-template-columns: repeat(3, 1fr); }
.need-row-2 { grid-template-columns: repeat(2, 1fr); }

/* cards */
.need-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 30px;
  text-align: left;
  transition: background 0.4s ease-in-out;
}
.need-card--navy { background-color: #071C44; }
.need-card--orange { background-color: var(--btn-orange); }
/* framed circle icon — 50px glyph, .5em padding, 1px white ring */
.need-card_icon {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 50px;
  line-height: 1;
  color: var(--white-color);
  border: 1px solid var(--white-color);
  border-radius: 50%;
  padding: 0.5em;
  transition: all 0.3s ease;
}
.need-card_icon svg { display: block; width: 1em; height: 1em; }
.need-card_body { flex: 1 1 auto; min-width: 0; }
.need-card_title {
  font-family: "Quicksand", sans-serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white-color);
  margin: 0 0 15px 0;
}
.need-card_text {
  font-size: 16px;
  line-height: 1.5em;
  color: var(--white-color);
  margin: 0;
}

/* ---------- Our Clients ----------
   Live: 1400px container (wider than the 1140 boxed sections), 2em column
   padding, 400px min-height with vertically centred content, 120px 0
   padding. The logos are a WP 5-column gallery at thumbnail size (fit
   inside 150x150) with a 15px gutter — no cards, borders or backgrounds. */
/* No top padding — the Brands section above already contributes a full
   --section-space of bottom padding, which alone sets the gap here. */
.client-sec {
  background-color: var(--white-color);
  padding: 0 0 var(--section-space) 0;
}
.client-sec .container {
  max-width: 1400px;
  padding-left: 2em;
  padding-right: 2em;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Styled like the page's other section titles (.sec-title / .brand-title):
   family, weight and colour all come from the shared heading rules, so
   only the centring and spacing are set here. Margin is bottom-only so
   the section's top padding isn't doubled. */
.client-sec-title {
  margin: 0 0 50px 0;
  text-align: center;
  line-height: 1.3;
}
/* gallery: inline-block cells, 15px gutter pulled flush by negative margin */
.client-grid {
  width: 100%;
  margin: 0 -15px -15px 0;
  font-size: 0;
}
.client-logo {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  max-width: 20%;
  padding: 0 15px 15px 0;
  margin: 0;
  text-align: center;
}
/* logos render at WP thumbnail scale — fitted inside 150x150, not stretched */
.client-logo img {
  display: block;
  margin: 0 auto;
  max-width: 150px;
  max-height: 150px;
  width: auto;
  height: auto;
}

/*=================================================
  Responsive
  Uses the page's own breakpoints (1199 / 991 / 767 / 575) throughout
  rather than the live site's 1024/768, so no width falls between two
  systems and every section changes at the same points.
=================================================*/

/* ---------- Sideways reveal offset ----------
   This was the "extra space on the right". The shared animation in style.css
   parks a fade-left item 60px to the RIGHT of its resting place until it
   scrolls into view:
       .reveal-item[data-reveal="fade-left"] { transform: translateX(60px) }
   That 60px is harmless only while the centred .container still has 60px of
   dead space beside it. .container maxes out at 1164px with a 12px gutter, so
   the slack runs out at roughly (1164 - 24) + 120 = 1260px of viewport — below
   that, the two right-hand columns on this page (.about-intro-text and
   .about-success-content) are pushed past the window edge until they reveal.
   Measured before the fix: +42px at 1199, +24px at 1024, +1px at 1258.
   1300px covers the whole band with room to spare. Swapping to the vertical
   motion keeps the same fade but cannot overflow sideways.
   Scoped to this page's sheet, so the homepage is untouched. */
@media (max-width: 1300px) {
  .reveal-item[data-reveal="fade-left"],
  .reveal-item[data-reveal="fade-right"] { transform: translateY(60px); }
  /* Must be restated here. style.css clears the offset with
     `.reveal-item.revealed { transform: none }`, which has the SAME
     specificity (0,2,0) as the rule above — and about.css loads later, so
     without this line the override won every time and revealed elements
     stayed parked 60px low for good. That left a permanent 60px gap above
     the success image and stopped the reveal animation resolving at all. */
  .reveal-item.revealed { transform: none; }
}

/* ---------- Small laptop ---------- */
@media (max-width: 1199px) {
  /* Choose Us: the row is still two columns here, but the three counter
     cards (50px gaps) need more than the text column's 50%, and a flex item
     defaults to min-width:auto — so the text column grew and squeezed the
     image column instead. Measured at 1024: the image rendered 302px wide by
     1534px tall, a sliver. Letting the text column and its cards shrink
     restores the 50/50 split, and the cap keeps the image from stretching to
     whatever height the text happens to be. */
  .about-choose .choose-content { min-width: 0; }
  .about-choose .counter-area { gap: 24px; }
  .about-choose .counter-card { min-width: 0; }
  .about-choose .img-box5 > img { max-height: 620px; }
}

/* ---------- Tablet: close the gap under the banner ----------
   About follows the HOMEPAGE rhythm (--section-space, 120px per side), so its
   first section opened with 120px of top padding directly under the breadcrumb
   banner. Every other inner page runs 40-80px there — measured at 768/900/1024:
   services 40, our-community 40, contact / projects / products 80, about 120 —
   which made About look like it started a screen too low on a tablet.
   Only the FIRST section's top padding is trimmed, to the same 80px the other
   inner pages use; the rest of the page keeps its 120px rhythm, so the
   homepage-matching spacing decision still stands below the fold. */
@media (max-width: 1024px) {
  .about-intro-sec.space { padding-top: 80px; }

  /* Same trim above the "Unveiling Success" image (123.png), for the same
     reason — 120px of section padding is a lot of dead space on a tablet.
     Measured space above that image before this: 343px at 1024, 180px once
     the row stacks. */
  .about-success-sec.space { padding-top: 80px; }
}

/* 992-1024: the success row is still two columns and centred, but the text
   column is far taller than the image, so centring parked the image ~223px
   down its own row — the bulk of the gap above 123.png at this width.
   Top-aligning puts the image level with the heading beside it. Below 992 the
   row stacks, so alignment no longer applies. */
@media (min-width: 992px) and (max-width: 1024px) {
  .about-success-row { align-items: flex-start; }
}

/* 992-1024 only. style.css caps `.choose-sec .container` at 700px from 1024px
   down, because the HOMEPAGE stacks this section there. About keeps its two
   columns until 991, so it was fitting a 50/50 split into 700px — the image
   column came out 302px wide and stretched to 1534px tall. Give About back
   the normal container for that band; below 992 it stacks like the homepage
   and the 700px cap is correct again. */
@media (min-width: 992px) and (max-width: 1024px) {
  .about-choose.choose-sec .container {
    max-width: calc(var(--main-container) + var(--container-gutter) * 2);
  }
  /* Shorter again on tablet (client, 2026-07-28): 620px still read as too
     deep, and at this width the column is only ~453px wide so the photo was
     strongly portrait. See the matching values in the <=991 block — the two
     together cover the whole tablet band, while 1025-1199px keeps 620px.
     The intro image is capped to the same 450px; it renders shorter than that
     in this band anyway (431px), so the rule only guarantees the two images
     never disagree if the column widths change. */
  .about-choose .img-box5 > img { max-height: 450px; }
  .about-vm-media img { max-height: 450px; object-fit: cover; }

  .about-need-title, .brand-title, .client-sec-title { font-size: 36px; }
  /* cards keep 3-up here, so trim the icon and title to leave room for text */
  .need-card { padding: 25px; }
  .need-card_icon { font-size: 40px; }
  .need-card_title { font-size: 24px; }
  /* Our Clients drops from its 1400px outlier to the page's own container
     width so it lines up with every other section, and to 4 logos across */
  .client-sec .container {
    max-width: calc(var(--main-container) + var(--container-gutter) * 2);
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }
  .client-logo { max-width: 25%; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .breadcumb-wrapper { min-height: 300px; }
  /* intro: video/tabs above, copy below */
  .about-intro-row { flex-direction: column; gap: 40px; }
  .about-intro-text, .about-intro-media { width: 100%; flex: 1 1 auto; max-width: 100%; }
  .about-intro-text { padding-left: 0; }
  /* Trim the two tall images once the rows stack (client, 2026-07-28).
     Going full width makes both very deep: the intro video image measured
     898x832 at 970px — and its source is only 629x583, so it was being
     upscaled ~143% and looked soft as well as oversized. The Choose Us photo
     measured 628x864. Capping the height keeps the proportions of the page
     sane; both already crop rather than squash because of object-fit: cover.
     Adjust the two max-height values to taste. */
  /* Both tablet images now cap at the same 450px (client, 2026-07-28), so the
     intro video still and the Choose Us photo read as a matched pair rather
     than one being noticeably deeper than the other. 560px was still too tall
     for the intro image once its row stacked and it ran the full column width
     (measured 674x560 at 768, 898x560 at 992). */
  .about-vm-media img { max-height: 450px; object-fit: cover; }
  /* Matches the 992-1024 block above so the cap holds across the whole tablet
     band and does not jump at the stacking breakpoint. */
  .about-choose .img-box5 > img { max-height: 450px; }
  /* choose us */
  .about-choose .choose-content, .about-choose .choose-img { width: 100%; }
  .about-choose .img-box5 > img { height: auto; }
  /* success */
  .about-success-row { flex-direction: column; gap: 45px; }
  .about-success-media, .about-success-content { flex: 1 1 auto; max-width: 100%; width: 100%; padding: 0 12px; }
  /* image scales down and centres once the row stacks — full width is
     far too large for a tablet */
  .about-success-media .img-box1 { margin-left: auto; margin-right: auto; max-width: 480px; }
  .about-need-title, .brand-title, .client-sec-title { font-size: 30px; }
  /* need cards: 2-up, the odd third card spans the full row */
  .about-need-intro { padding: 1.5em 1em; }
  .need-row-3 { grid-template-columns: repeat(2, 1fr); }
  .need-row-3 > .need-card:nth-child(3) { grid-column: 1 / -1; }
  .client-logo { max-width: 33.333%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .breadcumb-wrapper { min-height: 280px; }
  .breadcumb-title { font-size: 40px; }
  .breadcumb-menu { font-size: 16px; }
  .about-feature-wrap { grid-template-columns: 1fr; }
  .vm-imgbox_title { font-size: 22px; }
  /* need cards stack full width, icon centred above the text */
  .about-need-sec { padding: var(--section-space) 20px; }
  .about-need-intro { padding: 1em 0; font-size: 15px; }
  .need-row-3, .need-row-2 { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .need-row-3 > .need-card:nth-child(3) { grid-column: auto; }
  .need-card { flex-direction: column; align-items: stretch; text-align: center; padding: 25px 20px; }
  .need-card_icon { align-self: center; font-size: 36px; }
  .need-card_title { font-size: 22px; }
  /* Our Clients: 2 logos across (2x2 grid), container drops its min-height */
  .client-sec { padding: 0 10px var(--section-space) 10px; }
  .client-sec .container { padding-left: 0; padding-right: 0; min-height: 0; }
  .client-logo { max-width: 50%; }

  /* "10k+ Active Clients" badge centred on the image — the desktop
     left:40% sits it off to the right on a narrow image */
  .about-choose .img-box5 .year-counter { left: 50%; transform: translateX(-50%); }

  /* Choose Us stats stay side by side, at a smaller scale.
     flex:1 lets each card shrink instead of wrapping onto its own line. */
  .about-choose .counter-area { flex-wrap: nowrap; gap: 15px; }
  .about-choose .counter-card { flex: 1 1 0; min-width: 0; gap: 10px; }
  .about-choose .counter-card_icon img { width: 46px; height: 46px; }
  .about-choose .counter-card_number { font-size: 26px; }
  .about-choose .counter-card_text { font-size: 14px; }

  /* "Our Services" and the call button stay on one line. In practice this gap
     governs 576-767 only — the 575 block below overrides it for smaller
     phones — and at those widths the row has room to spare. */
  .about-success-content .btn-group { flex-wrap: nowrap; gap: 30px; }
  .about-success-content .th-btn {
    padding: 14px 16px;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .call-btn { gap: 10px; min-width: 0; }
  .call-btn_icon, .call-btn_circle { width: 46px; height: 46px; }
  .call-btn_icon svg { width: 17px; height: 17px; }
  .call-btn .media-body { min-width: 0; }
  .call-btn .btn-text { font-size: 12px; }
  .call-btn .btn-title { font-size: 17px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 575px) {
  .breadcumb-title { font-size: 32px; }
  .about-need-title, .brand-title, .client-sec-title { font-size: 25px; }
  .need-card_title { font-size: 20px; }
  .vm-imgbox_title { font-size: 18px; }
  .vm-imgbox_desc { font-size: 14px; }
  .vm-btn { padding: 12px 30px; font-size: 12px; }
  /* the 184px badge crowds a narrow screen */
  .about-success-media .year-counter { width: 140px; height: 140px; border-width: 8px; }
  .about-success-media .year-counter_number { font-size: 44px; }
  /* Button + call stay on one line, and this is the breakpoint where width
     genuinely runs out: at 375px the two items alone measure ~260px against
     ~279px of usable column, so a wider gap has to be paid for out of the
     items themselves. The trims below (button side padding 12->8, call icon
     42->38, phone number 15->14) free ~17px, which funds the 20px -> 32px gap
     and still leaves the row slightly less tight than it was before. */
  .about-success-content .btn-group { gap: 32px; }
  .about-success-content .th-btn { padding: 13px 8px; font-size: 11px; }
  .call-btn { gap: 8px; }
  .call-btn_icon, .call-btn_circle { width: 38px; height: 38px; }
  .call-btn_icon svg { width: 15px; height: 15px; }
  .call-btn .btn-title { font-size: 14px; }
  /* stats stay side by side, scaled down again */
  .about-choose .counter-area { gap: 12px; }
  .about-choose .counter-card { gap: 8px; }
  .about-choose .counter-card_icon img { width: 40px; height: 40px; }
  .about-choose .counter-card_number { font-size: 22px; }
  .about-choose .counter-card_text { font-size: 13px; }
}

/* ---------- Testimonials ----------
   Sits between "Brands We Associated With" and "Our Clients".

   Layout is a two-column grid whose row STRETCHES: the image column and the
   carousel column therefore resolve to the same height, and the tallest
   testimonial is what sets that height. The image fills its half with
   object-fit:cover so it never letterboxes, whatever the row height works
   out to be.

   Only the right column moves. .testi-track is translated right-to-left one
   card at a time by js/main.js (#testiCarousel); the left figure is static,
   which is the whole point of the split. */
.testi-sec {
  padding-bottom: var(--section-space);
}
.testi-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}

.testi-layout {
  display: grid;
  /* minmax(0, …) is required, not cosmetic: an `fr` track is really
     minmax(auto, 1fr), so the carousel's min-content width — four cards laid
     out in a row — would blow the track far past its share and squeeze the
     image column down to a sliver. Flooring the minimum at 0 lets the ratio
     actually hold. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 0;
  /* stretch is the default, but it is load-bearing here — it is what makes
     the two columns equal height. Spelled out so it does not get "tidied". */
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 30px rgba(8, 14, 28, 0.08);
  /* Floor for the row so a short quote cannot squash the photo. */
  min-height: 440px;
}

/* ---- Left: static image ---- */
.testi-figure {
  margin: 0;
  position: relative;
  min-width: 0;
  /* Fill the grid track top to bottom. */
  height: 100%;
  background-color: var(--title-color);
}
.testi-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Right: the sliding half ---- */
.testi-carousel {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: #eff1f9;
}
/* The window. overflow:hidden is what turns the wide track into a carousel. */
.testi-viewport {
  overflow: hidden;
  flex: 1 1 auto;
}
.testi-track {
  display: flex;
  /* stretch (the default) equalises the cards, so the track is as tall as the
     LONGEST quote — that intrinsic height is what drives the grid row, and in
     turn the height the image is stretched to. Using height:100% here instead
     would make the height circular (row <- track <- row) and let a long quote
     overflow the min-height floor. min-height fills the row when the floor is
     what won, and is ignored when the row height is still auto. */
  min-height: 100%;
  align-items: stretch;
  /* transform + transition are written by main.js so the transition can be
     switched off for the silent jump back to the first card. */
  will-change: transform;
}
/* Each card is exactly one viewport wide, so one step === one testimonial.
   No height here on purpose — see the note on .testi-track. */
.testi-card {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 55px;
}
.testi-quote {
  width: 44px;
  height: 44px;
  color: var(--accent-orange);
  opacity: 0.9;
  margin-bottom: 22px;
  flex: none;
}
.testi-text {
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.8;
  color: var(--body-color);
  margin: 0 0 26px 0;
}
.testi-author { margin-top: auto; }
.testi-author_name {
  font-family: var(--title-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--title-color);
  margin: 0 0 4px 0;
}
.testi-author_role {
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--body-color);
  margin: 0;
}

/* ---- Dots ---- */
.testi-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 55px 34px 55px;
}
.testi-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #c3cbe2;
  cursor: pointer;
  transition: background-color 0.3s, width 0.3s;
}
.testi-dot.active {
  width: 26px;
  border-radius: 5px;
  background-color: var(--accent-orange);
}

/* Someone who has asked for less motion gets a static first testimonial
   rather than a card sliding past every few seconds. main.js checks the
   same query and does not start the timer. */
@media (prefers-reduced-motion: reduce) {
  .testi-track { transition: none !important; }
}

@media (max-width: 1199px) {
  .testi-card { padding: 44px 40px; }
  .testi-dots { padding: 0 40px 30px 40px; }
}
@media (max-width: 991px) {
  .testi-title { font-size: 36px; margin-bottom: 40px; }
  /* Stack: image on top at a fixed height, quotes below. The equal-height
     pairing only makes sense while the two are side by side. */
  .testi-layout { grid-template-columns: 1fr; min-height: 0; }
  .testi-figure { height: 260px; }
  .testi-card { padding: 40px 34px; }
  .testi-dots { padding: 0 34px 28px 34px; }
}
@media (max-width: 767px) {
  .testi-title { font-size: 30px; }
  .testi-figure { height: 210px; }
  .testi-card { padding: 34px 24px; }
  .testi-text { font-size: 16px; line-height: 1.75; }
  .testi-quote { width: 36px; height: 36px; margin-bottom: 18px; }
  .testi-author_name { font-size: 18px; }
  .testi-dots { padding: 0 24px 26px 24px; }
}
@media (max-width: 375px) {
  .testi-title { font-size: 25px; }
  .testi-card { padding: 28px 20px; }
}