/* Centralized component and page-specific styles moved from inline <style> blocks
   Found in: about.html, services.html, portfolio.html, contact.html
   Keep page-specific rules here so they are cached and easier to maintain.
*/

/* ===== ABOUT PAGE / EXPERTISE ===== */
.expertise-showcase {
	background: white;
	padding: 80px 0;
}

.expertise-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 50px;
}

.expertise-card {
	background: #f8fafc;
	border-radius: 20px;
	padding: 35px;
	border: 1px solid #e5e7eb;
	transition: all 0.3s ease;
}

.expertise-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.expertise-icon {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 25px;
	color: white;
}

.expertise-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 15px;
}

.expertise-description {
	color: #6b7280;
	line-height: 1.7;
	margin-bottom: 20px;
}

.expertise-metrics {
	display: flex;
	justify-content: space-between;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

.metric {
	text-align: center;
}

.metric-value {
	font-size: 1.3rem;
	font-weight: 800;
	color: #2563eb;
	display: block;
}

.metric-label {
	font-size: 0.8rem;
	color: #6b7280;
	margin-top: 2px;
}

.approach-section {
	background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
	padding: 100px 0;
}

.approach-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 50px;
}

.approach-item {
	background: white;
	padding: 30px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(37, 99, 235, 0.08);
}

.approach-number {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: white;
	margin: 0 auto 20px;
	font-size: 1.2rem;
}

.culture-section {
	padding: 100px 0;
	background: white;
}

.culture-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-top: 50px;
}

.culture-image {
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	height: 400px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 4rem;
}

.culture-values {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.value-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.value-icon {
	width: 45px;
	height: 45px;
	background: linear-gradient(135deg, #10b981, #059669);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.2rem;
}

.value-content h4 {
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 8px;
}

.value-content p {
	color: #6b7280;
	line-height: 1.6;
	margin: 0;
}

.team-brief {
	background: #f8fafc;
	padding: 60px 0;
}

.team-overview {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.team-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	margin: 50px 0;
}

.team-stat {
	background: white;
	padding: 30px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.team-stat .stat-number {
	font-size: 2.5rem;
	font-weight: 900;
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	background-clip: text; /* standard property for compatibility */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	display: block;
	margin-bottom: 10px;
}

.stat-description {
	color: #6b7280;
	font-weight: 500;
}

.partnership-section {
	padding: 100px 0;
	background: white;
}

.partnership-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.partnership-features {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.feature-highlight {
	background: #f0f9ff;
	padding: 20px;
	border-radius: 12px;
	border-left: 4px solid #2563eb;
}

.feature-highlight h5 {
	font-weight: 700;
	color: #1e40af;
	margin-bottom: 8px;
}

.feature-highlight p {
	color: #1e40af;
	margin: 0;
	font-size: 0.9rem;
}

@media (max-width: 768px) {
	.culture-grid,
	.partnership-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.culture-image {
		height: 250px;
		font-size: 3rem;
	}

	.expertise-metrics {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
}

/* ===== CONTACT MULTI-STEP FORM (moved from contact.html) ===== */
/* Note: some resets existed in the inline origin; the global reset is in style.css */
.form-container {
	background: white;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
	width: 100%;
	max-width: 800px;
	overflow: hidden;
	position: relative;
}

.form-header {
	background: linear-gradient(135deg, var(--primary-gray) 0%, var(--primary-west) 40%);
	color: white;
	padding: 30px;
	text-align: center;
}

.form-header h1 { font-size: 2rem; margin-bottom: 10px; font-weight: 800; }
.form-header p { opacity: 0.9; font-size: 1.1rem; }
.progress-bar { background: rgba(255,255,255,0.2); height: 4px; margin-top: 20px; border-radius: 2px; overflow: hidden; }
.progress-fill { background: white; height: 100%; width: 25%; transition: width 0.5s ease; border-radius: 2px; }
.step-indicators { display:flex; justify-content:center; margin-top:15px; gap:15px; }
.step-indicator { width:12px; height:12px; border-radius:50%; background: rgba(255,255,255,0.3);} .step-indicator.active{background:white;transform:scale(1.2)}
.form-content{padding:10px 30px 10px 30px}
.form-step{display:none;animation:slideIn 0.5s ease}.form-step.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.step-title{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin-bottom:5px}
.step-subtitle{color:#6b7280;margin-bottom:30px;line-height:1.6}
.form-group{margin-bottom:25px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-label{display:block;font-weight:600;color:#374151;margin-bottom:8px;font-size:0.9rem}
.form-input,.form-textarea,.form-select{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-family:inherit;transition:all 0.3s ease;background:#f9fafb}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:#2563eb;background:white;box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.form-textarea{min-height:100px;}
.project-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:20px}
.project-type-option{position:relative}.project-type-input{position:absolute;opacity:0;pointer-events:none}.project-type-label{display:block;padding:20px;border:2px solid #e5e7eb;border-radius:12px;text-align:center;cursor:pointer;transition:all 0.3s ease;background:#f9fafb}
.project-type-label:hover{border-color:#2563eb;background:white}.project-type-input:checked + .project-type-label{border-color:#2563eb;background:#eff6ff;color:#2563eb}
.project-type-icon{font-size:2rem;margin-bottom:10px;display:block}
.budget-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:20px}
.budget-option{position:relative}.budget-input{position:absolute;opacity:0;pointer-events:none}.budget-label{display:block;padding:15px 10px;border:2px solid #e5e7eb;border-radius:8px;text-align:center;cursor:pointer;transition:all 0.3s ease;background:#f9fafb;font-size:0.9rem}
.budget-label:hover{border-color:#2563eb;background:white}.budget-input:checked + .budget-label{border-color:#2563eb;background:#eff6ff;color:#2563eb;font-weight:600}
.form-navigation{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #e5e7eb}
.btn{padding:12px 24px;border-radius:25px;font-weight:600;font-size:1rem;cursor:pointer;transition:all 0.3s ease;border:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;box-shadow:0 4px 15px rgba(37,99,235,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4)}
.btn-secondary{background:transparent;color:#6b7280;border:2px solid #e5e7eb}.btn-secondary:hover{border-color:#2563eb;color:#2563eb}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.summary-section{background:#f9fafb;border-radius:12px;padding:15px;margin:10px 0}
.summary-item{display:flex;justify-content:space-between;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}
.summary-item:last-child{border-bottom:none;margin-bottom:0}.summary-label{font-weight:600;color:#374151}.summary-value{color:#2563eb;font-weight:500}
.success-message{text-align:center;padding:40px}.success-icon{font-size:4rem;margin-bottom:20px;display:block}.success-title{font-size:1.5rem;font-weight:700;color:#10b981;margin-bottom:10px}.success-text{color:#6b7280;line-height:1.6}
.form-validation{margin-top:10px}.validation-message{color:#dc2626;font-size:0.85rem;display:none}.validation-message.show{display:block}.field-error .form-input,.field-error .form-textarea,.field-error .form-select{border-color:#dc2626;background:#fef2f2}

@media (max-width: 768px) {
	.form-row{grid-template-columns:1fr}.project-type-grid{grid-template-columns:1fr}.budget-options{grid-template-columns:repeat(2,1fr)}.form-content{padding:20px}.form-header{padding:20px}
}

/* ===== SERVICES PAGE COMPONENTS (moved from services.html) ===== */
.service-detail-card{background:white;border-radius:20px;padding:40px;box-shadow:0 15px 35px rgba(0,0,0,0.08);margin-bottom:40px;border:1px solid #e5e7eb;transition:all 0.3s ease}
.service-detail-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px rgba(0,0,0,0.12)}
.service-header{display:flex;align-items:center;margin-bottom:30px}
.service-detail-icon{width:80px;height:80px;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-right:25px;color:white}
.service-detail-content h3{font-size:2rem;font-weight:800;color:#1a1a1a;margin-bottom:10px}
.service-tagline{color:#2563eb;font-size:1.1rem;font-weight:600}
.service-description{font-size:1.1rem;color:#374151;line-height:1.8;margin-bottom:30px}
.service-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin:30px 0}
.feature-item{background:#f8fafc;padding:20px;border-radius:12px;border-left:4px solid #2563eb}
.feature-item h5{font-weight:700;color:#1a1a1a;margin-bottom:8px}.feature-item p{color:#6b7280;font-size:0.9rem;margin:0}
.tech-stack{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}
.tech-tag{background:linear-gradient(135deg,#e0f2fe,#f0f9ff);border:1px solid #0284c7;color:#0c4a6e;padding:6px 14px;border-radius:20px;font-size:0.85rem;font-weight:500}
.case-study-preview{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);padding:25px;border-radius:15px;margin-top:30px;border:1px solid #0284c7}
.case-study-title{font-weight:700;color:#0c4a6e;margin-bottom:10px}.case-study-description{color:#075985;margin-bottom:15px;font-size:0.95rem}
.case-study-metrics{
	display:flex;
	gap:20px;
	flex-wrap:wrap;
}
.case-study-metrics .metric{ text-align:center }
.case-study-metrics .metric-value{font-size:1.5rem;font-weight:800;color:#0c4a6e}
.case-study-metrics .metric-label{font-size:0.8rem;color:#075985}
.process-section{background:#f8fafc;padding:80px 0;margin:60px 0}
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.process-step{background:white;padding:30px;border-radius:15px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,0.08);position:relative}
.process-step::before{content:attr(data-step);position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem}
.process-icon{font-size:2.5rem;margin-bottom:20px;display:block}.process-title{font-weight:700;color:#1a1a1a;margin-bottom:15px}.process-description{color:#6b7280;font-size:0.95rem;line-height:1.6}
.pricing-preview{background:white;border-radius:20px;padding:40px;margin:40px 0;border:2px solid #e5e7eb;text-align:center}
.pricing-title{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin-bottom:15px}.pricing-subtitle{color:#6b7280;margin-bottom:30px}
.pricing-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0}
.pricing-tier{padding:20px;border:2px solid #e5e7eb;border-radius:12px;transition:all 0.3s ease}.pricing-tier:hover{border-color:#2563eb;background:#f8fafc}.tier-name{font-weight:700;color:#2563eb;margin-bottom:10px}.tier-price{font-size:1.2rem;font-weight:800;color:#1a1a1a}

/* ===== PORTFOLIO PAGE (moved from portfolio.html) ===== */
.portfolio-hero{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:white;padding:140px 0 80px;margin-top:80px;text-align:center;position:relative;overflow:hidden}
.portfolio-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:0.3}
.portfolio-hero-content{position:relative;z-index:1}.portfolio-hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;margin-bottom:20px;color:white}
.portfolio-stats{display:flex;justify-content:center;gap:60px;margin-top:50px;flex-wrap:wrap}
.portfolio-stat{text-align:center}.stat-number{font-size:2.5rem;font-weight:900;color:#60a5fa;display:block;margin-bottom:8px}.stat-label{color:#cbd5e1;font-size:0.9rem;font-weight:500}
.filter-section{background:#f8fafc;padding:60px 0;border-bottom:1px solid #e5e7eb}.filter-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.filter-btn{padding:12px 24px;border:2px solid #e5e7eb;border-radius:25px;background:white;color:#6b7280;font-weight:600;cursor:pointer;transition:all 0.3s ease;font-size:0.9rem}
.filter-btn:hover{border-color:#2563eb;color:#2563eb;transform:translateY(-2px)}.filter-btn.active{background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:#2563eb;color:white;transform:translateY(-2px);box-shadow:0 4px 15px rgba(37,99,235,0.3)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:40px;padding:80px 20px;max-width:1400px;margin:0 auto}
.portfolio-slider-container{position:relative;max-width:1400px;margin:0 auto;padding:80px 20px;overflow:hidden}
.portfolio-slider{display:flex;transition:transform 0.5s ease;gap:40px;width:100%}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:white;border:2px solid #e5e7eb;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.slider-nav:hover{border-color:#2563eb;background:#2563eb;color:white;transform:translateY(-50%) scale(1.1);box-shadow:0 6px 20px rgba(37,99,235,0.3)}.slider-nav.prev{left:-30px}.slider-nav.next{right:-30px}
.slider-nav:disabled{opacity:0.3;cursor:not-allowed;transform:translateY(-50%)}.slider-nav:disabled:hover{border-color:#e5e7eb;background:white;color:#6b7280;transform:translateY(-50%);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.slider-indicators{display:flex;justify-content:center;gap:12px;margin-top:40px}.indicator-dot{width:12px;height:12px;border-radius:50%;background:#d1d5db;cursor:pointer;transition:all 0.3s ease}.indicator-dot.active{background:linear-gradient(135deg,#2563eb,#7c3aed);transform:scale(1.2)}.indicator-dot:hover{background:#9ca3af}
.project-card{background:white;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:all 0.5s ease;border:1px solid #e5e7eb;flex:0 0 calc(50% - 20px);min-width:380px}.project-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,0.15)}
.project-image{height:280px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.project-image.cloud{background:linear-gradient(135deg,#0ea5e9,#0284c7)}.project-image.ai{background:linear-gradient(135deg,#7c3aed,#5b21b6)}.project-image.mobile{background:linear-gradient(135deg,#10b981,#059669)}.project-image.enterprise{background:linear-gradient(135deg,#dc2626,#b91c1c)}.project-image.ecommerce{background:linear-gradient(135deg,#f59e0b,#d97706)}
.project-placeholder{color:white;font-size:1.5rem;font-weight:700;text-align:center;padding:20px;line-height:1.4}
.project-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;flex-direction:column;gap:15px}
.project-card:hover .project-overlay{opacity:1}.overlay-btn{background:white;color:#2563eb;padding:10px 20px;border-radius:25px;text-decoration:none;font-weight:600;font-size:0.9rem;transition:all 0.3s ease}.overlay-btn:hover{background:#2563eb;color:white;transform:translateY(-2px)}
.project-content{padding:35px}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.project-title{font-size:1.4rem;font-weight:700;color:#1a1a1a;margin-bottom:5px}.project-client{font-size:0.9rem;color:#2563eb;font-weight:600}.project-category{background:#e0f2fe;color:#0369a1;padding:4px 12px;border-radius:12px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.project-description{color:#6b7280;margin-bottom:20px;line-height:1.7;font-size:0.95rem}
.project-metrics{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	margin:25px 0;
	padding:20px;
	background:#f8fafc;
	border-radius:12px;
	border:1px solid #e5e7eb;
}
.project-metrics .metric{text-align:center}

/* ===== CLIENT LOGOS - SCATTER LAYOUT ===== */
.scatter-logos{
	position:relative;
	width:100%;
	min-height:220px;
}
.scatter-logos .client-logo{
	position:absolute;
	max-width:120px;
	height:auto;
	transition:transform 0.35s ease, filter 0.25s ease;
	cursor:default;
	filter:grayscale(20%);
}
/* explicit positions to create a scattered layout; tweak as needed */
.scatter-logos .client-logo:nth-child(1){ top:12px; left:6%; transform:rotate(-3deg); }
.scatter-logos .client-logo:nth-child(2){ top:78px; left:32%; transform:rotate(4deg); }
.scatter-logos .client-logo:nth-child(3){ top:28px; left:62%; transform:rotate(-5deg); }
.scatter-logos .client-logo:nth-child(4){ top:118px; left:80%; transform:rotate(2deg); }

.scatter-logos .client-logo:hover{
	transform:scale(1.05) translateY(-6px) rotate(0deg);
	filter:grayscale(0%);
}

@media (max-width:700px){
	.scatter-logos{min-height:320px}
	.scatter-logos .client-logo{position:static;display:block;margin:18px auto;}
}

/* Box wrapper for client logos used on the homepage */
.client-logos-box{
	max-width:500px;
	margin:40px auto 80px auto;
	padding:28px 30px;
	background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,250,251,0.95));
	border-radius:14px;
	box-shadow:0 10px 30px rgba(2,6,23,0.06);
	border:1px solid rgba(14,20,30,0.03);
	text-align:center;
}
.client-logos-box .section-title{margin-bottom:18px}

@media (max-width:900px){
	.client-logos-box{padding:20px;margin:30px auto}
}
.project-metrics .metric-value{font-size:1.3rem;font-weight:800;color:#2563eb;display:block;margin-bottom:4px}
.project-metrics .metric-label{font-size:0.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px}
.project-tech{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}
.project-tech .tech-tag{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #0284c7;color:#0c4a6e;padding:4px 10px;border-radius:12px;font-size:0.75rem;font-weight:500}
.project-duration{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid #e5e7eb;font-size:0.9rem;color:#6b7280}.duration-item{display:flex;align-items:center;gap:6px}
.case-study-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;align-items:center;justify-content:center;padding:20px}.case-study-modal.active{display:flex}.modal-content{background:white;border-radius:20px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal-header{background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;padding:30px;border-radius:20px 20px 0 0}.modal-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.2);border:none;color:white;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem}.modal-body{padding:40px}
.challenge-solution{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}.challenge-section,.solution-section{padding:25px;border-radius:15px}.challenge-section{background:#fef2f2;border-left:4px solid #dc2626}.solution-section{background:#f0f9ff;border-left:4px solid #2563eb}
.testimonial-section{background:#f8fafc;padding:30px;border-radius:15px;margin:30px 0;text-align:center;border:1px solid #e5e7eb}.testimonial-quote{font-size:1.2rem;font-style:italic;color:#374151;margin-bottom:20px;line-height:1.6}.testimonial-author{font-weight:600;color:#2563eb}
.load-more-section{text-align:center;padding:60px 0;background:#f8fafc}.load-more-btn{background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;padding:15px 30px;border:none;border-radius:25px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(37,99,235,0.3)}.load-more-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4)}

@media (max-width: 768px) {
	.portfolio-slider-container{padding:40px 15px}.project-card{flex:0 0 100%;min-width:300px}.slider-nav{width:50px;height:50px}.slider-nav.prev{left:-25px}.slider-nav.next{right:-25px}.project-metrics{grid-template-columns:1fr;gap:15px}.challenge-solution{grid-template-columns:1fr}.filter-tabs{gap:8px;padding:0 15px}.filter-btn{padding:10px 16px;font-size:0.85rem}
}

/* End centralized components */

/* Small utility used by contact form (replaces inline checkbox margin) */
.inline-checkbox { margin-right: 8px; }

/* Ensure the contact form is centered in the viewport and responsive */
.contact-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: linear-gradient(135deg, #ffffff 0%, var(--text-muted) 100%);
}

.contact-form {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Prevent the form from exceeding viewport height on small screens */
.contact-form .form-content {
	max-height: calc(80vh - 100px);
	overflow: auto;
}

@media (max-width: 768px) {
	.contact-page { padding: 16px; }
	.contact-form { max-width: 100%; }
	.contact-form .form-content { max-height: none; }
}

/* Improve layout for medium-width laptops (e.g. 14" screens ~ 1280x800) */
@media (min-width: 769px) and (max-width: 1366px) {
	/* prefer top-aligned layout on medium-width laptops so the form header is visible */
	.contact-page { padding: 12px; align-items: flex-start; padding-top: calc(var(--site-header-height) + 12px); }
	.contact-form { max-width: 780px; }
	.contact-form .form-header { padding: 20px; }
	.contact-form .form-header h1 { font-size: 1.5rem; }
	.contact-form .form-content { padding: 24px; max-height: calc(100vh - 160px); }
	.contact-form .form-row { gap: 12px; }
}

/* Additional smaller laptop adjustments */
@media (min-width: 1024px) and (max-width: 1280px) {
	.contact-page { align-items: flex-start; padding-top: calc(var(--site-header-height) + 8px); }
	.contact-form { max-width: 720px; }
	.contact-form .form-header h1 { font-size: 1.4rem; }
}

/* Tighter layout for medium laptops and small screens to avoid clipping */
@media (min-width: 900px) and (max-width: 1366px) {
	.form-container { max-width: 720px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
	.form-header { padding: 18px; }
	.form-header h1 { font-size: 1.35rem; }
	.form-header p { font-size: 0.95rem; }
	.form-content { padding: 18px; }
	.form-row { gap: 10px; }
	.form-group { margin-bottom: 18px; }
	.btn { padding: 10px 18px; font-size: 0.95rem; }
	.form-content .form-textarea { min-height: 100px; }
}

@media (max-width: 899px) {
	/* Mobile-first tighter spacing */
	.contact-page { padding: 12px; }
	.form-container { max-width: 100%; border-radius: 14px; }
	.form-header { padding: 14px; }
	.form-header h1 { font-size: 1.25rem; margin-bottom: 6px; }
	.form-header p { font-size: 0.95rem; }
	.form-content { padding: 12px; }
	.form-row { grid-template-columns: 1fr; gap: 10px; }
	.form-group { margin-bottom: 14px; }
	.form-input, .form-textarea, .form-select { padding: 10px 12px; font-size: 0.95rem; border-radius: 10px; }
	.form-textarea { min-height: 90px; }
	.form-navigation { margin-top: 20px; padding-top: 18px; }
	.step-subtitle { margin-bottom: 18px; }
	.progress-bar { margin-top: 14px; }
	/* Ensure scrollable area is available but reduced so header/title remains visible */
	.contact-form .form-content { max-height: calc(100vh - 120px); }
}