/* ============================================================
   TABLE OF CONTENTS
   01. Variables
   02. Global / Base Overrides
   03. Typography
   04. Layout & Sections
   05. Navigation
   06. Hero
   07. About
   08. Work Experience
   09. Skills
   10. Projects & Gallery
   11. Filter Bar
   12. Education
   13. Contact
   14. Footer
   15. Modals
   16. Shared Components
   17. Utilities
   ============================================================ */


/* Self-hosted Monoton — eliminates Google Fonts network delay for the hero name */
@font-face {
	font-family: 'Monoton';
	src: url('../fonts/Monoton-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   01. VARIABLES
   ============================================================ */

:root {
	--blue: #79A9F5;
	--indigo: #C45F90;
	--purple: #A16AE8;
	--pink: #FC8BC0;
	--red: #F85C70;
	--orange: #FF8882;
	--yellow: #FAD02C;
	--green: #A3C14A;
	--teal: #20c997;
	--cyan: #47D8E0;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #ff7a57;
	--secondary: #6c757d;
	--success: #A3C14A;
	--info: #47D8E0;
	--warning: #FAD02C;
	--danger: #F85C70;
	--light: #f8f9fa;
	--dark: #343a40;
	--primary-bg: #000000;
	--secondary-bg: #141619;
	--third-bg: #495057ff;
	--fourth-bg: #6c757dff;
	--fifth-bg: #adb5bdff;
	--sixth-bg: #ced4daff;
	--seventh-bg: #dee2e6ff;
	--eight-bg: #e9ecefff;
	--ninth-bg: #f8f9faff;
	--card-tile: #ff7f19;
	--project-skill: #f2e9e4;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--font-family-title: 'Monoton', sans-serif;
	--font-family-heading: 'Autour One', sans-serif;
	--font-family: 'Encode Sans', sans-serif;
}


/* ============================================================
   02. GLOBAL / BASE OVERRIDES
   (Bootstrap is loaded via CDN — only custom overrides go here)
   ============================================================ */

html {
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	text-align: left;
	background-color: var(--primary-bg);
}

a {
	color: var(--card-tile);
	text-decoration: none;
	background-color: transparent;
}

	a:hover {
		color: #ffffff;
		text-decoration: underline;
	}

	a:not([href]):not([tabindex]) {
		color: inherit;
		text-decoration: none;
	}

pre,
code,
kbd,
samp {
	font-family: var(--font-family);
	font-size: 1em;
}

.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
	border-color: rgba(255, 255, 255, 0.3);
}

label {
	color: var(--gray-dark);
}

.justify {
	text-align: justify;
}


/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

p {
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1200 - 320)));
	margin-bottom: 12px;
	letter-spacing: .6px;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 5px;
}

.title {
	font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1200 - 320)));
}

@media (min-width: 992px) {
	.title {
		font-size: 28px;
	}
}

/* Hire Me button shake */
.btn-hire-shake {
	animation: hire-shake 0.5s ease-in-out 0s infinite;
	animation-delay: 3s;
	/* shake lasts 0.5s, then 3.5s gap = 4s total cycle */
	animation-duration: 4s;
}

@keyframes hire-shake {
	0%,  12%, 100% { transform: translateX(0); }
	2%             { transform: translateX(-5px) rotate(-1deg); }
	5%             { transform: translateX(5px)  rotate(1deg); }
	7%             { transform: translateX(-4px) rotate(-1deg); }
	10%            { transform: translateX(4px)  rotate(1deg); }
}

/* Job title typing animation */
.jobtitle-cursor {
	animation: jobtitle-blink 0.7s step-end infinite;
}

@keyframes jobtitle-blink {
	50% { opacity: 0; }
}

.section-title {
	font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
	font-family: var(--font-family-heading);
}

@media (min-width: 992px) {
	.section-title {
		font-size: 40px;
	}
}

.subtitle {
	font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1200 - 320)));
}

@media (min-width: 992px) {
	.subtitle {
		font-size: 15px;
	}
}

pre {
	background: #eaf0fc;
	border: 2px solid #ced4da;
	padding: 1rem;
	border-radius: 0.25rem;
}


/* ============================================================
   04. LAYOUT & SECTIONS
   ============================================================ */

.section {
	position: relative;
	padding: 5rem 0;
}

	.section:nth-child(even) {
		background: var(--primary-bg);
	}

section#about {
	background-color: var(--secondary-bg);
	margin-top: 0px !important;
}

section#skills {
	background-color: var(--secondary-bg);
}

section#education {
	background-color: var(--secondary-bg);
}

section#contact {
	padding-bottom: 0px;
}


/* ============================================================
   05. NAVIGATION
   ============================================================ */

.navbar {
	padding: 0;
	min-height: 80px;
	transition: box-shadow 0.3s ease;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

	.navbar > .container {
		min-height: 80px;
		align-items: center;
	}

	.navbar .navbar-brand img {
		width: 75px;
		-webkit-filter: drop-shadow(1px 2px 25px rgba(206, 212, 218, 0.9));
		filter: drop-shadow(1px 2px 25px rgba(206, 212, 218, 0.9));
	}

	.navbar .navbar-nav {
		height: 80px;
		align-items: center;
	}

		.navbar .navbar-nav .nav-link {
			font-size: 15px;
			font-weight: bold;
			margin: 0 10px;
			transition: color 0.3s, text-shadow 0.3s;
			color: #ffffff;
			text-shadow: none;
		}

			.navbar .navbar-nav .nav-link:hover,
			.navbar .navbar-nav .nav-link:focus {
				color: #ffffff;
				text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 16px rgba(255, 255, 255, 0.4);
				outline: 2px solid rgba(255, 255, 255, 0.5);
				outline-offset: 4px;
				border-radius: 4px;
			}

			.navbar .navbar-nav .nav-link.active {
				position: relative;
				color: #ffffff;
				text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.5);
			}

				.navbar .navbar-nav .nav-link.active::before {
					content: '';
					width: calc(100% - 1rem);
					display: block;
					height: 1px;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 0;
					background-color: rgba(255, 255, 255, 0.6);
					box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
				}

		.navbar .navbar-nav .btn {
			min-width: 120px;
		}

@media (max-width: 991.98px) {
	.navbar {
		padding: 0 20px;
	}

	.navbar-collapse {
		background: rgba(0, 0, 0, 0.85);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: 0 0 12px 12px;
		padding: 10px 20px 15px;
		margin: 0 -20px;
	}

	.navbar .navbar-nav {
		height: auto;
	}
}


/* ============================================================
   06. HERO
   ============================================================ */

#particles-js {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: transparent;
	z-index: -1;
	top: 0;
	left: 0;
}

.header {
	height: 94vh;
	min-height: 650px;
}

	.header .container {
		height: 100%;
		display: flex;
		align-items: center;
	}

		.header .container .infos {
			margin-top: 120px;
		}

			.header .container .infos .subtitle {
				margin-bottom: 0;
				font-size: 25px;
				font-weight: 500;
			}

			.header .container .infos .title {
				margin-bottom: 0px;
				font-size: 74px;
				font-family: var(--font-family-title);
			}

			.header .container .infos p {
				margin-top: -5px;
				font-size: 22px;
			}

			.header .container .infos .btn {
				display: inline-block;
				margin: 0 2px;
			}

		.header .container .img-holder {
			height: 100%;
			align-self: flex-end;
			flex-grow: 1;
			display: flex;
			align-items: flex-end;
			padding-left: 0px;
		}

			.header .container .img-holder img {
				width: 100%;
				max-width: 620px;
				filter: drop-shadow(0 -4px 20px rgba(206, 212, 218, 0.4));
				margin-left: auto;
				margin-right: -2rem;
			}

@media (max-width: 767.98px) {
	.header .container .infos .title {
		font-size: clamp(58px, 16vw, 74px);
	}

	.header .container .infos .subtitle {
		font-size: 18px;
	}

	.header .container .infos p {
		font-size: 16px;
	}
}

@media (max-width: 991.98px) {
	.header .container {
		justify-content: center;
	}

		.header .container .infos {
			margin-top: 0;
		}

		.header .container .img-holder {
			display: none;
		}
}

.header .widget {
	position: relative;
	max-width: 650px;
	width: 95%;
	margin: 0 auto;
	border-radius: 50px;
	display: flex;
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 20px 0;
	margin-top: -50px;
	z-index: 999;
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0 0 25px rgb(255 255 255 / 40%);
}

	.header .widget .widget-item {
		flex-grow: 1;
		flex-basis: 0;
		text-align: center;
		border-right: 1px solid #dee2e6;
	}

		.header .widget .widget-item:last-child {
			border-right: 0;
		}

		.header .widget .widget-item h2,
		.header .widget .widget-item p {
			margin: 0;
		}

		.header .widget .widget-item p {
			opacity: .7;
			font-size: 14px;
		}

@media (max-width: 767.98px) {
	.header .widget {
		padding: 10px;
		margin-top: -32px;
	}

		.header .widget .widget-item h2 {
			font-size: 20px;
		}

		.header .widget .widget-item p {
			font-size: 13px;
		}
}

.btn-with-popup .title-popup {
	display: none;
}

@media only screen and (min-width: 769px) {
	.btn-with-popup {
		position: relative;
	}

	.btn-with-popup .title-popup {
		position: absolute;
		top: calc(50% + 0px);
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		padding: 5px 10px;
		height: 100%;
		width: calc(100% + 100px);
		border-radius: 10px;
		transition: 0.2s;
		visibility: hidden;
		pointer-events: none;
		transform-origin: center;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-with-popup:hover .title-popup {
		visibility: visible;
		top: calc(50% - 45px);
		transform: translate(-50%, -50%) scale(1);
	}
}


/* ============================================================
   07. ABOUT
   ============================================================ */

.socials {
	display: flex;
}

	.socials .social-item {
		display: block;
		margin: 0 5px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 2px solid var(--ninth-bg);
		color: var(--ninth-bg);
		text-align: center;
		line-height: 40px;
		transition: all 0.3s;
		text-decoration: none;
	}

		.socials .social-item:hover {
			background: var(--ninth-bg);
			color: black;
			border: 2px solid black;
		}


/* ============================================================
   08. WORK EXPERIENCE
   ============================================================ */

.job-title {
	color: #ffffff;
	font-size: 25px;
	margin-bottom: 5px;
	font-weight: bold;
}

.company-name {
	color: var(--card-tile);
	font-size: 30px;
	font-weight: bold;
	text-align: left;
}

.company-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px dotted rgba(255, 127, 25, 0.5);
	transition: border-color 0.2s ease;
}

.company-link::after {
	content: ' ↗';
	font-size: 0.65em;
	opacity: 0.6;
	vertical-align: super;
}

.company-link:hover {
	color: inherit;
	border-bottom: 2px solid var(--card-tile);
	text-decoration: none;
}

.company-link:hover::after {
	opacity: 1;
}

.exp-card {
	padding: 28px 36px;
	background: rgba(5, 8, 12, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(220, 220, 235, 0.55);
	border-radius: 16px;
	box-shadow: 0 0 16px rgba(200, 200, 220, 0.35), 0 0 44px rgba(200, 200, 220, 0.12);
	height: 100%;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

@media only screen and (min-width: 769px) {
	.exp-card:hover {
		border-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 28px rgba(220, 220, 240, 0.6), 0 0 70px rgba(200, 200, 220, 0.22);
	}
}

.experience-subtitle {
	color: #777;
	font-size: 14px;
	margin-bottom: 10px;
}

.card-exp {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 30px 20px;
}

.experience-section {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
	justify-content: space-between;
}

.exp-tit {
	display: flex;
	justify-content: space-between;
}

.exp-place {
	text-align: right;
}

.responsibilities-grid {
	gap: 15px;
	padding: 10px 0;
}

@media only screen and (min-width: 769px) {
	.responsibilities-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		padding: 10px 0;
	}

	.card-item {
		background: var(--seventh-bg);
		color: var(--primary-bg);
		padding: 10px;
		border-radius: 10px;
		border: 1px solid var(--third-bg);
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
		align-content: center;
	}

		.card-item:hover {
			background: var(--primary-bg);
			color: white;
			border: 1px solid var(--ninth-bg);
			transform: scale(1.05);
		}
}

@media only screen and (max-width: 768px) {
	.responsibilities-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		padding: 10px 0;
	}

	.card-item {
		background: var(--primary-bg);
		color: var(--seventh-bg);
		padding: 10px;
		border-radius: 10px;
		border: 0.1px solid var(--ninth-bg);
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
		align-content: center;
	}
}

@media screen and (max-width: 991px) {
	.company-name {
		font-size: 25px;
	}

	.job-title {
		font-size: 20px;
	}
}

@media screen and (max-width: 767px) {
	.exp-tit {
		flex-wrap: wrap;
		justify-content: center;
	}

	.company-name,
	.job-title {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
	}

	.exp-place {
		text-align: center;
	}
}


/* ============================================================
   09. SKILLS
   ============================================================ */

.skill-card {
	padding: 28px 36px;
	background: rgba(5, 8, 12, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(220, 220, 235, 0.55);
	border-radius: 16px;
	box-shadow: 0 0 16px rgba(200, 200, 220, 0.35), 0 0 44px rgba(200, 200, 220, 0.12);
	height: 100%;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

@media only screen and (min-width: 769px) {
	.skill-card:hover {
		border-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 28px rgba(220, 220, 240, 0.6), 0 0 70px rgba(200, 200, 220, 0.22);
	}
}

.skill-tit {
	padding: 0;
	background: transparent;
	border-bottom: none;
}

.card-skill {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 30px 20px;
}

.skill-row {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 0;
}

@media only screen and (min-width: 769px) {
	.skill-row {
		flex-direction: row;
		align-items: center;
	}
}

.skill-subtitle {
	font-size: 28px;
	font-weight: bold;
	color: var(--card-tile);
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* ============================================================
   10. PROJECTS & GALLERY
   ============================================================ */

.project-grid img {
	width: 100%;
	border-radius: 10px;
}

.project {
	margin-bottom: 40px;
}

.project-skill-group {
	margin: 12px auto;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	flex-wrap: wrap;
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 10px 18px;
	max-width: 100%;
}

.project-skill {
	position: relative;
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
	display: inline-block;
	padding: 2px 4px;
	background: none;
	border: none;
	color: #94a3b8;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.project-skill::before {
	content: '#';
	color: var(--card-tile);
	font-weight: 700;
	margin-right: 1px;
}

.project-skill:hover {
	color: #ffffff;
}

.gallery {
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 6px;
	padding: 4px;
	justify-content: center;
}

@media (max-width: 575.98px) {
	.gallery {
		grid-template-columns: 1fr;
	}
}


.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
}

	.gallery-item img {
		max-width: 100%;
		max-height: 380px;
		height: auto;
		display: block;
		margin: 0 auto;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		border-radius: 10px;
	}

.portrait .gallery-item img {
	max-width: 200px;
}

@media only screen and (min-width: 769px) {
	.gallery-item:hover img {
		transform: scale(1.05);
		box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
	}
}

.project-title {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.03em;
	animation: fadeInUp 0.8s ease-out forwards;
	display: inline-block;
	padding: 3px 10px;
	color: var(--card-tile);
}

.project-p {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: justify;
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
}

.links-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.link-button {
	position: relative;
	opacity: 0;
	animation: fadeInUp 0.8s ease-out forwards;
	display: inline-block;
	padding: 4px 14px;
	background: transparent;
	color: var(--card-tile);
	border: 1.5px solid rgba(255, 127, 25, 0.5);
	border-radius: 20px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
	            transform 0.25s ease, box-shadow 0.25s ease;
}

/* Website — blue */
.link-website {
	color: #60a5fa;
	border-color: rgba(96, 165, 250, 0.5);
}

/* Play Store — Google Play green */
.link-play-store {
	color: #4ade80;
	border-color: rgba(74, 222, 128, 0.5);
}

/* Youtube — YouTube red */
.link-youtube {
	color: #ff4444;
	border-color: rgba(255, 68, 68, 0.5);
}

/* GitHub — silver/white */
.link-github {
	color: #e6edf3;
	border-color: rgba(230, 237, 243, 0.5);
}

/* Itch.io — coral red */
.link-itch-io {
	color: #fa5c5c;
	border-color: rgba(250, 92, 92, 0.5);
}

/* App Store — Apple blue */
.link-app-store {
	color: #0d96f6;
	border-color: rgba(13, 150, 246, 0.5);
}

@media only screen and (min-width: 769px) {
	.link-button:hover {
		color: white;
		text-decoration: none;
		transform: translateY(-2px);
	}
	.link-button .desc-arrow {
		display: inline-block;
		transition: transform 0.2s ease;
	}
	.link-button:hover .desc-arrow {
		transform: translateX(5px);
	}
	.link-website:hover {
		background: #60a5fa;
		border-color: #60a5fa;
		box-shadow: 0 6px 18px rgba(96, 165, 250, 0.45);
	}
	.link-play-store:hover {
		background: #4ade80;
		border-color: #4ade80;
		box-shadow: 0 6px 18px rgba(74, 222, 128, 0.45);
	}
	.link-youtube:hover {
		background: #ff0000;
		border-color: #ff0000;
		box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
	}
	.link-github:hover {
		background: #e6edf3;
		border-color: #e6edf3;
		box-shadow: 0 6px 18px rgba(230, 237, 243, 0.45);
		color: #0d1117;
	}
	.link-itch-io:hover {
		background: #fa5c5c;
		border-color: #fa5c5c;
		box-shadow: 0 6px 18px rgba(250, 92, 92, 0.45);
	}
	.link-app-store:hover {
		background: #0d96f6;
		border-color: #0d96f6;
		box-shadow: 0 6px 18px rgba(13, 150, 246, 0.45);
	}
	/* fallback for any other label */
	.link-button:not(.link-website):not(.link-play-store):not(.link-youtube):not(.link-github):not(.link-itch-io):not(.link-app-store):hover {
		background: var(--card-tile);
		border-color: var(--card-tile);
		box-shadow: 0 6px 18px rgba(255, 127, 25, 0.35);
	}
}

.view-projects-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 28px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: white;
	background: transparent;
	border: 2px solid rgba(255,255,255,0.35);
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.view-projects-btn .vp-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
}

.view-projects-btn:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.7);
	box-shadow: 0 0 18px rgba(255,255,255,0.12);
	text-decoration: none;
	color: white;
}

.view-projects-btn:hover .vp-arrow {
	transform: translateX(5px);
}

.proj-tit {
	display: inline-block;
	width: auto;
	padding: 4px 6px;
	margin-bottom: 12px;
	background: none;
	box-shadow: none;
	border-bottom: 2px solid rgba(255, 127, 25, 0.35);
	border-radius: 0;
}

.proj-title-space {
	margin-top: 30px;
}

@keyframes fadeInUp {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ── Project card grid ── */

#projects section,
section.section section {
	display: grid;
	gap: 24px;
	text-align: left;
}

/* Homepage: auto-fill baseline (overridden by fp-count-N below) */
#projects section {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Projects page: same 20-column collage layout as the homepage */
section.section section {
	grid-template-columns: repeat(20, 1fr);
	grid-auto-rows: 460px;
}

section.section section .project {
	grid-column: span 9;
}

section.section section .project.fp-wide {
	grid-column: span 11;
}

/* Landscape-only row: 50/50 instead of 45%+45% */
section.section section .project.fp-pair-landscape {
	grid-column: span 10;
}

section.section section .project.fp-orphan {
	grid-column: 1 / -1;
}

/* Loading spinner spans full row in the 20-column grid */
section.section section .data-loading {
	grid-column: 1 / -1;
}

/* ── Homepage featured: collage layout ── */

/* Uniform row height — all cards the same size */
#projects section {
	grid-auto-rows: 460px;
}

@media (max-width: 767.98px) {
	#projects section {
		grid-auto-rows: auto;
	}

	section.section section {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	section.section section .project {
		grid-column: span 1 !important;
	}
}

#projects section.fp-count-1 {
	grid-template-columns: minmax(0, 460px);
	justify-content: center;
}

#projects section.fp-count-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 3–6 cards: 5-column zigzag collage grid (60/40 split) */
#projects section.fp-count-3,
#projects section.fp-count-4,
#projects section.fp-count-5,
#projects section.fp-count-6 {
	grid-template-columns: repeat(20, 1fr);
	align-items: stretch;
}

/*
 * All cards default to span 9 (45%).
 * Portrait cards (.fp-wide) override to span 11 (55%).
 * A [portrait, landscape] pair fills exactly 20 columns.
 * If a portrait slot falls back to landscape, that row is [9+9=18]
 * with a small trailing gap — landscape layout is never forced wide.
 *
 *   Row A: [████ Portrait (11) ████][███ Landscape (9) ███]
 *   Row B: [███ Landscape (9) ███][████ Portrait (11) ████]
 */
#projects section.fp-count-3 .project,
#projects section.fp-count-4 .project,
#projects section.fp-count-5 .project,
#projects section.fp-count-6 .project {
	grid-column: span 9;
}

/* Portrait projects get the wider column — landscape projects never do */
#projects section.fp-count-3 .project.fp-wide,
#projects section.fp-count-4 .project.fp-wide,
#projects section.fp-count-5 .project.fp-wide,
#projects section.fp-count-6 .project.fp-wide {
	grid-column: span 11;
}

/* Landscape-only row: 50/50 instead of 45%+45% */
#projects section.fp-count-3 .project.fp-pair-landscape,
#projects section.fp-count-4 .project.fp-pair-landscape,
#projects section.fp-count-5 .project.fp-pair-landscape,
#projects section.fp-count-6 .project.fp-pair-landscape {
	grid-column: span 10;
}

/* Orphaned last card in odd counts → stretch full width */
#projects section.fp-count-3 .project:last-child,
#projects section.fp-count-5 .project:last-child {
	grid-column: 1 / -1;
}

/* fp-orphan class used for any odd-count scenario on both pages */
#projects .project.fp-orphan {
	grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
	#projects section[class*="fp-count-"] {
		grid-template-columns: 1fr;
		justify-content: unset;
	}
	#projects section .project {
		grid-column: span 1 !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	#projects section.fp-count-3,
	#projects section.fp-count-4,
	#projects section.fp-count-5,
	#projects section.fp-count-6 {
		grid-template-columns: repeat(2, 1fr);
	}
	#projects section .project {
		grid-column: span 1 !important;
	}

	section.section section {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
	}
	section.section section .project {
		grid-column: span 1 !important;
	}
}

.proj-card {
	background: var(--secondary-bg);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media only screen and (min-width: 769px) {
	.proj-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
	}
}

/* ── Image slider ── */

.proj-img-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #0a0a0a;
	flex-shrink: 0;
}

.proj-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.7s ease;
	cursor: pointer;
}

.proj-slide.active {
	opacity: 1;
}

.proj-dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	z-index: 2;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.5);
	padding: 4px 8px;
	border-radius: 10px;
}

.proj-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: background 0.3s ease, transform 0.3s ease;
}

.proj-dot.active {
	background: #ffffff;
	transform: scale(1.25);
}

/* ── Card body ── */

.proj-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}

.proj-body .project-title {
	font-size: 20px;
	text-align: left;
	padding: 0;
	margin: 0;
	animation: none;
}

.proj-body .project-skill-group {
	margin: 0;
	justify-content: flex-start;
	background: none;
	border: none;
	padding: 0;
	width: 100%;
}

.proj-body .project-p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	flex: 1;
	animation: none;
	opacity: 1;
}

.proj-body .links-wrap {
	margin-top: 4px;
	justify-content: flex-start;
}

.proj-body .link-button {
	font-size: 14px;
	padding: 3px 12px;
	animation: none;
	opacity: 1;
}

.proj-desc-btn {
	background: none;
	border: none;
	color: var(--card-tile);
	font-size: 13px;
	font-weight: 500;
	padding: 4px 0;
	cursor: pointer;
	transition: color 0.2s ease;
	text-align: left;
	align-self: flex-start;
	margin-top: auto;
}

.proj-desc-btn .desc-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.proj-desc-btn:hover {
	color: #ffffff;
}

.proj-desc-btn:hover .desc-arrow {
	transform: translateX(5px);
}

/* ── Portrait card: projects page — strip at top ── */

section.section .proj-card.portrait .proj-img-slider {
	aspect-ratio: unset;
	height: 195px;
	display: flex;
	flex-direction: row;
	gap: 4px;
	padding: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

section.section .proj-card.portrait .proj-img-slider::-webkit-scrollbar {
	display: none;
}

section.section .proj-card.portrait .proj-slide {
	position: relative;
	inset: unset;
	width: auto;
	height: 100%;
	opacity: 1;
	flex-shrink: 0;
	border-radius: 6px;
	object-fit: cover;
	transition: transform 0.2s ease;
}

section.section .proj-card.portrait .proj-dots {
	display: none;
}

/* ── Wide card: horizontal layout (body left, image right) ── */

#projects .fp-wide .proj-card,
section.section section .fp-wide .proj-card {
	flex-direction: row;
	position: relative;
}

#projects .fp-wide .proj-card .proj-body,
section.section section .fp-wide .proj-card .proj-body {
	flex: 1;
	min-width: 0;
	margin-right: 240px;
	justify-content: center;
}

#projects .fp-wide .proj-card .proj-img-slider,
section.section section .fp-wide .proj-card .proj-img-slider {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 240px;
	height: auto;
	aspect-ratio: unset;
	max-height: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: var(--secondary-bg);
	border-radius: 0 13px 13px 0;
}

/* Dots: counteract the portrait section.section hide rule for wide cards */
#projects .fp-wide .proj-dots {
	display: flex;
}

/* Projects page: needs higher specificity than section.section .proj-card.portrait .proj-dots */
section.section section .fp-wide .proj-card.portrait .proj-dots {
	display: flex;
}

/* Portrait wide card: override strip → crossfade panel */
#projects .fp-wide .proj-card.portrait .proj-img-slider,
section.section section .fp-wide .proj-card.portrait .proj-img-slider {
	display: block;
	height: auto;
	flex-direction: unset;
	gap: unset;
	overflow: hidden;
}

#projects .fp-wide .proj-card.portrait .proj-slide,
section.section section .fp-wide .proj-card.portrait .proj-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	transition: opacity 0.7s ease;
}

#projects .fp-wide .proj-card.portrait .proj-slide.active,
section.section section .fp-wide .proj-card.portrait .proj-slide.active {
	opacity: 1;
}

/* Mobile: revert wide card to vertical layout */
@media (max-width: 767.98px) {
	#projects .fp-wide .proj-card,
	section.section section .fp-wide .proj-card {
		flex-direction: column;
	}

	#projects .fp-wide .proj-card .proj-body,
	section.section section .fp-wide .proj-card .proj-body {
		order: 2;
		margin-right: 0;
	}

	#projects .fp-wide .proj-card .proj-img-slider,
	section.section section .fp-wide .proj-card .proj-img-slider {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		order: 1;
		width: 100%;
		height: auto;
		max-height: 190px;
		aspect-ratio: 16 / 9;
	}
}


/* ============================================================
   11. FILTER BAR
   ============================================================ */

.filter-bar {
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	overflow: visible;
	max-width: 100%;
}

#filter-cats {
	display: contents;
}

	.filter-bar input {
		display: none;
	}

	.filter-bar .custom-checkbox {
		display: none;
	}

	.filter-bar label {
		font-weight: 500;
		margin: 0;
		padding: 7px 18px;
		border-radius: 6px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		background: rgba(255, 255, 255, 0.04);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		transition: all 0.2s ease;
		user-select: none;
		white-space: nowrap;
		font-size: 15px;
		color: rgba(255, 255, 255, 0.5);
	}

	.filter-bar label:has(input:checked) {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(220, 220, 235, 0.7);
		color: #fff;
		box-shadow: 0 0 10px rgba(200, 200, 220, 0.4), 0 0 24px rgba(200, 200, 220, 0.12);
	}

	.filter-bar label:hover:not(:has(input:checked)) {
		border-color: rgba(255, 255, 255, 0.4);
		background: rgba(255, 255, 255, 0.07);
		color: rgba(255, 255, 255, 0.8);
	}

@media only screen and (max-width: 768px) {
	.filter-bar label {
		font-size: 14px;
		padding: 6px 14px;
	}
}


/* ============================================================
   12. EDUCATION
   ============================================================ */

.education-card {
	display: flex;
	align-items: center;
	padding: 26px 40px;
	background: rgba(5, 8, 12, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(220, 220, 235, 0.55);
	border-radius: 16px;
	box-shadow: 0 0 16px rgba(200, 200, 220, 0.35), 0 0 44px rgba(200, 200, 220, 0.12);
	margin-bottom: 20px;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

@media only screen and (min-width: 769px) {
	.education-card:hover {
		border-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 28px rgba(220, 220, 240, 0.6), 0 0 70px rgba(200, 200, 220, 0.22);
	}
}

.edu-left {
	flex: 1;
	text-align: left;
}

.edu-divider {
	width: 1px;
	background: rgba(255, 255, 255, 0.15);
	align-self: stretch;
	min-height: 50px;
	flex-shrink: 0;
	margin: 0 40px;
}

.edu-right {
	flex: 1;
	text-align: right;
}

@media (max-width: 767.98px) {
	.education-card {
		flex-direction: column;
		padding: 24px 24px;
		gap: 16px;
	}

	.edu-divider {
		width: 100%;
		height: 1px;
		min-height: unset;
		margin: 0;
	}

	.edu-left,
	.edu-right {
		text-align: center;
		width: 100%;
	}
}

.school-name {
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 4px;
}

.school-course {
	color: var(--card-tile);
	font-size: 19px;
	margin-bottom: 4px;
	font-weight: bold;
}

.card-edu {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 30px 20px;
}


/* ============================================================
   13. CONTACT
   ============================================================ */

.pulse-dot {
	width: 15px;
	height: 15px;
	background-color: #00ff00;
	border-radius: 50%;
	display: inline-block;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 3px;
	position: relative;
}

	.pulse-dot::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #00FF00;
		opacity: 0.6;
		top: 0;
		left: 0;
		animation: pulse 1.5s infinite;
	}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

.contact {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 700px;
	margin: 0 auto 100px;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: visible;
	z-index: 99;
	text-align: center;
}

	.contact .form {
		flex-grow: 0;
		border-right: none;
		border-bottom: none;
		padding: 0;
		margin: 0;
	}

		.contact .form h2 {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 16px 36px;
			background: rgba(0, 40, 20, 0.5);
			border: 1px solid rgba(74, 222, 128, 0.55);
			border-radius: 50px;
			box-shadow: 0 0 18px rgba(74, 222, 128, 0.35), 0 0 50px rgba(74, 222, 128, 0.12);
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
		}

	.contact-combined {
		display: flex;
		align-items: stretch;
		background: rgba(5, 8, 12, 0.55);
		border: 1px solid rgba(220, 220, 235, 0.55);
		border-radius: 14px;
		box-shadow: 0 0 14px rgba(200, 200, 220, 0.3), 0 0 36px rgba(200, 200, 220, 0.1);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		overflow: hidden;
		width: 100%;
		max-width: 700px;
	}

	.contact .contact-infos {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 28px 32px;
		flex: 0 0 auto;
		min-width: 220px;
	}

	.contact-divider {
		width: 1px;
		background: rgba(255, 255, 255, 0.12);
		flex-shrink: 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact-divider span {
		position: absolute;
		background: rgba(5, 8, 12, 0.9);
		color: rgba(255, 255, 255, 0.45);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		padding: 6px 0;
		line-height: 1;
		user-select: none;
	}

		.contact .contact-infos .item {
			display: flex;
			align-items: center;
			gap: 12px;
			flex-wrap: nowrap;
		}

		.contact .contact-infos .item i {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.25);
			color: rgba(255, 255, 255, 0.7);
			line-height: 40px;
			text-align: center;
			font-size: 16px;
			flex-shrink: 0;
			margin-right: 0;
		}

		.contact .contact-infos .item div {
			border-bottom: none;
			margin-bottom: 0;
			text-align: left;
		}

			.contact .contact-infos .item div h5 {
				margin-bottom: 4px;
				font-size: 13px;
				opacity: 0.5;
				text-transform: uppercase;
				letter-spacing: 0.08em;
			}

			.contact .contact-infos .item div a {
				font-size: 17px;
				color: #ffffff;
				text-decoration: none;
				transition: color 0.2s ease;
			}

			.contact .contact-infos .item div a:hover {
				color: var(--card-tile);
			}

		.contact .contact-infos .item {
			display: flex;
			flex-wrap: wrap;
		}

			.contact .contact-infos .item i {
				display: block;
				width: 37px;
				height: 37px;
				border-radius: 50%;
				border: 2px solid var(--ninth-bg);
				color: var(--ninth-bg);
				line-height: 34px;
				text-align: center;
				padding: 0 !important;
				margin-right: 15px;
			}

			.contact .contact-infos .item div {
				border-bottom: 1px solid #dee2e6;
				margin-bottom: 25px;
				flex-grow: 1;
			}

				.contact .contact-infos .item div h5 {
					margin-bottom: 10px;
					opacity: .9;
				}

				.contact .contact-infos .item div p {
					opacity: .7;
					font-size: 15px;
					margin-bottom: 4px;
				}

@media (max-width: 991.98px) {
	.contact {
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	.contact {
		padding: 0 16px !important;
	}

	.contact .form h2 {
		font-size: 17px !important;
		padding: 13px 22px !important;
	}

	.contact .contact-infos .item div a {
		word-break: break-all;
		font-size: 15px;
	}

	.contact-combined {
		flex-direction: column;
	}

	.contact-divider {
		width: 100%;
		height: 1px;
	}

	.contact-divider span {
		padding: 0 8px;
	}

	.contact .contact-infos {
		padding: 22px 24px;
		min-width: unset;
	}

	.contact-form-wrap {
		padding: 20px 24px;
	}
}

.cf-honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.contact-form-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: none;
	border: none;
	border-radius: 0;
	padding: 24px 28px;
	box-shadow: none;
}

.contact-form-wrap input,
.contact-form-wrap textarea {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #ffffff;
	font-size: 14px;
	padding: 10px 14px;
	outline: none;
	resize: none;
	font-family: var(--font-family);
	transition: border-color 0.2s ease;
	width: 100%;
}

.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
	border-color: rgba(220, 220, 235, 0.6);
}

.contact-form-wrap button[type="submit"] {
	background: var(--card-tile);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.2s ease;
	align-self: flex-end;
}

.contact-form-wrap button[type="submit"]:hover {
	background: #e86040;
}

.contact-form-wrap button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#cf-status {
	font-size: 13px;
	text-align: center;
	margin: 0;
	display: none;
}

#map {
	width: 100%;
	height: 450px;
}

	#map iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}

@media (max-width: 767.98px) {
	#map {
		height: 250px;
	}
}


.under-construction {
	position: relative;
	text-align: center;
	padding: 60px 30px;
	margin-top: 50px;
	background: var(--secondary-bg);
	border-radius: 10px;
	overflow: hidden;
}

/* Triple orbit spinner */
.uc-orbit {
	position: relative;
	width: 130px;
	height: 130px;
	margin: 0 auto 44px;
}

.uc-ring {
	position: absolute;
	border-radius: 50%;
	border: 3px solid transparent;
}

.uc-ring-1 {
	inset: 0;
	border-top-color: #2d3436;
	border-right-color: #2d3436;
	animation: uc-cw 1.4s linear infinite;
}

.uc-ring-2 {
	inset: 20px;
	border-bottom-color: #ff7f19;
	border-left-color: #ff7f19;
	animation: uc-ccw 1s linear infinite;
}

.uc-ring-3 {
	inset: 39px;
	border-top-color: #6c757d;
	border-right-color: #6c757d;
	animation: uc-cw 2.2s linear infinite;
}

.uc-core {
	position: absolute;
	inset: 56px;
	background: #ff7f19;
	border-radius: 50%;
	box-shadow: 0 0 12px #ff7f19, 0 0 28px rgba(255,127,25,0.5);
	animation: uc-pulse 1.4s ease-in-out infinite;
}

@keyframes uc-cw  { to { transform: rotate(360deg); } }
@keyframes uc-ccw { to { transform: rotate(-360deg); } }

@keyframes uc-pulse {
	0%, 100% { transform: scale(1);   box-shadow: 0 0 12px #ff7f19, 0 0 28px rgba(255,127,25,0.5); }
	50%       { transform: scale(1.6); box-shadow: 0 0 22px #ff7f19, 0 0 44px rgba(255,127,25,0.3); }
}

.construction-text {
	font-family: var(--font-family);
	font-size: 40px;
	font-weight: 600;
	color: var(--eight-bg);
	text-align: center;
	padding: 10px;
	text-shadow: 0 6px 18px rgba(255, 255, 255, 0.25);
}

.construction-text span {
	display: inline-block;
	animation: letterWave 1.8s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.07s);
}

@keyframes letterWave {
	0%, 100% { transform: translateY(0); }
	40%      { transform: translateY(-12px); }
}


/* ============================================================
   15. MODALS
   ============================================================ */

#fullscreenModal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	justify-content: center;
	align-items: center;
	z-index: 9999;
	flex-direction: column;
}

	#fullscreenModal img {
		max-width: 90%;
		max-height: 80%;
		object-fit: contain;
	}

#closeBtn {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 40px;
	color: white;
	cursor: pointer;
	user-select: none;
}

/* ── Project detail modal ── */

.proj-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.proj-modal-overlay.open {
	display: flex;
}

.proj-modal {
	background: var(--secondary-bg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	max-width: 900px;
	width: 100%;
	height: 75vh;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

/* Landscape project modal: stacked layout, same width as portrait, shorter */
.proj-modal--landscape {
	height: auto;
	max-height: 82vh;
	flex-direction: column;
}

.proj-modal--landscape .proj-modal-images {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: unset;
}

.proj-modal--landscape .proj-modal-slide {
	object-fit: cover;
}

.proj-modal--landscape .proj-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.proj-modal-close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	padding: 0;
	transition: color 0.2s ease;
}

.proj-modal-close:hover {
	color: #ffffff;
}

.proj-modal-images {
	flex: 0 0 48%;
	position: relative;
	background: #0a0a0a;
	overflow: hidden;
	min-height: 320px;
}

.proj-modal-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
	cursor: zoom-in;
}

.proj-modal-slide.active {
	opacity: 1;
	pointer-events: auto;
}

/* ── Image lightbox (full-view from modal) ── */
.img-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	cursor: zoom-out;
}

.img-lightbox-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.img-lightbox-img {
	max-width: 95vw;
	max-height: 95vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 8px 60px rgba(0, 0, 0, 0.8);
	pointer-events: none;
}

/* ── YouTube embed modal ── */
.yt-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.yt-modal-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.yt-modal-inner {
	position: relative;
	width: 90vw;
	max-width: 960px;
	aspect-ratio: 16 / 9;
}

.yt-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
	padding: 0;
}

.yt-modal-close:hover {
	color: #ffffff;
}

.yt-modal-iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 10px;
}

@media (max-width: 767.98px) {
	.yt-modal-inner {
		width: 96vw;
	}
}

.proj-modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: white;
	font-size: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: background 0.2s ease;
	border-radius: 50%;
	padding: 0;
}

.proj-modal-prev::before,
.proj-modal-next::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-top: 2px solid white;
	border-right: 2px solid white;
}

.proj-modal-prev::before {
	transform: rotate(-135deg) translate(-2px, 2px);
}

.proj-modal-next::before {
	transform: rotate(45deg) translate(-2px, 2px);
}

.proj-modal-nav:hover {
	background: rgba(0, 0, 0, 0.8);
}

.proj-modal-prev { left: 10px; }
.proj-modal-next { right: 10px; }

.proj-modal-dots {
	display: none;
}

.proj-modal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transition: background 0.3s ease, transform 0.3s ease;
	cursor: pointer;
}

.proj-modal-dot.active {
	background: #ffffff;
	transform: scale(1.3);
}

.proj-modal-body {
	flex: 1;
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow-y: auto;
	min-width: 0;
}

.proj-modal-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--card-tile);
	margin: 0;
	padding-right: 30px;
}

.proj-modal-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.proj-modal-desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.65;
	margin: 0;
	text-align: justify;
	flex: 1;
}

.proj-modal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width: 767.98px) {
	.proj-modal {
		flex-direction: column;
		max-height: 90vh;
		overflow-y: auto;
	}

	.proj-modal-images {
		flex: 0 0 auto;
		height: 220px;
		min-height: unset;
	}

	.proj-modal--landscape .proj-modal-images {
		aspect-ratio: 16 / 9;
		height: auto;
	}

	.proj-modal-body {
		padding: 20px;
	}
}


/* ============================================================
   16. SHARED COMPONENTS
   ============================================================ */

.btn {
	font-size: 14px;
	font-weight: bold;
}

	.btn.btn-primary {
		color: #ffffff;
	}

	.btn.rounded {
		border-radius: 50px !important;
	}

	.btn.w-sm {
		min-width: 100px;
	}

	.btn.w-md {
		min-width: 130px;
	}

	.btn.w-lg {
		min-width: 160px;
	}


/* ============================================================
   DATA LOADING SPINNER (used while Supabase fetches data)
   ============================================================ */

.data-loading {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 3rem 0;
}

.data-loading span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary);
	opacity: 0.4;
	animation: dl-bounce 1s ease-in-out infinite;
}

.data-loading span:nth-child(2) { animation-delay: .15s; }
.data-loading span:nth-child(3) { animation-delay: .3s; }

@keyframes dl-bounce {
	0%, 100% { transform: translateY(0); opacity: .4; }
	50%       { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   SCROLL TO TOP BUTTON
   ============================================================ */

#scrollTopBtn {
	display: none;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 9999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--primary);
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(255, 122, 87, 0.5);
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

#scrollTopBtn.visible {
	display: flex;
}

#scrollTopBtn:hover {
	background: #e86040;
	box-shadow: 0 6px 20px rgba(255, 122, 87, 0.65);
}