@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");

.almarai-light {
	font-family: "Almarai", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.almarai-regular {
	font-family: "Almarai", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.almarai-bold {
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.almarai-extrabold {
	font-family: "Almarai", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.cairo-regular {
	font-family: "Cairo", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "slnt" 0;
}

.IBM-plex-regular {
	font-family: "IBM Plex Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

/* Custom scrollbar for a cleaner look (optional) */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #0a192f;
}
::-webkit-scrollbar-thumb {
	background: #1f2e4d; /* A slightly lighter shade than the main bg */
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #2b416b;
}

/* For the floating icons in hero */
.tech-icon {
	transition: transform 0.3s ease-out;
}
.tech-icon:hover {
	transform: scale(1.2) translateY(-5px);
}

/* Custom styles for the "numbered" headings like in Brittany Chiang's portfolio */
.numbered-heading {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem; /* mb-6 */
	font-size: 1.75rem; /* text-2xl or similar */
	font-weight: 700; /* font-bold */
	color: #ccd6f6; /* text-slate-200 or your light text color */
	white-space: nowrap;
}

.numbered-heading::before {
	content: "0" counter(section) ".";
	counter-increment: section;
	margin-right: 0.75rem; /* mr-3 */
	color: #64ffda; /* accent color */
	font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace; /* Monospace font */
	font-size: 1.25rem; /* text-xl */
	font-weight: 400; /* normal weight */
}

.numbered-heading::after {
	content: "";
	display: block;
	position: relative;
	top: 0px; /* Adjust as needed */
	width: 200px; /* Adjust length */
	height: 1px;
	margin-left: 1.25rem; /* ml-5 */
	background-color: #233554; /* A subtle line color */
}

/* Reset counter for each main content area if needed, or body if global */
body {
	counter-reset: section;
}

/* Project Card Enhancements */
.project-card {
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.project-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px #64ffda30; /* Subtle accent glow */
}
/* Add to styles.css */
#cursor-follower {
	mix-blend-mode: difference;
	background-color: rgba(100, 255, 218, 0.3);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transform: translate(-50%, -50%);
}