/* ==========================================================================
   Credits page — /designed-developed-by-webkeyindia.html
   Layout of WebKeyIndia's credits pages (showcase, features, industry, why,
   services, FAQ, CTA) in the clinic's own colours: navy and blue for type and
   actions, green as the accent, a light blue tint for alternate sections.
   Everything is prefixed .wkp- so nothing leaks into the clinic's styles.
   Earlier versions: wkp.css.v1, wkp.css.v2
   ========================================================================== */
.wkp-sec, .wkp-cta {
  --wkp-gap: 56px;
  --wkp-line: #E3EAF3;
  --wkp-text: #4A5A6E;
  --wkp-tint: #F4F8FD;
  --wkp-r: 14px;
}
@media (max-width: 991.98px) { .wkp-sec, .wkp-cta { --wkp-gap: 52px; } }
@media (max-width: 575.98px) { .wkp-sec, .wkp-cta { --wkp-gap: 40px; } }

.wkp-sec { padding-block: var(--wkp-gap); background: #fff; color: var(--wkp-text); }
.wkp-sec--tint { background: var(--wkp-tint); }
.wkp-sec h2 { max-width: 30ch; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; color: var(--navy); }
.wkp-sec h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; color: var(--navy); }
.wkp-sec p { font-size: 1rem; line-height: 1.7; }
.wkp-sec p + p { margin-top: .9rem; }
.wkp-sec h2 + p { margin-top: .85rem; }
.wkp-sec a:not([class]) { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-100); }
.wkp-sec a:not([class]):hover { text-decoration-color: currentColor; }
.wkp-sec strong { color: var(--text); }
.wkp-eyebrow { margin: 0 0 .6rem; font-size: .78rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-700); line-height: 1.4 !important; }
.wkp-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.wkp-head h2 { margin-inline: auto; }
.wkp-head p:last-child { margin-top: .7rem; }
.wkp-sec .h-100 { height: 100%; }   /* the site loads only Bootstrap's grid build */

/* ---- buttons ---- */
.wkp-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.wkp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 var(--fs-sm)/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.wkp-btn svg { width: 17px; height: 17px; flex: none; }
.wkp-btn--pri { background: var(--navy); border-color: var(--navy); color: #fff; }
.wkp-btn--pri:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.wkp-btn--line { background: #fff; border-color: var(--navy); color: var(--navy); }
.wkp-btn--line:hover { background: var(--navy); color: #fff; }
.wkp-btn--go { background: var(--green); border-color: var(--green); color: var(--navy-900); }
.wkp-btn--go:hover { background: #8FCB3E; border-color: #8FCB3E; color: var(--navy-900); }
.wkp-btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.wkp-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
.wkp-sec :focus-visible, .wkp-cta :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }

/* ---- project showcase ---- */
.wkp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.6rem; }
.wkp-stats li { display: grid; place-content: center; gap: .15rem; min-height: 84px; padding: .7rem .5rem; border: 1px solid var(--blue-100); border-radius: 12px; background: var(--wkp-tint); text-align: center; }
.wkp-stats b { font-size: 1.2rem; line-height: 1.2; color: var(--navy); }
.wkp-stats span { font-size: .78rem; line-height: 1.35; color: var(--wkp-text); }
.wkp-browser { margin: 0; overflow: hidden; border: 1px solid var(--wkp-line); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -36px rgba(11,37,69,.45); }
.wkp-browser__bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--wkp-line); background: var(--wkp-tint); }
.wkp-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD6E3; }
.wkp-browser img { display: block; width: 100%; height: auto; }
.wkp-browser figcaption { padding: .7rem 1rem; border-top: 1px solid var(--wkp-line); font-size: .84rem; color: var(--wkp-text); }

/* ---- cards (features, services) ---- */
.wkp-card {
  display: flex; flex-direction: column; padding: 1.5rem 1.35rem;
  background: #fff; border: 1px solid var(--wkp-line); border-radius: var(--wkp-r);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.wkp-card:hover { border-color: var(--blue-100); box-shadow: 0 22px 40px -30px rgba(11,37,69,.45); transform: translateY(-3px); }
.wkp-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--blue-50); color: var(--blue); transition: background .25s var(--ease), color .25s var(--ease); }
.wkp-ic svg { width: 21px; height: 21px; }
.wkp-card:hover .wkp-ic { background: var(--blue); color: #fff; }
.wkp-card h3 { margin-top: 1.1rem; }
.wkp-card p { margin-top: .5rem; font-size: .9375rem; line-height: 1.65; }
.wkp-more { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: auto; padding-top: .5rem; font-size: .9375rem; font-weight: 600; color: var(--blue); }
.wkp-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.wkp-svc:hover .wkp-more svg, .wkp-more:hover svg { transform: translateX(3px); }

/* ---- industry ---- */
.wkp-sub { font-size: 1.125rem !important; }
.wkp-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.wkp-tags li { padding: .55rem 1rem; border: 1px solid var(--blue-100); border-radius: 999px; background: #fff; font-size: .875rem; font-weight: 500; color: var(--navy); transition: border-color .2s var(--ease), background .2s var(--ease); }
.wkp-tags li:hover { border-color: var(--blue); background: var(--blue-50); }

/* ---- why ---- */
.wkp-why { display: grid; gap: .65rem; }
.wkp-why li { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1.1rem; border: 1px solid var(--wkp-line); border-radius: 12px; background: #fff; }
.wkp-why p { margin: 0; font-size: .9375rem !important; line-height: 1.6 !important; }
.wkp-why b { color: var(--navy); }
.wkp-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: .15rem; border-radius: 50%; background: var(--green-600); color: #fff; }
.wkp-tick svg { width: 12px; height: 12px; }

/* ---- FAQ ---- */
.wkp-faq { padding: .5rem 1.5rem; border: 1px solid var(--wkp-line); border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -40px rgba(11,37,69,.4); }
.wkp-faq__i + .wkp-faq__i { border-top: 1px solid var(--wkp-line); }
.wkp-faq__i summary { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: 1rem 0; cursor: pointer; list-style: none; }
.wkp-faq__i summary::-webkit-details-marker { display: none; }
.wkp-faq__n { align-self: flex-start; padding-top: .2rem; font-size: .75rem; font-weight: 700; color: var(--green-700); }
.wkp-faq__q { flex: 1; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--navy); }
.wkp-faq__i summary:hover .wkp-faq__q { color: var(--blue); }
.wkp-faq__t { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--border-2); border-radius: 50%; transition: background .2s var(--ease), border-color .2s var(--ease); }
.wkp-faq__t::before, .wkp-faq__t::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.wkp-faq__t::after { transform: translate(-50%, -50%) rotate(90deg); }
.wkp-faq__i[open] .wkp-faq__t { background: var(--navy); border-color: var(--navy); }
.wkp-faq__i[open] .wkp-faq__t::before, .wkp-faq__i[open] .wkp-faq__t::after { background: #fff; }
.wkp-faq__i[open] .wkp-faq__t::after { transform: translate(-50%, -50%) rotate(0); }
.wkp-faq__i p { margin: 0; padding: 0 0 1.2rem 2.2rem; font-size: .9688rem !important; }

/* ---- CTA: two-column band, pitch on the left, contact tiles on the right ---- */
/* straddles the footer like the clinic's own CTA band */
.wkp-cta { position: relative; z-index: 1; padding-top: var(--wkp-gap); background: linear-gradient(to bottom, #fff 50%, var(--navy-900) 50%); }
.wkp-cta__in {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) clamp(1.25rem, .6rem + 2.6vw, 2.75rem); border-radius: 20px;
  background: linear-gradient(115deg, var(--navy) 0%, var(--blue-700) 45%, var(--blue) 100%); color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 70px -45px rgba(11,37,69,.7);
}
/* faint grid and two soft glows, kept behind the content */
.wkp-cta__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 85% 50%, #000 0%, transparent 75%);
}
.wkp-cta__in::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,186,46,.28) 0%, transparent 65%);
}
.wkp-cta__eye { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; padding: .25rem .7rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.wkp-cta__eye span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(124,186,46,.25); }
.wkp-cta h2 { max-width: 22ch; color: #fff; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.wkp-cta__main > p:not(.wkp-cta__eye) { max-width: 36rem; margin-top: .5rem; font-size: .9375rem; line-height: 1.6; }
.wkp-cta__pts { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .75rem; }
.wkp-cta__pts li { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: #fff; }
.wkp-cta__pts svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.wkp-cta .wkp-btns { margin-top: 1.1rem; }
.wkp-cta .wkp-btn { min-height: 44px; padding: .55rem 1.2rem; }
.wkp-cta .wkp-btn--go svg { transition: transform .2s var(--ease); }
.wkp-cta .wkp-btn--go:hover svg { transform: translateX(3px); }

.wkp-cta__con { display: grid; gap: .5rem; }
.wkp-cta__con a {
  display: flex; align-items: center; gap: .8rem; min-height: 58px; padding: .55rem .9rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.wkp-cta__con a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateX(4px); }
.wkp-cta__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--green); color: var(--navy-900); }
.wkp-cta__ic svg { width: 18px; height: 18px; }
.wkp-cta__con span + span { display: grid; min-width: 0; }
.wkp-cta__con small { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.wkp-cta__con b { overflow-wrap: anywhere; font-size: .975rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 991.98px) {
.wkp-cta__in { grid-template-columns: 1fr; }
}

/* ---- small screens ---- */
@media (max-width: 767.98px) {
.wkp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.wkp-btns { flex-direction: column; }
.wkp-btns .wkp-btn { width: 100%; }
.wkp-head { text-align: left; }
.wkp-faq { padding: .25rem 1rem; }
.wkp-faq__i p { padding-left: 0; }
.wkp-cta p a { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.wkp-card, .wkp-btn, .wkp-ic, .wkp-cta__con a, .wkp-faq__t, .wkp-faq__t::before, .wkp-faq__t::after, .wkp-more svg { transition: none; }
.wkp-card:hover, .wkp-cta__con a:hover { transform: none; }
}
/* FAQ: heading block stays beside the first questions while the list scrolls */
.wkp-faqhead .wkp-btn { margin-top: 1.5rem; }
@media (min-width: 992px) {
.wkp-faqhead { position: sticky; top: 120px; }
}