/*
 * HBCompu Custom Styles
 * Orange accent branding and polish
 */

/* Override Primary Color to Orange */
:root {
	--primary: #E86C24;
	--primary-100: #d0611f;
	--primary-200: #c05a1d;
	--primary-300: #b0531a;
	--primary--100: #eb7a38;
	--primary--200: #ed864a;
	--primary--300: #f0925c;
	--primary-rgba-0: rgba(232, 108, 36, 0);
	--primary-rgba-10: rgba(232, 108, 36, 0.1);
	--primary-rgba-20: rgba(232, 108, 36, 0.2);
	--primary-rgba-30: rgba(232, 108, 36, 0.3);
	--primary-rgba-40: rgba(232, 108, 36, 0.4);
	--primary-rgba-50: rgba(232, 108, 36, 0.5);
	--primary-rgba-60: rgba(232, 108, 36, 0.6);
	--primary-rgba-70: rgba(232, 108, 36, 0.7);
	--primary-rgba-80: rgba(232, 108, 36, 0.8);
	--primary-rgba-90: rgba(232, 108, 36, 0.9);
}

/* Scroll margin for sticky header */
#about,
#services,
#how,
#contact {
	scroll-margin-top: 100px;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Button Primary Override */
.btn-primary {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}

/* Text Primary Override */
.text-primary {
	color: var(--primary) !important;
}

/* Background Primary Override */
.bg-color-primary {
	background-color: var(--primary) !important;
}

/* Links */
a:hover {
	color: var(--primary);
}

/* Service Cards */
.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-color: #fff;
}

.card:hover {
	transform: translateY(-5px);
}

/* Process Step Circle - ensure visibility on small screens */
.process-step-circle,
.bg-primary.rounded-circle {
	flex-shrink: 0;
}

/* Section Spacing */
.section-height-3 {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Footer nav links spacing */
#footerNav li {
	margin: 0 10px;
}

#footerNav a:hover {
	color: var(--primary) !important;
}

/* List icons */
.list.list-icons li {
	margin-bottom: 10px;
	line-height: 1.6;
}

/* Mobile Responsive Adjustments */
@media (max-width: 991px) {
	.section-height-3 {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	h1 {
		font-size: 2rem !important;
	}
	
	h2 {
		font-size: 1.75rem !important;
	}
	
	.hero-section .container {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

@media (max-width: 767px) {
	#about,
	#services,
	#how,
	#contact {
		scroll-margin-top: 80px;
	}
	
	.btn {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
	
	.btn.me-3 {
		margin-right: 0 !important;
	}
}