/*=================================================
  KR Info Solutions — hand-coded stylesheet
  Rebuild of krinfosolutions.com (no design change)
  Fonts: Barlow (titles) / Roboto (body)
=================================================*/

:root {
  --theme-color: #684DF4;
  --title-color: #141D38;
  --body-color: #737887;
  --smoke-color: #F5F5F5;
  --smoke-color2: #E2E8FA;
  --light-color: #72849B;
  --border-color: #E2E8FA;
  --white-color: #ffffff;
  --black-color: #000000;
  --yellow-color: #FFB539;
  --accent-orange: #F0622D;
  --btn-orange: #F05C1F;
  --tab-hover: #FF7B00;
  --box-title-color: #00202D;
  --hero-title-color: #080E1C;
  /* Header bar. Live value: `.header-layout1 .menu-area { background-color: #080E1C }` */
  --header-bg: #080E1C;
  --title-font: 'Barlow', sans-serif;
  --body-font: 'Roboto', sans-serif;
  --main-container: 1140px;
  --container-gutter: 12px;
  /* HOMEPAGE + ABOUT rhythm. 120px top and bottom per section, matching the
     live homepage's main content sections (Elementor container 3f46353 is
     `padding: 120px 0`). Consumed by `.space` / `.space-bottom` / `.space-top`,
     which only index.html and about.html use. Client asked for live's spacing
     on these two pages specifically (2026-07-28). */
  --section-space: 120px;
  /* SERVICES + OUR COMMUNITY rhythm — deliberately tighter and deliberately
     NOT aliased to --section-space. Each section pads its own top and bottom
     by this, so adjacent sections give an 80px gap (client's earlier choice).
     Changing one of these two tokens must not move the other. */
  --inner-section-space: 40px;
  --section-title-space: 60px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--body-color);
  background-color: var(--white-color);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }
/* Bootstrap-reboot parity (live site loads Bootstrap): centres inline icons
   in their containers instead of sitting on the text baseline */
img, svg { vertical-align: middle; }
a { color: var(--theme-color); text-decoration: none; transition: all 0.4s ease-in-out; }
a:hover { color: var(--title-color); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  color: var(--title-color);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 15px 0;
}
p { margin: 0 0 18px 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
figure { margin: 0; }
video { max-width: 100%; display: block; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: calc(var(--main-container) + var(--container-gutter) * 2);
  margin: 0 auto;
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.col-auto { padding: 0 12px; flex: 0 0 auto; }
.text-center { text-align: center; }
.text-red { color: red; }
.mb-0 { margin-bottom: 0; }
.mb-35 { margin-bottom: 35px; }
.space { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.space-bottom { padding-bottom: var(--section-space); }
.space-top { padding-top: var(--section-space); }
.d-none { display: none; }
@media (min-width: 992px) {
  .d-lg-inline-block { display: inline-block; }
  .d-lg-none { display: none !important; }
}
.d-inline-block { display: inline-block; }

/* ---------- Title area ---------- */
.title-area { position: relative; z-index: 2; margin-bottom: calc(var(--section-title-space) - 10px); }
.title-area.mb-35 { margin-bottom: 35px; }
.sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-orange);
  margin-bottom: 20px;
}
.sub-title .icon { width: 30px; flex: none; }
.sub-title.sub-title3 {
  color: var(--theme-color);
  text-transform: uppercase;
  gap: 15px;
}
.sub-title.sub-title3::before,
.sub-title.sub-title3::after {
  content: "";
  width: 45px;
  height: 2px;
  background-color: var(--theme-color);
  flex: none;
}
.sec-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0;
  /* theme-global on live: every .sec-title renders Title Case */
  text-transform: capitalize;
}
.sec-title span, .sec-title b { color: var(--accent-orange); }
.shadow-title {
  font-family: var(--title-font);
  font-size: 74px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  background-image: linear-gradient(180deg, rgba(20, 29, 56, 0.10) 0%, rgba(20, 29, 56, 0.02) 91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 auto -55px auto;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.th-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: inline-block;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border: none;
  border-radius: 4px;
  padding: 14px 25px;
  transition: all 0.4s ease-in-out;
}
.th-btn::before, .th-btn::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: -1;
  background-color: var(--title-color);
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
  border-radius: 50%;
}
.th-btn::before { left: -50%; transform-origin: top; }
.th-btn::after { right: -50%; transform-origin: bottom; }
.th-btn:hover { color: var(--white-color); }
.th-btn:hover::before, .th-btn:hover::after { transform: scaleY(1); border-radius: 0; }

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--btn-orange);
  color: var(--white-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  border-radius: 3px;
  padding: 14px 25px;
  transition: all 0.4s ease-in-out;
}
.hero-btn:hover { background-color: var(--title-color); color: var(--white-color); }

.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 95px;
  z-index: 97;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: #25D366;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.08); color: var(--white-color); }

/* ---------- Search popup ---------- */
.popup-search-box {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: all 0.4s ease-in-out;
}
.popup-search-box.show { opacity: 1; visibility: visible; transform: scale(1); }
.popup-search-box form {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 20px;
}
.popup-search-box input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--theme-color);
  border-radius: 50px;
  color: var(--white-color);
  font-size: 18px;
  padding: 0 60px 0 30px;
  height: 70px;
  outline: none;
}
.popup-search-box form button {
  position: absolute;
  top: 0;
  right: 0;
  height: 70px;
  width: 70px;
  background: transparent;
  border: none;
  color: var(--white-color);
}
.popup-search-box .searchClose {
  position: absolute;
  top: 40px;
  right: 40px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid var(--theme-color);
  background: transparent;
  color: var(--theme-color);
  font-size: 18px;
  transition: all 0.4s;
}
.popup-search-box .searchClose:hover { color: var(--white-color); background: var(--theme-color); }

/* ---------- Header ---------- */
.th-header {
  position: relative;
  z-index: 41;
}
.sticky-wrapper { transition: 0.4s ease-in-out; }
.sticky-wrapper.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* stays dark when stuck, matching the resting header */
  background-color: var(--header-bg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  animation: stickyAni 0.4s ease-in-out;
}
@keyframes stickyAni {
  from { transform: translateY(-40px); opacity: 0.7; }
  to { transform: translateY(0); opacity: 1; }
}
/* Live: `.header-layout1 .menu-area { background-color: #080E1C }` */
.menu-area { padding: 0; background-color: var(--header-bg); }
.header-logo { padding: 14px 0; }
.header-logo h2, .mobile-logo h2 { margin: 0; }
/* The type styles below are now only a fallback for if the logo image fails to
   load (the alt text inherits them). The mark itself is a 447x447 square, so
   `width: auto` keeps it square at whatever height is set. 48px sits close to
   the 39px line box the old 28px wordmark occupied, so the header bar grows by
   under 10px. `height` must be explicit — the global `img { height: auto }`
   reset would otherwise let it render at its full 447px. */
.logo {
  font-family: var(--title-font);
  font-weight: 800;
  color: var(--theme-color);
  font-size: 28px;
}
.logo:hover { color: var(--white-color); }
.logo img { display: block; height: 56px; width: auto; }

.main-menu > ul { display: flex; }
.main-menu > ul > li { position: relative; margin: 0 14px; }
.main-menu > ul > li > a {
  display: inline-block;
  position: relative;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 16px;
  /* Live: `.header-layout1 .main-menu > ul > li > a:not(:hover)` is white */
  color: var(--white-color);
  padding: 34px 0;
  text-transform: capitalize;
}
.main-menu > ul > li > a:hover { color: var(--theme-color); }
.main-menu li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s;
}
.main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  max-height: 70vh;
  overflow-y: auto;
  background-color: var(--white-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 6px 6px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease-in-out;
  z-index: 50;
}
/* The last top-level item ("Contact us") sits nearest the right edge, so its
   230px dropdown ran off the window between roughly 1050px and 1150px wide —
   measured at +27px, and because the panel is only visibility:hidden (not
   display:none) it still widened the page and showed as dead space on the
   right on EVERY page, not just on hover. Anchoring it to its parent's right
   edge keeps it on screen at every width. Nothing moves at other widths: the
   panel is as wide as the item is not, so right:0 and left:0 look identical
   until the panel would have overflowed. */
.main-menu > ul > li:last-child > .sub-menu { left: auto; right: 0; }
.main-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-menu .sub-menu li { padding: 0; }
.main-menu .sub-menu a {
  display: block;
  font-family: var(--title-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--title-color);
  padding: 8px 25px;
}
.main-menu .sub-menu a:hover { color: var(--theme-color); padding-left: 30px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  /* sits on the dark header bar — live: `.header-layout1 .header-button .icon-btn` is white */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--white-color);
  /* No left margin: the actions now sit in their own header column, so any
     margin here would make the gap to its right wider than the one on the
     logo side and break the even spacing. */
  margin-left: 0;
  vertical-align: middle;
  transition: all 0.4s;
}
.icon-btn:hover { background-color: var(--theme-color); border-color: var(--theme-color); color: var(--white-color); }
.main-menu { vertical-align: middle; }

.th-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 4px;
  background-color: var(--theme-color);
  color: var(--white-color);
  margin: 10px 0;
}

/* ---------- Mobile menu ---------- */
.th-menu-wrapper {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.th-menu-wrapper.show { opacity: 1; visibility: visible; }
/* The drawer's three children — close button, logo, nav list — are laid out as a
   wrapping flex row so the top row reads logo (left) | close (right), matching
   the collapsed header bar it opens from. `order` does the swap because the
   close button comes first in the markup on all 22 pages. `align-content:
   flex-start` keeps the rows stacked at the top instead of stretching to fill
   the full-height drawer; overflow still scrolls for the long Products list. */
.th-menu-wrapper .th-menu-area {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 310px;
  max-width: 85vw;
  background-color: var(--white-color);
  overflow-y: auto;
  padding: 20px;
  text-align: center;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  column-gap: 10px;
}
.th-menu-wrapper.show .th-menu-area { transform: translateX(0); }
.th-menu-wrapper .mobile-logo {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.th-menu-wrapper #mobileMenuClose {
  order: 2;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  font-size: 16px;
}
.th-menu-wrapper .th-mobile-menu { order: 3; flex: 0 0 100%; }
.th-mobile-menu { text-align: left; margin-top: 20px; }
.th-mobile-menu ul li { border-bottom: 1px solid var(--border-color); }
.th-mobile-menu ul li:last-child { border-bottom: none; }
.th-mobile-menu a {
  display: block;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--title-color);
  padding: 11px 8px;
}
.th-mobile-menu a:hover { color: var(--theme-color); }
.th-mobile-menu .menu-item-has-children > a::after {
  content: "+";
  float: right;
  font-weight: 700;
}
.th-mobile-menu .menu-item-has-children.open > a::after { content: "\2212"; }
.th-mobile-menu .sub-menu {
  display: none;
  padding-left: 14px;
  border-top: 1px solid var(--border-color);
}
.th-mobile-menu .sub-menu a { font-weight: 400; font-size: 14px; padding: 9px 8px; }
.th-mobile-menu .menu-item-has-children.open > .sub-menu { display: block; }

/* ---------- Hero ---------- */
.hero-area {
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(148deg, #EDF2FF 60%, #DBF0FF 100%);
  overflow: hidden;
}
.hero-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/tech_shape_1.png");
  background-repeat: no-repeat;
  background-position: top left;
  pointer-events: none;
}
/* Hero layout mirrors the live Elementor containers exactly:
     outer  — max-width 1600px, no padding, contents pushed right
     row    — fixed 1400px wide, flex-direction: row-reverse, nowrap
     image  — 50% of the row, aligned right
     text   — 50% of the row
   The globe is a real in-flow column (not an absolutely positioned 50vw
   image as before), so it sets the hero's height the same way live does. */
.hero-inner {
  position: static;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  /* Asymmetric on purpose, matching live: the copy is inset ~20px from the
     left, while the globe column stays flush to the right edge and bleeds
     off-screen. An equal gutter here would pull the globe inward. */
  padding: 0 0 0 20px;
  display: flex;
  justify-content: flex-end;
}
.hero-row {
  width: 1400px;
  max-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
}
.hero-img {
  position: static;
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  text-align: right;
  margin: 0;
}
.hero-img img { width: 100%; display: block; }
/* Text column. The two widgets (copy, then button) wrap onto separate flex
   lines. This used to be `align-content: space-between`, which handed ALL of
   the column's spare height to the gap between those two lines — and since
   `.hero-row` stretches this column to the full height of the globe, that was
   ~120px of dead space above the button on a wide window (client flagged it
   2026-07-30). `flex-start` packs the lines together instead, so the button
   sits at the 35px `.mb-35` gap the title-area already declares. The leftover
   height now falls below the button, where the globe fills it. */
/* Bottom padding is the section token, not the 40px it used to be. The services
   section below carries a full-bleed background, so its own 120px top padding
   sits INSIDE that dark band and contributes nothing to the visible gap — the
   space under "About us" was purely this 40px, well short of the rhythm every
   other section boundary keeps. Matches what the 1024 block already does for
   tablet. */
.hero-content {
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  padding: 40px 0 var(--section-space) 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.hero-content > .title-area.mb-35 { width: 100%; margin-bottom: 35px; }
.hero-content > .hero-btn { align-self: flex-start; }
.hero-content .sub-title { font-size: 16px; }
.hero-title {
  color: var(--hero-title-color);
  font-size: 44px;
  line-height: 1.25;
}
.hero-desc {
  color: var(--black-color);
  font-size: 16px;
  line-height: 2;
  margin: 18px 0 34px 0;
}

/* ---------- Services ---------- */
.service-sec {
  position: relative;
  background-image: url("../assets/images/service_bg_2.jpg.png");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto;
  background-color: var(--smoke-color);
}
.service-sec .title-area { max-width: 1500px; margin-left: auto; margin-right: auto; }
/* Live sets this heading to 25px at EVERY breakpoint (no responsive step). */
.service-sec-title {
  font-size: 25px;
  line-height: 1.5;
  color: var(--white-color);
  text-transform: capitalize;
}
.service-sec-title span { color: var(--accent-orange); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  padding: 40px;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 30px rgba(8, 14, 28, 0.06);
  background-color: var(--accent-orange);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.4s ease-in-out;
}
.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  height: 110px;
  width: 110px;
  background-color: var(--theme-color);
  opacity: 0.6;
  border-radius: 50%;
  transition: 0.4s ease-in-out;
  z-index: -2;
}
.service-card::before { bottom: -73px; right: -28px; }
.service-card::after { right: -73px; bottom: -28px; }
/* on hover the bottom circles grow and flood the card with purple */
.service-card:hover::before,
.service-card:hover::after { transform: scale(10); opacity: 1; }
.service-card .bg-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.4s ease-in-out;
  pointer-events: none;
}
.service-card .bg-shape img {
  width: 100%;
  height: auto;
  display: block;
}
.service-card:hover .bg-shape { opacity: 0.5; }
.service-card_number {
  position: absolute;
  top: 25px;
  right: 40px;
  font-family: var(--title-font);
  font-size: 100px;
  line-height: 1;
  font-weight: bold;
  color: var(--smoke-color2);
  opacity: 0.3;
}
.shape-icon {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  margin-bottom: 30px;
}
.shape-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--smoke-color2);
  clip-path: path("M4.76563 19.2144C-2.32686 32.07 -1.20075 48.6639 6.14105 61.3767C16.4024 79.1459 38.9816 89.016 58.6174 83.4451C78.2532 77.8741 92.5688 56.7417 89.6127 36.3982C84.2306 -0.647078 23.3991 -14.559 4.76563 19.2144Z");
  z-index: -1;
  transition: 0.4s ease-in-out;
}
.shape-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  vertical-align: middle;
}
.shape-icon .dots::before,
.shape-icon .dots::after {
  content: "";
  position: absolute;
  background-color: var(--theme-color);
  height: 24px;
  width: 23px;
  border-radius: 50%;
}
.shape-icon .dots::before { top: 0; right: 9px; }
.shape-icon .dots::after { height: 12px; width: 11px; bottom: 0; left: 27px; }
.service-card .box-title { font-size: 24px; line-height: 1.35; margin-bottom: 15px; }
.service-card .box-title a { color: var(--white-color); }
.service-card .box-title a:hover { color: var(--smoke-color2); }
.service-card_text {
  color: var(--white-color);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 25px;
}
.service-card .th-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #EDF2FF;
  color: var(--title-color);
}
.service-card .th-btn::before,
.service-card .th-btn::after { background-color: var(--title-color); }
.service-card .th-btn:hover { color: var(--white-color); }

/* ---------- Beyond Excellence ---------- */
.excellence-sec { padding-top: var(--section-space); }
.excellence-inner {
  max-width: var(--main-container);
  /* 50px here + 120px on .feature-boxes = live's 170px between the two blocks */
  margin: 0 auto 50px auto;
  padding: 0 var(--container-gutter);
  display: flex;
  align-items: center;
  gap: 50px;
}
.excellence-video { width: 50%; flex: none; }
.excellence-video video {
  width: 100%;
  border-radius: 47px;
  margin-bottom: -29px;
}
.excellence-content { flex: 1; }
.excellence-desc { margin: 0; }
/* Live puts these cards in their own top-level container with
   `padding: 120px 0`; the text block above it ends with 50px. */
.feature-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* One gap value = identical spacing between box 1|2 and box 2|3. Widened
     from 20px when the cards became separately-framed boxes: against a 25px
     border on each facing edge, 20px read as the boxes touching. */
  gap: 30px;
  margin-top: var(--section-space);
}
.image-box { text-align: center; }
.image-box_img img { max-width: 160px; }
.image-box_title {
  font-family: var(--body-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--box-title-color);
  margin: 18px 0 10px 0;
}
.image-box_desc { margin: 0; }

/* The 3 "Beyond Excellence" cards.
   The grey frame is a BORDER, not a background. Live gives the three cards a
   SHARED frame — 25px top/bottom on each, a left border only on the first and
   a right border only on the last — which leaves the middle card open on both
   sides and cards 1 and 3 open on one side each.

   Client asked for three SEPARATE closed boxes instead (2026-07-31), matching
   what the ≤767px layout already did, but kept in a horizontal row with even
   spacing. So the border now runs all four sides on every card and the
   first/last-child overrides are gone; the even spacing is the grid `gap`,
   which is equal between the boxes by construction.

   No colour is declared on live, so the border falls back to `currentColor`,
   i.e. the inherited body grey. Cards have no background, no shadow and no
   hover lift. */
.feature-boxes .image-box {
  background: none;
  box-shadow: none;
  border-style: solid;
  border-color: var(--body-color);
  border-width: 25px;
  border-radius: 20px;
  /* keeps the copy off the inside edge of the frame */
  padding: 10px;
  height: 100%;
}
.feature-boxes .image-box_img {
  width: 30%;
  margin: 0 auto 15px auto;
}
.feature-boxes .image-box_img img { max-width: 100%; width: 100%; }
.feature-boxes .image-box_title {
  font-family: var(--title-font);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.278;
  color: #0B2530;
  margin: 0 0 15px 0;
}
.feature-boxes .image-box_desc {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--black-color);
  margin: 0;
}

/* ---------- Why Choose Us ---------- */
.choose-sec {
  background-color: var(--smoke-color);
  background-image: url("../assets/images/why_bg_2.jpg");
  background-size: cover;
  background-position: center;
}
.choose-row { align-items: center; }
.choose-content { width: 55%; padding: 0 12px; }
.choose-img { width: 45%; padding: 0 12px; }
.choose-desc { margin-bottom: 35px; }
.counter-area { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.counter-card { display: flex; align-items: center; gap: 28px; }
.counter-card_icon { flex: none; }
.counter-card_icon img { width: 60px; height: 60px; object-fit: contain; }
.counter-card_number {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 8px 0;
  color: var(--title-color);
}
.counter-card_text { margin: 0; font-size: 16px; color: var(--title-color); }

.img-box5 { position: relative; display: inline-block; }
.img-box5 > img { border-radius: 10px; width: 100%; }
.year-counter {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: var(--theme-color);
  border: 10px solid #E5E4EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.year-counter_number {
  color: var(--white-color);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
}
.year-counter_text { color: var(--white-color); margin: 0; font-size: 15px; }

/* ---------- Counter strip (orange band, white blob icons) ---------- */
.counter-strip {
  background-color: var(--accent-orange);
  padding: var(--section-space) 0;
}
.counter-area-strip { justify-content: space-around; }
.counter-strip .counter-card_icon {
  width: 115px;
  height: 115px;
  background-color: var(--white-color);
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  box-shadow: -12px 12px 0 #080E1C;
  display: flex;
  align-items: center;
  justify-content: center;
}
.counter-strip .counter-card_icon img { width: 55px; height: 55px; }
.counter-strip .counter-card_number,
.counter-strip .counter-card_text { color: var(--white-color); }

/* ---------- Work Process ---------- */
.process-sec {
  background-color: var(--smoke-color);
  background-image: url("../assets/images/why_bg_2.jpg");
  background-size: cover;
  background-position: center;
}
.process-sec .sec-title { text-transform: capitalize; }
.process-card-area { position: relative; margin-top: 80px; }
.process-line {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  pointer-events: none;
  z-index: 0;
}
.process-row { justify-content: space-between; }
.process-card-wrap { width: 25%; padding: 0 22px; }
/* `max-width: 230px` + auto side margins are live's own values. Without them
   the card fills its whole column (316px at a 768px viewport), which closes up
   the gap between each pair and makes the row read as two slabs rather than
   four cards. */
.process-card {
  position: relative;
  z-index: 2;
  text-align: center;
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0px 10px 30px rgba(8, 14, 28, 0.08);
  padding: 45px 24px 35px 24px;
  max-width: 230px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.process-card_number {
  position: absolute;
  top: -37px;
  left: -37px;
  font-family: var(--title-font);
  font-size: 26px;
  font-weight: 800;
  color: var(--white-color);
  background-color: var(--theme-color);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 3;
}
/* static pale halo + spreading pulse ring */
.process-card_number::before,
.process-card_number::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background-color: rgba(104, 77, 244, 0.35);
  z-index: -1;
}
.process-card_number::after {
  animation: ringSpread 2s ease-out infinite;
}
@keyframes ringSpread {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.process-card_icon { margin: 0 auto 25px auto; }
.process-card_icon img { width: 72px; height: 72px; object-fit: contain; }
.process-card .box-title { font-size: 24px; line-height: 1.3; margin-bottom: 12px; }
.process-card_text { font-size: 16px; margin: 0; }

/* ---------- Brands carousel ---------- */
.brand-sec { padding-top: var(--section-space); }
.brand-title {
  text-align: center;
  font-size: 40px;
  margin-bottom: 45px;
}
.brand-carousel-wrapper { overflow: hidden; }
.brand-carousel {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brandScroll 40s linear infinite;
}
.brand-carousel-wrapper:hover .brand-carousel { animation-play-state: paused; }
.brand-slide {
  flex: none;
  width: 190px;
  margin: 0 25px;
  text-align: center;
}
.brand-slide img {
  max-height: 90px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@keyframes brandScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Team ---------- */
.team-sec {
  position: relative;
  background-color: var(--smoke-color);
  background-image: url("../assets/images/why_bg_2.jpg");
  background-size: cover;
  background-position: center;
}
.team-row {
  display: flex;
  align-items: center;
  gap: 50px;
}
.team-row + .team-row { margin-top: 80px; }
.team-img { width: 42%; flex: none; }
.team-img img { width: 100%; border-radius: 10px; }
.team-content { flex: 1; text-align: center; }
.team-desc { margin: 0; }
.bni-badge { text-align: right; margin-top: 5px; }
.bni-badge img { width: 140px; }

/* ---------- Industries tabs ---------- */
.industries-sec { padding-top: var(--section-space); }
.industry-tabs-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.industry-tab-title {
  background-color: var(--smoke-color);
  border: none;
  border-radius: 30px;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--title-color);
  padding: 16px 30px;
  transition: all 0.3s ease-in-out;
}
.industry-tab-title:hover,
.industry-tab-title.active { background-color: var(--tab-hover); color: var(--white-color); }
.industry-tab-panel { display: none; }
.industry-tab-panel.active { display: block; animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}
.industry-box .image-box_img img {
  max-width: 100%;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}
.industry-box .image-box_title { font-size: 20px; margin: 16px 0 0 0; }

/* ---------- Footer ---------- */
.footer-wrapper { background-color: var(--title-color); }
.copyright-wrap { padding: 22px 0; }
.copyright-text { margin: 0; color: var(--white-color); font-size: 15px; }
.copyright-text a { color: var(--white-color); }
.copyright-text a:hover { color: var(--yellow-color); }

/* ---------- Scroll to top ---------- */
.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 96;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: var(--theme-color);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background-color: var(--title-color); }

/* ---------- Reveal animations ---------- */
.reveal-item { opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease; will-change: transform; }
.reveal-item[data-reveal="fade-up"] { transform: translateY(60px); }
.reveal-item[data-reveal="fade-left"] { transform: translateX(60px); }
.reveal-item[data-reveal="fade-right"] { transform: translateX(-60px); }
.reveal-item.revealed { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .hero-title { font-size: 40px; }
}
@media (max-width: 1199px) {
  :root { --section-space: 100px; }
  .sec-title { font-size: 36px; }
  .shadow-title { font-size: 60px; margin-bottom: -45px; }
  .hero-title { font-size: 34px; }
  /* Live's cards are `col-md-6 col-xl-4`: 3 across only at >=1200, so the
     drop to 2 happens here, not at 991. */
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  /* Live's process cards are `col-sm-6 col-xl-3`: 4 across only at >=1200,
     so the drop to 2 and the connector-line hide both happen here, not 991.
     A stale right-10-percent offset on the number badge was removed here —
     it dated from the old badge-on-the-right design. */
  .process-card-area .process-line { display: none; }
  /* Once the cards wrap, the number badge (top/left -37px) would hang into
     the row above and almost close the gap. Live reserves room for it with
     30px of top padding on the column, so the visible gap between rows is
     40px margin + 30px padding = 70px. */
  .process-card-wrap {
    width: 50%;
    padding: 30px 22px 0 22px;
    margin-bottom: 40px;
  }
}
/* Elementor's TABLET range (768–1024). Live keeps the hero as a two-column
   row through all of it and only narrows the globe — it does not stack until
   767. Matching that here; the old build stacked at 991, so tablet was
   getting the mobile layout. */
@media (max-width: 1024px) {
  /* Live insets every section by 36px on tablet (its columns switch to
     `padding: 80px 36px`). The hero is excluded — it is full-bleed. */
  .container { padding-left: 36px; padding-right: 36px; }
  .hero-inner .container { padding-left: 0; padding-right: 0; }
  .hero-row { align-items: center; }
  .hero-img { flex: 0 0 45%; width: 45%; max-width: 45%; }
  /* Bottom padding is the section token, not a flat 20px: on tablet the "About
     us" button was ending ~20px above the services background edge, far tighter
     than the rhythm every other section keeps. Top stays at 20px — the copy is
     meant to sit high against the globe here. */
  .hero-content {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding: 20px 0 var(--section-space) 0;
  }
  /* Exact live tablet type. The tight 1.1em leading on the paragraph is what
     keeps the text column short enough to sit beside the globe — with the
     desktop 2.0 leading it overflows and the section looks nothing like live. */
  .hero-content .sub-title { font-size: 12px; line-height: 1.1em; margin-bottom: 12px; }
  .hero-title { font-size: 30px; line-height: 1em; }
  .hero-desc { font-size: 15px; line-height: 1.1em; margin: 12px 0 20px 0; }
  .hero-content > .title-area.mb-35 { margin-bottom: 20px; }
  .hero-btn { width: 40%; justify-content: center; }
  .feature-boxes .image-box_title { font-size: 25px; }
  .feature-boxes .image-box_desc { font-size: 15px; }
  /* Team rows now stack on tablet too, matching mobile — client asked for
     the same vertical layout at this breakpoint instead of the side-by-side
     350px-pinned image (2026-07-30). */
  .team-row, .team-row.team-row-reverse { flex-direction: column; gap: 30px; }
  .team-img { width: 100%; max-width: 480px; margin: 0 auto; }
  /* Beyond Excellence: live's container flips to `flex-direction: column`
     here and both widgets go full width. */
  .excellence-inner { flex-direction: column; gap: 35px; }
  .excellence-video { width: 100%; }
  .excellence-video video { margin-bottom: 0; }
  .excellence-content { width: 100%; }
  /* Why Choose Us: column goes full width, the inner container narrows to
     700px and the title block centres. */
  .choose-content, .choose-img { width: 100%; }
  .choose-img { margin-top: 45px; }
  .choose-sec .container { max-width: 700px; }
  .choose-content .title-area { text-align: center; }
  /* Source is 640x880 (portrait). Once the column goes full width it renders
     ~604px wide, so its natural height is ~830px — a huge slab on tablet and
     mobile. Cap it and let `cover` crop instead of distorting. This is a
     max, not a fixed height: below ~500px viewport the natural height is
     already under the cap, so narrow phones render uncropped. The year-counter
     badge is pinned `top: 35px`, so the crop never touches it.
     500px, up from an initial 420px, at the client's request (2026-07-30). */
  .choose-img .img-box5 > img { max-height: 500px; object-fit: cover; }
  /* `.img-box5` is `display: inline-block`, so it is an inline-level box and
     obeys the parent's text alignment. It normally stretches to the full
     column and centring is a no-op, but the moment the box is narrower than
     the column — a smaller source, or a `max-width` added later — it would
     otherwise sit hard left. These two make centred the guaranteed result. */
  .choose-img { text-align: center; }
  .choose-img .img-box5 { margin-left: auto; margin-right: auto; }
  /* Brand strip shows 4 logos across on tablet
     (`--e-image-carousel-slides-to-show: 4`). */
  .brand-slide { width: 150px; margin: 0 15px; }
  /* Services title block vs. the background strip. `service_bg_2` is 1480x500
     and painted `repeat-x` at `background-size: auto`, so the dark band is a
     fixed 500px tall no matter the viewport. Two things were breaking it below
     1024:
       1. The heading carries BOTH `sec-title` and `service-sec-title`. The
          responsive `.sec-title` steps in the 1199/767 blocks have the same
          specificity and sit later in the file, so they were overriding the
          intended 25px (36px on tablet, 30px on mobile). The taller heading
          wrapped to ~7 lines and spilled out the bottom of the 500px band.
       2. The 100px section padding-top plus the shadow-title — which is
          invisible against the dark band — left a large empty gap up top.
     Scoping the size back to 25px here (extra `.service-sec` specificity so it
     survives any later `.sec-title` step) and trimming the top padding keeps
     the whole title block inside the band with room to spare underneath. */
  .service-sec { padding-top: 60px; }
  .service-sec .service-sec-title { font-size: 25px; }
}
@media (max-width: 991px) {
  .main-menu { display: none; }
  .bni-badge { text-align: center; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  /* Keep logo | search | hamburger on ONE line. `.row` is `flex-wrap: wrap`,
     and once the nav is hidden the three columns still measure ~412px at
     375px wide against ~327px of usable row — so the actions column was
     dropping onto a second line under the logo. `nowrap` forbids that; the
     logo column absorbs the shortfall (it is the only one that can lose width
     without breaking), while the actions column is pinned to its content. */
  .menu-area .row { flex-wrap: nowrap; }
  .menu-area .row > .col-auto:first-child { min-width: 0; overflow: hidden; }
  /* Flex + gap rather than relying on the HTML whitespace between the two
     buttons, which only rendered as a ~4px word space and left them nearly
     touching. This block is the right scope for the gap: the hamburger is
     `d-lg-none`, so search and hamburger only ever sit side by side below
     992px. */
  .menu-area .row > .col-auto:last-child {
    flex: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 14px;
  }
}
@media (max-width: 767px) {
  /* Live stacks the hero here (`cbf7eef` → flex-direction: column). The globe
     is first in the DOM, so `column` puts it above the copy, as on live. */
  .hero-inner { padding: 0; justify-content: center; }
  .hero-row { flex-direction: column; align-items: stretch; }
  .hero-img,
  .hero-content { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .hero-content { padding: 40px 20px; }
  .hero-btn { width: auto; }
  /* Team already stacks from tablet down (see 1024px breakpoint); this just
     carries the same layout through to mobile widths. */
  .team-row, .team-row.team-row-reverse { flex-direction: column; }
  .team-img { width: 100%; max-width: 480px; }
  .sec-title { font-size: 30px; }
  .hero-title { font-size: 30px; line-height: 1.3; }
  .shadow-title { font-size: 44px; margin-bottom: -34px; }
  .service-grid { grid-template-columns: 1fr; }
  .brand-title { font-size: 30px; }
  .industry-tab-title { padding: 12px 20px; font-size: 14px; }
  .process-card-area { margin-top: 60px; }
  /* Live wraps the row at 767px. The full 25px border and the 10px inner
     padding are now the default for every card, so nothing to restate here. */
  .feature-boxes { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .team-row, .team-row + .team-row { gap: 30px; }
  .brand-title { font-size: 26px; }
  .order-btn { right: 10px; }
  /* see the 1024 block — same fixed 500px band, less width to wrap into */
  .service-sec { padding-top: 50px; }
}
@media (max-width: 575px) {
  .sec-title { font-size: 25px; }
  .hero-title { font-size: 26px; }
  .hero-content .sub-title { font-size: 12px; }
  .hero-desc { font-size: 15px; }
  .service-grid { grid-template-columns: 1fr; }
  /* `nowrap` (991 block) stops the actions column dropping to a second line,
     but on its own it would just clip the logo. These trims buy back the width
     so all three fit properly: the header drops the 36px tablet inset to 20px,
     the column gutters halve, and the logo/controls step down. Scoped to
     `.menu-area` so only the header bar is affected. */
  .menu-area .container { padding-left: 20px; padding-right: 20px; }
  .menu-area .row { margin: 0 -6px; }
  .menu-area .col-auto { padding: 0 6px; }
  .header-logo { padding: 10px 0; }
  .header-logo .logo { font-size: 20px; white-space: nowrap; }
  .header-logo .logo img { height: 46px; }
  .icon-btn { width: 40px; height: 40px; }
  .th-menu-toggle { width: 44px; height: 44px; margin: 6px 0; }
  /* Badge keeps its full -37px overlap here, as on live — the card is capped
     at 230px and centred, so at 375px the badge still clears the viewport
     edge by 36px. The old `left:-10px; top:-25px` pulled it onto the card
     and lost the overlap live has. */
  .process-card-wrap { width: 100%; }
  .industry-grid { grid-template-columns: 1fr; }
  /* Narrow phones: at 25px this heading wraps to ~11 lines and would push past
     the bottom of the 500px band again, so it steps down one more notch here.
     This is the only breakpoint where it deviates from live's flat 25px. */
  .service-sec { padding-top: 40px; }
  .service-sec .service-sec-title { font-size: 20px; }
  /* badge stays centered INSIDE the image, above the hand, like desktop */
  .year-counter { left: 50%; top: 20px; bottom: auto; width: 120px; height: 120px; border-width: 8px; }
  .year-counter_number { font-size: 26px; }
  .year-counter_text { font-size: 13px; }
}