/* ==========================================================================
   Kodesphere IT Solutions — theme layer
   Loaded after style.css + skin-1.css. Carries typography, the signature
   "code panel" hero element, and section-band rhythm. Deliberately kept
   in its own file rather than editing the 24k-line style.css directly.
   ========================================================================== */

:root{
	--font-display: 'Sora', 'Segoe UI', sans-serif;
	--font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

body, p, li, a, span, input, textarea, button {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.title, .dz-title {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}

/* Eyebrow / label text — used across every "sub-title" in the template
   (Services, Our Work, Testimonial, etc.) — turns them into a consistent
   mono "tag" treatment instead of plain colored text. No markup changes
   needed since this hooks the existing .sub-title class site-wide. */
.sub-title {
	font-family: var(--font-mono) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--primary) !important;
}
.sub-title::before {
	content: "// ";
	color: var(--ks-slate);
}

/* Portfolio / spec badges — restyle the Bootstrap .badge.bg-primary pills
   used on the "Real Projects" cards into mono tag chips. */
.badge.bg-primary {
	font-family: var(--font-mono) !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 11px !important;
	background: var(--rgba-primary-1) !important;
	color: var(--primary-dark) !important;
	border: 1px solid var(--rgba-primary-3);
	padding: 5px 10px !important;
	border-radius: 4px !important;
}

/* Hero background — replaces the old stock swirl/ripple image with a
   quiet dot-grid on the brand paper tone, and a height that fits the
   actual content instead of a fixed 1020px stock-image slot. */
.ks-hero-bg {
	background-color: var(--ks-paper) !important;
	background-image: radial-gradient(circle, #D9DEE5 1px, transparent 1px) !important;
	background-size: 22px 22px !important;
	min-height: auto !important;
	padding: 70px 0 60px !important;
}
@media (max-width: 991px){
	.ks-hero-bg { padding: 50px 0 40px !important; }
}
.ks-hero-bg .title { color: var(--ks-ink); }
.ks-hero-bg p { color: var(--ks-slate); }



.ks-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ks-slate);
	margin-bottom: 18px;
}
.ks-hero-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ks-mint);
	box-shadow: 0 0 0 3px var(--rgba-primary-1);
}

.ks-code-panel {
	background: var(--ks-ink);
	border-radius: 12px;
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45);
	overflow: hidden;
	font-family: var(--font-mono);
	border: 1px solid var(--ks-ink-soft);
}
.ks-code-panel__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--ks-ink-soft);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ks-code-panel__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}
.ks-code-panel__dot--r{ background:#FF5F56; }
.ks-code-panel__dot--y{ background:#FFBD2E; }
.ks-code-panel__dot--g{ background:#27C93F; }
.ks-code-panel__filename {
	margin-left: 10px;
	font-size: 12px;
	color: var(--ks-slate);
}
.ks-code-panel__body {
	padding: 22px 22px 26px;
	font-size: 14.5px;
	line-height: 1.9;
	white-space: pre;
	overflow-x: auto;
}
.ks-code-panel__body .ln {
	color: #465470;
	display: inline-block;
	width: 22px;
	user-select: none;
}
.ks-code-panel__body .cm { color: #6B7C9C; }
.ks-code-panel__body .kw { color: #F5A623; }
.ks-code-panel__body .id { color: #E2E8F0; }
.ks-code-panel__body .st { color: #34D399; }
.ks-code-panel__body .pn { color: #94A3B8; }

@media (max-width: 767px){
	.ks-code-panel__body { font-size: 12.5px; }
}

/* ==========================================================================
   Section band rhythm — alternating light/ink sections for structure
   ========================================================================== */

.ks-band-ink {
	background: var(--ks-ink);
	background: linear-gradient(180deg, var(--ks-ink) 0%, var(--ks-ink-soft) 100%);
	color: #E2E8F0;
}
.ks-band-ink .title,
.ks-band-ink .dz-title,
.ks-band-ink h2, .ks-band-ink h3 {
	color: #fff;
}
.ks-band-ink .sub-title { color: var(--ks-mint) !important; }
.ks-band-ink p { color: #94A3B8; }

/* Counter numbers restyled from template-default yellow to brand teal */
.counter-wrapper1 .counter-inner .counter-box .title {
	color: var(--primary) !important;
	font-family: var(--font-display);
}
.counter-wrapper1 .counter-inner {
	background: linear-gradient(180deg, var(--ks-ink) 0%, var(--ks-ink-soft) 100%) !important;
}

/* Real-work / portfolio cards — quiet border, no drop-shadow default noise */
.icon-bx-wraper.style-1.box-hover {
	border: 1px solid #E7EAEE;
	transition: border-color .2s ease, transform .2s ease;
}
.icon-bx-wraper.style-1.box-hover:hover {
	border-color: var(--primary);
	transform: translateY(-3px);
}

/* Testimonial placeholders — make the "reserved" state look intentional,
   not broken: dashed border instead of implying a real card */
.testimonial-text {
	font-style: italic;
}

/* Buttons — flatten the default skew/gradient slightly for a cleaner,
   more contemporary feel while keeping the template's structure */
.btn-primary {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
}