/*=================================================
  KR Info Solutions — services.html stylesheet
  Rebuild of https://krinfosolutions.com/services/

  Loaded AFTER css/style.css, which supplies the shared
  design tokens, reset, container/grid, header, nav,
  footer, buttons, title-area and the .process-* work
  process component (shared with the homepage).
  This file holds only what is specific to the services
  page. Prefix: .svc-

  All values taken from the live theme stylesheet and
  the live Elementor page CSS (post-527), not estimated.
=================================================*/

/* NOTE: the live site prints an empty `.breadcumb-wrapper` band (dark navy,
   160px padding) above the hero. It is dead space with no content, so it is
   intentionally omitted here — the hero starts directly under the header. */

/* ---------- Page hero ---------- */
.svc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 0;
  background-image: url("../assets/images/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-color);
  opacity: 0.5;
}
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero-title {
  font-family: var(--body-font);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white-color);
  text-align: center;
  margin: 0 0 10px 0;
}
.svc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.svc-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--white-color);
}
.svc-breadcrumb a { color: var(--white-color); }
.svc-breadcrumb a:hover { color: var(--accent-orange); }
.svc-breadcrumb .sep { width: 14px; height: 14px; flex: none; color: var(--accent-orange); }

/* ---------- Service group sections ---------- */
.svc-sec { padding: var(--inner-section-space) 0; }
/* The first section after the banner gets double top padding. Every other
   boundary on this page shows 80px of white (40px from each neighbour's
   padding), but the banner ends flush at its background edge and contributes
   nothing below it — so "Consultation and Design" was sitting on a 40px gap,
   half of what the rest of the page keeps. Adjacent-sibling selector so only
   the first section is affected. */
.svc-hero + .svc-sec { padding-top: calc(var(--inner-section-space) * 2); }
.svc-sec-title {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 800;
  color: #233E4A;
  text-align: center;
  margin: 0 0 48px 0;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Service card ---------- */
/* Orange by default, purple on hover — the hover purple comes from the two
   corner arcs below expanding to cover the card. Both match the live page:
   the theme's white `.service-card` is overridden per-widget in the live
   Elementor CSS with `background-color: var(--e-global-color-4d137a6)`. */
.svc-card {
  position: relative;
  z-index: 2;
  padding: 40px;
  background-color: var(--accent-orange);
  border-radius: 10px;
  box-shadow: 0px 10px 30px rgba(8, 14, 28, 0.06);
  overflow: hidden;
  transition: 0.4s ease-in-out;
}
.svc-card::before,
.svc-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: -1;
}
.svc-card::before { bottom: -73px; right: -28px; }
.svc-card::after { right: -73px; bottom: -28px; }
.svc-card:hover::before,
.svc-card:hover::after {
  opacity: 1;
  height: 120%;
  width: 120%;
  border-radius: 0;
}
.svc-card_number {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 100px;
  line-height: 1;
  font-weight: bold;
  color: var(--smoke-color2);
  opacity: 0.3;
}
.svc-card .shape-icon {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  margin-bottom: 30px;
}
.svc-card .shape-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--smoke-color2);
  -webkit-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");
  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;
}
.svc-card .shape-icon .dots::before,
.svc-card .shape-icon .dots::after {
  content: "";
  position: absolute;
  background-color: var(--theme-color);
  height: 24px;
  width: 23px;
  border-radius: 50%;
}
.svc-card .shape-icon .dots::before { top: 0; right: 9px; }
.svc-card .shape-icon .dots::after { height: 12px; width: 11px; bottom: 0; left: 27px; }
.svc-card:hover .shape-icon::before { background-color: var(--white-color); }
/* Title + text are white in BOTH states: the card is orange by default and
   purple on hover, so they never sit on a light background. */
.svc-card .box-title {
  font-size: 24px;
  line-height: 1.417;
  font-weight: 700;
  margin: -0.32em 0 15px 0;
  color: var(--white-color);
  transition: 0.4s ease-in-out;
}
.svc-card .box-title a { color: var(--white-color); }
.svc-card .box-title a:hover { color: var(--smoke-color2); }
.svc-card_text {
  margin: 0 0 22px 0;
  color: var(--white-color);
  transition: 0.4s ease-in-out;
}
/* The live page zeroes this button out entirely (transparent colour and
   background, no padding/margin) so no arrow is visible on the cards. */
.svc-card .th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
.svc-card .th-btn::before,
.svc-card .th-btn::after { background-color: transparent; }
.svc-card .th-btn:hover { color: transparent; }
/* No z-index here — matches the live theme, where the shape
   sweeps up over the card body on hover. */
.svc-card .bg-shape {
  position: absolute;
  bottom: -200px;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: 0.4s ease-in-out;
  pointer-events: none;
}
.svc-card .bg-shape img { width: 100%; display: block; }
.svc-card:hover .bg-shape { bottom: 0; opacity: 1; }

/* ---------- CTA band ---------- */
/* This band keeps its own 80px top/bottom padding rather than the shared
   `--inner-section-space`. It carries a full-bleed background image, so its
   height also controls how `background-size: cover` crops that image — at
   40px the band was too short and the artwork was cropped too tightly. */
/* The 80px padding above is INSIDE the band, so it does nothing for the white
   gap between the last `.svc-sec` and this band's top edge — that gap was only
   the preceding section's 40px `--inner-section-space`, half the 80px every
   other section pair on this page gets. The margin below contributes the
   missing 40px so the band sits on the same rhythm. */
.svc-cta {
  background-image: url("../assets/images/service_bg_2.jpg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0;
  margin-top: var(--inner-section-space);
}
.svc-cta .title-area {
  max-width: 580px;
  margin: 0 auto 20px auto;
}
.svc-cta .sec-title { color: var(--white-color); }
/* No gap: on live the arrow sits directly against the label — the trailing
   3.5px letter-spacing is the only separation. */
.svc-cta-btn.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background-color: var(--white-color);
  color: var(--title-color);
  border-radius: 100px;
  padding: 18px 40px;
  letter-spacing: 3.5px;
  box-shadow: none;
}
.svc-cta-btn.th-btn::before,
.svc-cta-btn.th-btn::after { background-color: var(--accent-orange); }
.svc-cta-btn.th-btn:hover { color: var(--white-color); }

/* ---------- Work process (services-page variant) ----------
   Live spacing here was 120px top / 170px bottom, but at the client's request
   every section on this page now shares `--inner-section-space` so the gap
   between any two sections is a uniform 80px. */
/* DESKTOP ONLY. Live is 120px top / 170px bottom (its inner column carries
   `padding: 120px 12px` and the outer section adds `padding-bottom: 50px`).
   Eased back to 100px / 140px at the client's request (2026-07-28) — the same
   ~1.4 top-to-bottom ratio, just tighter. This one section deliberately sits
   outside the page's 80px-gap rhythm.
   Tablet and mobile keep `--inner-section-space` via the overrides at the
   bottom of this file, which is why no min-width query is needed. */
.process-sec.svc-process {
  background-color: var(--smoke-color);
  background-image: url("../assets/images/process_bg_1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0 140px 0;
}
/* Section title block — live values, scoped so the homepage is untouched. */
.svc-process .shadow-title {
  background-image: linear-gradient(
    180deg,
    rgba(226, 232, 250, 0.7) 0%,
    rgba(226, 232, 250, 0) 88.54%
  );
  margin: -0.55em 0 -0.45em -0.25em;
}
/* `text-transform: capitalize` now lives on the shared `.sec-title` rule in
   style.css, since it is a theme-global. Only the page-specific colour and
   margin remain here. */
.svc-process .sec-title {
  color: var(--hero-title-color);
  margin: -0.32em 0 15px 0;
}

/* ---------- Services page responsive ---------- */
@media (max-width: 1199px) {
  .svc-sec-title { font-size: 36px; line-height: 1.3; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .svc-hero { min-height: 300px; }
  /* Keeps the live tablet side inset; vertical stays on the shared token. */
  .process-sec.svc-process { padding: var(--inner-section-space) 24px; }
}
@media (max-width: 767px) {
  .process-sec.svc-process { padding: var(--inner-section-space) 0; }
  .svc-hero { min-height: 280px; }
  .svc-hero-title { font-size: 40px; }
  .svc-sec-title { font-size: 34px; }
  .svc-breadcrumb li { font-size: 15px; }
  .svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .svc-sec-title { font-size: 28px; }
}
@media (max-width: 375px) {
  .svc-card { padding: 40px 30px; }
  .svc-cta-btn.th-btn { padding: 18px 25px; }
}